,WS>chool 
BU m UE CI 


wizardforcel 





W3School 前 端 教程 合集 


H k 

fría 0 
HTML 教程 1 
HTML 基础 1.1 
HTML 简介 1.1.1 
基本 的 HTML 标签 - 四 个 实例 1.1.2 
HTML 元 素 1.1.3 
HTML 属性 1.1.4 
HTML 标题 1.1.5 
HTML 段落 1.1.6 
HTML 文本 格式 化 1.1.7 
HTML 编辑 器 1.1.8 
HTML CSS 1.1.9 
HTML 链接 1.1.10 
HTML 图 像 1.1.11 
HTML 表格 1.1.12 
HTML 列表 1.1.13 
HTML &lt;div&gt; 和 &lt;span&gt; 1.1.14 
HTML 布局 1.1.15 
HTML 表单 和 输入 1.1.16 
HTML 框架 1.1.17 
HTML lframe 1.1.18 
HTML 背景 1.1.19 
HTML 颜色 1.1.20 
HTML 颜色 名 1.1.21 
HTML 4.01 快速 参考 1.1.22 
HTML 高 级 1.2 
HTML &lt;!DOCTYPE&gt; 1.2.1 
HTML 头 部 元 素 1.2.2 
HTML 脚本 1.2.3 
HTML 字符 实体 1.2.4 
HTML 统一 资源 定位 器 1.2.5 
HTML URL 字符 编码 1.2.6 
HTML Web Server 1.2.7 
HTML 媒体 1.3 
HTML 多 媒体 1.3.1 


W3School 前 端 教程 合集 


HTML Object 元 素 
HTML 音频 
HTML 视频 


HTML XHTML 


XHTML 简介 
XHTML - 元 素 
XHTML - 属性 


HTML 5 教程 


HTML 5 简介 

HTML 5 视频 

HTML 5 Video + DOM 
HTML 5 音频 

HTML 5 拖 放 

HTML 5 Canvas 

HTML5 内 联 SVG 
HTML 5 Canvas vs. SVG 
HTML5 地 理 定 位 

HTML 5 Web 存储 
HTML 5 应 用 程序 缓存 
HTML 5 Web Workers 
HTML 5 服务 器 发 送 事件 
HTML5 Input 类 型 
HTML5 表单 元 素 
HTML5 表单 属性 


HTML 参考 手册 
HTML 标签 列表 


HTML &lt;!--...--&gt; 标签 
HTML &lt;;DOCTYPE&gt; 标签 
HTML &lt;a&gt; 标签 

HTML &lt;abbr&gt; 标签 
HTML &lt;acronym&gt; 标签 
HTML &lt;address&gt; 标签 
HTML &lt;applet&gt; 标签 
HTML &lt;area&gt; 标签 
HTML &lt;article&gt; 标签 
HTML &lt;aside&gt; 标签 
HTML &lt;audio&gt; 标签 
HTML &lt;b&gt; 标签 

HTML &lt;base&gt; 标签 


W3School 前 端 教程 合集 


HTML &lt;basefont&gt; 标签 2.1.14 
HTML &lt;bdi&gt; 标签 2.1.15 
HTML &lt;bdo&gt; 标签 2.1.16 
HTML &lt;big&gt; 标签 2.1.17 
HTML &lt;blockquote&gt; 标签 2.1.18 
HTML &lt;body&gt; 标签 2.1.19 
HTML &lt;br&gt; 标签 2.1.20 
HTML &lt;button&gt; 标签 2.1.21 
HTML &lt;canvas&gt; 标签 2.1.22 
HTML &lt;caption&gt; 标签 2.1.23 
HTML &lt;center&gt; 标签 2.1.24 
HTML &lt;cite&gt; 标签 2.1.25 
HTML &lt;em&gt; &lt;strong&gt; &lt;dfn&gt; &lt;icode&gt; &ltisamp&gt; 
&lt;kbd&gt;&lt;»var&gt; &lt;cite&gt; 标签 2.1.26 
HTML &lt;col&gt; 标签 2.1.27 
HTML &lt;colgroup&gt; 标签 2.1.28 
HTML &lt;command&gt; 标签 2.1.29 
HTML &lt;datalist&gt; 标签 2.1.30 
HTML &lt;dd&gt; 标签 2.1.31 
HTML &lt;del&gt; 标签 2.1.32 
HTML &lt;details&gt; 标签 2.1.33 
HTML &lt;dialog&gt; 标签 2.1.34 
HTML &lt;dir&gt; 标签 2.1.35 
HTML &lt;div&gt; 标签 2.1.36 
HTML &lt;dl&gt; 标签 2.1.37 
HTML &lt;dt&gt; 标签 2.1.38 
HTML &lt;embed&gt; 标签 2.1.39 
HTML &lt;fieldset&gt; 标签 2.1.40 
HTML &lt;figcaption&gt; 标签 2.1.41 
HTML &lt;figure&gt; 标签 2.1.42 
HTML &lt;font&gt; 标签 2.1.43 
HTML &lt;footer&gt; 标签 2.1.44 
HTML &lt;iform&gt; 标签 2.1.45 
HTML &lt;iframe&gt; 标签 2.1.46 
HTML &lt;frameset&gt; 标签 2.1.47 
HTML &lt;h1&gt; 到 &ltih6&gt; 标签 2.1.48 
HTML &lt;head&gt; 标签 2.1.49 
HTML &lt;header&gt; 标签 2.1.50 
HTML &lt;hr&gt; 标签 2.1.51 


W3School 前 端 教程 合集 


HTML &lt;html&gt; 标签 
HTML &lt;ii&gt; 标签 

HTML &lt;iframe&gt; 标签 
HTML &lt;iimg&gt; 标签 
HTML &lt;input&gt; 标签 
HTML DOM Button 对 象 
HTML DOM Checkbox 对 象 
HTML DOM Color 对 象 
HTML DOM Input Date 对 象 
HTML DOM Datetime 对 象 


HTML DOM Datetime Local 对 象 


HTML DOM Email 对 象 
HTML DOM FileUpload 对 象 
HTML DOM Hidden 对 象 
HTML DOM Input Image 对 象 
HTML DOM Month 对 象 
HTML DOM Number 对 象 
HTML DOM Password xt & 
HTML DOM Input Range 对 象 
HTML DOM Radio 对 象 
HTML DOM Reset x1 & 
HTML DOM Input Search 对 象 
HTML DOM Submit 对 象 
HTML DOM Text xt & 

HTML DOM Input Time xt & 
HTML DOM Input URL 对 象 
HTML DOM Input Week xt & 
HTML &lt;iins&gt; 标签 

HTML &lt;keygen&gt; 标签 
HTML &lt;label&gt; 标签 
HTML &lt;legend&gt; 标签 
HTML &lt;li&gt; 标签 

HTML &lt;link&gt; 标签 

HTML &lt;main&gt; 标签 
HTML &lt;map&gt; 标签 
HTML &lt;mark&gt; 标签 
HTML &lt;menu&gt; 标签 
HTML &lt;menuitem&gt; 标签 
HTML &lt;meta&gt; 标签 


W3School 前 端 教程 合集 


HTML &lt;meter&gt; 标签 
HTML &lt;nav&gt; 标签 
HTML &lt;noframes&gt; 标签 
HTML &lt;noscript&gt; 标签 
HTML &lt;object&gt; 标签 
HTML &lt;ol&gt; 标签 

HTML &lt;optgroup&gt; 标签 
HTML &lt;option&gt; 标签 
HTML &lt;output&gt; 标签 
HTML &lt;p&gt; 标签 

HTML &lt;param&gt; 标签 
HTML &lt;pre&gt; 标签 
HTML &lt;progress&gt; 标签 
HTML &lt;q&gt; 标签 

HTML &lt;rp&gt; 标签 

HTML &lt;rt&gt; 标签 

HTML &lt;ruby&gt; 标签 
HTML &lt;s&gt; 标签 

HTML &lt;script&gt; 标签 
HTML &lt;section&gt; 标签 
HTML &lt;select&gt; 标签 
HTML &lt;small&gt; 标签 
HTML &lt;source&gt; 标签 
HTML &lt;span&gt; 标签 
HTML &lt;strike&gt; 标签 
HTML &lt;style&gt; 标签 
HTML &lt;sub&gt; 标签 
HTML &lt;summary&gt; 标签 
HTML &lt;sup&gt; 标签 
HTML &lt;table&gt; 标签 
HTML &lt;tbody&gt; 标签 
HTML &lt;td&gt; 标签 

HTML &lt;textarea&gt; 标签 
HTML &lt;tfoot&gt; 标签 
HTML &lt;th&gt; 标签 

HTML &lt;thead&gt; 标签 
HTML &lt;time&gt; 标签 
HTML &lt;title&gt; 标签 
HTML &lt;itr&gt; 标签 


W3School 前 端 教程 合集 


HTML &lt;track&gt; 标签 2.1.130 
HTML &lt;tt&gt; 标签 2.1.131 
HTML &lt;u&gt; 标签 2.1.132 
HTML &lt;ul&gt; 标签 2.1.133 
HTML &lt;video&gt; 标签 2.1.134 
HTML &lt;wbr&gt; 标签 2.1.135 
HTML 全 局 属性 2.2 
HTML accesskey 属性 2.2.1 
HTML class 属性 2.2.2 
HTML contenteditable 属性 2.2.3 
HTML contextmenu 属性 2.2.4 
HTML data-* 属性 2.2.5 
HTML dir 属性 2.2.6 
HTML draggable 属性 2.2.7 
HTML dropzone 属性 2.2.8 
HTML hidden 属性 2.2.9 
HTML id 属性 2.2.10 
HTML lang 属性 2.2.11 
HTML spellcheck 属性 2.2.12 
HTML style 属性 2.2.13 
HTML tabindex 属性 2.2.14 
HTML title 属性 2.2.15 
HTML translate 属性 2.2.16 
HTML 事件 属性 2.3 
HTML 5 视频 /音频 参考 手册 2.4 
HTML 5 Canvas 参考 手册 2.5 
HTML 元 素 和 有 效 的 DTD 2.6 
HTML 颜色 名 2.7 
HTML 字符 集 2.8 
HTML ASCII 参考 手册 2.9 
HTML ISO-8859-1 参考 手册 2.10 
HTML 4.01 符号 实体 2.11 
HTML URL 编码 2.12 
HTML 语言 代码 参考 手册 2.13 
HTTP 状态 消息 2.14 
HTTP 方法 : GET 对 比 POST 2.15 
CSS 教程 3 
CSS 样式 3.1 
CSS 背景 3.1.1 


W3School 前 端 教程 合集 


CSS 文本 
CSS 字体 
CSS 链接 
CSS 列表 
CSS 表格 
CSS 轮廓 


CSS 框 模型 


CSS 框 模型 概述 
CSS 内 边 距 
CSS 边框 

CSS 外 边 距 
CSS 外 边 距 合并 


CSS 定位 


CSS 定位 (Positioning) 
CSS 相对 定位 

CSS 绝对 定位 

CSS 浮动 


CSS 选择 如 


CSS 元 素 选 择 器 

CSS 分 组 

CSS 类 选择 器 详解 

CSS ID 选择 器 详解 

CSS 属性 选择 器 详解 

CSS 后 代 选 择 器 

CSS 属性 选择 器 详解 

CSS 后 代 选 择 器 

CSS 子 元 素 选择 器 

CSS 相 邻 兄弟 选择 器 

CSS 伪 类 (Pseudo-classes) 
CSS 伪 元 素 (Pseudo-elements) 


CSS 高 级 


CSS 水 平 对 齐 

CSS 尺寸 (Dimension) 
CSS 分 类 (Classification) 
CSS 导航 条 

CSS 图 片 库 

CSS 图 像 透明 度 

CSS2 媒介 类 型 

CSS 注意 事项 


W3School 前 端 教程 合集 


CSS3 教程 


CSS3 简介 
CSS3 边框 
CSS3 背景 
CSS3 文本 效果 
CSS3 字体 
CSS3 2D 转换 
CSS3 3D 转换 
CSS3 过 渡 
CSS3 #1 
CSS3 多 列 
CSS3 用 户 界 面 


CSS 参考 手册 
CSS3 动画 属性 (Animation) 


CSS3 @keyframes 规则 

CSS3 animation 属性 

CSS3 animation-name 属性 

CSS3 animation-duration 属性 
CSS3 animation-timing-function 属性 
CSS3 animation-delay 属性 

CSS3 animation-iteration-count 属性 
CSS3 animation-direction 属性 
CSS3 animation-play-state 属性 
CSS3 animation-fill-mode 属性 

背景 属性 (Background) 

CSS background 属性 

CSS background-attachment 属性 
CSS background-color 属性 

CSS background-image 属性 

CSS background-position 属性 

CSS background-repeat 属性 

CSS3 background-clip 属性 

CSS3 background-origin 属性 

CSS3 background-size 属性 


CSS 边框 属性 (Border 和 Outline) 


CSS border 属性 

CSS border-bottom 属性 

CSS border-bottom-color 属性 
CSS border-bottom-style 属性 


W3School 前 端 教程 合集 


CSS border-bottom-width 属性 4.3.5 
CSS border-color 属性 4.3.6 
CSS border-left 属性 4.3.7 
CSS border-left-color 属性 4.3.8 
CSS border-left-style 属性 4.3.9 
CSS border-left-width 属性 4.3.10 
CSS border-right 属性 4.3.11 
CSS border-right-color 属性 4.3.12 
CSS border-right-style 属性 4.3.13 
CSS border-right-width 属性 4.3.14 
CSS border-style 属性 4.3.15 
CSS border-top 属性 4.3.16 
CSS border-top-color 属性 4.3.17 
CSS border-top-style 属性 4.3.18 
CSS border-top-width 属性 4.3.19 
CSS border-width 属性 4.3.20 
CSS outline 属性 4.3.21 
CSS outline-color 属性 4.3.22 
CSS outline-style 属性 4.3.23 
CSS outline-width 属性 4.3.24 
CSS3 border-bottom-left-radius 属性 4.3.25 
CSS3 border-bottom-right-radius 属性 4.3.26 
CSS3 border-image 属性 4.3.27 
CSS3 border-image-outset 属性 4.3.28 
CSS3 border-image-repeat 属性 4.3.29 
CSS3 border-image-slice 属性 4.3.30 
CSS3 border-image-source 属性 4.3.31 
CSS3 border-image-width 属性 4.3.32 
CSS3 border-radius 属性 4.3.33 
CSS3 border-top-left-radius 属性 4.3.34 
CSS3 border-top-right-radius 属性 4.3.35 
CSS3 box-shadow 属性 4.3.36 
Box 属性 4.4 
CSS3 overflow-x 属性 4.4.1 
CSS3 overflow-y 属性 4.4.2 
CSS3 overflow-style 属性 4.4.3 
CSS3 rotation 属性 4.4.4 
CSS3 rotation-point 属性 4.4.5 
Color 属性 4.5 


10 


W3School 前 端 教程 合集 


CSS3 opacity 属性 4.5.1 
Content for Paged Media 属性 4.6 
CSS 尺寸 属性 (Dimension) 4.7 

CSS height 属性 4.7.1 

CSS max-height 属性 4.7.2 

CSS max-width 属性 4.7.3 

CSS min-height 属性 4.7.4 

CSS min-width 属性 4.7.5 

CSS width 属性 4.7.6 
可 伸缩 框 属性 (Flexible Box) 4.8 

CSS3 box-align 属性 4.8.1 

CSS3 box-direction 属性 4.8.2 

CSS3 box-flex 属性 4.8.3 

CSS3 box-flex-group 属性 4.8.4 

CSS3 box-lines 属性 4.8.5 

CSS3 box-ordinal-group 属性 4.8.6 

CSS3 box-orient 属性 4.8.7 

CSS3 box-pack 属性 4.8.8 
CSS 字体 属性 (Font) 4.9 

CSS font 属性 4.9.1 

CSS font-family 属性 4.9.2 

CSS font-size 属性 4.9.3 

CSS font-size-adjust 属性 4.9.4 

CSS font-stretch 属性 4.9.5 

CSS font-style 属性 4.9.6 

CSS font-variant 属性 4.9.7 

CSS font-weight 属性 4.9.8 
内 容 生 成 (Generated Content) 4.10 

CSS content 属性 4.10.1 

CSS counter-increment 属性 4.10.2 

CSS counter-reset 属性 4.10.3 

CSS quotes 属性 4.10.4 
Grid 属性 4.11 

CSS3 grid-columns 属性 4.11.1 

CSS3 grid-rows 属性 4.11.2 
Hyperlink 属性 4.12 

CSS3 target 属性 4.12.1 

CSS3 target-name 属性 4.12.2 


CSS3 target-new 属性 4.12.3 


11 


W3School 前 端 教程 合集 


CSS3 target-position 属性 4.12.4 
CSS 列表 属性 (List) 4.13 
CSS list-style 属性 4.13.1 
CSS list-style-image 属性 4.13.2 
CSS list-style-position 属性 4.13.3 
CSS list-style-type 属性 4.13.4 
CSS 外 边 距 属性 (Margin) 4.14 
CSS margin 属性 4.14.1 
CSS margin-bottom 属性 4.14.2 
CSS margin-left 属性 4.14.3 
CSS margin-right 属性 4.14.4 
CSS margin-top 属性 4.14.5 
Marquee 属性 4.15 
多 列 属性 (Multi-column) 4.16 
CSS3 column-count 属性 4.16.1 
CSS3 column-fill 属性 4.16.2 
CSS3 column-gap 属性 4.16.3 
CSS3 column-rule 属性 4.16.4 
CSS3 column-rule-color 属性 4.16.5 
CSS3 column-rule-style 属性 4.16.6 
CSS3 column-rule-width 属性 4.16.7 
CSS3 column-span 属性 4.16.8 
CSS3 column-width 属性 4.16.9 
CSS3 columns 属性 4.16.10 
CSS 内 边 距 属性 (Padding) 4.17 
CSS padding 属性 4.17.1 
CSS padding-bottom 属性 4.17.2 
CSS padding-left 属性 4.17.3 
CSS padding-right 属性 4.17.4 
CSS padding-top 属性 4.17.5 
Paged Media 属性 4.18 
CSS 定位 属性 (Positioning) 4.19 
CSS bottom 属性 4.19.1 
CSS clear 属性 4.19.2 
CSS clip 属性 4.19.3 
CSS cursor 属性 4.19.4 
CSS display 属性 4.19.5 
CSS float 属性 4.19.6 
CSS left 属性 4.19.7 


12 


W3School 前 端 教程 合集 


CSS overflow 属性 4.19.8 
CSS position 属性 4.19.9 
CSS right 属性 4.19.10 
CSS top 属性 4.19.11 
CSS vertical-align 属性 4.19.12 
CSS visibility 属性 4.19.13 
CSS z-index 属性 4.19.14 
CSS 打印 属性 (Print) 4.20 
CSS page-break-after 属性 4.20.1 
CSS page-break-before 属性 4.20.2 
CSS page-break-inside 属性 4.20.3 
CSS 表格 属性 (Table) 4.21 
CSS border-collapse 属性 4.21.1 
CSS border-spacing 属性 4.21.2 
CSS caption-side 属性 4.21.3 
CSS empty-cells 属性 4.21.4 
CSS table-layout 属性 4.21.5 
CSS 文本 属性 (Text) 4.22 
CSS color 属性 4.22.1 
CSS direction 属性 4.22.2 
CSS letter-spacing 属性 4.22.3 
CSS line-height 属性 4.22.4 
CSS text-align 属性 4.22.5 
CSS text-decoration 属性 4.22.6 
CSS text-indent 属性 4.22.7 
CSS text-transform 属性 4.22.8 
CSS unicode-bidi 属性 4.22.9 
CSS white-space 属性 4.22.10 
CSS word-spacing 属性 4.22.11 
CSS3 hanging-punctuation 属性 4.22.12 
CSS3 punctuation-trim 属性 4.22.13 
CSS3 text-emphasis 属性 4.22.14 
CSS3 text-justify 属性 4.22.15 
CSS3 text-outline 属性 4.22.16 
CSS3 text-overflow 属性 4.22.17 
CSS3 text-shadow 属性 4.22.18 
CSS3 text-wrap 属性 4.22.19 
CSS3 word-break 属性 4.22.20 
CSS3 word-wrap 属性 4.22.21 


13 


W3School 前 端 教程 合集 
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Bootstrap 简介 
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Bootstrap 网 格 系统 
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Bootstrap 列表 组 
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Bootstrap Wells 
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Bootstrap UI 编辑 器 6.4.1 
Bootstrap HTML 编 码 规范 6.4.2 
Bootstrap CSS 编 码 规 范 6.4.3 
Foundation 教程 7 
Foundation Aj] 7.1 
Foundation 5 简介 7.1.1 
Foundation 起 步 7.1.2 
Foundation 文本 7.1.3 
Foundation 表格 7.1.4 
Foundation 按钮 7.1.5 
Foundation 按钮 组 7.1.6 
Foundation 图 标 7.1.7 
Foundation 标签 7.1.8 
Foundation 提醒 框 7.1.9 
Foundation 进度 条 7.1.10 
Foundation 面板 7.1.11 
Foundation 图 片 7.1.12 
Foundation 下 拉 菜 单 TAM 
Foundation tfr & 7% 7.1.14 
Foundation 列表 7.1.15 
Foundation 选项 卡 7.1.16 
Foundation 分 页 7.1.17 
Foundation 价格 表 7.1.18 
Foundation 顶部 导航 栏 7.1.19 
Foundation 侧 边 栏 7.1.20 
Foundation 滑动 导航 (Off-Canvas) 7.1.21 
Foundation 麦哲伦 (Magellan) 导航 7.1.22 
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Foundation 表单 

Foundation 输入 框 尺 十 
Foundation 开关 

Foundation 滑 块 

Foundation 提示 框 
Foundation 模 态 框 
Foundation Joyride 
Foundation 均衡 器 (Equalizer) 


Foundation 网 格 


Foundation 网 格 系统 
Foundation 网 格 - 水 平 堆 过 
Foundation 网 格 - 小 型 设备 
Foundation 网 格 - 中 型 设备 
Foundation 网 格 - 大 型 设备 
Foundation 块 状 网 格 
Foundation 网 格 实例 


Foundation 参考 手册 


Foundation 图 标 参 考 手 册 
Foundation CSS 参考 手册 
Foundation CSS 可 见 性 


JavaScript 教程 
JavaScript 基础 


JavaScript 简介 

JavaScript 使 用 

JavaScript 输出 

JavaScript 语句 

JavaScript 注释 

JavaScript 变量 

JavaScript 数据 类 型 

JavaScript 对 象 

JavaScript 函数 

JavaScript 运算 符 

JavaScript 比较 和 逻辑 运算 符 
JavaScript If...Else 语句 
JavaScript Switch 语句 

JavaScript For 循环 

JavaScript While 循环 

JavaScript Break 和 Continue 语句 
JavaScript 错误 - Throw, Try 和 Catch 
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JavaScript 表单 验证 8.1.18 
JavaScript 保留 关键 字 8.1.19 
JavaScript JSON 8.1.20 
javascript:void(0) 含义 8.1.21 
JavaScript 高 级 8.2 
JavaScript 对 象 8.2.1 
JavaScript Number 对 象 8.2.2 
JavaScript 字符 串 (String) 对 象 8.2.3 
JavaScript Date (日 期 ) 对 象 8.2.4 
JavaScript Array (数组 ) 对 象 8.2.5 
JavaScript Boolean (324%) 对 象 8.2.6 
JavaScript Math (算数 ) 对 象 8.2.7 
JavaScript RegExp 对 象 8.2.8 
JavaScript BOM 8.3 
JavaScript Window - 浏览 器 对 象 模型 8.3.1 
JavaScript Window Screen 8.3.2 
JavaScript Window Location 8.3.3 
JavaScript Window History 8.3.4 
JavaScript Window Navigator 8.3.5 
JavaScript 消息 框 8.3.6 
JavaScript 计时 8.3.7 
JavaScript Cookies 8.3.8 
HTML DOM 8.4 
HTML DOM 简介 8.4.1 
HTML DOM 节点 8.4.2 
HTML DOM 方法 8.4.3 
HTML DOM 属性 8.4.4 
HTML DOM 访问 8.4.5 
HTML DOM - 修改 8.4.6 
HTML DOM - 修改 HTML 内 容 8.4.7 
HTML DOM - 元 素 8.4.8 
HTML DOM - 事件 8.4.9 
HTML DOM - 导航 8.4.10 
JavaScript HTML DOM EventListener 8.4.11 
AJAX 教程 8.5 
AJAX 简介 8.5.1 
AJAX 实例 8.5.2 
AJAX - 创建 XMLHttpRequest 对 象 8.5.3 
AJAX - 向 服务 器 发 送 请 求 8.5.4 
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AJAX - 服务 器 响应 

AJAX - onreadystatechange 事件 
AJAX ASP/PHP 请 求实 例 

AJAX 数据 库 实例 

AJAX XML 实例 


JavaScript 高 级 教程 
JavaScript 高 级 教程 


JavaScript 的 历史 
JavaScript 实现 


ECMAScript 基础 


ECMAScript 语法 
ECMAScript = = 
ECMAScript 关键 字 
ECMAScript 保留 字 
ECMAScript 原始 值 和 引用 值 
ECMAScript 原始 类 型 
ECMAScript 类 型 转换 
ECMAScript 引用 类 型 


ECMAScript 运算 符 


ECMAScript 一 元 运算 符 
ECMAScript 位 运算 符 
ECMAScript Boolean 运算 符 
ECMAScript 乘 性 运算 符 
ECMAScript 加 性 运算 符 
ECMAScript 关系 运算 符 
ECMAScript 等 性 运算 符 
ECMAScript 条 件 运算 符 
ECMAScript 赋值 运算 符 
ECMAScript 25% BF 


ECMAScript 语句 


ECMAScript if 语句 

ECMAScript 迭代 语句 

ECMAScript 标签 语句 

ECMAScript break 和 continue 语句 
ECMAScript with 语句 

ECMAScript switch 语句 


ECMAScript a 


ECMAScript Eq Zins 
ECMAScript arguments 对 象 
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ECMAScript Function x1 $& (3€) 
ECMAScript i] & (closure) 
ECMAScript 对 象 
ECMAScript 面向 对 象 技术 
ECMAScript 对 象 应 用 
ECMAScript 对 象 类 型 
ECMAScript 对 象 作用 域 
ECMAScript 定义 类 或 对 象 
ECMAScript 修改 对 象 
ECMAScript 继承 
ECMAScript 继承 机 制 实例 
ECMAScript 继承 机 制 实现 
jQuery 教程 
jQuery 基础 
jQuery 简介 
jQuery 安装 
jQuery 语法 
jQuery 选择 器 
jQuery 事件 
jQuery 效果 
jQuery 效果 - 隐藏 和 显示 
jQuery 效果 - 淡 入 淡出 
jQuery 效果 - 滑动 
jQuery 效果 - 动画 
jQuery 停止 动画 
jQuery Callback 函数 
jQuery - Chaining 
jQuery HTML 
jQuery - 获得 内 容 和 属性 
jQuery - 设置 内 容 和 属性 
jQuery - 添加 元 素 
jQuery - 删除 元 素 
jQuery - 获取 并 设置 CSS 类 
jQuery - css() 方法 
jQuery - 尺寸 
jQuery 通 历 
jQuery 通 历 
jQuery 通 历 - 祖先 
jQuery 385 - 后 代 


9.5.3 
9.5.4 
9.6 
9.6.1 
9.6.2 
9.6.3 
9.6.4 
9.6.5 
9.6.6 
9.7 
9.7.1 
9.7.2 
10 
10.1 
10.1.1 
10.1.2 
10.1.3 
10.1.4 
10.1.5 
10.2 
10.2.1 
10.2.2 
10.2.3 
10.2.4 
10.2.5 
10.2.6 
10.2.7 
10.3 
10.3.1 
10.3.2 
10.3.3 
10.3.4 
10.3.5 
10.3.6 
10.3.7 
10.4 
10.4.1 
10.4.2 
10.4.3 
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jQuery 通 历 - 同胞 
jQuery 58 5 - 33 3€ 
jQuery - AJAX 
jQuery - AJAX 简介 
jQuery - AJAX load() 方法 
jQuery - AJAX get() 和 post() 方法 
jQuery 杂项 
jQuery - noConflict() 方法 
jQuery 参考 手册 
jQuery 参考 手册 - 选择 器 
jQuery 参考 手册 - 事件 
jQuery 事件 - bind() 方法 
jQuery 事件 - blur() 方法 
jQuery 事件 - change() 方法 
jQuery 事件 - click() 方法 
jQuery 事件 - dblclick() 方法 
jQuery 事件 - delegate() 方法 
jQuery 事件 - die() 方法 
jQuery 事件 - error() 方法 
jQuery 事件 -isDefaultPrevented() 方法 
jQuery 事件 - pageX 属性 
jQuery 事件 - pageY 属性 
jQuery 事件 - preventDefault() 方法 
jQuery 事件 - result 属性 
jQuery 事件 - target 属性 
jQuery 事件 - timeStamp 属性 
jQuery 事件 - type 属性 
jQuery 事件 - which 属性 
jQuery 事件 - focus() 方法 
jQuery 事件 - keydown() 方法 
jQuery 事件 - keypress() 方法 
jQuery 事件 - keyup() 方法 
jQuery 事件 live() 方法 
jQuery 事件 - load() 方法 
jQuery 事件 - mousedown() 方法 
jQuery 事件 - mouseenter() 方法 
jQuery 事件 - mouseleave() 方法 
jQuery 事件 - mousemove() 方法 
jQuery 事件 - mouseout() 方法 


10.4.4 
10.4.5 
10.5 
10.5.1 
10.5.2 
10.5.3 
10.6 
10.6.1 
11 

11.1 
11.2 
11.2.1 
11.2.2 
11.2.3 
11.2.4 
11.2.5 
11.2.6 
11.2.7 
11.2.8 
11.2.9 
11.2.10 
11.2.11 
11.2.12 
11.2.13 
11.2.14 
11.2.15 
11.2.16 
11.2.17 
11.2.18 
11.2.19 
11.2.20 
11.2.21 
11.2.22 
11.2.23 
11.2.24 
11.2.25 
11.2.26 
11.2.27 
11.2.28 
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jQuery 事件 - mouseover() 方法 11.2.29 
jQuery 事件 - mouseup() 方法 11.2.30 
jQuery 事件 - one() 方法 11.2.31 
jQuery 事件 - ready() 方法 11.2.32 
jQuery 事件 - resize() 方法 11.2.33 
jQuery 事件 - scroll() 方法 11.2.34 
jQuery 事件 - select() 方法 11.2.35 
jQuery 事件 - submit() 方法 11.2.36 
jQuery 事件 - toggle() 方法 11.2.37 
jQuery 事件 - trigger() 方法 11.2.38 
jQuery 事件 - triggerHandler() 方法 11.2.39 
jQuery 事件 - unbind() 方法 11.2.40 
jQuery 事件 - undelegate() 方法 11.2.41 
jQuery 事件 - unload 属性 11.2.42 
jQuery 参考 手册 - 效果 11.3 
jQuery 效果 - animate() 方法 11.3.1 
jQuery 效果 - clearQueue() 方法 11.3.2 
jQuery 效果 - fadeln() 方法 11.3.3 
jQuery 效果 - fadeOut() 方法 11.3.4 
jQuery 效果 - fadeTo() 方法 11.3.5 
jQuery 效果 - hide() 方法 11.3.6 
jQuery 效果 - show() 方法 11.3.7 
jQuery 效果 - slideDown() 方法 11.3.8 
jQuery 效果 - slideToggle() 方法 11.3.9 
jQuery 效果 - slideUp() 方法 11.3.10 
jQuery 效果 - stop() 方法 11.3.11 
jQuery 效果 - toggle() 方法 11.3.12 
jQuery 参考 手册 - 文档 操作 11.4 
jQuery 属性 操作 - addClass() 方法 11.4.1 
jQuery 文档 操作 - after() 方法 11.4.2 
jQuery 文档 操作 - append() 方法 11.4.3 
jQuery 文档 操作 - appendTo() 方法 11.4.4 
jQuery 属性 操作 - attr() 方法 11.4.5 
jQuery 文档 操作 - before() 方法 11.4.6 
jQuery 文档 操作 - clone() 方法 11.4.7 
jQuery 文档 操作 - detach() 方法 11.4.8 
jQuery 文档 操作 - empty() 方法 11.4.9 
jQuery 属性 操作 - hasClass() 方法 11.4.10 
jQuery 文档 操作 - html() 方法 11.4.11 
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jQuery 文档 操作 - insertAfter() 方法 
jQuery 文档 操作 - ain 方法 
jQuery 文档 操作 - prepend() 方 
jQuery 文档 操作 - eel’ A 
jQuery 文档 操作 - remove() A 
jQuery 属性 操作 - re = 
jQuery 属性 操作 - removeClass() 方法 
jQuery 文档 操作 - replaceAll() 方法 
jQuery 文档 操作 - replaceWith() 方法 
jQuery 文档 操作 - text() 方法 
jQuery 属性 操作 - toggleClass() 方法 
jQuery 文档 操作 - unwrap() 方法 
jQuery 属性 操作 - val() 方法 
jQuery 文档 操作 - wrap() 方法 
jQuery 文档 操作 - wrapAll() 方法 
jQuery 文档 操作 - wraplnner() 方法 
jQuery 参考 手册 - 属性 操作 
jQuery 参考 手册 - CSS 操作 
jQuery CSS 操作 - css() A 
jQuery CSS 操作 - height() 
jQuery CSS 操作 - offset() 方法 
jQuery CSS 操作 - e A 
jQuery CSS 操作 - position() A 
jQuery CSS 操作 - scrollLeft() 2: 
jQuery CSS 操作 - scrollTop() 方法 
jQuery CSS 操作 - width() 方法 
jQuery 参考 手册 - Ajax 
jQuery ajax - ajax() 方法 
jQuery ajax - ajaxComplete() 方法 
jQuery ajax - ajaxError() 方法 
jQuery ajax - ajaxSend() 方法 
jQuery ajax - ajaxSetup() 方法 
jQuery ajax - ajaxStart() 方法 
jQuery ajax - ajaxStop() 方法 
jQuery ajax - ajaxSuccess() 方法 
jQuery ajax - get() 方法 
jQuery ajax - getUSON() 方法 
jQuery ajax - getScript() 方法 
jQuery ajax - load() 方法 


11.4.12 
11.4.13 
11.4.14 
11.4.15 
11.4.16 
11.4.17 
11.4.18 
11.4.19 
11.4.20 
11.4.21 
11.4.22 
11.4.23 
11.4.24 
11.4.25 
11.4.26 
11.4.27 
11.5 
11.6 
11.6.1 
11.6.2 
11.6.3 
11.6.4 
11.6.5 
11.6.6 
11.6.7 
11.6.8 
11.7 
11.7.1 
11.7.2 
11.7.3 
11.7.4 
11.7.5 
11.7.6 
11.7.7 
11.7.8 
11.7.9 
11.7.10 
11.7.11 
11.7.12 
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jQuery ajax - param() 方法 11.7.13 
jQuery ajax - post() 方法 11.7.14 
jQuery ajax - serialize() 方法 11.7.15 
jQuery ajax - serializeArray() 方法 11.7.16 
jQuery 参考 手册 - 38 5 11.8 
jQuery 3&5 - add() 方法 11.8.1 
jQuery i 75 - andSelf() 方法 11.8.2 
jQuery iw 75 - children() 方法 11.8.3 
jQuery 3&5 - closest() 方法 11.8.4 
jQuery 通 历 - contents() 方法 11.8.5 
jQuery 3&5 - each() 方法 11.8.6 
jQuery 3&5 - end() 方法 11.8.7 
jQuery 385 - eq() 方法 11.8.8 
jQuery 385; - filter() 方法 11.8.9 
jQuery iH - find() 方法 11.8.10 
jQuery 通 历 - first() 方法 11.8.11 
jQuery 3&5 - has() 方法 11.8.12 
jQuery 3&5 - is() 方法 11.8.13 
jQuery 38/5 - last() 方法 11.8.14 
jQuery 3&5; - map() 方法 11.8.15 
jQuery 38 75 - next() 方法 11.8.16 
jQuery 通 历 - nextAll() 方法 11.8.17 
jQuery iH - nextUntil() 方法 11.8.18 
jQuery 通 历 - not() 方法 11.8.19 
jQuery i % - offsetParent() 方法 11.8.20 
jQuery i 4 - parent() 方法 11.8.21 
jQuery 3&5 - parents() 方法 11.8.22 
jQuery 38/5 - parentsUntil() 方法 11.8.23 
jQuery 3&5 - prev() 方法 11.8.24 
jQuery 通 历 - prevAll() 方法 11.8.25 
jQuery 通 历 - prevUntil() 方法 11.8.26 
jQuery 通 历 - siblings() 方法 11.8.27 
jQuery 通 历 - slice() 方法 11.8.28 
jQuery 参考 手册 - 数据 11.9 
jQuery 通 历 - clearQueue() 方法 11.9.1 
jQuery 数据 - data() 方法 11.9.2 
jQuery 数据 - jQuery.data() 方法 11.9.3 
jQuery 通 历 - dequeue() 方法 11.9.4 
jQuery 通 历 - jQuery.dequeue() 方法 11.9.5 
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jQuery 3&5 - hasData() 方法 
jQuery 3&5 - queue() 方法 
jQuery 38 75 - jQuery.queue() 方法 
jQuery 数据 - removeData() 方法 
jQuery 数据 - jQuery.removeData() 方法 

jQuery 参考 手册 - DOM 元 素 方 法 
jQuery DOM 元 素 方 法 - get() 方法 
jQuery DOM 元 素 方 法 - index() 方法 
jQuery DOM 元 素 方 法 - size() 方法 
jQuery DOM 元 素 方 法 - toArray() 方法 

jQuery 参考 手册 - 核心 
jQuery 核心 -jQuery() 方法 
jQuery 核心 - noConflict() 方法 

jQuery 参考 手册 - 属性 
jQuery context 属性 
jQuery jquery 属性 
jQuery jQuery.fx.interval 属性 
jQuery jQuery.fx.off 属性 
jQuery jQuery.support 属性 
jQuery length 属性 

AngularJS 教程 

AngularJS 简介 

AngularJS 表达 式 

AngularJS 1843 

AngularJS 控制 器 

AngularJS 过 滤器 

AngularJS XMLHttpRequest 

AngularJS 表格 

AngularJS SQL 

AngularJS HTML DOM 

AngularJS HTML 事件 

AngularJS 模块 

AngularJS 表单 

AngularJS 输入 验证 

AngularJS Bootstrap 

AngularJS Include (包含 ) 

AngularJS 应 用 程序 

AngularJS 参考 手册 

jQuery UI 教程 


11.9.6 
11.9.7 
11.9.8 
11.9.9 
11.9.10 
11.10 
11.10.1 
11.10.2 
11.10.3 
11.10.4 
11.11 
11.11.1 
11.11.2 
11.12 
11.12.1 
11.12.2 
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11.12.6 
12 
12.1 
12.2 
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12.6 
12.7 
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12.9 
12.10 
12.11 
12.12 
12.13 
12.14 
12.15 
12.16 
12.17 
13 
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jQuery UI 基础 13.1 
jQuery UI 简介 13.1.1 
jQuery Ul 下 载 13.1.2 
jQuery UI 使 用 13.1.3 
jQuery UI 定制 13.1.4 
jQuery UI 工作 原理 13.1.5 

jQuery Ul 主题 13.2 
jQuery Ul 主题 13.2.1 
jQuery UI ThemeRoller 13.2.2 
jQuery UI CSS 框架 API 13.2.3 
jQuery UI 设计 主题 13.2.4 

jQuery UI 部 件 库 13.3 
jQuery UI 部 件 库 (Widget Factory) 13.3.1 
jQuery UI 通过 部 件 库 (Widget Factory) 扩展 小 部 件 13.3.2 
jQuery UI 小 部 件 (Widget) 方法 调用 13.3.3 
jQuery Ul 为 什么 使 用 部 件 库 (Widget Factory) 13.3.4 
jQuery UI 如 何 使 用 部 件 库 (Widget Factory) 13.3.5 

jQuery UI 实例 13.4 
jQuery UI 实例 13.4.1 
jQuery UI 实例 - 拖 动 (Draggable) 13.4.2 
jQuery UI 实例 - 放置 (Droppable) 13.4.3 
jQuery UI 实例 - 缩放 (Resizable) 13.4.4 
jQuery UI 实例 - 选择 (Selectable) 13.4.5 
jQuery UI 实例 - 排序 (Sortable) 13.4.6 
jQuery UI 实例 - $1 mir (Accordion) 13.4.7 
jQuery UI 实例 - 自动 完成 (Autocomplete) 13.4.8 


jQuery UI 实例 - 按钮 (Button) 13.4.9 
jQuery UI 实例 - 日 期 选择 器 (Datepicker) 13.4.10 
jQuery UI 实例 - 对 话 框 (Dialog) 13.4.11 
jQuery UI 实例 - 菜单 (Menu) 13.4.12 
jQuery UI 实例 - 进度 条 (Progressbar) 13.4.13 
jQuery UI 实例 - 滑 块 (Slider) 13.4.14 
jQuery UI 实例 - iiid (Spinner) 13.4.15 
jQuery UI 实例 - 标签 页 (Tabs) 13.4.16 
jQuery UI 实例 - 工具 提示 框 (Tooltip) 13.4.17 
jQuery UI 实例 - 特效 (Effect) 13.4.18 
jQuery UI 实例 - 显示 (Show) 13.4.19 
jQuery UI 实例 - 隐藏 (Hide) 13.4.20 
jQuery UI 实例 - 切换 (Toggle) 13.4.21 
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jQuery UI 实例 - 添加 Class (Add Class) 
jQuery UI 实例 - ER Class (Remove Class) 
jQuery UI 实例 - 切换 Class (Toggle Class) 
jQuery UI 实例 - 转换 Class (Switch Class) 
jQuery UI 实例 - 颜色 动画 (Color Animation) 
jQuery UI 实例 - 定位 (Position) 
jQuery UI 实例 - 部 件 库 (Widget Factory) 
jQuery UI API 参考 
jQuery UI API 类别 - 特效 (Effects) 
jQuery UI API - .addClass() 
jQuery UI API - 百叶 窗 特 效 (Blind Effect) 
jQuery UI API - 反弹 特效 (Bounce Effect) 
jQuery UI API - 剪辑 特效 (Clip Effect) 


=a. — wc 


=. ē 


jQuery UI API - 颜色 动画 (Color Animation) 


jQuery UI API - 降落 特效 (Drop Effect) 
jQuery UI API - Easings 

jQuery UI API - .effect() 

jQuery UI API - 爆炸 特效 (Explode Effect) 


jQuery UI API - 淡 入 淡出 特效 (Fade Effect) 


jQuery UI API - #7 & 433% (Fold Effect) 
jQuery UI API - .hide() 


jQuery UI API - 突出 特效 (Highlight Effect) 


jQuery UI API - 膨胀 特效 (Puff Effect) 

jQuery UI API - 跳动 特效 (Pulsate Effect) 

jQuery UI API - .removeClass() 

jQuery UI API - 缩放 特效 (Scale Effect) 

jQuery UI API - 震动 特效 (Shake Effect) 

jQuery UI API - .show() 

jQuery UI API - 尺寸 特效 (Size Effect) 

jQuery UI API - 滑动 特效 (Slide Effect) 

jQuery UI API - .switchClass() 

jQuery UI API - .toggle() 

jQuery UI API - .toggleClass() 

jQuery UI API - 转移 特效 (Transfer Effect) 
jQuery UI API 类 别 - 特效 核心 (Effects Core) 


jQuery UI API - 颜色 动画 (Color Animation) 


jQuery UI API # $| - 388 (Interactions) 


jQuery UI API - 可 拖 搜 小 部 件 (Draggable Widget) 
jQuery UI API - 可 放置 小 部 件 (Droppable Widget) 
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jQuery UI API - 鼠标 交互 (Mouse Interaction) 13.5.3.3 
jQuery UI API - 可 调整 尺寸 小 部 件 (Resizable Widget) 
jQuery UI API - 可 选择 小 部 件 (Selectable Widget) — 13.5.3.4 


jQuery UI API - 可 排序 小 部 件 (Sortable Widget) 13.5.3.5 
jQuery UI API X: | - 方法 重 载 (Method Overrides) 13.5.3.6 
jQuery UI API - .focus() 13.5.4.1 13.5.4 
jQuery UI API - .position() 13.5.4.2 
jQuery UI API 类 别 - 方法 (Methods) 13.5.5 
jQuery UI API - .disableSelection() 19.5.5: 
jQuery UI API - .enableSelection() 13.5.5.2 
jQuery UI API - .removeUniqueld() 13.5.5.3 
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jQuery UI API - CSS 框架 (CSS Framework) 13.5.7.1 
jQuery UI API - 44% (Icons) 13.5.7.2 
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jQuery UI API 类 别 - UI 核心 (UI Core) 13.5.8 
jQuery UI API X $| - 实用 工具 (Utilities) 13.5.9 
jQuery UI API - 部 件 库 (Widget Factory) 13.5.9.1 
jQuery UI API - 插件 桥 (Widget Plugin Bridge) 13.5.9.2 
jQuery UI API 类 别 - 小 部 件 (Widgets) 13.5.10 


jQuery UI API - Hi Æ mii (Accordion Widget) — 13.5.10.1 
jQuery UI API - 自动 完成 部 件 (Autocomplete Widget) 


jQuery UI API - 按钮 部 件 (Button Widget) 13.5.10.2 
jQuery UI API - 日 期 选择 器 部 件 (Datepicker 13.5.10.3 
Widget) 13.5.10.4 
jQuery UI API - 对 话 框 部 件 (Dialog Widget) 13.5.10.5 
jQuery UI API - 菜单 部 件 (Menu Widget) 13.5.10.6 
jQuery UI API - 进度 条 部 件 (Progressbar Widget) ^ 13.5.10.7 
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jQuery UI API - 工具 提示 框 部 件 (Tooltip Widget)  13.5.10.11 
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jQuery EasyUl 教程 14 
jQuery EasyUl 简介 14.1 
jQuery EasyUl 应 用 14.2 

jQuery EasyUl 应 用 - 创建 CRUD = FH 14.2.1 
jQuery EasyUl 应 用 - 创建 CRUD 数据 网 格 (DataGrid) 14.2.2 
jQuery EasyUl 应 用 - 创建 展开 行 明 细 编 辑 表单 的 CRUD 应 用 
jQuery EasyUl 应 用 - 创建 RSS Feed 阅读 器 14.2.4 14.2.3 
jQuery EasyUl 拖 放 14.3 
jQuery EasyUl 拖 放 - 基本 的 拖 动 和 放置 14.3.1 
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jQuery EasyUl 拖 放 - 创建 学 校 课 程 表 14.3.3 
jQuery EasyUl 菜单 与 按钮 14.4 
jQuery EasyUl 菜单 与 按钮 - 创建 简单 的 菜单 14.4.1 


jQuery EasyUl 菜单 与 按钮 - € 
jQuery EasyUl 菜单 与 按钮 - € 
jQuery EasyUl 菜单 与 按钮 - & 


建 链 接 按钮 (Link Button) 14.4.2 
建 菜单 按钮 (Menu Button) 14.4.3 
建 分 割 按钮 (Split Button) 14.4.4 


a. _ c 


jQuery EasyUl 布局 14.5 
jQuery EasyUl 布局 - 为 网 页 创建 边框 布局 14.5.1 
jQuery EasyUl 布局 - 在 面板 中 创建 复杂 布局 14.5.2 
jQuery EasyUl 布局 - &J ir 4 Mix 14.5.3 
jQuery EasyUl 布局 - 创建 标签 页 (Tabs) 14.5.4 
jQuery EasyUl 布局 - 动态 添加 标签 页 (Tabs) 14.5.5 
jQuery EasyUl 布局 - 添加 自动 播放 标签 页 (Tabs) 14.5.6 
jQuery EasyUl 布局 - 创建 XP 风格 左 侧 面板 14.5.7 

jQuery EasyUl 数据 网 格 14.6 
jQuery EasyUl 数据 网 格 - 转换 HTML 表格 为 数据 网 格 14.6.1 
jQuery EasyUl 数据 网 格 - 取得 选中 行 数据 14.6.2 
jQuery EasyUl 数据 网 格 - 添加 查询 功能 14.6.3 
jQuery EasyUl 数据 网 格 - 添加 工具 栏 14.6.4 
jQuery EasyUl 数据 网 格 - 创建 复杂 工具 栏 14.6.5 
jQuery EasyUl 数据 网 格 - 设置 冻结 列 14.6.6 
jQuery EasyUl 数据 网 格 - 动态 改变 列 14.6.7 
jQuery EasyUl 数据 网 格 - 格式 化 列 14.6.8 
jQuery EasyUl 数据 网 格 - 设置 排序 14.6.9 
jQuery EasyUl 数据 网 格 - 自 定 义 排 序 14.6.10 
jQuery EasyUl 数据 网 格 - 创建 列 组 合 14.6.11 
jQuery EasyUl 数据 网 格 - 添加 复 选 杠 14.6.12 
jQuery EasyUl 数据 网 格 - 自 定义 分 页 14.6.13 
jQuery EasyUl 数据 网 格 - 启用 行内 编辑 14.6.14 


29 


W3School 前 端 教 程 合集 


jQuery EasyUl 数据 网 格 - 扩展 编辑 器 
jQuery EasyUl 数据 网 格 - 列 运算 
jQuery EasyUl 数据 网 格 - 合并 单元 格 
jQuery EasyUl 数据 网 格 - 创建 自 定义 视图 
jQuery EasyUl 数据 网 格 - 创建 页 脚 摘要 
jQuery EasyUl 数据 网 格 - 条 件 设 置 行 背 景 关 色 
jQuery EasyUl 数据 网 格 - 创建 属性 网 格 
jQuery EasyUl 数据 网 格 - 扩展 行 显示 细节 
jQuery EasyUl 数据 网 格 - 创建 子 网 格 
jQuery EasyUl 数据 网 格 - 使 用 虚拟 滚动 视图 显示 海量 数据 
jQuery EasyUl 数据 网 格 - 添加 分 页 组 件 
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jQuery EasyUl 窗口 - 创建 简单 窗口 
jQuery EasyUl 窗口 - 自 定义 窗口 工具 栏 
jQuery EasyUl 窗口 - 窗口 与 布局 
jQuery EasyUl 窗口 - 创建 对 话 框 
jQuery EasyUl 窗口 - 自 定 义 带 有 工具 条 和 按钮 的 对 话 框 
jQuery EasyUl 树 形 菜单 
jQuery EasyUl 树 形 菜单 - 使 用 标记 创建 树 形 菜单 
jQuery EasyUl 树 形 菜单 - 创建 异步 树 形 菜 单 
jQuery EasyUl 树 形 菜单 - 树 形 菜单 添加 节点 
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jQuery EasyUl 树 形 菜单 - 树 形 网 格 动态 加 载 
jQuery EasyUl 树 形 菜单 - 树 形 网 格 添加 分 页 
jQuery EasyUl 树 形 菜单 - 树 形 网 格 惰性 加 载 节点 
jQuery EasyUl 表单 
jQuery EasyUl 表单 - 创建 异步 提交 表单 
jQuery EasyUl 表单 - 表单 验证 
jQuery EasyUl 表单 - 创建 树 形 下 拉 框 
jQuery EasyUl 表单 - 格式 化 下 拉 框 
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Highcharts 环境 配置 

Highcharts 配置 语法 

Highcharts 配置 选项 详细 说 明 

Highcharts 曲线 图 
Highcharts 基本 曲线 图 
Highcharts 带 有 数据 标签 曲线 图 表 
Highcharts 异步 加 载 数据 曲线 图 表 
Highcharts 时 间 序 列 ， 可 缩放 的 图 表 
Highcharts X 轴 翻 转 曲 线 图 
Highcharts 带 标记 曲线 图 
Highcharts 标示 区 曲线 图 
Highcharts 时 间 间 隔 图 表 
Highcharts 对 数 图 表 

Highcharts 区 域 图 
Highcharts 基本 区 域 图 
Highcharts 使 用 负数 区 域 图 
Highcharts H & Kink rg 
Highcharts about & Kik A 
Highcharts 丢失 值 区 域 图 
Highcharts 反 转 x 轴 与 y 轴 
Highcharts 曲线 区 域 图 
Highcharts 区 间 区 域 图 
Highcharts 使 用 区 间 和 线 的 区 域 图 

Highcharts 条 形 图 
Highcharts 基本 条 形 图 
Highcharts #4 RE A 
Highcharts 反 向 条 形 图 

Highcharts 柱 形 图 
Highcharts 基本 柱 形 图 
Highcharts 使 用 负 值 的 反 向 柱 形 图 
Highcharts H & TEJÉ A 
Highcharts 1€ 4 Za JE A 
Highcharts 使 用 百分比 的 堆 壹 柱 形 图 
Highcharts 标签 旋转 柱 形 图 
Highcharts H 4 28473 A 
Highcharts 固定 布局 柱 形 图 
Highcharts 使 用 HTML 表格 数据 的 柱 形 图 
Highcharts 区 间 柱 形 图 

Highcharts 饼 图 


15.2 

15.3 

15.4 

15.5 
15.5.1 
15.5.2 
15.5.3 
15.5.4 
15.5.5 
15.5.6 
15.5.7 
15.5.8 
15.5.9 

15.6 
15.6.1 
15.6.2 
15.6.3 
15.6.4 
15.6.5 
15.6.6 
15.6.7 
15.6.8 
15.6.9 

15.7 
15.7.1 
15.7.2 
15.7.3 

15.8 
15.8.1 
15.8.2 
15.8.3 
15.8.4 
15.8.5 
15.8.6 
15.8.7 
15.8.8 
15.8.9 


15.8.10 


15.9 


31 


W3School 前 端 教程 合集 


Highcharts 基本 饼 图 15.9.1 
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W3School HTML 教程 


来 源 : HTML 教 程 
整理 : 飞龙 


HTML 基础 


HTML 简介 


实例 


<html> 
<body> 


<hi>My First Heading</h1i> 
<p>My first paragraph.</p> 


</body> 
</html> 


什么 是 HTML ? 


HTML 是 用 来 描述 网 页 的 一 种 语言 。 


HTML 指 的 是 超 文 本 标记 语言 (Hyper Text Markup Language) 
HTML 不 是 一 种 编程 语言 ， 而 是 一 种 标记 语言 (markup language) 
标记 语言 是 一 套 标记 标签 (markup tag) 

HTML 使 用 标记 标签 来 描述 网 页 


HTML 标签 


HTML 标记 标签 通常 被 称 为 HTML 标签 (HTML tag)。 


HTML 标签 是 由 尖 括 号 包围 的 关键 词 ， 比如 <html> 

HTML 标签 通常 是 成 对 出 现 的 ， 比 如 <b> 和 </b> 

标签 对 中 的 第 一 个 标签 是 开始 标签 ， 第 二 个 标签 是 结束 标签 
开始 和 结束 标签 也 被 称 为 开放 标签 和 闭合 标签 


HTML 文档 = 网 页 


e HTML 文档 描述 网 页 
e HTML 文档 包含 HTML 标签 和 纯 文 本 
e HTML 文档 也 被 称 为 网 页 


Web 浏览 器 的 作用 是 读 取 HTML 文档 ， 并 以 网 页 的 形式 显示 出 它们 。 浏 览 器 不 会 
显示 HTML 标签 ， 而 是 使 用 标签 来 解释 页 面 的 内 容 : 


<html> 
<body> 


<hi>My First Heading</h1i> 


<p>My first paragraph.</p> 


</body> 
</html> 
例子 解释 
e <html> 与 </html> 之 间 的 文本 描述 网 页 
e <body> 与 </body> 之 间 的 文本 是 可 见 的 页 面 内 容 
e <h1> 与 </h1> 之 间 的 文本 被 显示 为 标题 
e <p> 与 </p> 之 间 的 文本 被 显示 为 段落 


基本 的 HTML 标签 - 四 个 实例 


本 章 通过 实例 向 您 演示 最 常用 的 HTML 标签 
提示 : 不 要 担心 本 章 中 您 还 没有 学 过 的 例子 ， 您 将 在 下 面 的 章节 中 学 到 它们 。 


提示 : 学 3] HTML 最 好 的 方式 就 是 边 学 边 做 实 验 。 我 们 为 您 准备 了 很 好 的 HTML 
编辑 器 。 使 用 这 个 编辑 器 ， 您 可 以 任意 编辑 一 段 HTML 源码 ， 然 后 单 击 TIY 按钮 来 
查看 结果 


HTML 标题 

HTML 标题 (Heading) 是 通过 <h1> - <h6> 等 标签 进行 定义 的 。 
实例 

K 


<h1>This is a heading</h1> 
<h2>This is a heading</h2> 
<h3>This is a heading</h3> 


HTML 段落 
HTML 段落 是 通过 <p> 标签 进行 定义 的 。 
实例 


<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 


HTML 链接 


HTML 链接 是 通过 <a> 标签 进行 定义 的 。 
实例 


<a href="http://www.w3school.com.cn">This is a link</a> 


注释 : 在 href 属性 中 指定 链接 的 地 址 。 


(您 将 在 本 教程 稍 后 的 章节 中 学 习 更 多 有 关 属 性 的 知识 ) 。 
HTML 图 像 
HTML 图 像 是 通过 <img> 标签 进行 定义 的 。 
实例 
<img src="w3school.jpg" width="104" height="142" /> 


注释 : 图 像 的 名 称 和 尺寸 是 以 属性 的 形式 提供 的 。 


HTML 元 素 


HTML 文档 是 由 HTML 元 素 定 义 的 。 


HTML 元 素 
HTML 元 素 指 的 是 从 开始 标签 (start tag) 到 结束 标签 (end tag) 的 所 有 代码 。 
开始 标签 元 素 内 容 结束 标签 
<p> This is a paragraph </p> 
«a href="defaultshtm" > This is a link </a> 


<br /> 


注释 : 开始 标签 常 被 称 为 开放 标签 (opening tag) ， 结 束 标签 常 称 为 闭合 标签 
(closing tag) 。 


HTML 元 素 语 法 


HTML 元 素 以 开始 标签 起 始 

HTML 元 素 以 结束 标签 终止 

元 素 的 内 容 是 开始 标签 与 结束 标签 之 间 的 内 容 

某 些 HTML 元 素 具 有 空 内 容 (empty content) 

空 元 素 在 开始 标签 中 进行 关闭 〈 以 开始 标签 的 结束 而 结束 ) 
大 多 数 HTML 元 素 可 拥有 属性 


提示 : 您 将 在 本 教程 的 下 一 章 中 学 习 更 多 有 关 属 性 的 内 容 。 


EH HTML 元 素 


大 多 数 HTML coMALRE (AUASH HTML 元 素 ) 。 
HTML 文档 由 旋 套 的 HTML 元 素 构 成 。 


HTML 文档 实例 


«html» 
«body» 
<p>This is my first paragraph.</p> 
«/body» 


«/html» 
上 面 的 例子 包含 三 个 HTML 元 素 。 


HTML 实例 解释 
<p> 元 来 : 
<p>This is my first paragraph.</p> 


这 个 <p> 元 素 定 义 了 HTML 文档 中 的 一 个 段落 。 
这 个 元 素 拥 有 一 个 开始 标签 <p>， 以 及 一 个 结束 标签 </p>。 
元 素 内 容 是 This is my first paragraph. 


<body> 元 素 : 


<body> 

<p>This is my first paragraph.</p> 

</body> 
<body> 元 素 定 义 了 HTML 文档 的 主体 。 
这 个 元 素 拥 有 一 个 开始 标签 <body>， 以 及 一 个 结束 标签 </body>。 
元 素 内 容 是 另 一 个 HTML TR (p TH) 。 


«html» 元 素 : 


«html» 
«body» 
<p>This is my first paragraph.</p> 
</body> 


</html> 


«html» 元 素 定义 了 整个 HTML 文档 。 
这 个 元 素 拥 有 一 个 开始 标签 <html>， 以 及 一 个 结束 标签 </html>, 
元 素 内 容 是 另 一 个 HTML 元 素 (body 元 素 ) 。 


不 要 忘记 结束 标签 
即使 您 忘记 了 使 用 结束 标签 ， 大 多 数 浏 览 器 也 会 正确 地 显示 HTML : 


<p>This is a paragraph 
<p>This is a paragraph 


上 面 的 例子 在 大 多 数 浏 览 器 中 都 没 问 题 ， 但 不 要 依赖 这 种 做 法 。 忘 记 使 用 结束 标签 
会 产生 不 可 预料 的 结果 或 错误 。 


注释 : 未 来 的 HTML 版 本 不 允许 省 略 结束 标签 。 


空 的 HTML 元 素 


没有 内 容 的 HTML 元 素 被 称 为 空 元 素 。 空 元 素 是 在 开始 标签 中 关闭 的 。 
<br> 就 是 没有 关闭 标签 的 空 元 素 (<br> 标签 定义 换行 ) 。 
在 XHTML, XML 以 及 未 来 版 本 的 HTML 中 ， 所 有 元 素 都 必须 被 关闭 。 


在 开始 标签 中 添加 斜 枉 ， 比 如 <br />， 是 关闭 空 元 素 的 正确 方法 ，HTML、XHTML 
和 XML 都 接受 这 种 方式 。 


即使 <br> 在 所 有 浏览 器 中 都 是 有 效 的， 但 使 用 <br /> 其 实 是 更 长 远 的 保障 。 


HTML 提示 : 使 用 小 宇 标签 


HTML 标签 对 大 小 写 不 敏感 : <P> SIF <p>。 许 多 网 站 都 使 用 大 写 的 HTML 标 
A 


SLO 


W3School 使 用 的 是 小 写 标 签 ， 因 为 万 维 网 联盟 (W3C) 在 HTML 4 中 推荐 使 用 小 
写 ， 而 在 未 来 (X)HTML 版 本 中 强制 使 用 小 写 。 


HTML 属性 


属性 为 HTML 元 素 提供 附加 信息 。 


HTML 属性 


HTML 标签 可 以 拥有 属性 。 属 性 提供 了 有 关 HTML 元 素 的 更 多 的 信息 。 
属性 总 是 以 名 称 / 值 对 的 形式 出 现 ， 比 如 : name="value", 
属性 总 是 在 HTML 元 素 的 开始 标签 中 规定 。 


属性 实例 
HTML 链接 由 <a> 标签 定义 。 链 接 的 地 址 在 href 属性 中 指定 : 


«a href="http://www.w3school.com.cn">This is a link</a> 


更 多 HTML 属性 实例 
属性 例子 1: 


<h1> 定义 标题 的 开始 。 
<h1 align="center"> 拥有 关于 对 齐 方式 的 附加 信息 。 
TIY : 居中 排列 标题 


属性 例子 2: 

<body> 定义 HTML 文档 的 主体 。 

«body bgcolor="yellow"> 拥有 关于 背景 颜色 的 附加 信息 。 
TIY : 背景 颜色 


属性 例子 3: 


<table> 定义 HTML 表格 。 (您 将 在 稍 后 的 章节 学 习 到 更 多 有 关 HTML 表格 的 内 
容 ) 


<table border="1"> 拥有 关于 表格 边框 的 附加 信息 。 


HTML 提示 : 使 用 小 写 属 性 
属性 和 属性 值 对 大 小 写 不 敏感 。 

不 过 ， 万 维 网 联盟 在 其 HTML 4 推荐 标准 中 推荐 小 写 的 属性 /属性 值 。 
而 新 版 本 的 (X)HTML 要 求 使 用 小 写 属性 。 


始终 为 属性 值 加 引号 
属性 值 应 该 始终 被 包括 在 引号 内 。 双 引号 是 最 常用 的 ， 不 过 使 用 单 引号 也 没有 问 


是 。 


在 某 些 个 别 的 情况 下 ， 上 比如 属性 值 本 身 就 含有 双 引 号 ， 那 么 您 必须 使 用 单 引 号 ， 例 
如 : 


name='Bill "Helloworld" Gates' 


HTML 属性 参考 手册 


我 们 的 完整 的 HTML 参考 手册 提供 了 每 个 HTML 元 素 可 使 用 的 合法 属性 的 完整 列 
AX: 


完整 的 HTML 参考 手册 
下 面 列 出 了 适用 于 大 多 数 HTML 元 素 的 属性 : 


属性 值 描述 

class classname 规定 元 素 的 类 名 (classname) 

id id 规定 元 素 的 唯一 

style style definition 规定 元 素 的 行内 样式 (inline style) 
规定 元 


title text 素 的 额外 信息 〈 可 在 工具 提示 中 显示 ) 


如 需 更 多 天 于 标准 属性 的 信息 ， 请 访问 : 
HTML 标准 属性 参考 手册 


HTML 标题 


在 HTML 文档 中 ， 标 题 很 重要 。 


HTML 标题 
标题 (Heading) 是 通过 <h1> - <h6> 等 标签 进行 定义 的 。 


<h1> 定义 最 大 的 标题 。<h6> 定义 最 小 的 标题 。 
实例 


<hi>This is a heading</h1> 
<h2>This is a heading</h2> 
<h3>This is a heading</h3> 


注释 : 3|» | 览 器 会 自动 地 在 标题 的 前 后 添加 空 行 。 


注释 : 默认 情况 下 ，HTML 会 自动 地 在 块 级 元 素 前 后 添加 一 个 额外 的 空 行 ， 比 如 段 
落 、 标 题 元 素 前 后 。 


标题 很 重要 

请 确保 将 HTML heading 标签 只 用 于 标题 。 不 要 仅仅 是 为 了 产生 粗 体 或 大 号 的 文本 
而 使 用 标 题 。 
搜索 引擎 使 用 标题 为 您 的 网 页 的 结构 和 内 容 编 制 索 引 。 


因为 用 户 可 以 通过 标题 来 快速 浏览 您 的 网 页 ， 所 以 用 标题 来 呈现 文档 结构 是 很 重要 
的 。 


应 该 将 h1 用 作 主 标题 (最 重要 的 ) ， 其 后 是 h2 (次 重要 的 ) ， 再 其 次 是 h3， 以 
此 类 推 。 


HTML 水 平 线 
<hr /> 标签 在 HTML 页 面 中 创建 水 平 线 。 
hr 元 素 可 用 于 分 隔 内 容 。 


实例 


<p>This is a paragraph</p> 
<hr /> 
<p>This is a paragraph</p> 
<hr /> 
<p>This is a paragraph</p> 


ee Nene gk eee et een 
办 法 ) 。 


HTML 注释 


可 以 将 注释 插入 HTML 代码 中 ， 这 样 可 以 提高 其 可 读 性 ， 使 代码 更 易 被 人 理解 。 浏 
览 器 会 忽略 注释 ， 也 不 会 显示 它们 。 


注释 是 这 样 写 的 : 
实例 
<!-- This is a comment --> 


注释 : 开始 括号 之 后 (左边 的 括号 ) 需要 紧 跟 一 个 叹 号 ， 结 束 括 号 之 前 (AWA 


提示 : 合理 地 使 用 注释 可 以 对 未 来 的 代码 编辑 工作 产生 帮助 。 


HTML 提示 - 如 何 查看 源 代 码 


您 一 定 鲁 经 在 看 到 某 个 网 页 时 惊叹 道 “WOW! 这 是 如 何 实现 的 ?? 
如 果 您 想 找到 其 中 的 奥秘 ， 只 需要 单 击 右键 ， 然 后 选择 “查看 源 文件 ”(IE) 或 “查看 


页 面 源 代码 ”(Firefox) ， 其 他 浏览 器 的 做 法 也 是 类 似 的。 这 么 做 会 打开 一 个 包含 页 
面 HTML 代码 的 窗口 。 


来 目 本 页 的 实例 


标题 
隐藏 的 注释 
水 平 线 


HTML 标签 参考 手册 


W3School 的 标签 参考 手册 提供 了 有 关 这 些 标题 及 其 属性 的 更 多 信息 。 
您 将 在 本 教程 下 面 的 章节 中 学 到 更 多 有 关 HTML 标签 和 属性 的 知识 。 


«html» 定义 HTML 文档 。 
<body> 定义 文档 的 主体 。 
<hi> to <h6> 定义 HTML 标题 
<hr> 定义 水 平 线 。 


slasa 定义 注释 。 


HTML 段落 


可 以 把 HTML 文档 分 割 为 若干 段落 。 


HTML 段落 


段落 是 通过 «p» 标签 定义 的 。 


<p>This is a paragraph</p> 
<p>This is another paragraph</p> 
注释 : 浏览 器 会 自动 地 在 段落 的 前 后 添加 空 行 。 (<p> 是 块 级 元 素 ) 
提示 : 使 用 空 的 段落 标记 <p></p> 去 插入 一 个 空 行 是 个 坏 习 惯 。 用 <br/> 标签 代 


ge! (但 是 不 要 用 <br/> 标签 去 创建 列表 。 不 要 着 急 ， 您 将 在 稍 后 的 篇 幅 学 习 到 
HTML 列表 。 ) 


不 要 忘记 结束 标签 
即使 忘 了 使 用 结束 标签 ， 大 多 数 浏 览 器 也 会 正确 地 将 HTML 显示 出 来 : 
实例 


<p>This is a paragraph 
<p>This is another paragraph 


上 面 的 例子 在 大 多 数 浏览 器 中 都 没 问 题 ， 但 不 要 依赖 这 种 做 法 。 忘 记 使 用 结束 标签 
会 产生 意 想 不 到 的 结果 和 错误 。 


注释 : 在 未 来 的 HTML 版 本 中 ， 不 允许 省 略 结束 标签 。 
提示 : 通过 结束 标签 来 关闭 HTML 是 一 种 经 得 起 未 来 考验 的 HTML 编写 方法 。 清 


楚 地 标记 某 个 元 素 在 何 处 开始 ， 并 在 何 处 结束 ， 不 论 对 您 还 是 对 浏览 器 来 说 ， 都 会 
使 代码 更 容易 理解 。 


HTML 折 行 


如 果 您 希望 在 不 产生 一 个 新 段落 的 情况 下 进行 换行 (新 行 ) ， 请 使 用 <br /> 标签 : 


<p>This is<br />a para<br />graph with line breaks</p> 


«br /> 元 素 是 一 个 空 的 HTML 元 素 。 由 于 关闭 标签 没有 任何 意义 ， 因 此 它 没有 结束 


<br> 还 是 <br /> 


您 也 许 发 现 <br> 与 <br /> 很 相似 。 


f£ XHTML, XML 以 及 未 来 的 HTML 版 本 中 ， 不 允许 使 用 没有 结束 标签 (闭合 标 
A) 的 HTML 元 素 。 


即使 <br> 在 所 有 浏览 器 中 的 显示 都 没有 问题 ， 使 用 <br /> 也 是 更 长 远 的 保障 。 


HTML 输出 - 有 用 的 提示 
我 们 无 法 确定 HTML 被 显示 的 确切 效果 。 屏 幕 的 大 小 ， 以 及 对 窗口 的 调整 都 可 能 
致 不 同 的 结果 。 


对 于 HTML， 您 无 法 通过 在 HTML 代码 中 添加 额外 的 空格 或 换行 来 改变 输出 的 效 
果 。 

当 显 示 页 面 时 ， 浏 览 器 会 移 除 源 代码 中 多 余 的 空格 和 空 行 。 所 有 连续 的 空格 或 空 行 
都 会 被 算 作 一 个 空格 。 需 要 注意 的 是 ，HTML 代码 中 的 所 有 连续 的 空 行 (换行) 也 
被 显示 为 一 个 空格 。 


(这 个 例子 演示 了 一 些 HTML 格式 化 方面 的 问题 ) 


来 目 本 页 的 实例 


HTML 段落 

换行 

在 HTML 代码 中 的 排版 一 首 唐 诗 
更 多 实例 

更 多 段落 

HTML 标签 参考 手册 


W3School 的 标签 参考 手册 提供 了 有 关 HTML 元 素 及 其 属性 的 更 多 信息 。 


W3School 前 端 教 程 合集 


<p> 


<br = 


HTML 段落 


定义 段落 。 
插入 单个 折 行 (换行 ) 。 
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HTML 文本 格式 化 


HTML 可 定义 很 多 供 格 式 化 输出 的 元 素 ， 比 如 粗 体 和 斜体 字 。 
下 面 有 很 多 例子 ， 您 可 以 亲自 试 试 : 


HTML 文本 格式 化 实例 
文本 格式 化 


&lt;html&gt; 

&lt;body&gt; 

&lt;b&gt;This text is bold&lt;/b&gt; 

&lt;br /&gt; 

&lt;strong&gt;This text is strong&lt;/strong&gt; 
&lt;br /&gt; 

&lt;big&gt;This text is big&lt;/big&gt; 
&lt;br /&gt; 

&lt;em&gt;This text is emphasized&lt;/em&gt; 
&lt;br /&gt; 

&lt;i&gt;This text is italic&lt;/i&gt; 

&lt;br /&gt; 

&lt;small&gt;This text is small&lt;/small&gt; 
&lt;br /&gt; 


This text contains 
&lt;sub&gt;subscript&lt;/sub&gt; 


&lt;br /&gt; 


This text contains 
&lt;sup&gt;superscript&lt;/sup&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


预 格式 文本 


&lt;html&gt; 
&lt;body&gt; 


&lt;pre&gt; 

这 是 

预 格式 文本 。 

它 保留 了 空格 
和 换行 。 
&lt;/pre&gt; 


&lt;p&gt;pre 标签 很 适合 显示 计算 机 代码 : &1lt;/pagt; 


&lt;pre&gt; 

for i- 1 to 10 
print i 

next i 

&lt;/pre&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


“计算 机 输出 ?标签 


&lt;html&gt; 
&lt;body&gt; 


&lt;code&gt;Computer code&lt;/code&gt; 
&lt;br /&gt; 

&lt;kbd&gt;Keyboard input&lt;/kbd&gt; 
&lt;br /&gt; 

&lt;tt&gt;Teletype text&lt;/tt&gt; 
&lt;br /&gt; 

&lt;samp&gt;Sample text&lt;/samp&gt; 
&lt;br /&gt; 

&lt;var&gt;Computer variable&lt;/var&gt; 
&lt;br /&gt; 


&lt;p&gt; 

&1t ; b&gt ;注释 : &1lt;/b&gt; 这 些 标签 常用 于 显示 计算 机 /编程 代码 。 
&lt;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


地 址 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;address&gt; 

Written by &lt;a href="mailto:webmaster@example.com"&gt;Donald Ducl 
Visit us at:&lt;br&gt; 

Example.com&lt;br&gt; 

Box 564, Disneyland&lt;br&gt; 

USA 

&lt;/address&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





&lt;html&gt; 

&lt;body&gt; 

&lt;abbr title-"etcetera"&gt;etc.&lt;/abbr&gt; 

&lt;br /&gt; 

&lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; 
&lt;p&gt; 在 某 些 浏览 器 中 ， 当 您 把 鼠标 移 至 缩 略 词语 上 时 ，tit1e 可 用 于 展示 表达 的 完 
&1t;p&gt; 仅 对 于 IE 5 中 的 acronym TRAM. &lt;/p&gt; 


&lt;p&gt; 对 于 Netscape 6.2 中 的 abbr 和 acronym 元 素 都 有 效 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





&lt;html&gt; 

&lt;body&gt; 

&lt;abbr title-"etcetera"&gt;etc.&lt;/abbr&gt; 

&lt;br /&gt; 

&lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; 
&lt;p&gt; 在 某 些 浏览 器 中 ， 当 您 把 鼠标 移 至 缩 略 词语 上 时 ，tit1le 可 用 于 展示 表达 的 完 
&1t;p&gt; 仅 对 于 IE 5 中 的 acronym TRAM. &lt;/p&gt; 

&lt;p&gt; 对 于 Netscape 6.2 中 的 abbr 和 acronym 元 素 都 有 效 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


H|rrcfcoac ———— — 1 
块 引用 





&lt;html&gt; 
&lt;body&gt; 


这 是 长 的 引用 : 

&lt;blockquote&gt; 

这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引 
&lt;/blockquote&gt; 


这 是 短 的 引用 : 
&lt;q&gt; 
这 是 短 的 引用 。 
&lt;/q&gt; 


&lt;p&gt; 
使 用 blockquote 元 素 的 话 ， 浏 览 器 会 插入 换行 和 外 边 距 ， 而 q 元 素 不 会 有 任何 特殊 的 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


E Een 
删除 字 效 果 和 插入 字 效 果 





&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt;—1]83 &lt;del&gt; —T&lt;/del&gt; &lt;ins&gt;-d-—&lt;/ins&gc 
&lt;p&gt; 大 多 数 浏 览 器 会 改写 为 删除 文本 和 下 划 线 文本 。&1lt;/p&gt ; 

&lt;p&gt ;一 些 老式 的 浏览 器 会 把 删除 文本 和 下 划 线 文本 显示 为 普通 文本 。&1Lt;/p&gt 


&lt;/body&gt; 
&lt;/html&gt; 


LLL — HB 





如 何 查 看 HTML 源码 

有 过 交 样 的 经 历 ， 当 你 看 到 一 个 很 棒 的 站 点 ， 你 会 很 相知 首开 发 人 员 是 如 人 
? 

你 有 没有 看 过 一 些 网 页 ， 并 且 想 知道 它 是 如 何 做 出 来 的 呢 ? 


要 揭示 一 个 网 站 的 技术 秘密 ， 其 实 很 简单 。 单 击 浏览 器 的 “查看 菜单， 选择 “查看 源 
文件 " 即 可 。 随 后 你 会 看 到 一 个 弹出 的 窗口 ， 窗 口内 就 是 实际 的 HTML 代码 。 


文本 格式 化 标签 


标签 描述 

<b> 定义 粗 体 文本 。 

<big> ELAS Fo 

<em> 定义 着 重文 字 。 

<i> 定义 斜体 字 。 

«small» 定义 小 号 字 。 

<strong> 定义 加 重 语气 。 

<sub> 定义 下 标 字 。 

<Sup> ELL. 

<ins> 定义 插入 字 。 

<del> 定义 删除 字 。 

<S> 不 赞成 使 用 。 使 用 «del» RE. 

<strike> 不 赞成 使 用 。 使 用 «del» RE., 

<U> 不 赞成 使 用 。 使 用 样式 (style) RË. 
“计算 机 输出 ”标签 

<code> 定义 计算 机 代码 。 

<kbd> 定义 键盘 码 。 

<Samp> 定义 计算 机 代码 样本 。 

ET 定义 打字 机 代码 。 

<var> 定义 变量 。 

<pre> 定义 预 格 式 文本 。 

<listing> 不 赞成 使 用 。 使 用 «pre» RE. 

<plaintext> 不 赞成 使 用 。 使 用 <pre> RE. 

<xmp> 不 赞成 使 用 。 使 用 «pre» RE. 


引用 、 引 用 和 术语 定义 


W3School 前 端 教程 合集 


标签 
<abbr> 
<acronym> 
<address> 
<bdo> 
<blockquote> 
<q> 
<cite> 


<dfn> 


延伸 阅读 : 
改变 文本 的 外 观 和 含义 


HTML 文本 格式 化 


义 长 的 引用 。 

义 短 的 引用 语 。 
义 引 用 、 引 证 。 
义 一 个 定义 项 目 。 


a at at RP BR Bb Bb nb 
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HTML 2 #4 a5 


使 用 Notepad 或 TextEdit 来 编写 HTML 


可 以 使 用 专业 的 HTML 编辑 器 来 编辑 HTML : 


e Adobe Dreamweaver 
e Microsoft Expression Web 
e CoffeeCup HTML Editor 


不 过 ， 我 们 同时 推荐 使 用 文本 编辑 器 来 学 习 HTML， 比 如 Notepad (PC) 或 
TextEdit (Mac)。 我 们 相信 ， 使 用 一 款 简单 的 文本 编辑 器 是 学 习 HTML 的 好 方法 。 


通过 记事 本 ， 依 照 以 下 四 步 来 创建 您 的 第 一 张 网 页 。 


步骤 一 : 启动 记事 本 


如 何 启 动 记事 本 : 
开始 

所 有 程序 

附件 

记事 本 


步骤 二 : 用 记事 本 来 编辑 HTML 


在 记事 本 中 键入 HTML 代码 : 


P 无 标题 - 记事 本 -lo| x} 
THE 编辑 EE) EEO BBW HRY 


«IDOCTYPE HTML» 
«html» 
«body» 


<h1> 我 的 第 一 个 标题 </h1> 
<p> 我 的 第 一 个 段落 。</p> 


</body> 
</html> 





Jk — : 保存 HTML 


在 记事 本 的 文件 菜单 选择 "另存 为 "。 


当 您 保存 HTML 文件 时 ， 既 可 以 使 用 .htm 也 可 以 使 用 htm 扩展 名 。 两 者 没有 区 
别 ， 完 全 根据 您 的 喜好 。 


在 一 个 容易 记忆 的 文件 夹 中 保存 这 个 文件 ， 上 比如 w3school。 


步骤 四 : 在 浏览 器 中 运行 这 个 HTML 文件 


启动 您 的 浏览 器 ， 然 后 选择 "文件 ”菜单 的 “打开 文件 " 命 伟 ， 或 者 直接 在 文件 夹 中 双击 
您 的 HTML 文件 。 


结果 应 该 类 似 这 样 : 





E: dL Windows Internet Explorer: - [Bl x} 
AEA Y [@e: \w3school\test.html -| *$| X [i 


P dir {Æ E: w3schooltest.html | 


我 的 第 一 个 标题 


我 的 第 一 个 段落 。 





HTML CSS 


rarest HTML4.0， 所 有 的 格式 化 代码 均 可 移出 HTML 文档 ， 然 后 移入 一 个 独立 
的 样式 o 


实例 


HTML 中 的 样式 


&lt;html&gt; 


&lt;head&gt; 

&lt;style type="text/css"&gt; 
h1 (color: red) 

p (color: blue) 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;hi&gt;header 1&1t;/hi&gt; 
&lt;p&gt;A paragraph.&lt;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


没有 下 划 线 的 链接 


到 


&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv-"Content-Language" content-"zh-cn" /&gt; 
&lt;/head&gt; 


&lt;body&gt; 
&lt;a hrefz"/example/html/lastpage.html" style="text-decoration:nor 
这 是 一 个 链接 ! 


&lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 











链接 到 一 个 外 部 样式 表 


&lt;html&gt; 

&lt;head&gt; 

&lt;link rel="stylesheet" type="text/css" hrefz'"/html/csstesti.css' 
&lt;/head&gt; 

&lt;body&gt; 

&1t ;hi&gt ;我 通过 外 部 样式 表 进 行 格式 化 。&1t; /hi&gt， 

&lt;p&gt;$Xt&—3£ ! &1t;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


SE 


如 何 使 用 样式 


当 浏 览 器 读 到 一 个 样式 表 ， 它 就 会 按照 这 个 样式 表 来 对 文档 进行 格式 化 。 有 以 下 三 
种 方式 来 插入 样式 表 : 


外 部 样式 表 


当 样 式 需 要 被 应 用 到 很 多 页 面 的 时 候 ， 外 部 样式 表 将 是 理想 的 选择 。 使 用 外 部 样式 
表 ， 你 就 可 以 通过 更 改 一 个 文件 来 改变 整个 站 点 的 外 观 。 





<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 


内 部 样式 表 


当 单 个 文件 需要 特别 样式 时 ， 就 可 以 使 用 内 部 样式 表 。 你 可 以 在 head 部 分 通过 
<style> 标签 定义 内 部 样式 表 。 


<head> 


<style type="text/css"> 

body {background-color: red} 
p {margin-left: 20px} 
</style> 

</head> 


内 联 样式 


当 特殊 的 样式 需要 应 用 到 个 别 元 素 时 ， 就 可 以 使 用 内 联 样 式 。 使 用 内 联 样式 的 方法 
是 在 相关 的 标签 中 使 用 样式 属性 。 样 式 属性 可 以 包含 任何 CSS 属性 。 以 下 实例 显 
示 出 如 何 改变 段落 的 颜色 和 左 外 边 距 。 


<p style="color: red; margin-left: 20px"> 
This is a paragraph 
</p> 


访问 我 们 的 CSS 教程 ， 学 习 更 多 有 关 样 式 的 知识 。 


<style> 定义 样式 定义 。 

<link> 定义 资源 引用 。 

<div> 定义 文档 中 的 节 或 区 域 ( 块 级 ) 。 

<span> 定义 文档 中 的 行内 的 小 块 或 区 域 。 

pomme: 规定 文本 的 字体 、 字 体 尺 寸 、 字 体 颜 色 。 不 赞成 使 用 。 请 使 
用 样式 。 


<basefont> 定义 基准 字体 。 不 赞成 使 用 。 请 使 用 样式 。 
<center> 对 文本 进行 水 平 居中 。 不 赞成 使 用 。 请 使 用 样式 。 


HTML 链接 


HTML 使 用 超级 链接 与 网 络 上 的 另 一 个 文档 相连 。 
几乎 可 以 在 所 有 的 网 页 中 找到 链接 。 点 击 链接 可 以 从 一 张 页 面 跳 转 到 另 一 张 页 面 。 


实例 
创建 超级 链接 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 
&lt;a href="/index.html"&gt; 本 文本 &1lt;/a&gt; 是 一 个 指向 本 网 站 中 的 一 个 页 


&lt;p&gt;&lt;a href="http://www.microsoft.com/"&gt; 本 文本 &lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


a] _ E 
将 图 像 作为 链接 





&lt;html&gt; 


&lt;body&gt; 

&lt;p&gt; 

您 也 可 以 使 用 图 像 来 作 链 接 : 

&lt;a hrefz"/example/html/lastpage.html"&gt; 
&lt;img border="0" srcz"/i/eg buttonnext.gif" /&gt; 
&lt;/a&gt; 

&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


(可 以 在 本 页 底 端 找到 更 多 实例 ) 


HTML 超 链 接 (链接 ) 


超 链 接 可 以 是 一 个 字 ， 一 个 词 ， 或 者 一 组 词 ， 也 可 以 是 一 幅 图 像 ， 您 可 以 点 击 这 些 
内 容 来 跳 转 到 新 的 文档 或 者 当前 文档 中 的 某 个 部 分 。 


当 您 把 鼠标 指针 移动 到 网 页 中 的 某 个 链接 上 时 ， 箭 头 会 变 为 一 只 小 手 。 
我 们 通过 使 用 <a> 标签 在 HTML 中 创建 链接 。 
有 两 种 使 用 <a> 标签 的 方式 : 


1. 通过 使 用 href 属性 - 创建 指向 另 一 个 文档 的 链接 
2. 通过 使 用 name 属性 - 创建 文档 内 的 书签 


延伸 阅读 : 什么 是 超 文 本 ? 
HTML 链接 语法 
链接 的 HTML 代码 很 简单 。 它 类 似 这 样 : 
<a href="url">Link text</a> 
href 属性 规定 链接 的 目标 。 
开始 标签 和 结束 标签 之 间 的 文字 被 作为 超级 链接 来 显示 。 
实例 
头 


<a href="http://www.w3school.com.cn/">Visit W3School</a> 


上 面 这 行 代 码 显 示 为 Visit W3School 
点 击 这 个 超 链 接 会 把 用 户 带 到 W3School 的 首页 。 
提示 : "链接 文本 " 不 必 一 定 是 文本 。 图 片 或 其 他 HTML 元 素 都 可 以 成 为 链接 。 


HTML 链接 - target 属性 
使 用 Target 属性 ， 你 可 以 定义 被 链接 的 文档 在 何 处 显示 。 
下 面 的 这 行 会 在 新 窗口 打开 文档 : 


«a href="http://www.w3school.com.cn/" target="_blank">Visit W3Schoxc 


J 





HTML 链接 - name 属性 


name 属性 规定 锚 (anchor) 的 名 称 。 


您 可 以 使 用 name 属性 创建 HTML 页 面 中 的 书签 。 
书签 不 会 以 任何 特殊 方式 显示 ， 它 对 读者 是 不 可 见 的 。 
当 使 用 命名 锚 (named anchors) 时 ， 我 们 可 以 创建 直接 跳 至 该 命名 锚 (比如 页 面 


中 某 个 小 节 ) 的 链接 ， 这 样 使 用 者 就 无 需 不 停 地 滚动 页 面 来 寻找 他 们 需要 的 信息 
了 。 


命名 错 的 语法 : 
<a name="_label_">4§ (显示 在 页 面 上 的 文本 ) </a> 

提示 : 锚 的 名 称 可 以 是 任何 你 喜欢 的 名 字 。 

提示 : 您 可 以 使 用 id 属性 来 替代 name 属性 ， 命 名 锚 同 样 有 效 。 

实例 

头 

首先 ， 我 们 在 HTML 文档 中 对 锚 进 行 命 名 (创建 一 个 书签 ) 


<a name="tips"> 基 本 的 注意 事项 - 有 用 的 提示 </a> 


然后 ， 我 们 在 同一 个 文档 中 创建 指向 该 锚 的 链接 : 


<a href="#tips"> 有 用 的 提示 </a> 


您 也 可 以 在 其 他 页 面 中 创建 指向 该 锚 的 链接 : 


«a href="http://www.w3school.com.cn/htm1l/html_links.asp#tips">A FAB 


在 上 面 的 代码 中 ， 我 们 将 # 符号 和 锚 名 称 添加 到 URL. 的 末端 ， 就 可 以 直接 链接 到 
tips 这 个 命名 锚 了 。 


具体 效果 : 有 用 的 提示 


基本 的 注意 事项 - 有 用 的 提示 : 


注释 : 请 始终 将 正 斜 杠 添加 到 子 文件 夹 。 假 如 这 样 书写 链接 : 
href="http://www.w3school.com.cn/html"， 就 会 向 服务 器 产生 两 次 HTTP 请 求 。 这 
是 因为 服务 器 会 添加 正 斜 杠 到 这 个 地 址 ， 然 后 创建 一 个 新 的 请 求 ， 就 像 这 样 : 
href="http://www.w3school.com.cn/html/". 





提示 : 命名 锚 经 常用 于 在 大 型 文档 开始 位 置 上 创建 目录 。 可 以 为 每 个 章节 赋予 一 个 
命名 锚 ， 然 后 把 链接 到 这 些 锚 的 链接 放 到 文档 的 上 部 。 如 果 您 经 常 访 问 百度 百科 ， 
您 会 发 现 其 中 几乎 每 个 词 条 都 采用 这 样 的 导航 方式 。 

提示 : 假如 浏览 器 找 不 到 已 定义 的 命名 锚 ， 那 么 就 会 定位 到 文档 的 顶端 。 不 会 有 错 
误 发 生 。 


更 多 实例 
在 新 的 浏览 器 窗口 打开 链接 


&lt;html&gt; 
&lt;body&gt; 
&lt;a href="http://www.w3school.com.cn/" target="_blank"&gt;Visit V 
&lLt;p&gt; 如 果 把 链接 的 target 属性 设置 为 "_blank"， 该 链接 会 在 新 窗口 中 打开 。t 
&lt;/body&gt; 
&lt;/html&gt; 
iJ = 3 
链接 到 同一 个 页 面 的 不 同位 置 





&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt; 

&lt;a href="#C4"agt;4&4 Chapter 4, &lt;/a&gt; 
&lt;/p&gt; 


&lt;h2&gt;Chapter 1&1t;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 2&1t;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 3&lt;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;&lt;a name="C4"&gt;Chapter 4&1lt;/a&gt;&lt;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 5&lt;/h2&gt; 
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt; 


&lt;h2&gt;Chapter 6&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 7&lt;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 8&lt;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 9&lt;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 10&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 11&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 12&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 13&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 14&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 15&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 16&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;h2&gt;Chapter 17&1t;/h2&gt; 
&lt;p&gt;This chapter explains 


&lt;/body&gt; 
&lt;/html&gt; 


跳出 框架 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


ba 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


bla&lt;/p&gt; 


&lt;html&gt; 
&lt;body&gt; 
&lt;p&gt; RIERA T 99 ? &1t ; /p&gt ; 


&lt;a hrefz"/index.html" 
target-" top"&gt;j&m d x8 !&lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


创建 电子 邮件 链接 


&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt; 

这 是 邮件 链接 : 

&lt;a href="mailto:someone@microsoft.com?subject=Hello%20again"&gt , 
&lt;/p&gt; 

&lt;p&gt; 

&lt;bagt ;注意 : &1t;/b&gt; 应 该 使 用 920 来 替换 单词 之 间 的 空格 ， 这 样 浏览 器 就 可 上 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


sd = Be 
创建 电子 邮件 链接 2 





&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 

这 是 另 一 个 mailto 链接 : 

&lt;a hrefz"mailto:someoneQmicrosoft.com?cc-someoneelseQmicrosoft.: 
&lt;/p&gt; 


&lt;p&gt; 
&1t ; b&gt ;注意 : &Lt;/b&gt ;应 该 使 用 %20 来 替换 单词 之 间 的 空格 ， 这 样 浏览 器 就 可 上 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





HTML 链接 标签 
标签 描述 
<a> 定义 锚 。 


延伸 阅读 
什么 是 超 文本 ? 


HTML 图 像 


通过 使 用 HTML， 可 以 在 文档 中 显示 图 像 。 


实例 
Awe 


&1t;!DOCTYPE HTML&gt; 
&lt;html&gt; 


&lt;body&gt; 

&lt;p&gt; 

一 幅 图 像 : 

&lt;img src="/i/eg_mouse.jpg" width="128" height="128" /&gt; 
&lt;/p&gt; 

&lt;p&gt; 

一 幅 动画 图 像 : 

&lt;img srcz"/i/eg cute.gif" width="50" height="50" /&gt; 
&lt;/p&gt; 

&1t ; p&gt ;请 注意 ， 插 入 动画 图 像 的 语法 与 插入 普通 图 像 的 语法 没有 区 别 。&1t; /p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


SSS SSS SS Un] 
从 不 同 的 位 置 插入 图 片 


&lt;html&gt; 

&lt;body&gt; 

&lt;p&gt; 

来 自 另 一 个 文件 夹 的 图 像 : 

&lt;img src="/i/ct_netscape.jpg" /&gt; 
&lt;/p&gt; 

&lt;p&gt; 

来 自 w3School.com.cn 的 图 像 : 

&lt;img src="img/w3school_logo_white.gif" /&gt; 
&lt;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 

(可 以 在 本 页 底 端 找到 更 多 实例 。) 


Eua (<img>) 和 源 属 性 (Src) 
在 HTML 中 ， 图 像 由 <img> 标签 定义 。 
<img> 是 空 标签 ， 意 思 是 说 ， 它 只 包含 属性 ， 并 且 没 有 闭合 标签 。 


要 在 页 面 上 显示 图 像 ， 你 需要 使 用 源 属 性 (src) 。src 指 "source"。 源 属性 的 值 是 
图 像 的 URL 地 址 。 


定义 图 像 的 语法 是 : 


<img src="url" /> 


URL 指 存储 图 像 的 位 置 。 如 果 名 为 "boat.gif" 的 图 像 位 于 www.w3school.com.cn 的 
images 目录 中 ， 那 么 其 URL 为 http://www.w3school.com.cn/images/boat.gif。 


浏览 器 将 图 像 显 示 在 文档 中 图 像 标签 出 现 的 地 方 。 如 果 你 将 图 像 标签 置 于 两 个 段落 
之 间 ， 那 么 浏览 器 会 首先 显示 第 一 个 段落 ， 然 后 显示 图 片 ， 最 后 显示 第 二 段 。 


蔡 换 文本 属性 (Alt) 


alt 属性 用 来 为 图 像 定义 一 捉 预 备 的 可 替换 的 文本 。 蔡 换文 本 属性 的 值 是 用 户 定义 
的 。 


<img src="boat.gif" alt="Big Boat"> 


在 浏览 器 无 法 载 人 图 像 时 ， 蔡 换文 本 属性 告诉 读者 她 们 失去 的 信息 。 此 时 ， 浏 览 器 
将 显示 这 个 替代 性 的 文本 而 不 是 图 像 。 为 页 面 上 的 图 像 都 加 上 蔡 换 文本 属性 是 个 好 
人 dlte 
常 用 的 。 


基本 的 注意 事项 - 有 用 的 提示 : 
假如 某 个 HTML 文件 包含 十 个 图 像 ， 那 么 为 了 正确 显示 这 个 页 面 ， 需 要 加 载 11 个 
文件 。 加 载 图 片 是 需要 时 间 的 ， 所 以 我 们 的 建议 是 : BAA. 


<a id="more_examples"> 更 多 实例 </a> 
背景 图 片 


&lt;html&gt; 

&lt;body backgroundz"/i/eg background.jpg"&gt; 
&lt;h3&gt; ET &lt;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML HR. &lt;/p&gt; 
&lt;p&gt; 如 果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&1lLt;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


排列 图 片 


&lt;html&gt; 

&lt;body&gt; 

&1t ;h2&gt ;未 设置 对 齐 方式 的 图 像 : &1t;/h2&gt; 

&lt;p&gt; 图像 &lt;img src ="/i/eg_cute.gif"&gt; 在 文本 中 &lLt;/p&gt， 
&1t ;h2&gt ;已 设置 对 齐 方式 的 图 像 : &1t; /h2&gt; 

&1lt;pagt; 图像 &lt;img src="/i/eg_cute.gif" align="bottom"&gt; 在 文本 
&lt;pagt; 图像 &lt;img src ="/i/eg_cute.gif" align="middle"&gt; 在 文 ? 
&1lt;pa&gt; AiR &lt;img src ="/i/eg_cute.gif" align="top"&gt; 在 文本 中 t 


&1t ; p&gt ;请 注意 ，bottom 对 齐 方式 是 默认 的 对 齐 方式 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





浮动 图 像 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 

&lt;img src -"/i/eg cute.gif" align ="left"&gt; 

带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "left"。 图 像 将 浮动 到 文本 的 左 侧 。 
&lt;/p&gt; 


&lt;p&gt; 

&lt;img src ="/i/eg_cute.gif" align ="right"&gt; 

带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "right"。 图 像 将 浮动 到 文本 的 右 侧 。 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


LENNNNbóIóbóbRERERERSMbó LU 
调整 图 像 尺 十 


&lt;html&gt; 

&lt;body&gt; 

&lt;img src="/i/eg_mouse. jpg" width="50" height-z"50"&gt; 

&lt;br /&gt; 

&lt;img src="/i/eg_mouse. jpg" width="100" height-"100"&gt; 

&lt;br /&gt; 

&lt;img src="/i/eg_mouse. jpg" width="200" height-"200"&gt; 
&lt;p&gt,; 通 过 改变 img 标签 的 "height" 和 "width" 属性 的 值 ， 您 可 以 放大 或 缩 


&lt;/body&gt; 
&lt;/html&gt; 


ABA SERA 





&lt;html&gt; 

&lt;body&gt; 

&1t ;p&gt; 仅 支持 文本 的 浏览 器 无 法 显示 图 像 ， 仅 仅 能 够 显示 在 图 像 的 "alt"” 属性 中 指 ; 
&lLt;p&gt'; 请 注意 ， 如 果 您 把 鼠标 指针 移动 到 图 像 上 ， 大 多 数 浏 览 器 会 显示 "alt" MA, 
&lt;img src="/i/eg goleft ,gif'" alt=" 向 左 转 " /&gt; 
&lt;p&gt; 如 果 无 法 显示 图 像 ， 将 显示 "alt" 属性 中 的 文本 : &Lt;/p&gt ; 

&lt;img src-"/i/eg golefti23.gif" alt=" 向 左 转 " /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


LEE 
制作 图 像 链接 





&lt;html&gt; 


&lt;body&gt; 

&lt;p&gt; 

您 也 可 以 把 图 像 作为 链接 来 使 用 : 

&lt;a hrefz"/example/html/lastpage.html"&gt; 
&lt;img border="0" srcz"/i/eg buttonnext.gif" /&gt; 
&lt;/a&gt; 

&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


创建 图 像 映 射 


图 


&lt;html&gt; 
&lt;body&gt; 


&lLt;p&gt'; 请 点 击 图 像 上 的 星球 ， 把 它们 放大 。&1lLt;/p&gt， 


&lt;img 

srcz"/i/eg planets.jpg" 
border="0" usemap="#planetmap" 
alt="Planets" /&gt; 


&lt;map name="planetmap" id-"planetmap"&gt; 


&lt;area 

shape="circle" 
coords="180,139,14" 

href z"/example/html/venus.html" 
target ="_blank" 

alt="Venus" /&gt; 


&lt;area 

shape="circle" 

coords="129, 161,10" 

href z'"/example/html/mercur.html" 
target ="_blank" 

alt="Mercury" /&gt; 


&lt;area 

shape="rect" 
coords="0,0,110, 260" 

href ="/example/html/sun. html" 
target ="_blank" 

alt="Sun" /&gt; 


&lt;/map&gt; 


&1lt;p&gt;&lt;b&agt ; ER : &lt;/b&gt;img 元 素 中 的 "usemap" 属性 引用 map 7 


&lt;/body&gt; 
&lt;/html&gt; 





把 图 像 转 换 为 图 像 映 射 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 


&lt;body&gt; 

&lLt;p&gt; 请 把 鼠标 移动 到 图 像 上 ， 看 一 下 状态 栏 的 坐标 如 何 变化 。&1lLt;/p&gt; 
&lt;a hrefz"/example/html/html ismap.html"&gt; 

&lt;img src="/i/eg_planets.jpg" ismap /&gt; 

&lt;/a&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


图 像 标签 


<img> 定义 图 像 。 
<map> 定义 图 像 地 图 。 
<area> 定义 图 像 地 图 中 的 可 点 击 区 域 。 


</table> 


HTML 表格 


你 可 以 使 用 HTML 创建 表格 。 


实例 


表格 


&lt;html&gt; 
&lt;body&gt; 


&1t ; p&gt ;每 个 表格 由 table 标签 开始 。&1t;/p&gt， 
&1t ; p&gt ;每 个 表格 行 由 tr 标签 开始 。&1t;/p&gt，; 
&1t ; p&gt ;每 个 表格 数据 由 td 标签 开始 。&1t;/p&gt，; 


&lt;h4&gt; —3J : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt ;一 行 三 列 : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 

&lt;h4&gt; 两 行 三 列 : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&1t;/td&gt; 
&lt;td&gt;600&1lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表格 边框 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; 带 有 普通 的 边框 : &lt;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 带 有 粗 的 边框 : &lt;/h4&gt; 

&lt;table border="8"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 带 有 很 粗 的 边框 : &1t; /h4&gt; 

&lt;table border="15"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


(可 以 在 本 页 底 端 找到 更 多 实例 。) 


表格 


表格 由 <table> 标签 来 定义 。 每 个 表格 均 有 若干 行 ( 由 <tr> 标签 定义 ) ， 每 行 被 分 
割 为 若干 单元 格 (由 «td» 标签 定义 ) o FÈ td 指 表格 数据 (table data) ， 即 数据 
ed 数据 单元 格 可 以 包 仿 文本、 图片、 列表、 上 段落、 表单 、 水 平 线 、 表 


<table border="1"> 
<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 

</table> 


在 浏览 器 显示 如 下 : 
row 1, cell 1 row 1, cell 2 


row 2, cell 1 row 2, cell 2 


表格 和 边框 属性 
如 果 不 定义 边框 属性 ， 表 格 将 不 显示 边框 。 有 时 这 很 有 用 ， 但 是 大 多 数 时 候 ， 我 们 
希望 显示 边框 。 
使 用 边框 属性 来 显示 一 个 带 有 边框 的 表格 : 

<table border="1"> 

<tr> 

<td>Row 1, cell 1</td> 

<td>Row 1, cell 2</td> 


</tr> 
</table> 


表格 的 表 头 


表格 的 表 头 使 用 «th» 标签 进行 定义 。 
大 多 数 浏 览 器 会 把 表 头 显示 为 粗 体 居中 的 文本 : 


«table border="1"> 
<tr> 

<th>Heading</th> 
<th>Another Heading</th> 
</tr> 

<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 

</table> 


在 浏览 器 显示 如 下 : 


Heading Another Heading 
row 1, cell 1 row 1, cell 2 
row 2, cell 1 row 2, cell 2 


表格 中 的 空 单 元 格 


在 一 些 浏览 器 中 ， 没 有 内 容 的 表格 单元 显示 得 不 太 好 。 如 果 某 个 单元 格 是 空 的 ( 没 
有 内 容 ) ， 浏 览 器 可 能 无 法 显示 出 这 个 单元 格 的 边框 。 


<table border="1"> 
<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td></td> 

<td>row 2, cell 2</td> 
</tr> 

</table> 


浏览 器 可 能 会 这 样 显 示 : 





low 1, cell 1 row 1, cell 2 


row 2. cell 2 





注意 : 这 个 空 的 单元 格 的 边框 没有 被 显示 出 来 。 为 了 避免 这 种 情况 ， 在 空 单元 格 中 
添加 一 个 空格 占 位 符 ， 就 可 以 将 边框 显示 出 来 。 


<table border="1"> 
<tr> 

<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>&nbsp;</td> 
<td>row 2, cell 2</td> 
</tr> 

</table> 


在 浏览 器 中 显示 如 下 : 
row 1, cell 1 row 1, cell 2 


row 2, cell 2 


<a id2"more examples"» E Z & fjlj«/a» 


没有 边框 的 表格 


&lt;html&gt; 
&lt;body&gt; 


&1t ;h4agt ; 这 个 表格 没有 边框 : &1t;/h4agt; 

&lt;table&gt; 

&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&lt;/td&gt; 
&lt;td&gt;600&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 这 个 表格 也 没有 边框 : &lt;/h4&gt; 

&lt;table border="0"&gt; 

&lt;tr&gt; 

&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&1lt;/td&gt; 
&lt;td&gt;600&1lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表格 中 的 表 头 (Heading) 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;zAX : &1t;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 
&lt;th&gt;Zt£&lt;/th&gt; 
&lt;th&gt; &j£&lt;/th&gt; 
&lt;th&gt; &i£&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt ;垂直 的 表 头 : &1t;/h4&gt; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;th&gt;Zt£&lt;/th&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th&gt; &i£&lt;/th&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th&gt; &i$£&lt;/th&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


空 单元 格 


&lt;html&gt; 
&lt;body&gt; 


&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;td&gt;Some text&lt;/td&gt; 
&lt;td&gt;Some text&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;&lt;/td&gt; 
&lt;td&gt;Some text&lt;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&1t ;p&gt ;正如 您 看 到 的 ， 其 中 一 个 单元 没有 边框 。 这 是 因为 它 是 空 的 。 在 该 单元 中 插入 - 
&1t ; p&gt ;我 们 的 技巧 是 在 单元 中 插入 一 个 no-breaking 空格 。&1t;/p&gt; 

&lt;p&gt;no-breaking 空格 是 一 个 字符 实体 。 如 果 您 不 清楚 什么 是 字符 实体 ， 请 阅读 : 
&lt;p&gt;no-breaking 空格 由 和 号 开始 ("&" )， 然 后 是 字符 "nbsp"， 并 以 分 号 结尾 


&lt;/body&gt; 
&lt;/html&gt; 


加 Eee 
带 有 标题 的 表格 





&lt;html&gt; 
&lt;body&gt; 
&1t ;h4&gt ;这 个 表格 有 一 个 标题 ， 以 及 粗 边框 : &1t; /h4&gt; 


&lt;table border="6"&gt; 
&lt;caption&gt; KA t+ Malt ; /caption&gt; 
&lt;tr&gt; 
&lt;td&gt;100&1t;/td&gt; 
&lt;td&gt;200&1t;/td&gt; 
&lt;td&gt;300&1t;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;400&1t;/td&gt; 
&lt;td&gt;500&1lt;/td&gt; 
&lt;td&gt;600&1lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 


跨行 或 跨 列 的 表格 单元 格 
&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; 横 跨 两 列 的 单元 格 : &1t; /h4&gt ; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;th&gt;Jt£&lt;/th&gt; 
&lt;th colspan="2"&gt; $j;£&lt;/th&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&1t ; h4&gt ; 横 跨 两 行 的 单元 格 : &1t; /h4&gt ; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;th&gt;Zt£&lt;/th&gt; 
&lt;td&gt;Bill Gates&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th rowspanz"2"&gt; $;£&lt;/th&gt; 
&lt;td&gt;555 77 854&1t;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;555 77 855&1t;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表格 内 的 标签 


&lt;html&gt; 
&lt;body&gt; 


&lt;table border="1"&gt; 
&lt;tr&gt; 

&lt;td&gt; 
&lt;p&gt ;这 是 一 个 段落 。&lLt;/p&gt:; 
&1lt;p&gt ;这 是 另 一 个 段落 。&1t;/p&gt; 

&lt;/td&gt; 

&1t ;td&gt ;这 个 单元 包含 一 个 表格 : 
&lt;table border="1"&gt; 
&lt;tr&gt; 

&lt;td&gt;A&lt;/td&gt; 
&lt;td&gt;B&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;C&lt;/td&gt; 
&lt;td&gt;D&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 

&lt;/td&gt; 

&lt;/tr&gt; 
&lt;tr&gt; 

&lt ;td&gt ;这 个 单元 包含 一 个 列表 : 

&lt;ul&gt; 
&lt;li&gt;?75AR&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt;Xx$£&lt;/li&gt; 

&lt;/ul&gt; 

&lt;/td&gt; 

&lt;td&gt;HELLO&lt;/td&gt; 

&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


单元 格 边 距 (Cell padding) 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;jx8 cellpadding: &lt;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 

&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 8 cellpadding: &lt;/h4&gt; 

&lt;table borderz"1" 

cellpadding="10"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


单元 格 间距 (Cell spacing) 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;j&8 cellspacing : &lt;/h4&gt; 

&lt;table border="1"&gt; 

&lt;tr&gt; 

&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;h4&gt; 8 cellspacing: &lt;/h4&gt; 

&lt;table borderz"1" 

cellspacing-"10"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


向 表格 添加 背景 颜色 或 背景 图 像 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; ERME : &1t;/h4&gt; 
&lt;table borderz"1" 
bgcolor="red"&gt; 

&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&1t ;h4&gt ;背景 图 像 : &1t;/h4&gt; 
&lt;table border="1" 
background="/i/eg_bg_07.gif"&gt; 
&lt;tr&gt; 
&lt;td&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


向 表格 单元 添加 背景 颜色 或 者 背景 图 像 


&lt;html&gt; 
&lt;body&gt; 


&lt;ih4&gt ;单元 背景 : &1t;/h4&gt; 
&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;td bgcolor="red"&gt;First&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td 
backgroundz"/i/eg bg 07.gif'&gt; 
Second&lt;/td&gt; 
&lt;td&gt;Row&lt;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


在 表格 单元 中 排列 内 容 


&lt;html&gt; 
&lt;body&gt; 


&lt; table width="400" border="1"&gt; 
&lt;tr&gt; 
&lt;th align-"left"&gt;B€4E....&lt;/th&gt; 
&lt;th align-"right"&gt; —H&lt;/th&gt; 
&lt;th align-"right"&gt; —H&lt;/th&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td align="left"&gt ; KAR&1t;/td&gt; 
&lt;td align="right"&gt;$241.10&1t;/td&gt; 
&lt;td align="right"&gt;$50.20&1t;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td align="left"&gt; 化 妆 品 &lt;/td&gt; 
&lt;td align="right"&gt;$30.00&1t;/td&gt; 
&lt;td align="right"&gt;$44.45&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td align-"left"&gt; BW&lt;/td&gt; 
&lt;td align="right"&gt;$730.40&1t;/td&gt; 
&lt;td align="right"&gt;$650.00&1t; /td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th align="left"&gt; &it&lt;/th&gt; 
&lt;th align-"right"&gt;$1001.50&1lt;/th&gt; 
&lt;th align="right"&gt;$744.65&1t;/th&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


框架 (frame) 属 性 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt;&lt;b&gt;Est: &lt;/b&gt;frame 属性 无 法 在 Internet Explorer 


&lt;p&gt;Table with frame-z'box':&lt;/p&gt; 
&lt;table frame="box"&gt; 
&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&1t;/td&gt; 


&lt;/tr&gt; 
&lt;/table&gt; 


&lt;p&gt;Table with frame-z"above":&lt;/p&gt; 
&lt;table frame="above"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;p&gt;Table with frame-z"below":&lt;/p&gt; 
&lt;table frame="below"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;p&gt;Table with frame="hsides":&lt;/p&gt; 
&lt;table frame="hsides"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;p&gt;Table with frame="vsides":&lt;/p&gt; 
&lt;table frame="vsides"&gt; 

&lt;tr&gt; 
&lt;th&gt;Month&lt;/th&gt; 
&lt;th&gt;Savings&lt;/th&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 
&lt;td&gt;January&lt;/td&gt; 
&lt;td&gt;$100&1t;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


二 B 


表格 标签 


表格 


<table> 
<caption> 
<th> 

SENS 

<td> 
<thead> 
<tbody> 
<tfoot> 
<col> 


<colgroup> 





Br 
EH 


定义 表格 

定义 表格 标题 。 

定义 表格 的 表 头 。 

定义 表格 的 行 。 

定义 表格 单元 。 

定义 表格 的 页 眉 。 

定义 表格 的 主体 。 

定义 表格 的 页 脚 。 

定义 用 于 表格 列 的 属性 。 
定义 表格 列 的 组 。 


HTML 列表 


HTML 支持 有 序 、 无 序 和 定义 列表 


实例 
无 序列 表 


&lt;html&gt; 
&lt;body&gt; 


&1t ;h4&gt ;一 个 无 序列 表 : &1t; /h4&gt ; 
&lt;ul&gt; 
&lt;li&gt;UWüBE&lt;/li&gt; 
&lt;li&gt;zk&lt;/li&gt; 
&lt;li&gt;4/FiD&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


有 序列 表 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;ol&gt; 
&lt;li&gt;UWüNEelt;/li&gt; 
&lt;li&gt;/FiD&lt;/li&gt; 
&lt;li&gt;zk&lt;/li&gt; 

&lt;/ol&gt; 


&lt;ol start="50"&gt; 
&lt;li&gt;UWüNE&lt;/li&gt; 
&lt;li&gt;4/FiD&lt;/li&gt; 
&lt;li&gt;zk&lt;/li&gt; 

&lt;/ol&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


(可 以 在 本 页 底 端 找 到 更 多 实例 。) 


无 序列 表 


无 序列 表 是 一 个 项 目的 列表 ， 此 列 项 目 使 用 粗 体 圆 点 (典型 的 小 黑 圆 图 ) 进行 标 


无 序列 表 始 于 <ul> 标签 。 每 个 列表 项 始 于 <li>。 


<ul> 
«li»Coffee«/li» 
<]1i>Milk</1li> 
</ul> 


浏览 器 显示 如 下 : 


e Coffee 
e Milk 


列表 项 内 部 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 等 。 


有 序列 表 


同样 ， 有 序列 表 也 是 一 列 项 目 ， 列 表 项 目 使 用 数字 进行 标记 。 
有 序列 表 始 于 <ol> 标签 。 每 个 列表 项 始 于 <li> 标签 。 


<ol> 
<li>Coffee</1li> 


<li>Milk</li> 
</ol> 


浏览 器 显示 如 下 : 


1. Coffee 
2. Milk 


列表 项 内 部 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 等 。 


定义 列表 
自 定 义 列表 不 仅仅 是 一 列 项 目 ， 而 是 项 目 及 其 注释 的 组 合 。 


自 定义 列表 以 «dl» 标签 开始 。 每 个 自 定义 列表 项 以 «dt» 开始 。 每 个 自 定义 列表 项 
的 定义 以 <dd> 开始 。 


«dl» 

<dt>Coffee</dt> 

<dd>Black hot drink</dd> 
<dt>Milk</dt> 

<dd>white cold drink</dd> 
«/dl» 


浏览 器 显示 如 下 : 

Coffee 

Milk 

定义 列表 的 列表 项 内 部 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 等 。 


<a id2"more _ examples"> 更 多 实例 </a> 
不 同类 型 的 无 序列 表 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt;Disc 项 目 符号 列表 : &1t;/h4&gt; 
&lt;ul type="disc"&gt; 
&lt;li&gt; BR&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Hfx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ul&gt; 


&lt;h4&gt;Circle 项 目 符号 列表 : &lt;/h4&gt; 
&lt;ul type="circle"&gt; 
&lt; li&gt; ®R&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; alt; /li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ul&gt; 


&lt;h4&gt;Square 项 目 符号 列表 : &lt;/h4&gt; 
&lt;ul type-"square"&gt; 
&lt;li&gt;?75R&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; HTx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


不 同类 型 的 有 序列 表 


&lt;html&gt; 
&lt;body&gt; 


&lt;ih4&gt ;数字 列表 : &1t;/h4&gt; 
&lt;ol&gt; 
&lt; li&gt; BR&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; 柠檬 &1lt;/1i&gt，; 
&]lt ;1i&gt ;桂子 &1lt;/1li&gt，; 
&lt;/ol&gt; 


&1t ;h4&gt ;字母 列表 : &1t;/h4&gt; 
&lt;ol type="A"&gt; 
&lt; li&gt; ®R&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Htx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&1t ;h4&gt ;小 写字 母 列表 : &1t;/h4&gt; 
&lt;ol type="a"&gt; 
&lt; li&gt; BR&1t;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; alt; /li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&1lt;ih4&gt ;罗马 字母 列表 : &1t; /h4&gt ; 
&lt;ol type="I"&gt; 
&lt;li&gt;?75R&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Hx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&lt;h4&gt;/ VE Y E FHIR : &1t; /h4&gt ; 
&lt;ol type="i"&gt; 
&lt;li&gt;?75R&lt;/li&gt; 
&lt;li&gt; &f&&lt;/li&gt; 
&lt;li&gt; Hx&lt;/li&gt; 
&lt;li&gt;fá-f&lt;/li&gt; 
&lt;/ol&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


PRE IIR 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; —T ERE : &1t; /h4&gt; 
&lt;ul&gt; 
&lt;li&gt;UWüBE&lt;/li&gt; 
&lt;liagt;# 
&lt;ul&gt; 
&lt;li&gt;2rz&&lt;/li&gt; 
&lt;li&gt;kzk&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li&gt;4/FiD&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


BREJK 2 


&lt;html&gt; 
&lt;body&gt; 


&lt;h4&gt; —T ERE : &1t; /h4&gt ; 
&lt;ul&gt; 
&lt;li&gt;UWüBE&lt;/li&gt; 
&1lt;li&gt;# 
&lt;ul&gt; 
&lt;li&gt;2r2&&lt;/li&gt; 
&1t ;li&gt ;绿茶 
&lt;ul&gt; 
&lt;li&gt;rhBElz&lt;/li&gt; 
&1t ;1i&gt ;非洲 茶 &1t;/1li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li&gt;/FiD&lt;/li&gt; 
&lt;/ul&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


定义 列表 


&lt;html&gt; 
&lt;body&gt; 


&1t ;h2&gt ;一 个 定义 列表 : &1t; /h2&gt; 


&lt;dl&gt; 
&lt;dtagt;i+Aplalt;/dt&agt; 
&1t ; dd&gt ;用 来 计算 的 仪器 ... ...&lt;/ddagt; 
&lt;dt&gt; z28&lt;/dt&gt; 
&1t; dd&gt ;以 视觉 方式 显示 信息 的 装置 ... ...&lt;/dd&gt; 
&lt;/dl&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


列表 标签 


标签 描述 
<ol> 定义 有 序列 表 。 
<ul> 定义 无 序列 表 。 
<li> 定义 列表 项 。 
«dl» 定义 定义 列表 。 
<dt> 定义 定义 项 目 。 
<dd> 定义 定义 的 描述 。 
<dir> m 
CRF. (A 


a KBE 
o 


HTML <div> 和 <span> 


可 以 通过 <div> 和 <span> 将 HTML 元 素 组 合 起 来 。 


HTML 块 元 素 


大 多 数 HTML 元 素 被 定义 为 块 级 元 素 或 内 联 元 素 。 

编者 注 :“ 块 级 元 素 ” 译 为 block level element, “内 联 元 素 " 译 为 inline element. 
块 级 元 素 在 浏览 器 显示 时 ， 通 常会 以 新 行 来 开始 (和 结束 ) 。 

例子 : <h1>, <p>, <ul>, <table> 


HTML 内 联 元 素 


内 联 元 素 在 显示 时 通常 不 会 以 新 行 开 始 。 


例子 : <b>, <td>, <a>, <img> 


HTML <div> 元 素 


HTML <div> 元 素 是 块 级 元 素 ， 它 是 可 用 于 组 合 其 他 HTML 元 素 的 容器 。 


<div> 元 素 没 有 特定 的 含义 。 除 此 之 外 ， 由 于 它 属于 块 级 元 素 ， 浏 览 器 会 在 其 前 后 
显示 折 行 。 


如 果 和 与 CSS 一 同 使 用 ，<div> 元 素 可 用 于 对 大 的 内 容 块 设 置 样式 属性 。 


<div> 元 素 的 另 一 个 常见 的 用 途 是 文档 布局 。 它 取代 了 使 用 表格 定义 布局 的 老式 方 
法 。 使 用 <table> 元 素 进行 文档 布局 不 是 表格 的 正确 用 法 。<table> 元 素 的 作用 是 
显示 表格 化 的 数据 。 


HTML <span> 元 素 


HTML <span> 元 素 是 内 联 元 素 ， 可 用 作文 本 的 容器 。 
<span> 元 素 也 没有 特定 的 含义 。 
当 与 CSS 一 同 使 用 时 ，<span> 元 素 可 用 于 为 部 分 文本 设置 样式 属性 。 


HTML 分 组 标签 


W3School 前 端 教程 合集 


标签 描述 
<div> 定义 文档 中 的 分 区 或 节 (division/section) 。 
<span> 定义 span， 用 来 组 合 文档 中 的 行内 元 素 。 


HTML <div> 和 <span> 104 


HTML 布局 


网 页 布局 对 改善 网 站 的 外 观 非 常 重 要 。 
请 慎重 设计 您 的 网 页 布局 。 


亲自 试 一 试 - 实例 
使 用 <div> 元 素 的 网 页 布局 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

div#container {width: 500px} 

div#header {background-color :#99bbbb; } 

div#menu {background-color :#ffff99; height :200px;width:150px; float:- 
div#content {background-color :#EEEEEE; height : 200px; width: 350px; flog 
div#footer {background-color :#99bbbb;clear:both;text-align:center;_ 
hi {margin-bottom:0; } 

h2 (margin-bottom:0;font-size:18px;) 

ul {margin:0;} 

li (list-style:none;) 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 
&lt;div id="container"&gt; 


&lt;div id-"header"&gt; 
&lt;hi1&gt;Main Title of Web Page&lt;/hi&gt; 
&lt;/div&gt; 


&lt;div id="menu"&gt; 
&lt;h2&gt;Menu&lt;/h2&gt; 
&lt;ul&gt; 
&lt;li&gt;HTML&lt;/li&gt; 
&lt;li&gt;CSS&lt;/li&gt; 
&lt;li&gt;JavaScript&lt;/li&gt; 
&lt;/ul&gt; 

&lt;/div&gt; 


&lt;div id="content"&gt;Content goes here&lt;/div&gt; 
&lt;div id="footer"&gt;Copyright W3School.com.cn&lt;/div&gt; 


&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





使 用 «table» 元 素 的 网 页 布局 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;table width="500" border="0"&gt; 

&lt;tr&gt; 

&lt;td colspan="2" style="background-color:#99bbbb; "&gt; 
&lt;hi1&gt;Main Title of Web Page&lt;/hi&gt; 

&lt;/td&gt; 

&lt;/tr&gt; 


&lt;tr valign="top"&gt; 

&lt;td style-"background-color:£Zzffff99;width:100px;text-align:top;' 
&lt;b&gt;Menu&lt;/b&gt;&lt;br /&gt; 

HTML&lt;br /&gt; 

CSS&lt;br /&gt; 

JavaScript 

&lt;/td&gt; 

&lt;td style-"background-color:ZEEEEEE;height:200px;width:400px;te; 
Content goes here&lt;/td&gt; 

&lt;/tr&gt; 

&lt;tr&gt; 

&lt;td colspan="2" style-z"background-color:zZ99bbbb;text-align:cent: 
Copyright W3School.com.cn&lt;/td&gt; 

&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 
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网 站 布局 


大 多 数 网 站 会 把 内 容 安排 到 多 个 列 中 (就 像 末 志 或 报纸 那样 ) 。 


可 以 使 用 <div> 或 者 <table> 元 素来 创建 多 列 。CSS 用 于 对 元 素 进 行 定位 ， 或 者 为 
页 面 创 建 背景 以 及 色彩 丰富 的 外 观 。 


提示 : 即使 可 以 使 用 HTML 表格 来 创建 漂亮 的 布局 ， 但 设计 表格 的 目的 是 呈现 表格 
化 数据 - 表格 不 是 布局 工具 | 





HTML 布局 - 使 用 <div> 元 素 


div 元 素 是 用 于 分 组 HTML 元 素 的 块 级 元 素 。 
下 面 的 例子 使 用 五 个 div 元 素来 创建 多 列 布局 : 


实例 


<!DOCTYPE html» 

«html» 

«head» 

«style type="text/css"> 

div#container {width: 500px} 

div#header {background-color :#99bbbb; } 

div#menu {background-color :#ffff99; height:200px; width:100px; flo: 
div#content {background-color:#EEEEEE; height:200px; width:400px; 1 
div#footer {background-color:#99bbbb; clear:both; text-align:cente! 
hi {margin-bottom:0; } 

h2 {margin-bottom:0; font-size:14px;} 

ul {margin:0;} 

li (list-style:none;) 

</style> 

</head> 


<body> 
«div id="container"> 


<div id="header"> 
<hi>Main Title of Web Page</h1> 
</div> 


<div id="menu"> 
<h2>Menu</h2> 

<ul> 

«li»HTML«/li» 
<l1i>CSS</1i> 
«li»JavaScript«/li» 
«/ul» 

«/div» 


«div id="content">Content goes here</div> 
«div id="footer">Copyright W3School.com.cn</div> 
</div> 


</body> 
</html> 


ES 9 衣 
上 面 的 HTML 代码 会 产生 如 下 结果 : 
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HTML 布局 - 使 用 表格 


使 用 HTML <table> 标签 是 创建 布局 的 一 种 简单 的 方式 。 


可 以 使 用 <div> sk «table» 元 素来 创建 多 列 。CSS 用 于 对 元 素 进 行 定位 ， 或 者 为 
页 面 创 建 背景 以 及 色彩 丰富 的 外 观 。 


提示 : 即使 可 以 使 用 HTML 表格 来 创建 漂亮 的 布局 ， 但 设计 表格 的 目的 是 呈现 表格 
化 数据 - 表格 不 是 布局 工具 | 
下 面 的 例子 使 用 三 行 两 列 的 表格 - 第 一 和 最 后 一 行使 用 colspan 属性 来 横 跨 两 列 : 


实例 
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<!DOCTYPE html» 
<html> 
<body> 


<table width="500" border="0"> 

<tr> 

«td colspan="2" style="background-color:#99bbbb; "> 
<hi>Main Title of Web Page</h1i> 

</td> 

</tr> 


<tr valign="top"> 

<td style="background-color:#ffff99;width:100px; text-align: top; "> 
<b>Menu</b><br /> 

HTML«br /> 

CSS<br /> 

JavaScript 

</td> 

<td style="background-color:#EEEEEE; height : 200px; width: 400px; text -« 
Content goes here</td> 

</tr> 


<tr> 

<td colspan="2" style="background-color:#99bbbb;text-align:center;' 
Copyright W3School.com.cn</td> 

</tr> 

</table> 


</body> 
</html> 


A 





上 面 的 HTML 代码 会 产生 以 下 结果 : 





Content goes here 
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HTML 布局 - 有 用 的 提示 


提示 : 使 用 CSS 最 大 的 好 处 是 ， 如 果 把 CSS 代码 存放 到 外 部 祥 式 表 中 ， 那 么 站 点 
会 更 易于 维护 。 通 过 编辑 单一 的 文件 ， 就 可 以 改变 所 有 页 面 的 布局 。 如 需 学 习 更 多 
有 关 CSS 的 知识 ， 请 访问 我 们 的 CSS 教程 。 


提示 : 由 于 创建 高 级 的 布局 非常 耗 时 ， 使 用 模板 是 一 个 快速 的 选项 。 通 过 搜索 引擎 
可 以 找到 很 多 免费 的 网 站 模板 (您 可 以 使 用 这 些 预先 构建 好 的 网 站 布局 ， 并 优化 它 
们 ) 。 


HTML 布局 标签 
<div> 定义 文档 中 的 分 区 或 节 (division/section) 。 


<Span> 定义 span， 用 来 组 合 文档 中 的 行内 元 素 。 


HTML 表单 和 输入 


HTML 表单 用 于 搜集 不 同类 型 的 用 户 输入 。 


实例 
文本 域 (Text field) 


&lt;html&gt; 
&lt;body&gt; 
&lt;form&gt; 
名 : 


&lt; input type="text" name="firstname"&gt; 
&lt;br /&gt; 

WE: 

&lt;input type="text" name-"lastname"&gt; 
&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


密码 域 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

REJE E 

&lt;input type="text" name="user"&gt; 

&lt;br /&gt; 

密码 : 

&lt;input type="password" name="password"&gt; 
&lt;/form&gt; 

&lt;p&gt; 

请 注意 ， 当 您 在 密码 域 中 键 人 字符 时 ， 浏 览 器 将 使 用 项 目 符 号 来 代替 这 些 字符 。 
&lt;/p&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


(可 以 在 本 页 底 端 找到 更 多 实例 。) 


表单 
表单 是 一 个 包含 表单 元 来 的 区 域 。 


表单 元 素 是 允许 用 户 在 表单 中 (比如 : 文本 域 、 下 拉 列 表 、 单 选 框 、 复 选 框 等 等 ) 
输入 信息 的 元 素 。 


表单 使 用 表单 标签 («form») 定义 。 


<form> 
input 元 素 
</form> 


输入 
多 数 情 况 下 被 用 到 的 表单 标签 是 输入 标签 (<input>) 。 输 入 类 型 是 由 类 型 属性 
(type) 定义 的 。 大 多 数 经 常 被 用 到 的 输入 类 型 如 下 : 


文本 域 (Text Fields) 
当 用 户 要 在 表单 中 键入 字母 、 数 字 等 内 容 时 ， 就 会 用 到 文本 域 。 


«form» 

First name: 

<input type="text" name="firstname" /> 
<br /> 

Last name: 

<input type="text" name="lastname" /> 
</form> 


浏览 器 显示 如 下 : 


First name: | Lastname:[ | ———- 
注意 ， 表 单 本 身 并 不 可 见 。 同 时 ， 在 大 多 数 浏 览 器 中 ， 文 本 域 的 缺 省 宽度 是 20 个 字 
符 。 


单 选 按钮 (Radio Buttons) 
当 用 户 从 若干 给 定 的 的 选择 中 选取 其 一 时 ， 就 会 用 到 单 选 框 。 


«form» 

<input type="radio" name="sex" value="male" /> Male 

<br /> 

<input type="radio" name="sex" value="female" /> Female 
</form> 


浏览 器 显示 如 下 : 


C Male c Female 
注意 ， 只 能 从 中 选取 其 一 。 


复 选 框 (Checkboxes) 
当 用 户 需 要 从 若干 给 定 的 选择 中 选取 一 个 或 若干 选项 时 ， 就 会 用 到 复 选 框 。 


<form> 

<input type="checkbox" name="bike" /> 
I have a bike 

<br /> 

<input type="checkbox" name="car" /> 
I have a car 

</form> 


浏览 器 显示 如 下 : 


[^ | have a bike © l| have a car 


表单 的 动作 属性 (Action) 和 确认 按钮 


当 用 户 单 击 确认 按钮 时 ， 表 单 的 内 容 会 被 传送 到 另 一 个 文件 。 表 单 的 动作 属性 定义 
了 目的 文件 的 文件 名 。 由 动作 属性 定义 的 这 个 文件 通常 会 对 接收 到 的 输入 数据 进行 
相关 的 处 理 。 


«form name="input" action="html_form_action.asp" method="get"> 
Username: 

<input type="text" name="user" /> 

<input type="submit" value="Submit" /> 

</form> 


浏览 器 显示 如 下 : 


Username: 一 一 一 Submit 


假如 您 在 上 面 的 文本 框 内 键 人 几 个 字母 ， 然 后 点 击 确认 按钮 ， 那 么 输入 数据 会 传送 
到 "html form action.asp" 的 页 面 。 该 页 面 将 显示 出 输入 的 结果 。 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

我 喜欢 自行 车 : 

&lt;input type="checkbox" name="Bike"&gt; 
&lt;br /&gt; 

我 喜欢 汽车 : 

&lt;input type="checkbox" name="Car"&gt; 
&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

男性 : 

&lt;input type="radio" checked="checked" name="Sex" value="male" /é 
&lt;br /&gt; 

女性 : 

&lt;input type="radio" name="Sex" value="female" /&gt; 
&lt;/form&gt; 


&lt;p&gt; 当 用 户 点 击 一 个 单 选 按钮 时 ， 该 按钮 会 变 为 选中 状态 ， 其 他 所 有 按钮 会 变 为 非 ; 


&lt;/body&gt; 
&lt;/html&gt; 


和 SS 和 = 
简单 的 下 拉 列表 





&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

&lt;select name="cars"&gt; 

&lt;option value-z'volvo"&gt;Volvo&lt;/option&gt; 
&lt;option value-"saab'&gt;Saab&lt;/option&gt; 
&lt;option value-z"fiat'"&gt;Fiat&lt;/option&gt; 
&lt;option value-"audi"&gt;Audi&lt;/option&gt; 
&lt;/select&gt; 

&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


另 一 个 下 拉 列 表 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 

&lt;select name="cars"&gt; 

&lt;option valuez'volvo"&gt;Volvo&lt;/option&gt; 

&lt;option value-"saab'&gt;Saab&lt;/option&gt; 

&lt;option value-"fiat" selected-"selected'&gt;Fiat&lt;/option&gt; 
&lt;option value-"audi"&gt;Audi&lt;/option&gt; 

&lt;/select&gt; 

&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


LEN 了 
文本 域 (Textareal) 


&lt;html&gt; 
&lt;body&gt; 


&lt;p&gt; 

This example cannot be edited 
because our editor uses a textarea 
for input, 

and your browser does not allow 

a textarea inside a textarea. 
&lt;/p&gt; 


&lt;textarea rows="10" cols="30"&gt; 
The cat was playing in the garden. 


创建 按钮 


&lt;html&gt; 
&lt;body&gt; 


&lt;form&gt; 
&lt;input type="button" value="Hello world!"&gt; 
&lt;/form&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


Fieldset around data 


&lt; 'DOCTYPE HTML&gt; 
&lt;html&gt; 


&lt;body&gt; 


&lt;form&gt; 
&lt;fieldset&gt; 
&lt; legend&gt ;健康 信息 &1lt;/legend&gt; 
身高 : &lt;input type="text" /&gt; 
体重 :&lLt;input type="text" /&gt; 
&lt;/fieldset&gt; 
&lt;/form&gt; 


&lt;p&gt; 如 果 表 单 周 围 没有 边框 ， 说 明 您 的 浏览 器 太 老 了 。&1t; /p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


表单 实例 

带 有 输入 框 和 确认 按钮 的 表单 
&lt;html&gt; 
&lt;body&gt; 


&lt;form action-z"/example/html/form action.asp" method="get"&gt; 
&lt;p&gt;First name: &lt;input type="text" name="fname" /&gt;&lt, 
&lt;p&gt;Last name: &lt;input type="text" name-"lname" /&gt;&lt;, 
&lt;input type="submit" value="Submit" /&gt; 

&lt;/form&gt; 


&lt; p&gt ;请 单 击 确认 按钮 ， 输 入 会 发 送 到 服务 器 上 名 为 "form_action.asp" 的 页 面 


&lt;/body&gt; 
&lt;/html&gt; 


boo s 
带 有 复 选 框 的 表单 





&lt;html&gt; 
&lt;body&gt; 


&lt;form name="input" action-z"/html/html form action.asp" method="( 
I have a bike: 

&lt;input type="checkbox" name="vehicle" value="Bike" checked="chec 
&lt;br /&gt; 

I have a car: 

&lt;input type="checkbox" name="vehicle" value="Car" /&gt; 

&lt;br /&gt; 

I have an airplane: 

&lt;input type="checkbox" name="vehicle" value="Airplane" /&gt; 
&lt;br /&gt;&lt;br /&gt; 

&lt;input type="submit" value="Submit" /&gt; 

&lt;/form&gt; 


&1t ; p&gt; 如 果 您 点 击 "Submit" 按钮 ， 您 将 把 输入 传送 到 名 为 html form action 


&lt;/body&gt; 
&lt;/html&gt; 


到 于 0000 .::LU[QCLLCLLUMUÁCIXUSISUISILZSE 
带 有 单 选 按钮 的 表单 





&lt;html&gt; 
&lt;body&gt; 


&lt;form name="input" action-z"/html/html form action.asp" method="( 
Male: 

&lt;input type="radio" name="Sex" value="Male" checked-'checked'&g! 
&lt;br /&gt; 

Female: 

&lt;input type="radio" name="Sex" value="Female"&gt; 

&lt;br /&gt; 

&lt;input type ="Submit" value ="Submit"&gt; 

&lt;/form&gt; 


&lt;p&gt; 如 果 您 点 击 "Submit" 按钮 ， 您 将 把 输入 传送 到 名 为 html form action 


&lt;/body&gt; 
&lt;/html&gt; 


区 ÓÉ——————————ÁHIMMM E 
从 表单 发 送 电子 邮 件 





&lt;html&gt; 


&lt;body&gt; 
&lt;form action="MAILTO: someone@w3school.com.cn" method="post" enci 


&1t ;h3&gt ;这 个 表单 会 把 电子 邮件 发 送 到 w3School, &1t;/h3&gt; 

姓名 :&lt;br /&gt; 

&lt;input type="text" name="name" value="yourname" size="20"&gt; 
&lt;br /&gt; 

电邮 : &lt;br /&gt; 

&lt;input type="text" name="mail" value="yourmail" size="20"&gt; 
&lt;br /&gt; 

ABS: &lt;br /&gt; 

&lt;input type="text" name="comment" value="yourcomment" size="40"é 
&lt;br /&gt;&lt;br /&gt; 

&lt;input type="submit" value=" 发 送 "&gt; 

&lt;input type="reset" value="HB"agt; 


&lt;/form&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


————————— eee 


表单 标签 








A 


W3School RIMAS 


标签 描述 
<form> 定义 供用 户 输入 的 表单 
<input> 定义 输入 域 
<textarea> 定义 文本 域 (一 个 多 行 的 输入 控件 ) 
<label> 定义 一 个 控制 的 标签 
<fieldset> 定义 域 
<legend> 定义 域 的 标题 
<select> 定义 一 个 选择 列表 
<optgroup> 定义 选项 组 
<option> 定义 下 拉 列 表 中 的 选项 
<button> 定义 一 个 按钮 
<isindex> CRF. A «input» RE. 
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HTML 框架 


通过 使 用 框架 ， 你 可 以 在 同一 个 浏览 器 窗口 中 显示 不 止 一 个 页 面 。 


实例 
垂直 框架 


&lt;html&gt; 

&lt;frameset cols="25%,50%, 2596" &gt ; 
&lt;frame src="/example/html/frame_a.htmlL"&gt; 
&lt;frame src-z"/example/html/frame b.html'"&gt; 
&lt;frame src-z"/example/html/frame c.html"&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 


水 平 框架 


&lt;html&gt; 

&lt; frameset rows="25%, 5096, 2596" &gt ; 
&lt;frame src="/example/html/frame_a.htmlL"&gt; 
&lt;frame src-z'"/example/html/frame b.html"&gt; 
&lt;frame src="/example/html/frame_c.htmlL"&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 
《可 以 在 本 页 底 端 找到 更 多 实例 。) 


框架 
通过 使 用 框架 ， 你 可 以 在 同一 个 浏览 器 窗口 中 显示 不 止 一 个 页 面 。 每 份 HTML 文 档 
称 为 一 个 框架 ， 并 且 每 个 框架 都 独立 于 其 他 的 框架 。 
使 用 框架 的 坏处 : 
e 开发 人 员 必 须 同 时 跟踪 更 多 的 HTML 文 档 


e 很 难 打印 整 张 页 面 
框架 结构 标签 (<frameset>) 


编者 注 : frameset 标签 也 被 某 些 文章 和 书籍 译 为 框架 集 。 


框架 标签 (Frame) 


Frame 标签 定义 了 放置 在 每 个 框架 中 的 HTML 文档 。 


在 下 面 的 这 个 例子 中 ， 我 们 设置 了 一 个 两 列 的 框架 集 。 第 一 列 被 设置 为 占据 浏览 器 
窗口 的 25%。 第 二 列 被 设置 为 占据 浏览 器 窗口 的 75%。HTML 文档 "frame_a.htm" 
被 置 于 第 一 个 列 中 ， 而 HTML 文档 "frame_b.htm" 被 置 于 第 二 个 列 中 : 


<frameset cols="25%,75%"> 
«frame src="frame_a.htm"> 
<frame src="frame_b.htm"> 
</frameset> 


基本 的 注意 事项 - 有 用 的 提示 : 

假如 一 个 框架 有 可 见 边框 ， 用 户 可 以 拖 动 边框 来 改变 它 的 大 小 。 为 了 避免 这 种 情况 
发 生 ， 可 以 在 «frame» 标签 中 加 入 : noresize="noresize"。 

为 不 支持 框架 的 浏览 器 添加 <noframes> 标签 。 

重要 提示 : 不 能 将 <body></body> 标签 与 <frameset></frameset> 标签 同时 使 

用 | 不过， 假如 你 添加 包含 一 段 文本 的 <noframes> 标签 ， 就 必须 将 这 段 文字 终 套 


于 <body></body> 标签 内 。 (在 下 面 的 第 一 个 实例 中 ， 可 以 查看 它 是 如 何 实现 
的 。) 


<a id="more_examples"> 更 多 实例 </a> 


如 何 使 用 <noframes> 标签 


&lt;html&gt; 

&lt;frameset cols="25%, 50%, 2596" &gt ; 
&lt;frame srcz'"/example/html/frame a.html'"&gt; 
&lt;frame src-z"/example/html/frame b.html"&gt; 
&lt;frame src="/example/html/frame_c.htmlL"&gt; 

&lt;noframes&gt; 

&lt;body&gt ;您 的 浏览 器 无 法 处 理 框架 1 &1t; /body&gt ; 

&lt;/noframes&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 


混合 框架 结构 


&lt;html&gt; 

&lt; frameset rows-z'509?6, 5096" &gt ; 

&lt;frame srcz"/example/html/frame a.html"&gt; 
&lt; frameset cols="25%, 7596" &gt ; 

&lt;frame srcz"/example/html/frame b.html"&gt; 
&lt;frame srcz"/example/html/frame c.html"&gt; 
&lt;/frameset&gt; 

&lt;/frameset&gt; 


&lt;/html&gt; 


含有 noresize-"noresize" 属性 的 框架 结构 


&lt;html&gt; 


&lt; frameset cols="50%, *,25%"&gt; 
&lt;frame src="/example/html/frame_a.html" noresize="noresize" /é 
&lt;frame srcz"/example/html/frame b.html" /&gt; 
&lt;frame srcz"/example/html/frame c.html" /&gt; 
&lt;/frameset&gt; 


&lt;/html&gt; 
EEE 
导航 框架 





&lt;html&gt; 
&lt;frameset cols-'120,*"&gt; 


&lt;frame srcz'"/example/html/html contents.html'"&gt; 


&lt;frame src-z'"/example/html/frame a.html" name-z"showframe"&gt; 


&lt;/frameset&gt; 
&lt;/html&gt; 
‘| 





内 联 框架 


&lt;html&gt; 
&lt;body&gt; 
&lt;iframe srcz"/i/eg landscape.jpg"&gt;&lt;/iframe&gt; 


&lt;p&gt ;一 些 老 的 浏览 器 不 支持 iframe. &lt;/p&gt; 
&1t ; p&gt ; 如 果 得 不 到 支持 ，iframe 是 不 可 见 的 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


跳 转 至 框架 内 的 一 个 指定 的 节 


&lt;html&gt; 
&lt;frameset cols="20%, 80%"&gt; 


&lt; frame srcz"/example/html/frame a.html"&gt; 
&lt;frame src="/example/htm1/link.html#C10"&gt ; 


&lt;/frameset&gt; 


&lt;/html&gt; 


使 用 框架 导航 跳 转 至 指定 的 节 


HTML lframe 
iframe 用 于 在 网 页 内 显示 网 页 。 


<iframe src="/html/index.asp" height="300px" width="99%" style="mat 
J — # 








添加 iframe 的 语法 
<iframe src="_URL_"></iframe> 
URL 指向 隔离 页 面 的 位 置 。 


Iframe - 设置 高 度 和 宽 撒 


height 和 width 属性 用 于 规定 iframe 的 高 度 和 宽度 。 
属性 值 的 默认 单位 是 像素 ， 但 也 可 以 用 百分比 来 设 定 (比如 "80%") 。 


实例 


<iframe src="demo_iframe.htm" width="200" height="200"></iframe> 


Iframe - 删除 边框 


frameborder 属性 规定 是 否 显 示 iframe 周围 的 边框 。 


设置 属性 值 为 "0" 就 可 以 移 除 边 框 : 
实例 
LH 


<iframe src="demo_iframe.htm" frameborder="0"></iframe> 


使 用 iframe 作为 链接 的 目标 


iframe 可 用 作 链 接 的 目标 (target) 。 


链接 的 target 属性 必须 引用 iframe 的 name 属性 : 
实例 


<iframe src="demo_iframe.htm" name="iframe_a"></iframe> 
<p><a href="http://www.w3school.com.cn" target="iframe_a">w3School 
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HTML iframe 标签 


«iframe» 定义 内 联 的 子 窗 口 (框架 ) 


HTML = 


好 的 背景 使 站 点 看 上 去 特别 棒 。 


实例 
搭配 良好 的 背景 和 颜色 


&lt;html&gt; 

&lt;body bgcolor="#d0d0d0"&gt; 

&lt;p&gt; 

这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 
&lt;/p&gt; 

&lt;p&gt; 

这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 


&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


s -— 
搭配 得 不 好 的 背景 和 颜色 





&lt;html&gt; 

&lt;body bgcolorz"zffffff" text="yellow"&gt; 

&lt;p&gt; 

这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 这 是 段落 。 
&lt;/p&gt; 

&lt;p&gt; 

这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 


&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


a —— B 
(可 以 在 本 页 底 端 找到 更 多 实例 。) 





背景 (Backgrounds) 


<body> 拥有 两 个 配置 背景 的 标签 。 背 景 可 以 是 颜色 或 者 图 像 。 


背景 颜色 (Bgcolor) 
背景 颜色 属性 将 背景 设置 为 某 种 颜色 。 属 性 值 可 以 是 十 六 进 制 数 、RGB 值 或 颜色 


o 


«body bgcolor="#000000"> 
«body bgcolor="rgb(0,0,0)"> 
«body bgcolor="black"> 


以 上 的 代码 均 将 背景 颜色 设置 为 黑色 。 


背景 


Ez (Background) 


背景 属性 将 背景 设置 为 图 像 。 属 性 值 为 图 像 的 URL。 如 果 图 像 尺 寸 小 于 浏览 器 窗 
口 ， 那 么 图 像 将 在 整个 浏览 器 窗口 进行 复制 。 


<body background="clouds.gif"> 
«body background="http://www.w3school.com.cn/clouds.gif"> 


URL 可 以 是 相对 地 址 ， 如 第 一 行 代 码 。 也 可 以 使 绝对 地 址 ， 如 第 二 行 代码 。 
提示 : 如 果 你 打算 使 用 背景 图 片 ， 你 需要 紧 记 一 下 几 点 : 


育 景 图 像 是否 增 加 了 页 面 的 加 载 时 间 。 小 贴 十 : 图 像 文件 不 应 超过 10k。 
背景 图 像 是 否 与 页 面 中 的 其 他 图 象 搭配 良好 。 

背景 图 像 是 否 与 页 面 中 的 文字 颜色 搭配 良好 。 

图 像 在 页 面 中 平 铺 后 ， 看 上 去 还 可 以 吗 ? 

对 文字 的 注意 力 被 背景 图 像 喧 宾 夺 主 了 吗 ? 


基本 的 注意 事项 - 有 用 的 提示 : 

«body» 标签 中 的 背景 颜色 (bgcolor) . HH (background) 和 文本 (text) 属性 
在 最 新 的 HTML 标准 (HTML4 和 XHTML) 中 已 被 废弃 。W3C 在 他 们 的 推荐 标准 
中 已 删除 这 些 属 性 。 

应 该 使 用 层 司 样式 表 (CSS) 来 定义 HTML 元 素 的 布局 和 显示 属性 。 


<a id="more_examples"> 更 多 实例 </a> 


可 用 性 强 的 背景 图 像 


&lt;html&gt; 

&lt;body backgroundz"/i/eg bg 06.gif'&gt; 
&lt;h3&gt; 图像 背 景 &1lt;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML 背景 。&]t;/p&gt; 
&lt;p&gt; 如 果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&1lt;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


可 用 性 强 的 背景 图 像 2 


&lt;html&gt; 

&lt;body background="/i/eg_bg_04.gif"&gt; 
&lt;h3&gt; 图像 背 景 &1t;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML 背景 。&]t;/p&gt; 
&1t ; p&gt ;如果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&]1t;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


可 用 性 差 的 背景 图 像 


&lt;html&gt; 

&lt;body backgroundz"/i/eg bg 01.gif'&gt; 
&lt;h3&gt; 图像 背 景 &1t;/h3&gt; 

&lt;p&gt;gif 和 jpg 文件 均 可 用 作 HTML BH. &lt;/p&gt; 
&1t ; p&gt ;如果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。&]1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


HTML 颜色 


颜色 由 红色 、 绿 色 、 蓝 色 混 合 而 成 。 


颜色 值 


颜色 由 一 个 十 六 进 制 符号 来 定义 ， 这 个 符号 由 红色 、 绿 色 和 蓝 色 的 值 组 成 
(RGB) 。 


每 种 颜色 的 最 小 值 是 0 (十 六 进 制 : #00) 。 最 大 值 是 255 (十 六 进 制 : #FF) 。 
这 个 表格 给 出 了 由 三 种 颜色 混合 而 成 的 具体 效果 : 


Color HEX Color RGB 
#000000 rgb(0,0,0) 
#FF0000 rgb(255,0,0) 
#00FF00 rgb(0,255,0) 
#0000FF rgb(0,0,255) 
#FFFFOO rgb(255,255,0) 
#00FFFF rgb(0,255,255) 
#FFOOFF rgb(255,0,255) 
#COCOCO rgb(192,192,192) 
#FFFFFF rgb(255,255,255) 


大 多 数 的 浏览 器 都 支持 颜色 名 集合 。 


提示 : 仅仅 有 16 种 颜色 名 被 W3C 的 HTML4.0 标准 所 支持 。 它 们 是 : aqua, 
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, 
white, yellow. 


如 果 需 要 使 用 其 它 的 颜色 ， 需 要 使 用 十 六 进 制 的 颜色 值 。 


Color HEX Color Name 
#FOF8FF AliceBlue 
#FAEBD7 AntiqueWhite 
#7FFFD4 Aquamarine 
#000000 Black 
#0000FF Blue 
#8A2BE2 BlueViolet 
#A52A2A Brown 
Web 安 全 色 


数 年 以 前 ， 当 大 多 数 计算 机 仅 支 持 256 种 颜色 的 时 候 ， 一 系列 216 种 Web 安全 色 
作为 Web 标准 被 建议 使 用 。 其 中 的 原因 是 ， 微 软 和 Mac 操作 系统 使 用 了 40 种 不 
同 的 保留 的 固定 系统 颜色 〈 双 方 大 约 各 使 用 20 种 ) 。 

我 们 不 确定 如 今 这 人 么 做 的 意义 有 多 大 ， 因 为 越 来 越 多 的 计算 机 有 能 力 处 理 数 百 万 种 
颜色 ， 不 过 做 选择 还 是 你 自己 。 


216 跨 平台 


最 初 ，216 跨 平台 web 安全 色 被 用 来 确保 : 当 计算 机 使 用 256 色调 色 板 时 ， 所 有 
的 计算 机 能 够 正确 地 显示 所 有 的 颜色 。 


000000 000033 000066 000099 0000CC 0000FF 
003300 003333 003366 003399 0033CC 0033FF 
006600 006633 006666 006699 0066CC 0066FF 
009900 009933 009966 009999 0099CC 0099FF 
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 
00FF00 OOFF33 OOFF66 OOFF99 OOFFCC OOFFFF 
330000 330033 330066 330099 3300CC 3300FF 
333300 333333 333366 333399 3333CC 3333FF 
336600 336633 336666 336699 3366CC 3366FF 
339900 339933 339966 339999 3399CC 3399FF 
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 


660000 
663300 
666600 
669900 
66CC00 
66FF00 
990000 
993300 
996600 
999900 
99CC00 
99FF00 
CC0000 
CC3300 
CC6600 
CC9900 
CCCCOO 
CCFF00 
FF0000 
FF3300 
FF6600 
FF9900 
FFCCOO 
FFFFOO 


660033 
663333 
666633 
669933 
66CC33 
66FF33 
990033 
993333 
996633 
999933 
99CC33 
99FF33 
CC0033 
CC3333 
CC6633 
CC9933 
CCCC33 
CCFF33 
FF0033 
FF3333 
FF6633 
FF9933 
FFCC33 
FFFF33 


660066 
663366 
666666 
669966 
66CC66 
66FF66 
990066 
993366 
996666 
999966 
99CC66 
99FF66 
CC0066 
CC3366 
CC6666 
CC9966 
CCCC66 
CCFF66 
FF0066 
FF3366 
FF6666 
FF9966 
FFCC66 
FFFF66 


660099 
663399 
666699 
669999 
66CC99 
66FF99 
990099 
993399 
996699 
999999 
99CC99 
99FF99 
CC0099 
CC3399 
CC6699 
CC9999 
CCCC99 
CCFF99 
FF0099 
FF3399 
FF6699 
FF9999 
FFCC99 
FFFF99 


6600CC 
6633CC 
6666CC 
6699CC 
66CCCC 
66FFCC 
9900CC 
9933CC 
9966CC 
9999CC 
99CCCC 
99FFCC 
CCOOCC 
CC33CC 
CC66CC 
CC99CC 
CCCCCC 
CCFFCC 
FFOOCC 
FF33CC 
FF66CC 
FF99CC 
FFCCCC 
FFFFCC 


6600FF 
6633FF 
6666FF 
6699FF 
66CCFF 
66FFFF 
9900FF 
9933FF 
9966FF 
9999FF 
99CCFF 
99FFFF 
CCOOFF 
CC33FF 
CC66FF 
CC99FF 
CCCCFF 
CCFFFF 
FFOOFF 
FF33FF 
FF66FF 
FF99FF 
FFCCFF 
FFFFFF 


HTML 颜色 名 


本 页 提供 了 被 大 多 数 浏 览 器 支持 的 颜色 名 。 


提示 : UB 16 种 颜色 名 被 W3C 的 HTML 4.0 标准 支持 ， 它 们 是 : aqua, black, 
blue, fuchsia, gray. green. lime, maroon, navy. olive, purple, red, 
silver, teal, white, yellow. 


如 果 使 用 其 它 颜色 的 话 ， 就 应 该 使 用 十 六 进 制 的 颜色 值 。 


颜色 名 列表 
单 击 一 个 颜色 名 或 者 16 进 制 值 ， 就 可 以 查看 与 不 同文 字 颜 色 搭配 的 背景 颜色 。 
颜色 名 十 六 进 制 颜色 值 
AliceBlue #FOF8FF 
AntiqueWhite #FAEBD7 
Aqua #00FFFF 
Aquamarine #7FFFD4 
Azure #FOFFFF 
Beige #F5F5DC 
Bisque #FFE4C4 
Black #000000 
BlanchedAlmond #FFEBCD 
Blue #0000FF 
BlueViolet #8A2BE2 
Brown #A52A2A 
BurlyWood #DEB887 
CadetBlue #5F9EA0 
Chartreuse #7FFFOO 
Chocolate #D2691E 
Coral #FF7F50 


CornflowerBlue #6495ED 
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Cornsilk #FFF8DC 
Crimson #DC143C 
Cyan #00FFFF 
DarkBlue #00008B 
DarkCyan #008B8B 
DarkGoldenRod #B8860B 
DarkGray #A9A9A9 
DarkGreen #006400 
DarkKhaki #BDB76B 
DarkMagenta #8B008B 
DarkOliveGreen #556B2F 
Darkorange #FF8C00 
DarkOrchid #9932CC 
DarkRed #8B0000 
DarkSalmon #E9967A 
DarkSeaGreen #8FBC8F 
DarkSlateBlue #483D8B 
DarkSlateGray #2F4F4F 
DarkTurquoise #00CED1 
DarkViolet #9400D3 
DeepPink #FF1493 
DeepSkyBlue #00BFFF 
DimGray #696969 
DodgerBlue #1E90FF 
Feldspar #D19275 
FireBrick #B22222 
FloralWhite #FFFAFO 
ForestGreen #228B22 
Fuchsia #FFOOFF 
Gainsboro #DCDCDC 





HTML 颜色 名 


— 
CD 
ER 
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LightSkyBlue #87CEFA 
LightSlateBlue #8470FF 
LightSlateGray #778899 
LightSteelBlue #BOC4DE 
LightYellow #FFFFEO 


GhostWhite #F8F8FF 

GreenYellow 

LavenderBlush 

LemonChiffon 

LightGoldenRodYellow 

LightSeaGreen 
Lu 
#8470FF 00000 
#778899 
BCIE 00000000 





HTML 颜色 名 13 


O1 
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Lime 

LimeGreen 

Linen 

Magenta 

Maroon 
MediumAquaMarine 
MediumBlue 
MediumOrchid 
MediumPurple 
MediumSeaGreen 
MediumSlateBlue 
MediumSpringGreen 
MediumTurquoise 
MediumVioletRed 
MidnightBlue 
MintCream 
MistyRose 
Moccasin 
NavajoWhite 
Navy 

OldLace 

Olive 

OliveDrab 

Orange 
OrangeRed 
Orchid 
PaleGoldenRod 


PaleGreen 





PaleTurquoise 


HTML 颜色 名 


#00FF00 
#32CD32 
#FAFOE6 
#FFOOFF 
#800000 
#66CDAA 
#0000CD 
#BA55D3 
#9370D8 
#3CB371 
#7B68EE 
#OOFA9A 
#48D1CC 
#C71585 
#191970 
#FOFFFA 
#FFE4E1 
#FFE4B5 
#FFDEAD 
#000080 
4FDF5EG 
#808000 
#6B8E23 
#FFA500 
#FF4500 
#DA70D6 
#EEE8AA 
#98FB98 
#AFEEEE 
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PaleVioletRed #D87093 
Ret FOOD 
SaddleBrown 


— 
CD 
N 


HTML 颜色 名 
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VioletRed 
Wheat 
White 
WhiteSmoke 
Yellow 


YellowGreen 





HTML 颜色 名 


#D02090 
#F5DEB3 
#FFFFFF 
#F5F5F5 
#FFFF00 
#9ACD32 
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HTML 4.01 快速 参考 


来 自 W3School 的 HTML 快速 参考 。 可 以 打印 它 ， 以 备 日 常 使 用 。 
HTML Basic Document 


<html> 

<head> 

<title>Document name goes here</title> 
</head> 

<body> 

Visible text goes here 

</body> 

</html> 


Text Elements 


<p>This is a paragraph</p> 

<br> (line break) 

<hr> (horizontal rule) 

<pre>This text is preformatted</pre> 


Logical Styles 


<em>This text is emphasized</em> 
<strong>This text is strong</strong> 
<code>This is some computer code</code> 


Physical Styles 


<b>This text is bold</b> 
<i>This text is italic</i> 


Links, Anchors, and Image Elements 


<a href="http://www.example.com/">This is a Link</a> 

«a href="http://www.example.com/"><img src="URL" 

alt="Alternate Text"></a> 

«a href="mailto:webmaster@example.com">Send e-mail</a>A named anch 
<a name="tips">Useful Tips Section</a> 

<a href="#tips">Jump to the Useful Tips Section</a> 
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Unordered list 


«ul» 

«li»First item</li> 
«li»Next item</1li> 
«/ul» 


Ordered list 


«ol» 

«li»First item</li> 
«li»Next item</1li> 
«/ol» 


Definition list 


«dl» 

<dt>First term</dt> 
<dd>Definition</dd> 
<dt>Next term</dt> 
<dd>Definition</dd> 
«/dl» 


Tables 


<table border="1"> 

<tr> 
<th>someheader</th> 
<th>someheader</th> 

</tr> 

<tr> 
<td>sometext</td> 
<td>sometext</td> 

</tr> 

</table> 


Frames 


«frameset cols="25%, 75%"> 
«frame src="page1.htm"> 
«frame src="page2.htm'"> 

</frameset> 


Forms 


«form action="http://ww.example.com/test.asp" method="post/get"> 
<input type="text" name="lastname" 
value="Nixon" size="30" maxlength="50"> 
<input type="password"> 

<input type="checkbox" checked="checked"> 
<input type="radio" checked="checked"> 
«input type-"submit"- 

«input type="reset"> 

«input type="hidden"> 

«select» 

<option>Apples 

<option selected>Bananas 

<option>Cherries 

</select> 

<textarea name="Comment" rows="60" 
cols="20"></textarea> 

</form> 


eee T 


Entities 


&lt; is the same as < 
&gt; is the same as > 
&#169; is the same as ? 


Other Elements 


<!-- This is a comment --> 
<blockquote> 

Text quoted from some source. 
</blockquote> 

<address> 


Address 1<br> 
Address 2<br> 
City<br> 
</address> 


Source : http://www.w3school.com.cn/html/html quick.asp 


HTML 高 级 


HTML <!DOCTYPE> 


<!DOCTYPE> 声明 帮助 浏览 器 正确 地 显示 网 页 。 


<!DOCTYPE> 声明 
Web 世界 中 存在 许多 不 同 的 文档 。 只 有 了 解 文档 的 关 型 ， 浏 览 器 才能 正确 地 显示 文 
档 。 


HTML 也 有 多 个 不 同 的 版 本 ， 只 有 完全 明白 页 面 中 使 用 的 确切 HTML 版 本 ， 浏 览 器 
才能 完全 正确 地 显示 出 HTML 页 面 。 这 就 是 <IDOCTYPE> 的 用 处 。 


<!IDOCTYPE> 不 是 HTML 标签 。 它 为 浏览 器 提供 一 项 信息 (声明) ， 即 HTML 是 
用 什么 版 本 编写 的 。 


提示 : W3School 即将 升级 为 最 新 的 HTML5 文档 类 型 。 


实例 
带 有 HTML5 DOCTYPE 的 HTML 文档 : 


«IDOCTYPE html» 

«html» 

«head» 

<title>Title of the document</title> 
«/head» 


«body» 
The content of the document...... 
«/body» 


«/html» 


HTML 版 本 


从 Web 诞生 早期 至 今 ， 已 经 发 展 出 多 个 HTML 版 本 : 


版 本 年 份 


HTML 1991 
HTML+ 1993 
HTML 2.0 1995 
HTML 3.2 1997 
HTML 4.01 1999 
XHTML 1.0 2000 
HTML5 2012 
XHTML5 2013 

曾 用 的 声明 

HTML5 


<!DOCTYPE html» 


HTML 4.01 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/loose.dtd"> 


XHTML 1.0 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmli/DTD/xhtml1-transitional.dtd"> 


如 需 完整 的 文档 类 型 声明 列表 ， 请 访问 我 们 的 DOCTYPE 参考 手册 。 


HTML 头 部 元 素 
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x 自 试 一 试 - 实例 
文档 的 标题 


SESE Sas wz 


&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv-"Content-Language" content-"zh-cn" /&gt; 


&lt ;title&gt ;标题 不 会 显示 在 文档 区 &lLt ;/title&gt 
&lt;/head&gt; 


&lt;body&gt; 
&1t ; p&gt ;这 上 段 文 本 会 显示 出 来 。&1t;/p&gt，; 
&lt;/body&gt; 


&lt;/html&gt; 





所 有 链接 一 个 目标 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv-"Content-Language" content="zh-cn" /&gt; 


&lt;base target-" blank" /&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 
&lt;a href="http://www.w3school.com.cn" target="_blank"&gt ;这 个 连接 & 
&lt;/p&gt; 


&lt;p&gt; 
&lt;a hrefz'"http://www.w3school.com.cn"&gt;ixi&iE&lt;/a&gt; 也 将 在 这 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 








文档 描述 


&lt;html&gt; 


&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 


&lt;meta name="author" 
content="w3school.com.cn"&gt; 


&lt;meta name="revised" 
content="David Yang, 8/1/07"&gt; 


&lt;meta name="generator" 
content="Dreamweaver 8.0en"&gt; 


&lt;/head&gt; 
&lt;body&gt; 
&lt;p&gt; 本 文档 的 meta 属性 标识 了 创作 者 和 编辑 软件 。&1t;/p&gt，; 
&lt;/body&gt; 
&lt;/html&gt; 
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文档 关键 词 





&lt;html&gt; 


&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 


&lt;meta name="description" 
content="HTML examples"&gt; 


&lt;meta name="keywords" 
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"&gt; 


&lt;/head&gt; 
&lt;body&gt; 
&lLt;p&gt; 本 文档 的 meta 属性 描述 了 该 文档 和 它 的 关键 词 。&1t;/p&gt; 
&lt;/body&gt; 
&lt;/html&gt; 

ED aZz2QdüoS5aeaSa 533SS— —33i3J:1)7yAUUus 


重 定向 用 户 





&lt; !DOCTYPE HTML&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset-gb2: 
&lt;meta http-equiv="Refresh" contentz'5;url-http://www.w3school.ct 
&lt;/head&gt; 


&lt;body&gt; 

&lt;p&gt; 

对 不 起 。 我 们 已 经 搬家 了 。 您 的 URL 是 &lt;a hrefz"http://www.w3school.com 
&lt;/p&gt; 

&lt;pagt ;您 将 在 5 秒 内 被 重 定向 到 新 的 地 址 。&1t;/p&gt; 

&1t ; p&gt ;如果 超 过 5 秒 后 您 仍然 看 到 本 消息 ， 请 点 击 上 面 的 链接 。&1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 
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HTML <head> 元 素 
<head> 元 素 是 所 有 头 部 元 素 的 容器 。<head> 内 的 元 素 可 包含 脚本 ， 指 示 浏 览 器 在 
何 处 可 以 找到 样式 表 ， 提 供 元 信息 ， 等 等 。 


以 下 标签 都 可 以 添加 到 head 部 分 : «title», «base». «link», «meta». «script» 
以 及 <style>. 


HTML «title» 755 


«title» 标签 定义 文档 的 标题 。 

title 元 素 在 所 有 HTML/XHTML 文档 中 都 是 必需 的 。 
title 元 素 能 够 : 

e 定义 浏览 器 工具 栏 中 的 标题 

e 提供 页 面 被 添加 到 收藏 夹 时 显示 的 标题 

e 显示 在 搜索 引擎 结果 中 的 页 面 标题 
一 个 简化 的 HTML 文档 : 


«IDOCTYPE html» 

«html» 

«head» 

<title>Title of the document</title> 
«/head» 


«body» 
The content of the document...... 
«/body» 


«/html» 


HTML «base»? 元 素 
«base» 标签 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 (target) 


<head> 

«base href="http://www.w3school.com.cn/images/" /> 
<base target="_blank" /> 

</head> 


HTML «link» 元 素 


<link> 标签 定义 文档 与 外 部 资源 之 间 的 关系 。 
«link» 标签 最 常用 于 连接 样式 表 : 


<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
</head> 


HTML <style> 元 素 


<style> 标签 用 于 为 HTML 文档 定义 样式 信息 。 
您 可 以 在 style 元 素 内 规定 HTML 元 素 在 浏览 器 中 呈现 的 样式 : 


<head> 

<style type="text/css"> 

body {background-color :yellow} 
p {color:blue} 

</style> 

</head> 


HTML «meta»? 元 素 


元 数据 (metadata) 是 关于 数据 的 信息 。 


<meta> 标签 提供 关于 HTML 文档 的 元 数据 。 元 数据 不 会 显示 在 页 面 上 ， 但 是 对 于 
机 器 是 可 读 的 。 


典型 的 情况 是 ，meta 元 素 被 用 于 规定 页 面 的 描述 、 关 键 词 、 文 档 的 作者 、 最 后 修 
改 时 间 以 及 其 他 元 数据 。 


<meta> 标签 始终 位 于 head 元 素 中 。 

元 数据 可 用 于 浏览 器 〈 如 何 显示 内 容 或 重新 加 载 页 面 ) ， 搜 索引 擎 (关键 词 ) ， 或 
其 他 web 服务 。 

针对 搜索 引擎 的 关键 词 

一 些 搜索 引擎 会 利用 meta 元 素 的 name 和 content 属性 来 索引 您 的 页 面 。 

下 面 的 meta 元 素 定 义 页 面 的 描述 : 


<meta name="description" content="Free Web tutorials on HTML, CSS, 
下 面 的 meta 元 素 定 义 页面 的 关键 词 : 





<meta name="keywords" content="HTML, CSS, XML" /> 
name 和 content 属性 的 作用 是 描述 页 面 的 内 容 。 


HTML «script» 元 素 


<script> 标签 用 于 定义 客户 端 脚本 ， 比 如 JavaScript. 
我 们 会 在 稍 后 的 章节 讲解 script 元 素 。 


HTML 头 部 元 素 


W3School 前 端 教 程 合集 


标签 
<head> 
<title> 
<base> 
<link> 
<meta> 
<script> 


<style> 


HTML 头 部 元 素 


定义 关于 文档 的 信息 。 

定义 文档 标题 。 

定义 页 面 上 所 有 链接 的 默认 地 址 或 默认 目标 。 
定义 文档 与 外 部 资源 之 间 的 关系 。 

定义 关于 HTML 文档 的 元 数据 。 

定义 客户 端 脚本 。 

定义 文档 的 样式 信息 。 


C1 


HTML 脚本 


JavaScript 使 HTML 页 面具 有 更 强 的 动态 和 交互 性 。。 


实例 
插入 一 段 脚本 


&lt;html&gt; 

&lt;body&gt; 

&lt;script type="text/javascript"&gt; 
document.write("&lt;hi&gt;Hello World!&lt;/hi&gt;") 
&lt;/script&gt; 

&lt;/body&gt; 


&lt;/html&gt; 


使 用 <noscript> 标签 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;body&gt; 


&lt;script type="text/javascript"&gt; 

document.write("Hello World!") 

&lt;/script&gt; 

&lt;noscript&gt;Sorry, your browser does not support JavaScript! &li 


&1t ; p&gt ;不 支持 JavaScript 的 浏览 器 将 显示 noscript 元 素 中 的 文本 。&1t;/p& 


&lt;/body&gt; 
&lt;/html&gt; 
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HTML script 元 素 

«script» 标签 用 于 定义 客户 端 脚本 ， 比 如 JavaScript. 

script 元 素 既 可 包含 脚本 语句 ， 也 可 通过 sre 属性 指向 外 部 脚本 文件 。 
必需 的 type 属性 规定 脚本 的 MIME 类 型 。 


JavaScript 最 常用 于 图 片 操作 、 表 单 验 证 以 及 内 容 动态 更 新 。 
下 面 的 脚本 会 向 浏览 器 输出 “Hello World!” : 


<script type="text/javascript"> 
document .write("Hello World!") 
</script> 


提示 : 如 果 需 要 学 习 更 多 有 关 在 HTML 中 编写 脚本 的 知识 ， 请 访问 我 们 的 
JavaScript 教程 。 


<noscript> 标签 

<noscript> 标签 提供 无 法 使 用 脚本 时 的 蔡 代 内 容 ， 比 方 在 浏览 器 禁用 脚本 时 ， 或 浏 
览 器 不 支持 客户 端 脚本 时 。 

noscript 元 素 可 包含 普通 HTML 页 面 的 body 元 素 中 能 够 找到 的 所 有 元 素 。 
只 有 在 浏览 器 不 支持 脚本 或 者 禁用 脚本 时 ， 才 会 显示 noscript 元 素 中 的 内 容 : 


<script type="text/javascript"> 
document .write("Hello World!") 


</script> 
<noscript>Your browser does not support JavaScript!</noscript> 


如 何 应 付 老式 的 浏览 器 

如 果 浏 览 器 压根 没 法 识别 «script» 标签 ， 那 么 «script» 标签 所 包含 的 内 容 将 以 文本 

方式 显示 在 页 面 上 。 为 Ve d dern 你 应 该 将 脚本 隐藏 在 注释 标签 当中 。 
那些 老 的 浏览 器 (无 法 识别 «script? 标签 的 浏览 器 ) 将 忽略 这 些 注释 ， 所 以 不 会 将 


标签 的 内 容 显 示 到 页 面 上 。 而 那些 新 的 浏览 器 将 读 懂 这 些 脚本 并 执行 它们 ， 即 使 代 
ARRET TAAA. 


实例 
JavaScript: 


<script type="text/javascript"> 


ees 
document.write("Hello World!") 
//--> 


</script> 


VBScript: 


<script type="text/vbscript"> 


aes 

document .write("Hello World!") 
'_.> 

</script> 

<script> 定义 客户 端 脚本 。 


<noscript> 为 不 支持 客户 端 脚本 的 浏览 器 定义 替代 内 容 。 


HTML 字符 实体 


HTML 中 的 预 留 字符 必须 被 替换 为 字符 实体 。 


HTML 实体 


在 HTML 中 ， 某 些 字符 是 预 留 的 。 
在 HTML 中 不 能 使 用 小 于 号 (<) 和 大 于 号 (>) ， 这 是 因为 浏览 器 会 误 认 为 它们 


ZET Bo 


如 果 和 希望 正确 地 显示 预 留 字符 ， 我 们 必须 在 HTML 源 代码 中 使 用 字符 实体 
(character entities) 。 


字符 实体 类 似 这 样 : 
& entity name ; 
或 者 


&#_entity_number_; 


如 需 显 示 小 于 号 ， 我 们 必须 这 样 写 : < 或 < 


提示 : 使 用 实体 名 而 不 是 数字 的 好 处 是 ， 名 称 易于 记忆 。 不 过 坏处 是 ， 浏 览 器 也 许 
并 不 支持 所 有 实体 名 称 (对 实体 数字 的 支持 却 很 好 ) 。 


不 间断 空格 (non-breaking space) 


HTML 中 的 常用 字符 实体 是 不 间断 空格 ( )。 


浏览 器 总 是 会 截 短 HTML 如 果 您 在 文本 中 写 10 个 空格 ， 在 显示 该 
页 面 之 前 ， 浏 览 器 会 删除 它们 中 的 9 个 。 如 需 在 页 面 中 增加 空 格 的 数量 ， 您 需要 使 
用 字符 实体 。 


HTML 实例 示例 


用 HTML 实体 符号 做 实验 : 


HTML 中 有 用 的 字符 实体 


注释 : 实体 名 称 对 大 小 写 敏 感 ! 


H 

HA 
欧元 
小 节 
版 权 
注册 商标 
商标 
乘 号 
除 号 


&nbsp; 
&lt; 
&gt; 
&amp; 
&quot; 


实体 名 称 


&apos; (IE 不 支持 ) 


&cent; 
&pound; 
&yen; 
&euro; 
&sect; 
&copy; 
&reg; 
&trade; 
&times; 


&divide; 


实体 编号 


&#160; 
&#60; 
&162; 
&#38; 
&#34; 
&#39; 
&#162; 
&#163; 
&#165; 
&#8364; 
&#167; 
&#169; 
&#174; 
&18482; 
&#215; 
&#247; 


如 需 完整 的 实体 符号 参考 ， 请 访问 我 们 的 HTML 实体 符号 参考 手册 。 


HTML 统一 资源 定位 器 


URL 也 被 称 为 网 址 。 


URL 可 以 由 单词 组 成 ， 比 如 “w3school.com.cn”， 或 者 是 因特网 协议 (IP) 地 址 : 
192.168.1.253。 大 多 数 人 在 网 上 冲浪 时 ， 会 键入 网 址 的 域名 ， 因为 名 称 比 数字 容易 
记忆 。 


URL - Uniform Resource Locator 

当 您 点 击 HTML 页 面 中 的 某 个 链接 时 ， 对 应 的 <a> 标签 指向 万 维 网 上 的 一 个 地 
址 。 

统一 资源 定位 器 (URL) 用 于 定位 万 维 网 上 的 文档 (或 其 他 数据 ) 。 

网 址 ， 比 如 http://www.w3school.com.cn/html/index.asp， 遵 守 以 下 的 语法 规则 : 


scheme: //host.domain:port/path/filename 


解释 : 


e scheme - 定义 因特网 服务 的 类 型 。 最 常见 的 类 型 是 http 

e host- 定义 域 主机 (http 的 默认 主机 是 www) 

e domain - 定义 因特网 域名 ， 上 比如 w3school.com.cn 

e :port - 定义 主机 上 的 端口 号 (http 的 默认 端口 号 是 80) 

e path - 定义 服务 器 上 的 路 径 〈 如 果 省 略 ， 则 文档 必须 位 于 网 站 的 根 目 录 中 ) 。 
e filename - 定义 文档 /资源 的 名 称 


编者 注 : URL 的 英文 全 称 是 Uniform Resource Locator， 中 文 也 译 为 “统一 资源 定 
位 符 ”。 


URL Schemes 

以 下 是 其 中 一 些 最 流行 的 scheme : 
Scheme 访问 HAF... 
http 超 文本 传输 协议 以 http:/ 开头 的 普通 网 页 。 不 加 密 。 
https 安全 超 文本 传输 协议 安全 网 页 。 加 密 所 有 信息 交换 。 
ftp 文件 传输 协议 用 于 将 文件 下 载 或 上 传 至 网 站 。 


file 您 计算 机 上 的 文件 。 


HTML URL 字符 编码 


URL 编码 会 将 字符 转换 为 可 通过 因特网 传输 的 格式 。 


URL - 统一 资源 定位 器 
Web 浏览 器 通过 URL 从 web 服务 器 请 求 页 面 。 
URL 是 网 页 的 地 址 ， 上 比如 http:/www.w3school.com.cn。 


URL 编码 


URL 只 能 使 用 ASCII 字符 集 来 通过 因特网 进行 发 送 。 
由 于 URL 常常 会 包含 ASCII 集合 之 外 的 字符 ，URL 必须 转换 为 有 效 的 ASCII 格 


zo 


URL 编码 使 用 "96" 其 后 跟随 两 位 的 十 六 进 制 数 来 替换 非 ASCII 字符 。 
URL 不 能 包含 空格 。URL 编码 通常 使 用 + 来 替换 空格 。 


亲 目 试 一 试 


如 果 您 点 击 下 面 的 “提交” 按钮， 浏览 器 会 在 发 送 输入 之 前 对 其 进行 URL 编码 。 服 务 
器 上 的 页 面 会 显示 出 接收 到 的 输入 。 


| — Submit 


试 着 输入 一 些 字符 ， 然 后 再 次 点 击 提交 按钮。 





URL 编码 示例 


字符 URL 编码 


€ 7080 
£ HA3 

%AQ 
? %AE 
à %C0 
á %C1 
? %C2 
f 7o C3 
? 7o C4 
? %C5 


如 需 完 整 的 URL 编码 参考 ， 请 访问 我 们 的 URL 编码 参考 手册 。 


HTML Web Server 


如 果 希 望 向 世界 发 布 您 的 网 站 ， 那 么 您 必须 把 它 存 放 在 web 服务 器 上 。 


托管 自己 的 网 站 
在 自己 的 服务 器 上 托管 网 站 始终 是 一 个 选项 。 有 几 点 需要 考虑 : 


硬件 支出 


如 果 要 运行 "真正 ?的 网 站 ， 您 不 得 不 购买 强大 的 服务 器 硬件 。 不 要 指望 低 价 的 PC 
能 够 应 付 这 些 工 作 。 您 还 需要 稳定 的 (一 天 24 小 时 ) 高 速 连接 。 


软件 支出 


请 记 住 ， 服 务 器 授权 通常 比 客户 端 授权 更 昂贵 。 同 时 请 注意 ， 服 务 器 授权 也 许 有 用 
户 数量 限制 。 


AIR 


不 要 指望 低廉 的 人 工 费 用 。 您 必须 安装 自己 的 硬件 和 软件 。 您 同时 要 处理 漏 洞 和 病 
毒 ， 以 确保 您 的 服务 器 时 刻 正常 地 运行 于 一 个 “任何 事 都 可 能 发 生 ” 的 环境 中 。 


使 用 因特网 服务 提供 商 (ISP) 


从 ISP 租用 服务 器 也 很 常见 
大 多 数 小 公司 会 把 网 站 存放 到 由 ISP 提供 的 服务 器 上 。 其 优势 有 以 下 几 点 : 


连接 速度 
ASM ISP 都 拥有 连接 因特网 的 高 速 连接 。 
强大 的 硬件 


ISP BY web 服务 器 通常 强大 到 能 够 由 若干 网 站 分 享 资源 。 您 还 要 看 一 下 ISP 是 否 提 
供 高 效 的 负载 平衡 ， 以 及 必要 的 各 份 服务 器 。 


安全 性 和 可 靠 性 


ISP 是 网 站 托管 方面 的 专家 。 他 们 应 该 提供 99% 以 上 的 在 线 时 间 ， 最 新 的 软件 补 
丁 ， 以 及 最 好 的 病毒 防护 。 


选择 ISP 时 的 注意 事项 


24 小 时 支持 
确保 ISP 提供 24 小 时 支持 。 不 要 使 自己 置 于 无 法 解决 严重 问题 的 元 坎 境地 ， 同 时 


还 必须 等 待 第 二 个 工作 日 。 如 果 您 不 希望 支付 长 途 电 话费 ， 那 么 免费 电话 服务 也 是 
必要 的 。 


日 备份 
确保 ISP 会 执行 每 日 备份 的 例 行 工 作 ， 否 则 您 有 可 能 损失 有 价值 的 数据 。 





一 下 ISP 的 流量 限制 。 如 果 出 现 由 于 网 站 受 欢 迎 而 激增 的 不 可 预期 的 访问 量 ， 
您 要 确保 不 会 因此 支付 额外 费用 。 


带宽 或 内 容 限 制 


研究 一 下 ISP 的 带宽 和 内 容 限 制 。 如 果 您 计划 发 布 图 片 或 播 出 视频 或 音频 ， 请 确保 
您 有 此 权限 。 


So 
Dd 


E-mail 功能 

请 确保 ISP 支持 您 需要 的 e-mail 功能 。 

数据 库 访问 

如 果 您 计划 使 用 网 站 数据 库 中 的 数据 ， 那 么 请 确保 您 的 ISP 支持 您 需要 的 数据 库 访 


问 。 


在 您 选取 一 家 ISP 之 前 ， 请 务必 阅读 W3School 的 Web 主机 教程 。 


HTML 媒体 


HTML 多 媒体 


Web 上 的 多 媒体 指 的 是 音效 、 音 乐 、 视 频 和 动画 
现代 网 络 浏览 器 已 支持 很 多 多 媒体 格式 。 


什么 是 多 媒体 ? 

多 媒体 来 自 多 种 不 同 的 格式 。 宫 可 以 是 您 听 到 或 到 的 任何 内 容 ， 文 字 、 国 片 、 音 
、 音 效 、 影 、 动 画 等 等 

在 因特网 上 ， 您 会 经 常 发 现 谋 入 网 页 中 的 多 媒体 元 素 ， 现 代 浏览 器 已 支持 多 种 多 媒 
体格 式 。 

在 本 教程 中 ， 您 类 了 解 到 不 同 的 多 媒体 格式 ， 以 及 如 何在 您 的 网 页 中 使 用 它们 。 
浏览 器 支持 


第 一 款 因 特 网 浏览 器 只 支持 文本 ， 而 且 即 使 是 对 文本 的 支持 也 仅 限于 单一 字体 和 单 
一 颜色 。 随 后 诞生 了 支持 颜色 、 字 体 和 文本 样式 的 浏览 器 ， 图 片 支持 也 被 加 入 。 


不 同 的 浏览 器 以 不 同 的 方式 处 理 对 音效 、 动 田 和 视频 的 支持 。 某 些 元 素 能 够 以 内 联 
的 方式 人 处理， 而 某 些 则 需要 额外 的 插件 。 


您 将 在 下 面 的 章节 学 习 更 多 有 关 插 件 的 知识 。 


多 媒体 格式 


多 媒体 元 素 (比如 视频 和 音频 ) 存储 于 媒体 文件 中 。 


确定 媒体 类 型 的 最 常用 的 方法 是 查看 文件 扩展 名 。 当 浏览 器 得 到 文件 扩展 名 .htm 
或 .html 时 ， 它 会 假定 该 文件 是 HTML 页 面 。.xml 扩展 名 指示 XML 文件 ， 而 .css 
扩展 名 指示 样式 表 。 图 片 格式 则 通过 .gif 或 jpg 来 识别 


多 媒体 元 素 元 素 也 拥有 带 有 不 同 扩展 名 的 文件 格式 ， 比 如 .swf、.wmv、.mp3 以 及 
.mp4。 


视频 格式 


MP4 格式 是 一 种 新 的 即将 普及 的 因特网 视频 格式 。HTML5 Flash 播放 器 以 及 优 
酷 等 视频 网 站 均 支 持 它 。 


格式 


AVI 


WMV 


MPEG 


QuickTime 


RealVideo 


Flash 


Mpeg-4 


文件 


avi 


.WMV 


.mpg 
.mpeg 


.mov 


-mm 
am 


.swf 
flv 


.mp4 


描述 


AVI (Audio Video Interleave) 格式 是 由 微软 开发 的 。 所 
有 运行 Windows 的 计算 机 都 支持 AVI 格式 。 它 是 因 特 
网 上 很 常见 的 格式 ， 但 非 Windows 计算 机 并 不 总 是 能 
够 播放 。 


Windows Media 格式 是 由 微软 开发 的 。Windows 
Media 在 因特网 上 很 常见 ， 但 是 如 果 未 安装 额外 的 ( 免 
费 ) 组 件 ， 就 无 法 播放 Windows Media 电影 。 一 些 后 
期 的 Windows Media 电影 在 所 有 非 Windows 计算 机 上 
都 无 法 播放 ， 因 为 没有 合适 的 播放 器 。 


MPEG (Moving Pictures Expert Group) 格式 是 因特网 
上 最 流行 的 格式 。 它 是 跨 平台 的 ， 得 到 了 所 有 最 流行 的 
浏览 器 的 支持 。 


QuickTime 格式 是 由 茶 果 公司 开发 的 。QuickTime =A 
特 网 上 常见 的 格式 ， 但 是 QuickTime 电影 不 能 在 没有 
安装 额外 的 (免费 ) 组 件 的 Windows 计算 机 上 播放 。 


RealVideo 格式 是 由 Real Media 针对 因特网 开发 的 。 
该 格式 允许 低 带 宽 条 件 下 (在 线 视频 、 网 络 电 视 ) 的 视 
频 流 。 由 于 是 低 带 宽 优 先 的 ， 质 量 常会 降低 。 


Flash (Shockwave) 格式 是 由 Macromedia 开发 的 。 
Shockwave 格式 需要 额外 的 组 件 来 播放 。 但 是 该 组 件 
会 预 装 到 Firefox 或 IE 之 类 的 浏览 器 上 。 


Mpeg-4 (with H.264 video compression) 是 一 种 针对 因 
特 网 的 新 格式 。 事 实 上 ，YouTube 推荐 使 用 MP4。 
YouTube 接收 多 种 格式 ， 然 后 全 部 转换 为 .flv 或 .mp4 
以 供 分 发 。 越 来 越 多 的 视频 发 布 者 转 到 MPA, HAE 
为 Flash 播放 器 和 HTML5 的 因特网 共享 格式 。 


格式 


MIDI 


RealAudio 


Wave 


WMA 


MP3 


使 用 哪 种 格式 ? 


文件 


.WaV 


.Wma 


.mp3 
.mpga 


描述 


MIDI (Musical Instrument Digital Interface) 是 一 种 针对 
电子 音乐 设备 (比如 合成 器 和 声卡 ) 的 格式 。MIDI 文件 
不 含有 声音 ， 但 包含 可 被 电子 产品 (比如 声卡 ) 播放 的 
数字 音乐 指令 。 点 击 这 里 播放 The Beatles. 因为 
MIDI RASS, ATLA MIDI 文件 极其 小 巧 。 上 面 
的 例子 只 有 23k 的 大 小 ， 但 却 能 播放 将 近 5 分 钟 。MIDI 
得 到 了 广泛 的 平台 上 的 大 量 软 件 的 支持 。 大 多 数 流行 的 
网 络 浏览 器 都 支持 MIDI. 


RealAudio 格式 是 由 Real Media 针对 因特网 开发 的 。 
该 格式 也 支持 视频 。 该 格式 允许 低 带 宽 条 件 下 的 音频 流 
(在 线 音 乐 、 网 络 音乐 ) 。 由 于 是 低 带 宽 优 先 的 ， 质 量 
常会 降低 。 


Wave (waveform) 格式 是 由 IBM 和 微软 开发 的 。 所 有 运 
行 Windows 的 计算 机 和 所 有 网 络 浏览 器 (除了 Google 
Chrome) 都 支持 它 。 


WMA 格式 (Windows Media Audio)， 质 量 优 于 MP3, 
兼容 大 多 数 播放 器 ， 除 了 iPod, WMA 文件 可 作为 连续 
的 数据 流 来 传输 ， 这 使 它 对 于 网 络 电 台 或 在 线 音 乐 很 实 
用 。 

MP3 文件 实际 上 是 MPEG 文件 的 声音 部 分 。MPEG 格 
式 最 初 是 由 运动 图 像 专家 组 开发 的 。MP3 是 其 中 最 受 欢 
迎 的 针对 音乐 的 声音 格式 。 期 待 未 来 的 软件 系统 都 支持 


Go 


WAVE 是 因特网 上 最 受 欢迎 的 无 压缩 声音 格式 ， 所 有 流行 的 浏览 器 都 支持 它 。 如 果 


您 需要 未 经 压缩 的 声音 


音乐 或 演讲 ) ， 那 么 您 应 该 使 用 WAVE 格式 。 


MP3 是 最 新 的 压缩 录制 音乐 格式 。MP3 这 个 术语 已 经 成 为 数字 音乐 的 代名词 。 如 
果 您 的 网 址 从 事 录 制 音乐 ， 那 么 MP3 是 一 个 选项 。 


HTML Object 元 素 


<object> 的 作用 是 支持 HTML 助手 (插件 ) 。 


HTML 助手 (插件 ) 
xr E ud 
为 插件 。 


辅助 程序 可 用 于 播放 音频 和 视频 (以 及 其 他 ) 。 辅 助 程序 是 使 用 <object> 标签 来 加 
载 的 。 


i 的 一 个 优势 是 ， 您 能 够 允许 用 户 来 控制 部 分 或 全 部 播 
设置 。 


大 多 数 辅 助 应 用 程序 允许 对 音量 设置 和 播放 功能 〈 比 如 后 退 、 暂 停 、 停 止 和 播放 ) 
的 手工 (或 程序 的 ) 控制 。 


在 HTML 中 播放 视频 的 最 好 方式 ? 


如 需 了 解 在 HTML 中 包含 音 视频 的 最 好 方法 ， 请 参阅 下 一 章节 。 


使 用 QuickTime 来 播放 Wave 53 
实例 


<object width="420" height="360" 
classid="clsid:02BF25D5 - 8C17 -4B23 -BC80-D3488ABDDC6B" 
codebase="http://ww.apple.com/qtactivex/qtplugin.cab"> 
<param name="src" value="bird.wav" /> 

<param name="controller" value="true" /> 

</object> 


使 用 QuickTime 来 播放 MP4 视频 


实例 


<object width="420" height="360" 
classid="clsid:02BF25D5 -8C17 - 4B23 -BC80 -D3488ABDDC6B" 
codebase="http://ww.apple.com/qtactivex/qtplugin.cab"> 
«param name-"src" value="movie.mp4" /> 

<param name="controller" value="true" /> 

</object> 


使 用 Flash 来 播放 SWF 视频 
实例 


<object width="400" height="40" 
classid="clsid:d27cdb6e-ae6d -11cf -96b8 -444553540000" 
codebase="http://fpdownload.macromedia.com/ 
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> 
<param name="SRC" value="bookmark.swf"> 

<embed src="bookmark.swf" width="400" height="40"></embed> 
</object> 


使 用 Windows Media Player 来 播放 WMV 32 
下 面 的 例子 展示 用 于 播放 Windows 媒体 文件 的 推荐 代码 : 


实例 


<object width="100%" height="100%" 

type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" 

classid="CLSID: 6BF52A52-394A-11d3-B153-00CO4F79FAA6"> 

<param name="url" value="3d.wmv"> 

«param name="filename" value="3d.wmv"> 

<param name="autostart" value="1"> 

<param name="uiMode" value="full" /> 

<param name="autosize" value="1"> 

<param name="playcount" value="1"> 

<embed type="application/x-mplayer2" src="3d.wmv" width="100%" 
height="100%" autostart="true" showcontrols="true" 
pluginspage-"http://www.microsoft.com/Windows/MediaPlayer/"»«/embe« 

«/object» 
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HTML 音频 


在 HTML 中 播放 声音 的 方法 有 很 多 种 。 


问题 ， 问 题 ， 以 及 解决 方法 

在 HTML 中 播放 音频 并 不 容易 ! 

您 需要 说 熟 大 量 技巧 ， 以 确保 您 的 音频 文件 在 所 有 浏览 器 中 (Internet Explorer, 
Chrome, Firefox, Safari, Opera) 和 所 有 硬件 上 (PC, Mac, iPad, iPhone) 都 能 够 
播放 。 


在 本 章 ，W3School 为 您 总 结 了 问题 和 解决 方法 。 


使 用 插件 

浏览 器 插件 是 一 种 扩展 浏览 器 标准 功能 的 小 型 计算 机 程序 。 
插件 有 很 多 用 途 : 播放 音乐 、 显 示 地 图 、 验 证 银行 账号 ， 控 制 输入 等 等 。 
可 使 用 «object» 或 «embed» 标签 来 将 插件 添加 到 HTML 页 面 。 


这 些 标签 定义 资源 (通常 非 HTML 资源 ) 的 容器 ， 根 据 类 型 ， 它 们 即 会 由 浏览 器 显 
示 ， 也 会 由 外 部 插件 显示 。 


使 用 <embed> 元 素 


<embed> 标签 定义 外 部 (JE HTML) 内 容 的 容器 。 (这 是 一 个 HTML5 标签 ， 在 
HTML4 中 是 非法 的 ， 但 是 所 有 浏览 器 中 都 有 效 ) 。 


下 面 的 代码 片段 能 够 显示 嵌入 网 页 中 的 MP3 文件 : 
实例 


<embed height="100" width="100" src="song.mp3" /> 


问题 : 


e <embed> 标签 在 HTML 4 中 是 无 效 的 。 页 面 无 法 通过 HTML 4 验证 。 
e. 不 同 的 浏览 器 对 音频 格式 的 支持 也 不 同 。 

e 如 果 浏 览 器 不 支持 该 文件 格式 ， 没 有 插件 的 话 就 无 法 播放 该 音频 。 

e 如 果 用 户 的 计算 机 未 安装 插件 ， 无 法 播放 音频 。 


e. 如 果 把 该 文件 转换 为 其 他 格式 ， 仍 然 无 法 在 所 有 浏览 器 中 播放 。 
注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 


使 用 <object> 元 素 


«object tag» 标签 也 可 以 定义 外 部 (JE HTML) 内 容 的 容器 。 
下 面 的 代码 片段 能 够 显示 能 入 网 页 中 的 MP3 文件 : 


实例 


«object height="100" width="100" data="song.mp3"></object> 


问题 : 


。 不 同 的 浏览 器 对 音频 格式 的 支持 也 不 同 。 

。 如 果 浏 览 器 不 支持 该 文件 格式 ， 没 有 插件 的 话 就 无 法 播放 该 音频 。 
e 如 果 用 户 的 计算 机 未 安装 插件 ， 无 法 播放 音频 。 

e. 如 果 把 该 文件 转换 为 其 他 格式 ， 仍 然 无 法 在 所 有 浏览 器 中 播放 。 


使 用 HTML5 «audio» 元 素 


«audio» 元 素 是 一 个 HTML5 元 素 ， 在 HTML 4 中 是 非法 的 ， 但 在 所 有 浏览 器 中 都 
有 效 。 


实例 


<audio controls="controls"> 
<source src="song.mp3" type="audio/mp3" /> 
<source src="song.ogg" type="audio/ogg" /> 
Your browser does not support this audio format. 
</audio> 


上 面 的 例子 使 用 了 一 个 mp3 文件 ， 这 样 它 在 Internet Explorer, Chrome LAR 
Safari 中 是 有 效 的 。 

为 了 使 这 段 音频 在 Firefox 和 Opera 中 同样 有 效 ， 添 加 了 一 个 ogg 类 型 的 文件 。 如 
果 失 败 ， 会 显示 错误 消息 。 

问题 : 


e «audio» 标签 在 HTML 4 中 是 无 效 的 。 您 的 页 面 无 法 通过 HTML 4 验证 。 


e 您 必须 把 音频 文件 转换 为 不 同 的 格式 。 
e «audio» 元 素 在 老式 浏览 器 中 不 起 作用 。 


注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 
最 好 的 HTML 解决 方法 


实例 


<audio controls="controls" height="100" width="100"> 
«source src="song.mp3" type="audio/mp3" /> 
<source src="song.ogg" type="audio/ogg" /> 
«embed height="100" width="100" src="sSong.mp3" /> 
</audio> 


上 面 的 例子 使 用 了 两 个 不 同 的 音频 格式 。HTML5 «audio» 元 素 会 党 试 以 mp3 或 
ogg 来 播放 音频 。 如 果 失 败 ， 代 码 将 回 退 党 试 <embed> 元 素 。 


问题 : 
您 必须 把 音频 转换 为 不 同 的 格式 。 
<audio> 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 


<embed> 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 
<embed> 元 素 无 法 回 退 来 显示 错误 消息 。 


注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 


癌 网 站 添加 音频 的 最 简单 方法 


向 网 页 添加 音频 的 最 简单 的 方法 是 什么 ? 
雅虎 的 媒体 播放 器 绝对 算 其 中 之 一 。 


Pa 只 需 简单 地 让 雅虎 来 完成 歌曲 播放 的 工 
就 好 了 。 


mp3 以 及 一 系列 其 他 格式 。 一 行 简 单 的 代码 ， 您 就 可 以 把 它 添加 到 
页 中 ， 轻 松 地 将 HTML ARED LU, 


雅虎 媒体 播放 器 
实例 


<a href="song.mp3">Play Sound</a> 


«script type="text/javascript" src="http://mediaplayer .yahoo.com/j: 
</script> 


«| un 





D 








使 用 雅虎 播放 器 是 免费 的 。 如 需 使 用 它 ， 您 需要 把 这 段 JavaScript 插入 网 页 底部 : 
«script type="text/javascript" src="http://mediaplayer .yahoo.com/j: 
sj EGER] 1 


然后 只 需 简单 地 把 MP3 文件 链接 到 您 的 HTML A, JavaScript 会 自动 地 为 每 首 歌 
创建 播放 按钮 : 








«a href="song1.mp3">Play Song 1</a> 
<a href="song2.mp3">Play Song 2</a> 


雅虎 媒体 播放 器 为 您 的 用 户 提供 的 是 一 个 小 型 的 播放 按钮 ， 而 不 是 完整 的 播放 器 。 
不 过 ， 当 您 点 击 该 按钮 ， 会 弹出 完整 的 播放 器 。 


请 注意 ， 这 个 播放 器 始终 停靠 在 窗 框 底部 。 只 需 点 击 它 ， 就 可 将 其 滑 出 。 
使 用 超 链 接 
如 果 网 页 包 全 指向 媒体 文件 的 超 细 接 ， 大 多 数 浏 器 会 使 用 ' 畏 助 应 用 程序 "来 播放 


以 下 代码 片段 显示 指向 mp3 文件 的 链接 。 如 果 用 户 点 击 该 链接 ， 浏 览 器 会 启动 "十 
助 应 用 程序 "来 播放 该 文件 : 


实例 
<a href="song.mp3">Play the sound</a> 


内 联 的 声音 
当 您 在 网 页 中 包含 声音 ， 或 者 作为 网 页 的 组 成 部 分 时 ， 它 被 称 为 内 联 声音 。 


TA A 同时 请 ; 注意 ， M HECRT IY. ener 百 选 选项 。 


我 们 最 好 的 建议 是 只 在 用 户 和 希望 听 到 内 联 声音 的 地 方 包含 它们 。 一 个 正面 的 例子 
是 ， 在 用 户 需 要 听 到 录音 并 点 击 某 个 链接 时 ， 会 打开 页 面 然 后 播放 录音 。 


HTML 4.01 多 媒体 标签 


<applet> To LAER applet. 
<embed> HTML4 中 不 赞成 ，HTML5 Piit ELARGIR. 
<object> TELA BR It RR 
<param> 定义 对 象 的 参数 。 
HTML 5 多 媒体 标签 
<audio> 标签 定义 声音 ， 比如 音 日 IS 或 其 他 音 日 pil 流 o 
«embed» ERARRGUBRABSUPGE, ealik. 


HTML 视频 


ft HTML 中 播放 视频 的 方法 有 很 多 种 。 


«video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
«source src="movie.webm" type="video/webm" /> 
<object data="movie.mp4" width="320" height="240"> 

<embed src="movie.swf" width="320" height="240" /> 

</object> 

</video> 


问题 ， 问 题 ， 以 及 解决 方法 
在 HTML 中 播放 视频 并 不 容易 ! 
您 需要 说 熟 大 量 技巧 ， 以 确保 您 的 视频 文件 在 所 有 浏览 器 中 (Internet Explorer, 


Chrome, Firefox, Safari, Opera) 和 所 有 硬件 上 (PC, Mac, iPad, iPhone) 都 能 够 
播放 。 


在 本 章 ，W3School 为 您 总 结 了 问题 和 解决 方法 。 

使 用 <embed> 标签 

<embed> 标签 的 作用 是 在 HTML 5i [Ei PRA SHAT. 
下 面 的 HTML 代码 显示 伐 入 网 页 的 Flash 视频 : 


实例 


<embed src="movie.swf" height="200" width="200"/> 


问题 


e HTML4 无 法 识别 <embed> 标签 。 您 的 页 面 无 法 通过 验证 。 
e 如 果 浏 览 器 不 支持 Flash， 那 么 视频 将 无 法 播放 
e iPad 和 iPhone 不 能 显示 Flash 视频 。 


。 如 果 您 将 视频 转换 为 其 他 格式 ， 那 么 它 仍 然 不 能 在 所 有 浏览 器 中 播放 。 


使 用 <object> 标签 


<object> 标签 的 作用 是 在 HTML 页 面 中 嵌入 多 媒体 元 素 。 
下 面 的 HTML Fr E € zn Bg A [9] 5: P3—E& Flash 视频 : 


实例 


<object data="movie.swf" height="200" width="200"/> 


问题 
e 如 果 浏 览 器 不 支持 Flash， 将 无 法 播放 视频 。 
e iPad 和 iPhone 不 能 显示 Flash 视频 。 
e 如 果 您 将 视频 转换 为 其 他 格式 ， 那 么 它 仍 然 不 能 在 所 有 浏览 器 中 播放 。 


使 用 «video» 标签 


«video» 是 HTML 5 中 的 新 标签 。 
«video» 标签 的 作用 是 在 HTML RM PRAM MICH. 
以 下 HTML 片段 会 显示 一 段 戏 入 网 页 的 ogg、mp4 或 webm 格式 的 视频 : 


实例 


<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
«source src="movie.webm" type="video/webm" /> 

Your browser does not support the video tag. 

</video> 


问题 
。 您 必须 把 视频 转换 为 很 多 不 同 的 格式 。 


e «video» 元 素 在 老式 浏览 器 中 无 效 。 
e «video» 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 


最 好 的 HTML 解决 方法 


HTML 5 + <object> + <embed> 


<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
«source src="movie.ogg" type="video/ogg" /> 
«source src="movie.webm" type="video/webm" /> 
<object data="movie.mp4" width="320" height="240"> 

<embed src="movie.swf" width="320" height="240" /> 

</object> 

</video> 


上 例 中 使 用 了 4 中 不 同 的 视频 格式 。HTML 5 «video» 元 素 会 党 试播 放 以 mp4, 
ogg 或 webm 格式 中 的 一 种 来 播放 视频 。 如 果 均 失败 ， 则 回 退 到 <embed> 元 素 。 
问题 

e. 您 必须 把 视频 转换 为 很 多 不 同 的 格式 

e «video» 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 

e <embed> 元 素 无 法 通过 HTML 4 和 XHTML 验证 。 
注释 : 使 用 <!IDOCTYPE html» (HTML5) 解决 验证 问题 。 


优酷 解决 方案 

在 HTML 中 显示 视频 的 最 简单 的 方法 是 使 用 优酷 等 视频 网 站 。 

如 果 您 希望 在 网 页 中 播放 视频 ， 那 么 您 可 以 把 视频 上 传 到 优酷 等 视频 网 站 ， 然 后 在 
您 的 网 页 中 插入 HTML 代码 即 可 播放 视频 : 


«embed src="http://player.youku.com/player .php/sid/XMzZI2NTC4NTMy/v 
width="480" height="400" 

type="application/x-shockwave-flash"> 

</embed> 


[E 


使 用 超 链 接 


27 页 包含 指向 媒体 文件 的 超 链接 ， 大 多 数 浏览 器 会 使 用 “辅助 应 用 程序 "来 播放 


以 下 代码 片段 显示 指向 AVI 文件 的 链接 。 如 果 用 户 点 击 该 链接 ， 浏 览 器 会 启动 “ 辅 
助 应 用 程序 ”， 比 如 Windows Media Player 来 播放 这 个 AVI 文件 : 





实例 


<a href="movie.swf">Play a video file</a> 


天 于 内 联 视频 的 一 段 注释 
当 视频 被 包含 在 网 页 中 时 ， 它 被 称 为 内 联 视频 。 


如 果 您 打算 在 web 应 用 程序 中 使 用 内 联 视频 ， 您 需要 意识 到 很 多 人 都 觉得 内 联 视频 
DAWK 


同时 请 注意 ， 用 户 可 能 已 经 关闭 了 浏览 器 中 的 内 联 视频 选项 。 


我 们 最 好 的 建议 是 只 在 用 户 希 望 看 到 内 联 视频 的 地 方 包含 它 们 。 一 个 正面 的 例子 
是 ， 在 用 户 需 要 看 到 视频 并 点 击 某 个 链接 时 ， 会 打开 页 面 然 后 播放 视频 。 


HTML 4.01 多 媒体 标签 


标签 描述 
<applet> TR ELAR applet. 
<embed> TRR TEL ARR tR, (HTML5 中 人 允许) 
<object> ELARGIR. 
<param> 定义 对 象 的 参数 。 


HTML 5 多 媒体 标签 


标签 描述 
<video> 标签 定义 声音 ， 上 比如 音乐 或 其 他 音频 流 。 
<embed> 标签 定义 区 入 的 内 容 ， 上 比如 插件 。 


HTML XHTML 


XHTML 简介 


XHTML 是 以 XML 格式 编写 的 HTML. 


什么 是 XHTML ? 


e XHTML 指 的 是 可 扩展 超 文本 标记 语言 

e XHTML 与 HTML 4.01 几乎 是 相同 的 

e XHTML 是 更 严格 更 纯净 的 HTML 版 本 

e XHTML 是 以 XML 应 用 的 方式 定义 的 HTML 

e XHTML 是 2001 年 1 月 发 布 的 W3C 推荐 标准 
e XHTML 得 到 所 有 主流 浏览 器 的 支持 


为 什么 使 用 XHTML? 


因特网 上 的 很 多 页 面包 含 了 "糟糕 "的 HTML. 


如 果 在 浏览 器 中 查看 ， 下 面 的 HTML 代码 运行 起 来 非常 正常 〈 即 使 它 并 未 遵守 
HTML 规则 ) 


«html» 

«head» 

<title>This is bad HTML</title> 
<body> 

<hi>Bad HTML 

<p>This is a paragraph 

</body> 


XML 是 一 种 必须 正确 标记 且 格 式 良 好 的 标记 语言 。 

如 果 和 希望 学 习 XML， 请 阅读 我 们 的 XML 教程 。 

今日 的 科技 界 存 在 一 些 不 同 的 浏览 器 技术 。 其 中 一 些 在 计算 机 上 运行 ， 而 另 一 些 可 
能 在 移动 电话 或 其 他 小 型 设 各 上 运行 。 小 型 设 各 往往 缺乏 解释 “ 粮 粒 ”的 标记 语言 的 
资源 和 能 力 。 


所 以 - 通过 结合 XML 和 HTML 的 长 处 ， 开 发 出 了 XHTML, XHTML 是 作为 XML 
被 重新 设计 的 HTML。 


与 HTML 相 比 最 重要 的 区 别 : 


文档 结构 


e XHTML DOCTYPE 是 强制 性 的 


e <html> 中 的 XML namespace 属性 是 强制 性 的 
e «html», «head», «title» 以 及 <body> 也 是 强制 性 的 


元 素 语 法 


XHTML TRV EARE 
XHTML 元 素 必 须 始终 关闭 
XHTML 元 素 必须 小 写 

XHTML 文档 必须 有 一 个 根 元 素 


属性 语法 


e XHTML 属性 必须 使 用 小 写 
e XHTML 属性 值 必 须 用 引号 包围 
e XHTML 属性 最 小 化 也 是 禁止 的 


«IDOCTYPE ....> 是 强制 性 的 


XHTML 文档 必须 进行 XHTML 文档 类 型 声明 (XHTML DOCTYPE declaration) 。 
您 可 以 在 W3School 的 标签 参考 手册 中 找到 完整 的 XHTML 文档 类 型 。 


«html», «head», «title» 以 及 <body> 元 素 也 必须 存在 ， 并 且 必 须 使 用 «html» 中 
的 xmlns 属性 为 文档 规定 xml 命名 空间 。 


下 面 的 例子 展示 了 带 有 最 少 的 必需 标签 的 XHTML 文档 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtml1-transitional.dtd"- 


«html xmlns-z"http://www.w3.0rg/1999/xhtml"» 
«head» 


<title>Title of document</title> 
</head> 


</body> 


</html> 


如 何 从 HTML 转换 到 XHTML 


1. 向 每 张 页 面 的 第 一 行 添加 XHTML <!DOCTYPE> 
2. 向 每 张 页 面 的 html 元 素 添加 xmlns 属性 


. 把 所 有 元 素 名 改 为 小 写 
. 关闭 所 有 空 元 素 

. 把 所 有 属性 名 改 为 小 写 
. 为 所 有 属性 值 加 引号 


OD oR Ww 


用 W3C 验证 十 检验 XHTML 
在 下 面 的 文本 框 中 输入 您 的 网 址 ; 


<input name="uri" size="60" style-"margin:10px 0 0 0;" 
value-"http://www.w3school.com.cn/html/index.asp"» <input type="submit" 
value=" 验 证 文件 "> 


XHTML 测验 
该 测验 包含 20 道 问题 ， 且 没有 时 间 限 制 。 
本 测验 是 非 正式 的 ， 它 仅仅 是 了 解 您 XHTML 知识 掌握 程度 的 一 个 不 错 的 途径 。 


每 项 正确 答案 可 获得 1 分 。 在 测试 结束 后 ， 会 显示 您 的 总 分 。 最 高 分 为 20 分 。 
开始 XHTML 测验 


XHTML - TA 


XHTML TREL XML 格式 编写 的 HTML TR. 


XHTML 元 素 - 语法 规则 


XHTML TRV 1E TE ER ES 
XHTML 元 素 必 须 始终 关闭 
XHTML 元 素 必 须 小 写 

XHTML 文档 必须 有 一 个 根 元 素 


XHTML 705387 Zi IE f ER S 

在 HTML 中 ， 某 些 元 素 可 以 不 正确 地 彼此 骨 套 在 一 起 ， 就 像 这 样 : 
<b><i>This text is bold and italic</b></i> 

在 XHTML 中 ， 所 有 元 素 必 须 正 确 地 彼此 庶 套 ， 就 像 这 样 : 


<b><i>This text is bold and italic</i></b> 


XHTML TRIKA 


<p>This is a paragraph 
<p>This is another paragraph 


这 是 正确 的 : 


<p>This is a paragraph</p> 
<p>This is another paragraph</p> 


A break: <br> 
A horizontal rule: <hr> 
An image: <img src="happy.gif" alt="Happy face"> 


这 是 正确 的 : 


A break: <br /> 
A horizontal rule: <hr /> 
An image: <img src="happy.gif" alt="Happy face" /> 


XHTML 元 素 必 须 小 写 


<BODY> 
<P>This is a paragraph</P> 
</BODY> 


这 是 正确 的 : 


<body> 
<p>This is a paragraph</p> 
</body> 


XHTML - 属性 
XHTML 属性 是 以 XML 格式 编写 的 HTML 属性 。 


XHTML 属性 - 语法 规则 


e XHTML 属性 必须 使 用 小 写 
e XHTML 属性 值 必 须 用 引号 包围 
e XHTML 属性 最 小 化 也 是 禁止 的 


XHTML 属性 必须 使 用 小 写 
这 是 错误 的 : 
<table WIDTH="100%"> 


这 是 正确 的 : 


<table width="100%"> 


XHTML 属性 值 必 须 用 引号 包围 
这 是 错误 的 : 

<table width=100%> 
这 是 正确 的 : 


<table width="100%"> 


禁止 属性 简写 


<input checked> 

<input readonly> 
<input disabled> 
<option selected> 


这 是 正确 的 : 


«input checked-"checked" /> 
«input readonly="readonly" /> 
«input disabled-"disabled" /> 
«option selected-"selected" /> 


CSS 基础 


HTML 5 简介 


HTML5 是 下 一 代 的 HTML。 


什么 是 HTML5 ? 


HTML5 将 成 为 HTML, XHTML 以 及 HTML DOM 的 新 标准 。 
HTML 的 上 一 个 版 本 诞生 于 1999 年 。 自 从 那 以 后 ，Web 世界 已 经 经 历 了 巨变 。 
HTML5 仍 处 于 完善 之 中 。 然 而 ， 大 部 分 现代 浏览 器 已 经 具 各 了 某 些 HTML5 支持 。 


HTML5 是 如 何 起 步 的 ? 


HTML5 是 W3C 与 WHATWG 合作 的 结果 。 
编者 注 : W3C 指 World Wide Web Consortium， 万 维 网 联盟 。 
编者 注 : WHATWG 指 Web Hypertext Application Technology Working Group. 


WHATWG 致力 于 web 表单 和 应 用 程序 ， 而 W3C 专注 于 XHTML 2.0。 在 2006 
年 ， 双 方 决定 进行 合作 ， 来 创建 一 个 新 版 本 的 HTML, 


为 HTML5 建立 的 一 些 规则 : 


。 新 特性 应 该 基于 HTML. CSS. DOM 以 及 JavaScript. 
e 减少 对 外 部 插件 的 需求 (比如 Flash) 

@ 更 优秀 的 错 误 处 理 

e 更 多 取代 脚本 的 标记 

e HTML5 应 该 独立 于 设备 

e 开发 进程 应 对 公众 透明 


新 特性 


HTML5 中 的 一 些 有 趣 的 新 特性 : 


e 用 于 绘画 的 canvas 元 素 
e 用 于 媒介 回放 的 video 和 audio 元 素 
e 对 本 地 离线 存储 的 更 好 的 支持 





新 的 特殊 内 容 元 素 ， 比 如 article、footer、header、nav、section 
新 的 表单 控件 ， 比 如 calendar、date、time、email、url、search 


浏览 器 支持 


最 新 版 本 的 Safari, Chrome, Firefox 以 及 Opera 支持 某 些 HTML5 特性 。Internet 
Explorer 9 将 支持 某 些 HTML5 特性 。 


HTML 5 视频 


许多 时 墅 的 网 站 都 提供 视频 。HTML5 提供 了 展示 视频 的 标准 。 


Web 上 的 视频 


直到 现在 ， 仍 然 不 存在 一 项 旨 在 网 页 上 显示 视频 的 标准 。 


今天 ， 大 多 数 视频 是 通过 插件 (比如 Flash) 来 显示 的 。 然 而 ， 并 非 所 有 浏览 器 都 
拥有 同样 的 插件 。 


HTML5 规定 了 一 种 通过 video 元 素来 包含 视频 的 标准 方法 。 


视频 格式 
当前 ，video 元 素 支 持 三 种 视频 格式 : 
格式 IE Firefox Opera Chrome Safari 
Ogg No 3.5+ 10.5+ 5.0+ No 
MPEG 4 9.0+ No No 5.0+ QUEE 
WebM No 4.0+ 10.6+ 6.0+ No 


Ogg = 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 
MPEG4 = 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 
WebM = #4 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 


如 何 工作 
如 需 在 HTML5 中 显示 视频 ， 您 所 有 需要 的 是 : 


<video src="movie.ogg" controls="controls"> 
</video> 


control BEER. FSS See. 
包含 宽度 和 高 度 属 性 也 是 不 错 的 主意 。 
«video» 与 </video> 之 间 插 和 的 内 容 是 供 不 支持 video 元 素 的 浏览 器 显示 的 : 


实例 


<video src="movie.ogg" width="320" height="240" controls="controls' 
Your browser does not support the video tag. 
</video> 


E - 
上 面 的 例子 使 用 一 个 Ogg 文件 ， 适 用 于 Firefox、Opera 以 及 Chrome 浏览 器 。 
要 确保 适用 于 Safari 浏览 器 ， 视 频 文 件 必 须 是 MPEG4 类 型 。 


video 元 素 允 许多 个 source 元 素 。 source 元 素 可 以 链接 不 同 的 视频 文件 。 浏 览 器 
将 使 用 第 一 个 可 识别 的 格式 : 








实例 


<video width="320" height="240" controls="controls"> 
<source src="movie.ogg" type="video/ogg"> 
<source src="movie.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 


Internet Explorer 


Internet Explorer 8 不 支持 video 元 素 。 在 IE 9 中 ， 将 提供 对 使 用 MPEG4 的 
video 元 素 的 支持 。 


<video> 标签 的 属性 


属性 值 描述 
autoplay autoplay ”如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 。 
controls controls ”如果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 。 
height pixels 设置 视频 播放 器 的 高 度 。 


loop loop SHARE: 则 当 媒 介 文 件 完成 播放 后 再 次 开始 揪 


如 果 出 现 该 属性 ， 则 视频 在 页 面 加载 时 进行 加 载 ， 并 预 
各 播放 。 如 果 使 用 "autoplay"， 则 忽略 该 属性 。 

src url 要 播放 的 视频 的 URL. 

width pixels 设置 视频 播放 器 的 宽度 。 


preload preload 


相关 页 面 


参考 手册 : HTML 5 «video» 标签 


HTML 5 Video + DOM 


HTML5 «video»? - 使 用 DOM 进行 控制 


HTML5 «video»? 元 素 同 样 拥有 方法 、 属 性 和 事件 。 

其 中 的 方法 用 于 播放 、 痢 停 以 及 加 载 等 。 其 中 的 属性 (比如 时 长 、 音 量 等 ) 可 以 被 
读 取 或 设置 。 其 中 的 DOM 事件 能 够 通知 您 ， 比 方 说 ，<video> 元 素 开 始 播放 、 已 
暂停 ， 已 停止 ， 等 等 。 

下 例 中 简单 的 方法 ， 向 我 们 演示 了 如 何 使 用 «video» 元 素 ， 读 取 并 设置 属性 ， 以 及 
如 何 调用 方法 。 

实例 


为 视频 创建 简单 的 播放 /暂停 以 及 调整 尺寸 控件 : 


<!DOCTYPE html» 
<html> 
<body> 


<div style="text-align:center;"> 

«button onclick="playPause( )">#6iK/ %4 {E</button> 

«button onclick="makeBig()">X</button> 

«button onclick="makeNormal()">#</button> 

«button onclick-"makeSmall()"»/«/button» 

«br /» 

«video id-'"video1" width="420" style="margin-top:15px;"> 
«source src="/example/htm15/mov_bbb.mp4" type="video/mp4" /> 
«source src="/example/htm15/mov_bbb.ogg" type-'video/ogg" /> 
Your browser does not support HTML5 video. 

«/video» 

«/div» 


«script type="text/javascript"> 
var myVideo-document.getElementById("video1"); 


function playPause() 


if (myVideo.paused) 
myVideo.play(); 


else 
myVideo.pause(); 
} 
function makeBig() 
{ 
myVideo.width=560; 
} 
function makeSmall() 
{ 
myVideo.width=320; 
} 


function makeNormal() 


myVideo.width=420; 
j 


«/script» 


«/body» 
«/html» 


上 面 的 例子 调用 了 两 个 方法 play() 和 pause()。 它 同时 使 用 了 两 个 属性 : paused 
和 width。 


HTML5 <video> - 方法 、 属 性 以 及 事件 
下 面 列 出 了 大 多 数 浏 览 器 支持 的 视频 方法 、 属 性 和 事件 : 


方法 属性 事件 
play() currentSrc play 
pause() currentTime pause 
load() videoWidth progress 
canPlayType videoHeight error 
duration timeupdate 
ended ended 
error abort 
paused empty 
muted emptied 
seeking waiting 
volume loadedmetadata 
height 
width 


注释 : 在 所 有 属性 中 ， 只 有 videoWidth 和 videoHeight 属性 是 立即 可 用 的 。 在 视频 
的 元 数据 已 加 载 后 ， 其 他 属性 才 可 用 。 


HTML 5 音频 


HTML5 提供 了 播放 音频 的 标准 。 


Web 上 的 音频 


直到 现在 ， 仍 然 不 存在 一 项 旨 在 网 页 上 播放 音频 的 标准 。 


今天 ， 大 多 数 音频 是 通过 插件 (比如 Flash) 来 播放 的 。 然 而 ， 并 非 所 有 浏览 器 都 
拥有 同样 的 插件 。 


HTML5 规定 了 一 种 通过 audio 元 素来 包含 音频 的 标准 方法 。 
audio 元 素 能 够 播放 声音 文件 或 者 音频 流 。 

音频 格式 

当前 ，audio 元 素 支 持 三 种 音频 格式 : 


IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 
Ogg Vorbis V V 
MP3 V y 
Wav v y 


如 何 工 作 
如 需 在 HTML5 中 播放 音频 ， 您 所 有 需要 的 是 : 


<audio src="song.ogg" controls="controls"> 
</audio> 


control BIERA IIE, FSAMS See. 
«audio» 5 </audio> 之 间 插 入 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 的 : 


实例 


<audio src="song.ogg" controls="controls"> 
Your browser does not support the audio tag. 
</audio> 


上 面 的 例子 使 用 一 个 Ogg 文件 ， 适 用 于 Firefox、Opera 以 及 Chrome 浏览 器 。 

要 确保 适用 于 Safari 浏览 器 ， 音 频 文件 必须 是 MP3 或 Wav 类 型 。 

audio 元 素 人 允许 多 个 source 元 素 。 source 元 素 可 以 链接 不 同 的 音频 文件 。 浏 览 器 
将 使 用 第 一 个 可 识别 的 格式 : 

实例 

头 


<audio controls="controls"> 
«source src="song.ogg" type="audio/ogg"> 
«source src="song.mp3" type="audio/mpeg"> 
Your browser does not support the audio tag. 
</audio> 


Internet Explorer 


Internet Explorer 8 不 支持 audio 元 素 。 在 IE 9 中 ， 将 提供 对 audio 元 素 的 支持 。 
<audio> 标签 的 属性 


属性 值 描述 
autoplay autoplay ”如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 。 
controls controls ”如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 上 比如 播放 按钮 。 
loop loop 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 。 


如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预 
各 播放 。 如 果 使 用 "autoplay"， 则 忽略 该 属性 。 


src url 要 播放 的 音频 的 URL. 


preload preload 


相关 页 面 


参考 手册 : HTML 5 <audio> 标签 


HTML 5 拖 放 
拖 放 (Drag 和 drop) 是 HTML5 标准 的 组 成 部 分 。 
拖 放 


拖 放 是 一 种 常见 的 特性 ， 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 。 
在 HTML5 中 ， 拖 放 是 标准 的 一 部 分 ， 任 何 元 素 都 能 够 拖 放 。 


浏览 器 支持 
Internet Explorer 9、Firefox、Opera 12、Chrome 以 及 Safari 5 支持 拖 放 。 
注释 : 在 Safari 5.1.2 中 不 支持 拖 放 。 


HTML5 拖 放 实例 
下 面 的 例子 是 一 个 简单 的 拖 放 实例 : 


实例 


<!DOCTYPE HTML> 

<html> 

<head> 

<script type="text/javascript"> 
function allowDrop(ev) 


{ 


ev.preventDefault(); 


} 


function drag(ev) 


ev.dataTransfer.setData("Text",ev.target.id); 


j 


function drop(ev) 


{ 


ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 


j 

«/script» 

«/head» 

«body» 

«div id="divi" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div> 

«img id="dragi" src="img_ logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69" /> 


</body> 
</html> 


它 看 上 去 也 许 有 些 复杂 ， 不 过 我 们 可 以 分 别 研究 拖 放 事 件 的 不 同 部 分 。 


设置 元 素 为 可 拖 放 
首先 ， 为 了 使 元 素 可 拖 动 ， 把 draggable 属性 设置 为 true : 


<img draggable="true" /> 


拖 动 什么 - ondragstart 和 setData() 


然后 ， 规 定 当 元 素 被 拖 动 时 ， 会 发 生 什么 。 


在 上 面 的 例子 中 ，ondragstart 属性 调用 了 一 个 函数 ，drag(event)， 它 规定 了 被 拖 
动 的 数据 。 


dataTransfer.setData() 方法 设置 被 拖 数 据 的 数据 类 型 和 值 : 


function drag(ev) 


ev.dataTransfer.setData("Text",ev.target.id); 


j 
在 这 个 例子 中 ， 数 据 类 型 是 "Text"， 值 是 可 拖 动 元 素 的 id ("drag1")。 


WEHI X - ondragover 


ondragover 事件 规定 在 何 外 放置 被 拖 动 的 数据 。 


默认 地 ， 无 法 将 数据 /元 素 放 置 到 其 他 元 素 中 。 如 果 需 要 设置 允许 放置 ， 我 们 必须 阻 
止 对 元 素 的 默认 义理 方式 。 


这 要 通过 调用 ondragover 事件 的 event.preventDefault() 方法 : 


event.preventDefault() 


进行 放置 - ondrop 


当 放 置 被 拖 数据 时 ， 会 发 生 drop 事件 。 
在 上 面 的 例子 中 ，ondrop 属性 调用 了 一 个 隙 数 ，drop(event) : 


function drop(ev) 


{ 

ev.preventDefault(); 

var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 


j 


代码 解释 : 


e 调用 preventDefault() 来 避免 浏览 器 对 数据 的 默认 义理 (drop 事件 的 默认 行为 
是 以 链接 形式 打开 ) 

e 通过 dataTransfer.getData("Text") 方法 获得 被 拖 的 数据 。 该 方法 将 返回 在 
setData() 方法 中 设置 为 相同 类 型 的 任何 数据 。 

e 被 拖 数 据 是 被 拖 元 素 的 id ("drag1") 

把 被 拖 元 素 追 加 到 放置 元 素 (目标 元 素 ) 中 


更 多 实例 


W3School 前 端 教 程 合 


来 回 拖 放 图 片 
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HTML 5 Canvas 


canvas 元 素 用 于 在 网 页 上 绘制 图 形 。 


什么 是 Canvas ? 

HTML5 的 canvas 元 素 使 用 JavaScript 在 网 页 上 绘制 图 像 。 
画布 是 一 个 矩形 区 域 ， 您 可 以 控制 其 每 一 像素 。 

canvas 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 
创建 Canvas 元 素 


向 HTML5 页 面 添 加 canvas 元 素 。 
规定 元 素 的 id. 宽度 和 高 度 : 


<canvas id="myCanvas" width="200" height="100"></canvas> 


通过 JavaScript 来 绘制 


canvas 元 素 本 身 是 没有 绘图 能 力 的 。 所 有 的 绘制 工作 必须 在 JavaScript 内 部 完 
成 : 


<script type="text/javascript"> 

var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.fillStyle-"4ZFF0000"; 
cxt.fillRect(0,0,150,75); 

«/script» 


JavaScript 使 用 id 来 寻找 canvas 元 素 : 


var c-document.getElementById("myCanvas"); 


然后 ， 创 建 context 对 象 : 


var cxt=c.getContext("2d"); 


getContext("2d") 对 象 是 内 建 的 HTML5 对 象 ， 拥 有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 
字符 以 及 添加 图 像 的 方法 。 


下 面 的 两 行 代码 绘制 一 个 红色 的 矩形 : 


cxt.fillStyle="#FFO000"; 
cxt.fillRect(0,0,150, 75); 


fillStyle 方法 将 其 染 成 红色 ， 人 illRect 方法 规定 了 形状 、 位 置 和 尺寸 。 


理解 坐标 

上 面 的 fillRect 方法 拥有 参数 (0,0,150,75)。 

意思 是 : 在 画布 上 绘制 150x75 的 矩形 ， 从 左上 角 开 始 (0,0)。 
如 下 图 所 示 ， 画 布 的 X 和 YY 坐标 用 于 在 画布 上 对 绘画 进行 定位 。 


x 


实例 : 3E SUE BPE LAA BI te 
更 多 Canvas 实例 
下 面 的 在 canvas 元 素 上 进行 绘画 的 更 多 实例 : 


实例 - 线条 


通过 指定 从 何 处 开始 ， 在 何 处 结束 ， 来 绘制 一 条 线 : 


ion 


JavaScript 代码 : 


<script type="text/javascript"> 


var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.moveTo(10,10); 

cxt.lineTo(150,50); 

cxt.lineTo(10,50); 

cxt.stroke(); 


«/script» 


canvas 元 素 : 


«canvas id="myCanvas" width="200" height="100" style-"border:ipx st 
Your browser does not support the canvas element. 
«/canvas» 
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例 - 圆 形 
过 规定 尺寸 、 颜 色 和 位 置 ， 来 绘制 一 个 圆 : 





将 


Bá 


JavaScript 代码 : 


«script type="text/javascript"> 


var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.fillStyle-z"4ZFF0000"; 

cxt.beginPath(); 
cxt.arc(70,18,15,0,Math.PI*2,true); 
cxt.closePath(); 

cxt Tali); 


«/script» 


canvas 元 素 : 


«canvas id="myCanvas" width="200" height="100" style-"border:ipx sc 
Your browser does not support the canvas element. 
</canvas> 


‘ = 








实例 - 渐变 
使 用 您 指定 的 颜色 来 绘制 渐变 背景 : 


JavaScript 代码 : 


<script type="text/javascript"> 


var c-document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 

var grd=cxt.createLinearGradient(0,0,175,50); 
grd.addColorStop(0, "#FF0000"); 
grd.addColorStop(1, 'Z00FF00"); 
cxt.fillStyle=grd; 

cxt.fillRect(0,0,175,50); 


</script> 


canvas 元 素 : 


«canvas id="myCanvas" width="200" height="100" style-"border:ipx st 
Your browser does not support the canvas element. 
</canvas> 





加 


实例 - 图 像 
把 一 幅 图 像 放置 到 画布 上 : 


JavaScript 代码 : 


<script type="text/javascript"> 


var 
var 
var 


img. 
cxt. 


c-document.getElementById("myCanvas"); 


cxtzc.getContext ("2d"); 
img-new Image() 
src="flower.png" 
drawImage(img,0,0); 


</script> 


canvas 元 素 : 


<canvas id="myCanvas" width="200" 
Your browser does not support the canvas element. 
</canvas> 


四 一 = LL meray 


相关 页 面 


参考 手册 : HTML 5 <canvas> 标签 
参考 手册 : HTML DOM Canvas 对 象 


height="100" style="border:1px sc 





HTML5 内 联 SVG 


HTML5 支持 内 联 SVG, 


什么 是 SVG ? 
e SVG 指 可 伸缩 矢量 图 形 (Scalable Vector Graphics) 
e SVG 用 于 定义 用 于 网 络 的 基于 矢量 的 图 形 
e SVG 使 用 XML 格式 定义 图 形 
e SVG 图 像 在 放大 或 改变 尺寸 的 情况 下 其 图 形 质量 不 会 有 损失 
e SVG 是 万 维 网 联盟 的 标准 
SVG 的 优势 


与 其 他 图 像 格式 相 比 (比如 JPEG 和 GIF) ， 使 用 SVG 的 优势 在 于 : 


e SVG 图 像 可 通过 文本 编辑 器 来 创建 和 修改 

e SVG 图 像 可 被 搜索 、 索 引 、 脚 本 化 或 压缩 

e SVG 是 可 伸缩 的 

e SVG 图 像 可 在 任何 的 分 辩 率 下 被 高 质量 地 打印 
e SVG 可 在 图 像 质量 不 下 降 的 情况 下 被 放大 


浏览 器 支持 

Internet Explorer 9、Firefox、Opera、Chrome 以 及 Safari 支持 内 联 SVG。 
把 SVG iB FEBR. HTML 页 面 

在 HTML5 中 ， 您 能 够 将 SVG 元 素 直 接 伐 入 HTML 页 面 中 : 


实例 


<!DOCTYPE html» 

<html> 

<body> 

«svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190' 
<polygon points="100,10 40,180 190,60 10,60 160,180" 
style="fill:lime;stroke: purple; stroke-width:5;fill-rule:evenodd;' 

</svg> 

</body> 

</html> 











0 需 学 习 更 多 有 关 SVG 的 知识 ， 请 阅读 我 们 的 SVG 教程 。 
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HTML 5 Canvas vs. SVG 


Canvas 和 SVG 都 允许 您 在 浏览 器 中 创建 图 形 ， 但 是 它们 在 根本 上 是 不 同 的 。 


SVG 


SVG 是 一 种 使 用 XML 描述 2D 图 形 的 语言 。 


SVG 基于 XML， 这 意味 着 SVG DOM 中 的 每 个 元 素 都 是 可 用 的 。 您 可 以 为 某 个 元 
素 附 加 JavaScript 事件 处 理 器 。 


在 SVG 中 ， 每 个 被 绘制 的 图 形 均 被 视 为 对 象 。 如 果 SVG 对 象 的 属性 发 生变 化 ， 那 
么 浏览 器 能 够 自动 重 现 图 形 。 


Canvas 


Canvas 通过 JavaScript 来 绘制 2D 图 形 。 
Canvas 是 逐 像素 进行 泻 染 的 。 


在 canvas 中 ， 一 旦 图 形 被 绘制 完成 ， 它 就 不 会 继续 得 到 浏览 器 的 关注 。 如 果 其 位 
置 发 生变 化 ， 那 么 整个 场景 也 需要 重新 绘制 ， 包 括 任 何 或 许 已 被 图 形 履 盖 的 对 象 。 


Canvas 与 SVG 的 比较 


下 表 列 出 了 canvas 与 SVG 之 间 的 一 些 不 同 之 处 。 


Canvas 


不 支持 事件 义理 器 

弱 的 文本 泻 染 能 力 

能 够 以 .png 或 jpg 格式 保存 结果 图 像 

最 适合 图 像 密集 型 的 游戏 ， 其 中 的 许多 对 象 会 被 频繁 重 绘 


SVG 
。 不 依赖 分 辩 率 
。 文 持 事 件 处 理 器 
e 最 适合 带 有 大 型 泻 染 区 域 的 应用 程序 〈 比 如 谷歌 地 图 ) 
e 复杂 度 高 会 减 慢 泻 染 速 度 (任何 过 度 使 用 DOM 的 应 用 都 不 快 ) 
。 不 适合 游戏 应 用 


HTML5 地 理 定 位 


HTML5 Geolocation (地 理 定位 ) 用 于 定位 用 户 的 位 置 。 
亲自 试 一 试 : 在 谷歌 地 图 上 显示 您 的 位 置 


<!DOCTYPE html» 
«html» 
«body» 
«p id="demo"> 点 击 这 个 按钮 ， 获 得 您 的 位 置 : </p> 
«button onclick="getLocation()"> 试 一 下 </button> 
<div id="mapholder"></div> 
«script src="http://maps.google.com/maps/api/js?sensor=false"></sci 
<script> 
var x=document.getElementById("demo"); 
function getLocation() 
{ 
if (navigator.geolocation) 
{ 
navigator .geolocation.getCurrentPosition(showPosition, showErrot 
} 


else{x.innerHTML="Geolocation is not supported by this browser." 


} 


function showPosition(position) 
{ 
lat=position.coords. latitude; 
lon=position.coords. longitude; 
latlon=new google.maps.LatLng(lat, lon) 
mapholder-zdocument.getElementById( 'mapholder') 
mapholder.style.height-'250px'; 
mapholder.style.width-'500px'; 


var myOptions-( 

center:latlon, zoom:14, 

mapTypeId:google.maps.MapTypeld.ROADMAP, 

mapTypeControl:false, 
navigationControloptions:{style:google.maps.NavigationControlSty- 
}; 

var map=new google.maps.Map(document.getElementById("mapholder"), 
var marker=new google.maps.Marker({position:latlon,map:map, title 


} 


function showError(error) 


( 


switch(error.code) 


{ 
case error.PERMISSION DENIED: 


x.innerHTML-"User denied the request for Geolocation." 


break; 
case error.POSITION UNAVAILABLE: 
x.innerHTML-"Location information is unavailable." 
break; 
case error.TIMEOUT: 
x.innerHTML-"The request to get user location timed out." 
break; 
case error.UNKNOWN ERROR: 
x.innerHTML-"An unknown error occurred." 
break; 
} 
} 
</script> 
</body> 
</html> 
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定位 用 户 的 位 置 

HTML5 Geolocation API 用 于 获得 用 户 的 地 理 位 置 。 

鉴于 该 特性 可 能 侵犯 用 户 的 隐私 ， 除 非 用 户 同意 ， 否 则 用 户 位 置信 息 是 不 可 用 的 。 
浏览 器 支持 

Internet Explorer 9, Firefox, Chrome, Safari 以 及 Opera 支持 地 理 定位 。 

注释 : 对 于 拥有 GPS 的 设备 ， 比 如 iPhone， 地理 定 位 更 加 精确 。 





HTML5 - 使 用 地 理 定 位 


请 使 用 getCurrentPosition() 方法 来 获得 用 户 的 位 置 。 
下 例 是 一 个 简单 的 地 理 定位 实例 ， 可 返回 用 户 位 置 的 经 度 和 纬度 。 


实例 


<script> 
var x-document.getElementById("demo"); 
function getLocation() 
if (navigator.geolocation) 
navigator.geolocation.getCurrentPosition(showPosition); 
else{x.innerHTML="Geolocation is not supported by this browser." 
function showPosition(position) 
{ 
x.innerHTML-"Latitude: " + position.coords.latitude + 
"<br />Longitude: " + position.coords. longitude; 


</script> 





e 检测 是 否 支持 地 理 定 位 

° 如 果 支 持 ， 则 运行 getCurrentPosition() 方法 。 如 果 不 支 持 ， 则 向 用 户 显示 一 
段 消 息 。 

e 如 果 getCurrentPosition() 运 行 成 功 ， 则 向 参数 showPosition 中 规定 的 函数 返 
一 个 coordinates 对 象 

e showPosition() 函数 获得 并 显示 经 度 和 纬度 


上 面 的 例子 是 一 个 非常 基础 的 地 理 定位 脚本 ， 不 含 错误 处 理 。 


处 理 错误 和 拒绝 


getCurrentPosition() 方法 的 第 二 个 参数 用 于 处 理 错 误 。 定 当 获取 用 户 位 置 失败 
Brie {TAR : 


实例 


function showError(error) 


{ 
switch(error.code) 
{ 
case error.PERMISSION DENIED: 
x.innerHTML-"User denied the request for Geolocation." 
break; 
case error.POSITION UNAVAILABLE: 
x.innerHTML-"Location information is unavailable." 
break; 
case error.TIMEOUT: 
x.innerHTML-"The request to get user location timed out." 
break; 
case error.UNKNOWN ERROR: 
x.innerHTML-"An unknown error occurred." 
break; 
} 
} 
错误 代码 : 


e Permission denied - 用 户 不 允许 地 理 定位 
e Position unavailable - 无 法 获取 当前 位 置 
e Timeout - 操作 超时 


在 地 图 中 显示 结果 


如 需 在 地 图 中 显示 结果 ， 您 需要 访问 可 使 用 经 纬度 的 地 图 服务 ， 比 如 谷歌 地 图 或 百 
度 地 图 : 


实例 


function showPosition(position) 


{ 


var latlon=position.coords.latitude+","+position.coords.longitude; 


var img_url="http://maps.googleapis.com/maps/api/staticmap?center=' 
+latlon+"&zoom=14&size=400x300&sensor=false"; 


document .getElementById("mapholder").innerHTML="<img src='"+img_ur: 


} 
BE 
在 上 例 中 ， 我 们 使 用 返回 的 经 纬度 数据 在 谷歌 地 图 中 显示 位 置 《使 用 静态 图 像 ) 。 
谷歌 地 图 脚本 





上 面 的 链接 向 您 演示 如 何 使 用 脚本 来 显示 带 有 标记 、 缩 放 和 拖 电 选 项 的 交互 式 地 
图 。 


给 定位 置 的 信息 
本 页 演示 的 是 如 何在 地 图 上 显示 用 户 的 位 置 。 不 过 ， 地 理 定位 对 于 给 定位 置 的 信息 
PARA. 


。 更 新 本 地 信息 
。 显示 用 户 周 围 的 兴趣 点 
e 交互 式 车 载 导 航 系统 (GPS) 


getCurrentPosition() 方法 - 返回 数据 


若 成 功 ， 则 getCurrentPosition() 方法 返回 对 象 。 始 终 会 返回 latitude, longitude 以 
及 accuracy 属性。 如 果 可 用 ， 则 会 返回 其 他 下 面 的 属性 。 


属性 描述 
coords.latitude 十 进 制 数 的 纬度 
coords.longitude 十 进 制 数 的 经 度 
coords.accuracy 位 置 精度 
coords.altitude 海拔 ， 海 平面 以 上 以 米 计 
coords.altitudeAccuracy 位 置 的 海拔 精度 
coords.heading 方向 ， 从 正 北 开始 以 度 计 
coords.speed 速度 ， 以 米 /每 秒 计 
timestamp 响应 的 日 期 /时 间 


Geolocation 对 象 - 其 他 有 趣 的 方法 


watchPosition() - 返回 用 户 的 当前 位 置 ， 并 继续 返回 用 户 移动 时 的 更 新 位 置 (就 像 
^h &.ERy GPS). 


clearWatch() - 停止 watchPosition() 方法 
下 面 的 例子 展示 watchPosition() 方法 。 您 需要 一 台 精 确 的 GPS 设备 来 测试 该 例 
(比如 iPhone) : 


实例 


<script> 
var x-document.getElementById("demo"); 
function getLocation() 


{ 
if (navigator .geolocation) 
{ 
navigator .geolocation.watchPosition(showPosition) ; 
} 
else{x.innerHTML="Geolocation is not supported by this browser." 
} 
function showPosition(position) 
x.innerHTML-"Latitude: " + position.coords.latitude + 
"<br />Longitude: " + position.coords.longitude; 
} 
</script> 


ee SS B 





HTML 5 Web 存储 


在 客户 端 存 储 数据 
HTML5 提供 了 两 种 在 客户 端 存储 数据 的 新 方法 : 


e localStorage - 没有 时 间 限 制 的 数据 存储 
e sessionStorage - 针对 一 个 session 的 数据 存储 


之 前 ， 这 些 都 是 由 cookie 完成 的 。 但 是 cookie 不 适合 大 量 数据 的 存储 ， 因 为 它们 
由 每 个 对 服务 器 的 请 求 来 传递 ， 这 使 得 cookie 速度 很 慢 而 且 效率 也 不 高 。 


在 HTML5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 。 
它 使 在 不 影响 网 站 性 能 的 情况 下 存储 大 量 数据 成 为 可 能 。 


对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 一 个 网 站 只 能 访问 其 自身 的 数据 。 
HTML5 使 用 JavaScript 来 存储 和 访问 数据 。 


localStorage 方法 


localStorage 方法 存储 的 数据 没有 时 间 限 制 。 第 二 天 、 第 二 周 或 下 一 年 之 后 ， 数 据 
依然 可 用 。 


如 何 创 建 和 访问 localStorage : 
实例 


<script type="text/javascript"> 
localStorage. lastname="Smith"; 
document .write(localStorage. lastname) ; 
</script> 


下 面 的 例子 对 用 户 访问 页 面 的 次 数 进行 计数 : 


实例 


<script type="text/javascript"> 
if (localStorage.pagecount ) 
{ 
localStorage.pagecount=Number(localStorage.pagecount) +1; 
} 
else 
{ 
localStorage.pagecount-1; 
} 
document .write("Visits "+ localStorage.pagecount + " time(s)."); 
</script> 


sessionStorage 方法 


sessionStorage 方法 针对 一 个 session 进行 数据 存储 。 当 用 户 关闭 浏览 器 窗口 后 ， 
数据 会 被 删除 。 


如 何 创建 并 访问 一 个 sessionStorage : 


实例 


<script type="text/javascript"> 
sessionStorage.lastname="Smith"; 
document .write(sessionStorage. lastname); 
</script> 


下 面 的 例子 对 用 户 在 当前 session 中 访问 页 面 的 次 数 进 行 计 数 : 


实例 


<script type="text/javascript"> 
if (sessionStorage.pagecount ) 
{ 
sessionStorage.pagecount=Number (sessionStorage.pagecount) +1; 
} 
else 
{ 
sessionStorage.pagecount-1; 
} 
document.write("Visits "+sessionStorage.pagecount+" time(s) this st 
«/script» 











HTML 5 应 用 程序 缓存 


使 用 HTML5， 通 过 创建 cache manifest 文件 ， 可 以 轻松 地 创建 web 应 用 的 离线 
版 本 。 


什么 是 应 用 程序 缓存 (Application Cache) ? 


HTML5 引入 了 应 用 程序 缓存 ， 这 意味 着 web 应 用 可 进行 缓存 ， 并 可 在 没有 因特网 
连接 时 进行 访问 。 

应 用 程序 缓存 为 应 用 带 来 三 个 优势 : 

e 离线 浏览 - 用 户 可 在 应 用 离线 时 使 用 它们 

e 速度 - 已 缓存 资源 加 载 得 更 快 

减少 服务 器 负载 - 浏览 器 将 只 从 服务 器 下 载 更 新 过 或 更 改过 的 资源 。 


浏览 器 文 持 


所 有 主流 浏览 器 均 支 持 应 用 程序 缓存 ， 除 了 Internet Explorer. 


HTML5 Cache Manifest 实例 


下 面 的 例子 展示 了 带 有 cache manifest 的 HTML 文档 ( 供 离 线 浏览 ) 
实例 


<!DOCTYPE HTML> 

<html manifest="demo.appcache"> 
<body> 

The content of the document...... 
</body> 


</html> 


Cache Manifest 基础 


如 需 启 用 应 用 程序 缓存 ， 请 在 文档 的 «html» 标签 中 包含 manifest 属性 : 


<!DOCTYPE HTML> 
<html manifest="demo.appcache"> 


Spee 
每 个 指定 了 manifest 的 页 面 在 用 户 对 其 访问 时 都 会 被 缓存 。 如 果 未 指定 manifest 
属性 ， 则 页 面 不 会 被 缓存 (除非 在 manifest 文件 中 直接 指定 了 该 页 面 ) 。 


manifest 文件 的 建议 的 文件 扩展 名 是 : ".appcache"。 


请 注意 ，manifest 文件 需要 配置 正确 的 MIME-type， 即 "text/cache-manifest"。 必 
须 在 web 服务 器 上 进行 配置 。 


Manifest 文件 
manifest 文件 是 简单 的 文本 文件 ， 它 告知 浏览 器 被 缓存 的 内 容 (以 及 不 缓存 的 内 


sy 


容 ) 

manifest 文件 可 分 为 三 个 部 分 : 

e CACHE MANIFEST - 在 此 标题 下 列 出 的 文件 将 在 首次 下 载 后 进行 缓存 

e NETWORK - 在 此 标题 下 列 出 的 文件 需要 和 与 服务 器 的 连接 ， 且 不 会 被 缓存 


e FALLBACK - 在 此 标题 下 列 出 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 (比如 
404 页 面 ) 


CACHE MANIFEST 


第 一 行 ，CACHE MANIFEST， 是 必需 的 : 


CACHE MANIFEST 
/theme.css 
/logo.gif 
/main.js 


上 面 的 manifest 文件 列 出 了 三 个 资源 : 一 个 CSS 文件 ， 一 个 GIF 图 像 ， 以 及 一 个 
JavaScript 文件 。 当 manifest 文件 加 载 后 ， 浏 览 器 会 从 网 站 的 根 目 录 下 载 这 三 个 文 
件 。 然 后 ， 无 论 用 户 何 时 与 因特网 断 开 连接 ， 这 些 资源 依然 是 可 用 的 。 


NETWORK 


下 面 的 NETWORK 小 节 规定 文件 "login.asp" 永远 不 会 被 缓存 ， 且 离线 时 是 不 可 用 
的 : 


NETWORK: 
login.asp 


可 以 使 用 星 号 来 指示 所 有 其 他 资源 /文件 都 需要 因特网 连接 : 


NETWORK : 
* 


FALLBACK 


下 面 的 FALLBACK 小 节 规 定 如 果 无 法 建立 因特网 连接 ， 则 用 "offline.html" 替代 
/html5/ 目录 中 的 所 有 文件 : 


FALLBACK: 
/html5/ /404.htm1 


注释 : 第 一 个 URI 是 资源 ， 第 二 个 是 替补 。 


更 新 缓存 


一 县 应 用 被 缓存 ， 它 就 会 保持 缓存 站 到 发 生 下 列 情况 : 


e 用 户 清空 浏览 器 缓存 
e manifest 文件 被 修改 (参阅 下 面 的 提示 ) 
e 由 程序 来 更 新 应 用 缓存 


实例 - 完整 的 Manifest 文件 


CACHE MANIFEST 

# 2012-02-21 v1.0.0 
/theme.css 
/logo.gif 

/main.js 


NETWORK: 
login.asp 


FALLBACK: 
/html15/ /404.htm1 


重要 的 提示 : 以 #" 开头 的 是 注释 行 ， 但 也 可 满足 其 他 用 途 。 应 用 的 缓存 会 在 其 
manifest 文件 更 改 时 被 更 新 。 如 果 您 编辑 了 一 幅 图 片 ， 或 者 修改 了 一 个 JavaScript 
函数 ， 这 些 改 变 都 不 会 被 重新 缓存 。 更 新 注释 行 中 的 日 期 和 版 本 号 是 一 种 使 浏览 器 


重新 缓存 文件 的 办 法 。 


天 于 应 用 程序 缓存 的 注释 


请 留心 缓存 的 内 容 。 


一 旦 文件 被 缓存 ， 则 浏览 器 会 继续 展示 已 缓存 的 版 本 ， 即 使 您 修改 了 服务 器 上 的 文 
件 。 为 了 确保 浏览 器 更 新 缓存 ， 您 需要 更 新 manifest 文件 。 

注释 : 浏览 器 对 缓存 数据 的 容量 限制 可 能 不 太一 样 〈 某 些 浏览 器 设置 的 限制 是 每 个 
站 点 5MB) 。 


HTML 5 Web Workers 


web worker 是 运行 在 后 台 的 JavaScript， 不 会 影响 页 面 的 性 能 。 


什么 是 Web Worker ? 


当 在 HTML 页 面 中 执行 脚本 时 ， 页 面 的 状态 是 不 可 响应 的 ， 直 到 脚本 已 完成 。 
web worker 是 运行 在 后 台 的 JavaScript， 独 立 于 其 他 脚本 ， 不 会 影响 页 面 的 性 能 。 
您 可 以 继续 做 任何 愿意 做 的 事情 : 点 击 、 选 取 内 容 等 等 ， 而 此 时 web worker 在 后 
台 运 行 。 


浏览 器 支持 


所 有 主流 浏览 器 均 支 持 web worker， 除 了 Internet Explorer。 


HTML5 Web Workers 实例 


下 面 的 例子 创建 了 一 个 简单 的 web worker， 在 后 台 计 数 : 
计数 : 


<button onclick="startWorker()" style="font:12px Verdana, Arial, Helvetica, sans- 
serif;"> Æ a Worker</button> «button onclick="stopWorker()" style="font:12px 
Verdana, Arial, Helvetica, sans-serif;">421E Worker</button> 


4 ij Web Worker 支持 
在 创建 web worker 之 前 ， 请 检测 用 户 的 浏览 器 是 否 支持 它 : 


if(typeof(Worker)!-z"undefined") 
{ 


// Yes! Web worker support! 
// Some code..... 


} 


else 


{ 
// Sorry! No Web Worker support.. 


} 


创建 web worker 文件 


现在 ， 让 我 们 在 一 个 外 部 JavaScript 中 创建 我 们 的 web worker。 
在 这 里 ， 我 们 创建 了 计数 脚本 。 该 脚本 存储 于 "demo workers.js" 文件 中 : 


var i=0; 

function timedCount() 

E 

1=1+1; 

postMessage(i); 
setTimeout("timedCount()",500); 
} 


timedCount(); 


以 上 代码 中 重要 的 部 分 是 postMessage() 方法 - 它 用 于 向 HTML. 页 面 传 回 一 段 消 
E 


JONO 


注释 : web worker 通常 不 用 于 如 此 简单 的 脚本 ， 而 是 用 于 更 耗费 CPU 资源 的 任 
务 。 


创建 Web Worker 对 象 


我 们 已 经 有 了 web worker 文件 ， 现 在 我 们 需要 从 HTML 页 面 调用 它 。 


下 面 的 代码 检测 是 否 存 在 worker， 如 果 不 存 在 ，- 它 会 创建 一 个 新 的 web worker 
对 象 ， 然 后 运行 "demo_workers.js" 中 的 代码 : 


if (typeof (w)=="undefined" ) 


w-new Worker("demo workers.js"); 


然后 我 们 就 可 以 从 web worker 发 生 和 接收 消息 了 。 


向 web worker 添加 一 个 "onmessage" 事件 监听 器 : 


w.onmessage=function(event ) { 
document .getElementById("result").innerHTML=event.data; 


, 


34 web worker 传递 消息 时 ， 会 执行 事件 监听 器 中 的 代码 。event.data 中 存 有 来 自 
event.data 的 数据 。 


终止 Web Worker 


当 我 们 创建 web ODE 
直到 其 被 终止 为 止 。 rker 对 象 后 ， 它 会 继续 监听 消息 〈 即 使 在 外 部 脚本 完成 之 后 ) 
如 需 终 止 web worker， 并 释放 浏览 器 /计算 机 资源 ， 请 使 用 terminate() 方法 : 


w.terminate(); 


完整 的 Web Worker 实例 代码 


我 们 已 经 看 到 了 .js 文件 中 的 Worker 代码 。 下 面 是 HTML 页 面 的 代码 : 


实例 


<!DOCTYPE html» 
<html> 
<body> 


<p>Count numbers: <output id="result"></output></p> 
«button onclick-"startWorker()"»Start Worker</button> 
«button onclick="stopWorker()">Stop Worker</button> 
<br /><br /> 


<script> 
var w; 


function startWorker() 
{ 
if(typeof (Worker ) !=="undefined" ) 
if (typeof (w)=="undefined" ) 
{ 


w=new Worker("demo workers.js"); 


} 


w.onmessage = function (event) { 
document .getElementById("result").innerHTML=event.data; 


H 
} 


else 


{ 


document .getElementById("result").innerHTML="Sorry, your browser 
does not support Web Workers..."; 


} 
} 


function stopworker() 


{ 


w.terminate(); 


j 


«/script» 


«/body» 
«/html» 


Web Workers 和 DOM 


由 于 web worker 位 于 外 部 文件 中 ， 它 们 无 法 访问 下 例 JavaScript x12& : 


e window 对 象 
e document 对 象 
e parent 对 象 


HTML 5 服务 器 发 送 事 件 


HTML5 服务 器 发 送 事件 (server-sent event) 人 允许 网 页 获得 来 自 服务 器 的 更 新 。 


Server-Sent 事件 - 单 向 消息 7 


Server-Sent 事件 指 的 是 网 页 自动 获取 来 自 服务 器 的 更 新 。 


以 前 也 可 能 做 到 这 一 点 ， 前 提 是 网 页 不 得 不 询问 是 否 有 可 用 的 更 新 。 通 过 服务 器 发 
送 事件 ， 更 新 能 够 自动 到 达 。 


例子 : Facebook/Twitter 更 新 、 估 价 更 新 、 新 的 博文 、 赛 事 结果 等 。 


浏览 器 文 持 


所 有 主流 浏览 器 均 支持 服务 器 发 送 事 件 ， 除 了 Internet Explorer。 


接收 Server-Sent 事件 通知 


EventSource 对 象 用 于 接收 服务 器 发 送 事件 通知 : 
实例 


var source=new EventSource("demo_sse.php"); 
source.onmessage=function(event ) 
{ 


document .getElementById("result").innerHTML+=event.data + "<br /: 


H 





例子 解释 : 


e 创建 一 个 新 的 EventSource 对 象 ， 然 后 规定 发 送 更 新 的 页 面 的 URL (本 例 中 
是 "demo_sse.php") 

。 每 接收 到 一 次 更 新 ， 就 会 发 生 onmessage 事件 

e 4 onmessage 事件 发 生 时 ， 把 已 接收 的 数据 推 入 id % "result" 的 元 素 中 


Sm) Server-Sent 事件 支持 


在 上 面 的 TIY 实例 中 ， 我 们 编写 了 一 段 额 外 的 代码 来 检测 服务 器 发 送 事件 的 浏览 器 
支持 情况 : 


if(typeof(EventSource)!--"undefined") 


// Yes! Server-sent events support! 
// Some code..... 


j 


else 


// Sorry! No server-sent events support.. 


j 


服务 器 端 代码 实例 


为 了 让 上 面 的 例子 可 以 运行 ， 您 还 需要 能 够 发 送 数 据 更 新 的 服务 器 (比如 PHP 和 
ASP) 。 


服务 器 端 事 件 流 的 语法 是 非常 简单 的 。 把 "Content-Type" 报头 设置 为 "text/event- 
stream"。 现 在 ， 您 可 以 开始 发 送 事件 流 了 。 


PHP 代码 (demo_sse.php) : 


<?php 
header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 


$time - date('r'); 

echo "data: The server time is: {$time}\n\n"; 
flush(); 

?» 


ASP 代码 (VB) (demo sse.asp): 


<% 
Response.ContentType="text/event-stream" 
Response.Expires=-1 
Response.Write("data: " & now()) 
Response.Flush() 

%> 


代码 解释 : 
e 把 报头 "Content-Type" 设置 为 "text/event-stream" 
e. 规定 不 对 页 面 进行 缓存 
e 输出 发 送 日 期 (始终 以 "data:" 开头 ) 
e. 向 网 页 刷新 输出 数据 


EventSource 对 象 


在 上 面 的 例子 中 ， 我 们 使 用 onmessage 事件 来 获取 消息 。 不 过 还 可 以 使 用 其 他 事 
件 : 


事件 描述 
onopen 当 通 往 服务 器 的 连接 被 打开 
onmessage 当 接 收 到 消息 


onerror 当 错 误 发 生 


HTML5 Input 类 型 


HTML5 新 的 Input 类 型 


HTML5 拥有 多 个 新 的 表单 输入 类 型 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 
本 章 全 面 介 绍 这 些 新 的 输入 类 型 : 


email 

url 

number 

range 

Date pickers (date, month, week, time, datetime, datetime-local) 
search 

color 


浏览 器 支持 


Input type IE Firefox Opera Chrome Safari 
email No 4.0 9.0 10.0 No 
url No 4.0 9.0 10.0 No 
number No No 9.0 7.0 No 
range No No 9.0 4.0 4.0 
Date pickers No No 9.0 10.0 No 
search No 4.0 11.0 10.0 No 
color No No 11.0 No No 


注释 : Opera 对 新 的 输入 类 型 的 支持 最 好 。 不 过 您 已 经 可 以 在 所 有 主流 的 浏览 器 中 
使 用 它们 了 。 即 使 不 被 支持 ， 仍 然 可 以 显示 为 常规 的 文本 域 。 


Input 类 型 -email 
email 类 型 用 于 应 该 包含 e-mail 地 址 的 输入 域 。 
在 提交 表单 时 ， 会 自动 验证 email 域 的 值 。 


实例 


E-mail: «input type="email" name="user_email" /> 


提示 : iPhone 中 的 Safari 浏览 器 支持 email 输入 类 型 ， 并 通过 改变 触摸 屏 键盘 来 
配合 它 (添加 @ 和 .com 选项 ) 。 


Input 类 型 - url 


url 类 型 用 于 应 该 包含 URL 地 址 的 输入 域 。 
在 提交 表单 时 ， 会 自动 验证 url 域 的 值 。 


实例 


Homepage: <input type="url" name="user_url" /> 


提示 : iPhone 中 的 Safari 浏览 器 支持 url 输入 类 型 ， 并 通过 改变 触摸 屏 键盘 来 配合 
它 (添加 .COm 3 选项 ) 。 


Input 类 型 - number 


number 类 型 用 于 应 该 包含 数值 的 输入 域 。 
您 还 能 够 设 定 对 所 接受 的 数字 的 限定 : 


实例 


Points: <input type="number" name="points" min="1" max="10" /> 


请 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 : 


属性 值 描述 
max number 规定 允许 的 最 大 值 
min number 规定 允许 的 最 小 值 
规定 合法 的 数字 间隔 (如果 step="3"， 则 合法 的 数 是 
step number -3.0.3.6 等 ) 


value number 规定 默认 值 


请 试 一 下 带 有 所 有 限定 属性 的 例子 


提示 : iPhone 中 的 Safari 浏览 器 支持 number 输入 类 型 ， 并 通过 改变 触摸 屏 键 部 
来 配合 它 (显示 数字 ) 。 


Input 类 型 - range 


range 类 型 用 于 应 该 包含 一 定 范 围 内 数字 值 的 输入 域 。 
range 类 型 显示 为 滑动 条 。 
您 还 能 够 设 定 对 所 接受 的 数字 的 限定 : 


实例 


<input type="range" name-"points" min="1" max="10" /> 


请 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 : 


属性 值 描述 
max number 规定 允许 的 最 大 值 
min number 规定 允许 的 最 小 值 
规定 合法 的 数字 间隔 (如果 step="3"， 则 合法 的 数 是 
step number -3.0.3.6 等 ) 
value number 规定 默认 值 


Input 类 型 - Date Pickers (日 期 选择 器 ) 


HTML5 拥有 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 : 


date - 选取 日 、 月 、 年 

month - 选取 月 、 年 

week - 选取 周 和 年 

time - 选取 时 间 (小 时 和 分 钟 ) 
datetime - mat A, A, B, Œ (UTC 时 间 ) 
datetime-local - 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 


下 面 的 例子 允许 您 从 日 历 中 选取 一 个 日 期 : 


实例 


Date: <input type="date" name="user_date" /> 


输入 类 型 "month": 
输入 类 型 "week": 
HA XÆ "time": 
输入 类 型 "datetime": 


输入 类 型 "datetime-local" 


Input 类 型 - search 


search 类 型 用 于 搜索 域 ， 比 如 站 点 搜索 或 Google 搜索 。 
search 域 显示 为 常规 的 文本 域 。 


HTML5 表单 元 素 


HTML5 的 新 的 表单 元 素 : 


HTML5 拥有 若干 涉及 表单 的 元 素 和 属性 。 


本 章 介绍 以 下 新 的 表单 元 素 : 


e datalist 
e keygen 
e output 


浏览 器 支持 


Input type IE Firefox 
datalist No No 
keygen No No 
output No No 


datalist 元 素 


datalist 元 素 规定 输入 域 的 选项 列表 。 


Opera Chrome 
9.5 No 
10.5 3.0 
9.5 No 


列表 是 通过 datalist 内 的 option 元 素 创建 的 。 
如 需 把 datalist 绑 定 到 输入 域 ， 请 用 输入 域 的 list 属性 引用 datalist 的 id : 


实例 


Webpage: «input type-"url" list="url list" name="link" /> 


<datalist id="url_list"> 


Safari 
No 
No 
No 


«option label="W3School" value="http://www.W3School.com.cn" /> 


<option label="Google" value="http://www.google.com" /> 


«option label="Microsoft" value="http://www.microsoft.com" /> 


</datalist> 


提示 : option 元 素 永 远 都 要 设置 value 属性 。 


keygen 元 素 


keygen 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 


keygen 元 素 是 密 钥 对 生成 器 (key-pair generator) 。 当 提交 表单 时 ， 会 生成 两 个 
h, DEHA, NAHA. 


私 钥 (private key) 存储 于 客户 端 ， 公 钥 (public key) 则 被 发 送 到 服务 器 。 公 钥 可 
用 于 之 后 验证 用 户 的 客户 端 证 书 (client certificate) 。 


目前 ， 浏 览 器 对 此 元 素 的 糟糕 的 支持 度 不 足以 使 其 成 为 一 种 有 用 的 安全 标准 。 


实例 


«form action="demo_form.asp" method="get"> 
Username: <input type="text" name="usr_name" /> 
Encryption: «keygen name="Security" /> 

<input type="submit" /> 

</form> 


output 元 素 


output 元 素 用 于 不 同类 型 的 输出 ， 上 比如 计算 或 脚本 输出 : 
实例 


<output id="result" onforminput="resCalc()"></output> 


HTML5 表单 属性 
HTML5 的 新 的 表单 属性 


本 章 讲解 涉及 «form» 和 «input» 元 素 的 新 属性 。 


新 的 form 属性 : 


e autocomplete 
e novalidate 


新 的 input 属性 : 


autocomplete 
autofocus 

form 

form overrides (formaction, formenctype, formmethod, formnovalidate, 
formtarget) 
height 和 width 
list 

min, max 和 step 
multiple 

pattern (regexp) 
placeholder 
required 


浏览 器 支持 


Input type IE Firefox Opera Chrome Safari 
autocomplete 8.0 3.5 9.5 3.0 4.0 
autofocus No No 10.0 3.0 4.0 
form No No 9.5 No No 
form overrides No No 10.5 No No 
height and width 8.0 3.5 9.5 3.0 4.0 
list No No 9.5 No No 
min, max and step No No 9.5 3.0 No 
multiple No OD No 3.0 4.0 
novalidate No No No No No 
pattern No No 9.5 3.0 No 
placeholder No No No 3.0 3.0 
required No No 9.5 3.0 No 


autocomplete 属性 


autocomplete 属性 规定 form 8X input 域 应 该 拥有 自动 完成 功能 。 


注释 : autocomplete 适用 于 <form> 标签 ， 以 及 以 下 类 型 的 <input> 标签 text, 
search, url, telephone, email, password, datepickers, range LA color. 


当 用 户 在 自动 完成 域 中 开始 输入 时 ， 浏 览 器 应 该 在 该 域 中 显示 填写 的 选项 : 
实例 
头 


«form action="demo_form.asp" method="get" autocomplete="on"> 

First name: <input type="text" name="fname" /><br /> 

Last name: <input type="text" name-"lname" /><br /> 

E-mail: <input type="email" name="email" autocomplete-"off" /><br , 
<input type="submit" /> 

</form> 


注释 : 在 某 些 浏览 器 中 ， 您 可 能 需要 启用 自动 完成 功能 ， 以 使 该 属性 生效 。 





autofocus 属性 


autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。 
注释 : autofocus 属性 适用 于 所 有 <input> 标签 的 类 型 。 


实例 


User name: <input type="text" name-"user name" autofocus="autofoct 


rom a | 








form 属性 


form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。 
注释 : form 属性 适用 于 所 有 «input» 标签 的 类 型 。 
form 属性 必须 引用 所 属 表 单 的 id : 


实例 


<form action="demo_form.asp" method="get" id="user_form"> 
First name:<input type="text" name="fname" /> 

<input type="submit" /> 

</form> 

Last name: <input type="text" name-"lname" form="user_form" /> 


注释 : 如 需 引 用 一 个 以 上 的 表单 ， 请 使 用 空格 分 隔 的 列表 。 


表单 重 写 属性 
表单 重 写 属 性 (form override attributes) 人 允许 您 重 写 form 元 素 的 某 些 属性 设 定 。 
表单 重 写 属 性 有 : 


formaction - 重 写 表单 的 action 属性 
formenctype - 重 写 表 单 的 enctype 属性 
formmethod - 重 写 表单 的 method 属性 
formnovalidate - 重 写 表 单 的 novalidate 属性 
formtarget - 重 写 表 单 的 target 属性 


注释 : 表单 重 写 属 性 适用 于 以 下 类 型 的 <input> 标签 : submit 和 image。 


实例 


«form action="demo_form.asp" method="get" id="user_form"> 

E-mail: <input type="email" name="userid" /><br /> 

<input type="submit" value="Submit" /> 

<br /> 

<input type="submit" formaction="demo_admin.asp" value="Submit as : 
<br /> 

<input type="submit" formnovalidate="true" value="Submit without Vi 
<br /> 

</form> 


‘ ae 








注释 : 这 些 属 性 对 于 创建 不 同 的 提交 按钮 很 有 帮助 。 


height 和 width 属性 


height 和 width 属性 规定 用 于 image 类 型 的 input 标签 的 图 像 高 度 和 宽度 。 
注释 : height 和 width 属性 只 适用 于 image 类 型 的 <input> 标签 。 


实例 


<input type="image" src="img_submit.gif" width="99" height="99" /> 


eg L 
list 属性 


list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。 


注释 : list 属性 适用 于 以 下 类 型 的 <input> 标签 : text, search, url, telephone, email, 
date pickers, number, range LA color. 


实例 


Webpage: «input type="url" list="url_list" name="link" /> 
<datalist id="url_list"> 

<option label="W3Schools" value="http://www.w3school.com.cn" /> 
«option label="Google" value="http://www.google.com" /> 

<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist> 


min, max 和 step 属性 


min, max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 (约束 ) 。 
max 属性 规定 输入 域 所 允许 的 最 大 值 。 

min 属性 规定 输入 域 所 允许 的 最 小 值 。 

属性 为 输入 域 规定 合法 的 数字 间隔 (ADR step="3"， 则 合法 的 数 是 -3,0,3,6 


o 


注释 : min, max 和 step 属性 适用 于 以 下 类 型 的 <input> 标签 : date pickers, 
number 以 及 range。 


下 面 的 例子 显示 一 个 数字 域 ， 该 域 接受 介 于 0 到 10 之 间 的 值 ， 且 步 进 为 3 (BA 
法 的 值 为 0、3、6 和 9) : 


实例 


Points: <input type="number" name="points" min="0" max="10" step=": 


| 





multiple 属性 


multiple 属性 规定 输入 域 中 可 选择 多 个 值 。 
注释 : multiple 属性 适用 于 以 下 类 型 的 <input> 标签 : email 和 file。 


实例 


Select images: <input type="file" name="img" multiple="multiple" /: 





novalidate 属性 


novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 


注释 : novalidate 属性 适用 于 <form> 以 及 以 下 类 型 的 <input> 标签 : text, search， 
url, telephone, email, password, date pickers, range 以 及 color. 


实例 


<form action="demo_form.asp" method="get" novalidate="true"> 
E-mail: <input type="email" name="user_email" /> 

<input type="submit" /> 

</form> 


pattern 属性 


pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern) 。 


模式 (pattern) 是 正则 表达 式 。 您 可 以 在 我 们 的 JavaScript 教程 中 学 习 到 有 关 正 
则 表达 式 的 内 容 。 


注释 : pattern 属性 适用 于 以 下 类 型 的 «input» 标签 : text, search, url, telephone, 
email 以 及 password. 


下 面 的 例子 显示 了 一 个 只 能 包含 三 个 字母 的 文本 域 (不 含 数字 及 特殊 字符 ) 
实例 


Country code: <input type="text" name="country_code" 
pattern="[A-z]{3}" title="Three letter country code" /> 


placeholder 属性 


placeholder 属性 提供 一 种 提示 (hint) ， 描 述 输入 域 所 期 待 的 值 。 


注释 : placeholder 属性 适用 于 以 下 类 型 的 <input> 标签 : text, search, url, 
telephone, email 以 及 password。 


提示 (hint) 会 在 输入 域 为 空 时 显示 出 现 ， 会 在 输入 域 获得 焦点 时 消失 : 


实例 


<input type="search" name="user_search" placeholder="Search W3Sch' 





required 属性 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 ) 。 


注释 : required 属性 适用 于 以 下 类 型 的 «input» 标签 : text, search, url, telephone, 
email, password, date pickers, number, checkbox, radio 以 及 file。 


n 


实例 


A, 


Name: <input type="text" name="usr_name" required="required" /> 


W3School HTML 参考 手册 


来 源 : HTML 参考 手册 
整理 : 飞龙 


列表 
按 字 母 顺 序 排列 


New : HTML5 中 的 新 标签 。 


HTML 标签 


<!--.……--> 定义 注释 。 

<IDOCTYPE> ”定义 文档 类 型 。 

<a> 定义 锚 。 

<abbr> 定义 缩写 。 

<acronym> 定义 只 取 首 字母 的 缩写 。 

<address> 定义 文档 作者 或 拥有 者 的 联系 信息 。 
<applet> TAREHA. FEL BRAGS applet, 

<area> 定义 图 像 映 射 内 部 的 区 域 。 

<article> 定义 文章 。 

<aside> 定义 页 面 内 容 之 外 的 内 容 。 

<audio> 定义 声音 内 容 。 

<b> 定义 粗 体 字 。 

<base> 定义 页 面 中 所 有 链接 的 默认 地 址 或 默认 目标 。 
<basefont> 不 赞成 使 用 。 定 义 页 面 中 文本 的 默认 字体 、 颜 色 或 尺寸 。 
<bdi> 定义 文本 的 文本 方向 ， 使 其 脱离 其 周围 文本 的 方向 设置 。 
<bdo> 定义 文字 方向 。 

<big> 定义 大 号 文本 。 

<blockquote> 定义 长 的 引用 。 

<body> 定义 文档 的 主体 。 

<br> 定义 简单 的 折 行 。 

<button> 定义 按钮 (push button)。 

<canvas> 定义 图 形 。 

<caption> 定义 表格 标题 。 
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<center> 
<cite> 
<code> 
<col> 
<colgroup> 
<command> 
<datalist> 
<dd> 

<del> 
<details> 
<dir> 

<div> 

<dfn> 
<dialog> 
«gl» 

«dt» 

«em» 
«embed» 
<fieldset> 
<figcaption> 
<figure> 
<font> 
<footer> 
<form> 
<frame> 
<frameset> 
<h1> to <h6> 
<head> 
<header> 


<hr> 


HTML 标签 列表 





不 鞠 成 使 用 。 定 义 居中 文本 。 
定义 引用 (citation)。 

定义 计算 机 代码 文本 。 

定义 表格 中 一 个 或 多 个 列 的 属性 值 。 
定义 表格 中 供 格 式 化 的 列 组 。 
定义 命令 按钮 。 

EL BRU. 

定义 定义 列表 中 项 目的 描述 。 

XE SL AK WI ER SCAN 
定义 元 素 的 细节 。 

不 赞成 使 用 。 定 义 目录 列表 。 
定义 文档 中 的 节 。 

定义 定义 项 目 。 
定义 对 话 框 或 窗口 。 

定义 定义 列表 。 

定义 定义 列表 中 的 项 目 。 

定义 强调 文本 。 

定义 外 部 交互 内 容 或 插件 。 

定义 围绕 表单 中 元 素 的 边框 。 

定义 figure 元 素 的 标题 。 

定义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 。 
不 赞成 使 用 。 定 义 文字 的 字体 、 尺 寸 和 颜色 。 
定义 section 或 page 的 页 脚 。 

定义 供用 户 输入 的 HTML 表单 。 
定义 框架 集 的 窗口 或 框架 。 


定义 框架 集 。 

定义 HTML 标题 。 

定义 关于 文档 的 信息 。 

定义 section 或 page 的 页 眉 。 
定义 水 平 线 。 


«html» 

<j> 
<iframe> 
<img> 
<input> 
<ins> 
<isindex> 
<kbd> 
<keygen> 
<label> 
<legend> 
<li> 

<link> 
<map> 
<mark> 
<menu> 
<menuitem> 
<meta> 
<meter> 
<nav> 
<noframes> 
<noscript> 
<object> 
<ol> 
<optgroup> 
<option> 
<output> 
<p> 
<param> 


<pre> 
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定义 HTML 文档 。 

定义 斜体 字 。 

定义 内 联 框架 。 

定义 图 像 。 

定义 输入 控件 。 

定义 被 插入 文本 。 

不 赞成 使 用 。 定 义 与 文档 相关 的 可 搜索 索引 。 
定义 键盘 文本 。 

定义 生成 密 钥 。 

定义 input 元 素 的 标注 。 

定义 fieldset 元 素 的 标题 。 

定义 列表 的 项 目 。 

定义 文档 与 外 部 资源 的 关系 。 

定义 图 像 映射 。 

定义 有 记号 的 文本 。 

定义 命令 的 列表 或 菜单 。 

定义 用 户 可 以 从 弹出 菜单 调用 的 命令 /菜单 项 目 。 
定义 关于 HTML 文档 的 元 信息 。 

定义 预定 义 范 围 内 的 度量 。 

定义 导航 链接 。 

定义 针对 不 支持 框架 的 用 户 的 替代 内 容 。 

定义 针对 不 支持 客户 端 肢 本 的 用 户 的 替代 内 容 。 
XE SLAB Xt Ro 
定义 有 序列 表 。 

义 选 择 列表 中 相关 选项 和 
义 选 择 列表 中 的 选项 。 
义 输出 的 一 些 类 型 。 
义 段 落 。 

义 对 象 的 参数 。 

义 预 格式 文本 。 


义 组 合 。 


Fit 
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<progress> 
<q> 

<rp> 

<rt> 
<ruby> 
<S> 
<Samp> 
<script> 
<section> 
<select> 
<small> 
<source> 
<span> 
<strike> 
<strong> 
<style> 
<sub> 
<summary> 
<sup> 
<table> 
<tbody> 
<td> 
<textarea> 
<tfoot> 
<th> 
<thead> 
<time> 
<title> 


<tr> 


HTML 标签 列表 





定义 任何 类 型 的 任务 的 进度 。 
定义 短 的 引用 。 

定义 若 浏览 器 不 支持 ruby 元 素 显示 的 内 容 。 
定义 ruby 注释 的 解释 。 

定义 ruby 注释 。 

不 玩 成 使 用 。 定 义 加 删除 线 的 文本 。 
定义 计算 机 代码 样本 。 

定义 客户 端 脚本 。 

定义 section。 

定义 选择 列表 〈 下 拉 列 表 ) 。 
定义 小 号 文本 。 

定义 媒介 源 。 

定义 文档 中 的 节 。 

不 赞成 使 用 。 定 义 加 删除 线 文 本 。 
定义 强调 文本 。 
定义 文档 的 样式 信息 。 


定义 下 标 文本 。 

为 «details» 元 素 定 义 可 见 的 标题 。 
定义 上 标 文 本 。 

定义 表格 。 

定义 表格 中 的 主体 内 容 。 

定义 表格 中 的 单元 。 


定义 多 行 的 文本 输入 控件 。 
定义 表格 中 的 表 注 内 容 NE). 


定义 表格 中 的 表 头 单元 格 。 
定义 表格 中 的 表 头 内 容 。 
定义 日 期 /时 间 。 
定义 文档 的 标题 。 
定义 表格 中 的 行 。 


<track> 
<tt> 
eu» 
«ul» 
«var» 
«video» 
<Wbr> 


<Xmp> 


定义 用 在 媒体 播放 器 中 的 文本 轨道 。 
定义 打字 机 文本 。 

不 赞成 使 用 。 定 义 下 划 线 文本 。 
定义 无 序列 表 。 
定义 文本 的 变量 部 分 。 

定义 视频 。 

定义 视频 。 

不 赞成 使 用 。 定 义 预 格式 文本 。 


按 功 能 类 别 排列 


New : HTML5 中 的 新 标签 。 


基础 
标签 
<IDOCTYPE> 
<html> 
<title> 
<body> 


<h1> to <h6> 
<p> 
<br> 
<hr> 


<|--,,.--> 


格式 


标签 
<acronym> 
<abbr> 


<address> 


定义 
定 
定 


定义 文档 类 型 。 
定义 HTML 文档 。 
定义 文档 的 标题 。 
定义 文档 的 主体 。 
定义 HTML 标题 。 
定义 段落 。 

定义 简单 的 折 行 。 
定义 水 平 线 。 
定义 注释 。 


Bt 
学 


只 取 首 字母 的 缩写 
义 缩 导 。 
义 文 档 作 者 或 拥有 者 的 联系 信息 。 


Bt 
EH 


WASchaol ATER FES 6 
VVOOCNOO! BU mad E E SE 


<b> 
<bdi> 
<bdo> 
<big> 
<blockquote> 
<center> 
<cite> 
<code> 
<del> 
<dfn> 
<em> 
<font> 
<j> 
<ins> 
<kbd> 
<mark> 
<meter> 
<pre> 
<progress> 
<q> 
<rp> 

<rt> 
<ruby> 
«6 
<samp> 
<small> 
<strike> 
<strong> 
<sup> 


<sub> 


AN AE 


定义 粗 体 文 本 。 


定义 文本 的 文本 方向 ， 使 其 脱离 其 周围 文本 的 方向 设置 。 


定义 文字 方向 。 

定义 大 号 文本 。 

定义 长 的 引用 。 

不 赞成 使 用 。 定 义 居中 文本 。 
定义 引用 (citation)。 

定义 计算 机 代码 文本 。 
定义 被 删除 文本 。 

定义 定义 项 目 。 

定义 强调 文本 。 

不 赞成 使 用 。 定 义 文 本 的 字体 、 尺 寸 和 颜色 
定义 斜体 文本 。 

定义 被 插入 文本 。 

定义 键盘 文本 。 
定义 有 记号 的 文本 。 

定义 预定 义 范 围 内 的 度量 。 
定义 预 格式 文本 。 

定义 任何 类 型 的 任务 的 进度 。 
定义 短 的 引用 。 

定义 若 浏 览 器 不 支持 ruby 元 素 显示 的 内 容 。 
定义 ruby 注释 的 解释 。 

定义 ruby 注释 。 

不 赞成 使 用 。 定 义 加 删除 线 的 文本 。 
定义 计算 机 代码 样本 。 
定义 小 号 文本 。 

不 赞成 使 用 。 定 义 加 删除 线 文本 。 
定义 语气 更 为 强烈 的 强调 文本 。 
定义 上 标 文本 。 

定义 下 标 文 本 。 


v 
W3School By ma ET 


<time> 
<tt> 
<u> 
<var> 


<wbr> 


表单 


标签 
<form> 
<input> 
<textarea> 
<button> 
<select> 
<optgroup> 
<option> 
<label> 
<fieldset> 
<legend> 
<isindex> 
<datalist> 
<keygen> 


<output> 


框架 


标签 
<frame> 
<frameset> 
<noframes> 


<iframe> 


定义 日 期 /时 间 。 

定义 打字 机 文本 。 

不 赞成 使 用 。 定 义 下 划 线 文本 。 
定义 文本 的 变量 部 分 。 


定义 视频 。 


描述 
义 供 用 户 输入 的 HTML 表单 。 
义 输入 控件 。 
义 多 行 的 文本 输入 控件 。 
义 按钮 。 
义 选择 列表 (FHIR) 。 
义 选择 列表 中 相关 选项 的 组 合 。 
义 选择 列表 中 的 选项 。 
定义 input 元 素 的 标注 。 
定义 围绕 表单 中 元 素 的 边框 。 
定义 fieldset 元 素 的 标题 。 
不 壮 成 使 用 。 定 义 与 文档 相关 的 可 搜索 索引 。 
定义 下 拉 列 表 。 
定义 生成 密 钥 。 
定义 输出 的 一 些 类 型 。 


BR at RR BR BR BR nb 


} 


描述 
定义 框架 集 的 窗口 或 框架 。 
定义 框架 集 。 
定义 针对 不 支持 框架 的 用 户 的 替代 内 容 。 
定义 内 联 框 架 。 


wWaRnhnrn Em ur L AS FE 
VV DOUI 100| AU YUm t= GS 


图 像 


标签 
<img> 
<map> 
<area> 
<canvas> 
<figcaption> 


<figure> 


音频 /视频 


标签 
<audio> 
<source> 
<track> 


<video> 


链接 


标签 
<a> 
<link> 


<nav> 


列表 


描述 
定义 图 像 。 
定义 图 像 映射 。 
定义 图 像 地 图 内 部 的 区 域 。 
定义 图 形 。 


定义 figure 元 素 的 标题 。 


定义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 。 


描述 
义 声音 内 容 。 
义 媒 介 源 。 


义 用 在 媒体 播放 器 中 的 文本 轨道 。 


义 视 频 。 


RE ORE Ft 


描述 
定义 锚 。 
定义 文档 与 外 部 资源 的 关系 。 
定义 导航 链接 。 


3k 
De 
B 
学 


<ul> 定义 无 序列 表 。 
<ol> 定义 有 序列 表 。 
<li> 定义 列表 的 项 目 。 
<dir> 不 赞成 使 用 。 定 义 目录 列表 。 
<dl> 定义 定义 列表 。 
<dt> 定义 定义 列表 中 的 项 目 。 
<dd> 定义 定义 列表 中 项 目的 描述 。 
<menu> 定义 命令 的 菜单 /列表 。 
<menuitem> 定义 用 户 可 以 从 弹出 菜单 调用 的 命令 /菜单 项 目 。 
<command> 定义 命令 按钮 。 
表格 
标签 描述 
<table> 定义 表格 
<caption> 定义 表格 标题 。 
<th> 定义 表格 中 的 表 头 单元 格 。 
<tr> 定义 表格 中 的 行 。 
<td> 定义 表格 中 的 单元 。 
<thead> 定义 表格 中 的 表 头 内 容 。 
<tbody> 定义 表格 中 的 主体 内 容 。 
<tfoot> 定义 表格 中 的 表 注 内 容 (脚注 ) 。 
<col> 定义 表格 中 一 个 或 多 个 列 的 属性 值 。 
<colgroup> 定义 表格 中 供 格式 化 的 列 组 。 


样式 / 节 


标签 
<style> 
<div> 
<span> 
<header> 
<footer> 
<section> 
<article> 
<aside> 
<details> 
<dialog> 


<summary> 


元 信息 


<head> 
<meta> 
<base> 


<basefont> 


编程 


标签 
<script> 
<noscript> 
<applet> 
<embed> 
<object> 


<param> 


\AJ2Qnhanan| Bete FG Ae 
W3School Bim t e SR 


定义 文档 的 样式 信息 。 

定义 文档 中 的 节 。 

定义 文档 中 的 节 。 

定义 section 或 page 的 页 眉 。 
定义 section 或 page 的 页 脚 。 


定义 section。 


定义 文章 。 

定义 页 面 内 容 之 外 的 内 容 。 
定义 元 素 的 细节 。 
定义 对 话 框 或 窗口 。 


为 «details» 元 素 定 义 可 见 的 标题 。 


描述 


定义 关于 文档 的 信息 。 

定义 关于 HTML 文档 的 元 信息 。 

定义 页 面 中 所 有 链接 的 默认 地 址 或 默认 目标 。 

不 赞成 使 用 。 定 义 页 面 中 文本 的 默认 字体 、 颜 色 或 尺寸 。 


描述 


定义 客户 端 脚本 。 

定义 针对 不 支持 客户 端 脚本 的 用 户 的 替代 内 容 。 
TREH. ELRABI applet, 

为 外 部 应 用 程序 (JE HTML) 定义 容器 。 
定义 嵌入 的 对 象 。 

定义 对 象 的 参数 。 


C1 


HTML <!--.…--> 标签 


实例 
HTML 注释 : 
<!-- 这 是 一 段 注释 。 注 释 不 会 在 浏览 器 中 显示 。 - -> 


<p> 这 是 一 段 普通 的 段落 。</p> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 注释 标签 


定义 和 用 法 
注释 标签 用 于 在 源 代 码 中 插入 注释 。 注 释 不 会 显示 在 浏览 器 中 。 


您 可 使 用 注释 对 您 的 代码 进行 解释 ， 这 样 做 有 助 于 您 在 以 后 的 时 间 对 代码 的 编辑 。 
当 您 编写 了 大 量 代码 时 尤其 有 用 。 


使 用 注释 标签 来 隐藏 浏览 器 不 支持 的 脚本 也 是 一 个 好 习惯 (这样 就 不 会 把 脚本 显示 
AMMA) : 


<script type="text/javascript"> 
xe 
function displayMsg() 


{ 
alert("Hello World!") 


} 
//--> 
</script> 


注释 : 注释 行 结 尾 处 的 两 条 和 斜 杠 (//) 是 JavaScript 注释 符号 。 这 可 以 避免 
JavaScript 执行 --> 标签 。 


HTML 4.01 与 HTML5 之 间 的 差异 


无 。 


标准 属性 
注释 标签 不 支持 任何 标准 属性 。 


如 需 更 多 有 关 HTML 标准 属性 的 信息 ， 请 访问 标准 属性 。 


事件 属性 


注释 标签 不 支持 任何 事件 属性 。 
如 需 更 多 有 关 HTML 事件 属性 的 信息 ， 请 访问 事件 属性 。 


HTML <!DOCTYPE> 标签 


实例 


«IDOCTYPE html» 

«html» 

«head» 
<title> 文 档 的 标题 </title> 
</head> 

<body> 

文档 的 内 容 ...... 

</body> 


</html> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <IDOCTYPE> 声明 。 


= 、 i 
<IDOCTYPE> 声明 必须 是 HTML 文档 的 第 一 行 ， 位 于 <html> 标签 之 前 。 


<IDOCTYPE> 声明 不 是 HTML 标签 ; 它 是 指示 web 浏览 器 关于 页 面 使 用 哪个 
HTML 版 本 进行 编写 的 指 今 。 


在 HTML 4.01 中 ，<!DOCTYPE> 声明 引用 DTD, A» HTML 4.01 基于 SGML. 
DTD 规定 了 标记 语言 的 规则 ， 这 样 浏览 器 才能 正确 地 呈现 内 容 。 


HTML5 不 基于 SGML， 所 以 不 需要 引用 DTD. 


提示 : 请 始终 向 HTML 文档 添加 «IDOCTYPE» 声明 ， 这 样 浏览 器 才能 获知 文档 类 
型 。 


HTML 4.01 与 HTML5 之 间 的 差异 


在 HTML 4.01 中 有 三 种 <IDOCTYPE> 声明 。 在 HTML5 中 只 有 一 种 : 


<!DOCTYPE html> 


HTML 元 素 和 文档 类 型 (Doctype) 

请 参阅 这 个 HTML 元 素 表 ， 其 中 列 出 了 每 种 元 素 会 出 现在 哪个 文档 类 型 中 。 
提示 和 注释 

注释 : <IDOCTYPE> 声明 没有 结束 标签 。 


提示 : <IDOCTYPE> 声明 对 大 小 写 不 敏感 。 
RR : 请 使 用 W3C 的 验证 器 来 检查 您 是 否 编写 了 有 效 的 HTML / XHTML 文档 ! 


kij 
四 
可 


常用 的 DOCTYPE 声明 
HTML 5 


<!DOCTYPE html> 


HTML 4.01 Strict 


该 DTD 包含 所 有 HTML 元 素 和 属性 ， 但 不 包括 展示 性 的 和 奔 用 的 元 素 (比如 
font) 。 不 允许 框架 集 (Framesets) 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.Ww3.0! 
IE 





HTML 4.01 Transitional 


该 DTD 包含 所 有 HTML 元 素 和 属性 ， 包 括 展 示 性 的 和 奔 用 的 元 素 (比如 font) 。 
不 允许 框架 集 (Framesets) 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/loose.dtd"> 


HTML 4.01 Frameset 


该 DTD 等 同 于 HTML 4.01 Transitional， 但 允许 框架 集 内 容 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"» 


XHTML 1.0 Strict 


该 DTD 包含 所 有 HTML 元 素 和 属性 ， 但 不 包括 展示 性 的 和 奔 用 的 元 素 (比如 
font) 。 不 允许 框架 集 (Framesets) 。 必 须 以 格式 正确 的 XML 来 编写 标记 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtml1-strict.dtd"» 


XHTML 1.0 Transitional 


该 DTD 包含 所 有 HTML 元 素 和 属性 ， 包 括 展 示 性 的 和 奔 用 的 元 素 (比如 font) 。 
不 允许 框架 集 (Framesets) 。 必 须 以 格式 正确 的 XML 来 编写 标记 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 
http://www.w3.org/TR/xhtm11/DTD/xhtmli-transitional.dtd"- 


XHTML 1.0 Frameset 


该 DTD 等 同 于 XHTML 1.0 Transitional， 但 允许 框架 集 内 容 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtml1-frameset.dtd"» 


XHTML 1.1 


该 DTD 等 同 于 XHTML 1.0 Strict， 但 允许 添加 模型 (例如 提供 对 东亚 语系 的 ruby 
XN). 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.Ww3.0! 
a] =n zs 





HTML <a> 标签 


实例 
指向 w3school 的 超 链接 : 


«a href="http://www.w3school.com.cn">W3School</a> 


\、 - OO 
浏览 右 文 持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <a> 标签 。 


定义 和 用 法 

<a> 标签 定义 超 链 接 ， 用 于 从 一 张 页 面 链接 到 另 一 张 页 面 。 
<a> 元 素 最 重要 的 属性 是 href 属性 ， 它 指示 链接 的 目标 。 
在 所 有 浏览 器 中 ， 链 接 的 默认 外 观 是 : 

e 未 被 访问 的 链接 带 有 下 划 线 而 且 是 蓝 色 的 

e 已 被 访问 的 链接 带 有 下 划 线 而 且 是 紫色 的 

e 活动 链接 带 有 下 划 线 而 且 是 红色 的 


提示 : 您 可 能 已 经 注意 到 了 ，W3School 站 点 内 的 链接 外 观 与 默认 的 链接 外 观 非常 
不 同 。 您 可 以 使 用 CSS 5x 向 文本 超 链 接 添加 复杂 而 多 样 的 样式 。 


术语 解释 
什么 是 超 文 本 ? 
提示 和 注释 


提示 : 如 果 不 使 用 href 属性 ， 则 不 可 以 使 用 如 下 属性 : download, hreflang, media, 
rel, target LAR type 属性 。 

提示 : 被 链接 页 面 通 常 显示 在 当前 浏览 器 窗口 中 ， 除 非 您 规定 了 另 一 个 目标 
(target 属性 ) 。 


提示 : 请 使 用 CSS 来 设置 链接 的 样式 。 


HTML 4.01 与 HTML5 之 间 的 差异 


在 HTML 4.01 中 ，<a> 标签 可 以 是 超 链接 或 锚 。 在 HTML5 中 ，<a> 标签 始终 是 超 
链接 ， 但 是 如 果 未 设置 href 属性 ， 则 只 是 超 链 接 的 占 位 符 。 


HTML5 提供 了 一 些 新 属性 ， 同 时 不 再 支持 一 些 HTML 4.01 属性 。 


属性 
New : HTML5 中 的 新 属性 。 
属性 值 描述 
charset char_encoding rt ALTE ARE BEN 
MUS TE TIMES 中 不 支持 。 规 定 链接 的 坐 
download filename 规定 被 下 载 的 超 链接 目标 。 
href URL 规定 链接 指向 的 页 面 的 URL。 
hreflang language_code 规定 被 链接 文档 的 语言 。 
ea 3 M/ E3 、 ^ Nt 
med MOUSE UO n EUIS 
nies Bonnae EU 中 不 支持 。 规 定 锚 的 名 
m " 规定 当前 文档 与 被 链接 文档 之 问 
" HTML5 中 不 支持 。 规 定 被 链接 文 
档 与 当前 文档 之 间 的 关系 。 
default rect HTML5 中 不 支持 。 规 定 链接 的 形 
shape qas 
circle poly 状 。 
_blank parent 
target self top 规定 在 何 处 打开 链接 文档 。 
framename 
人 MIME type ser ee ene MIME X 


全 局 属性 
<a> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<a> 标签 支持 HTML 中 的 事件 属性 。 


亲 目 试 一 试 - 实例 


创建 超级 链接 
本 例 演示 如 何在 HTML 文档 中 创建 链接 。 


<html> 
<body> 


<p> 
<a href="/index.html"> 本 文本 </a> 是 一 个 指向 本 网 站 中 的 一 个 页 面 的 链接 。</p> 


<p><a href="http://www.microsoft.com/">AMA</a> 是 一 个 指向 万 维 网 上 的 ? 


</body> 
</html> 


EI _ E 
将 图 像 作 为 链接 
本 例 演示 如 何 使 用 图 像 作 为 链接 。 





<html> 
<body> 


<p> 
您 也 可 以 使 用 图 像 来 作 链 接 : 

«a hrefz"/example/html/lastpage.html"- 

«img border="0" srcz"/i/eg buttonnext.gif" /> 
</a> 

</p> 


</body> 
</html> 


链接 到 同一 个 页 面 的 不 同位 置 


本 例 演示 如 何 使 用 链接 跳 转 至 文档 的 另 一 个 部 分 


<html> 

<body> 

<p> 

«a href="#C4">4@4@ Chapter 4, </a> 
</p> 


<h2>Chapter 1</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 2</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 3</h2> 
<p>This chapter explains ba bla bla</p> 


<h2><a name="C4">Chapter 4</a></h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 5</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 6</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 7</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 8</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 9</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 10</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 11</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 12</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 13</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 14</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 15</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 16</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 17</h2> 
<p>This chapter explains ba bla bla</p> 


</body> 
</html> 


在 新 的 浏览 器 窗口 打开 链接 
本 例 演示 如 何在 新 窗口 打开 一 个 页 面 ， 这 样 的 话 访问 者 就 无 需 离 开 你 的 站 点 了 。 


<html> 

<body> 

<p> 

«a href="#C4">4@4 Chapter 4, </a> 
</p> 


<h2>Chapter 1</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 2</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 3</h2> 
<p>This chapter explains ba bla bla</p> 


<h2><a name="C4">Chapter 4</a></h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 5</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 6</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 7</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 8</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 9</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 10</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 11</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 12</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 13</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 14</h2><html> 
<body> 


<p> 


bla</p> 


bla</p> 


bla</p> 


bla</p> 


«a href="#C4">4@4 Chapter 4, </a> 


</p> 


<h2>Chapter 1</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 2</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 3</h2> 
<p>This chapter explains ba bla 


bla</p> 


bla</p> 


bla</p> 


<h2><a name="C4">Chapter 4</a></h2> 


<p>This chapter explains ba bla 


<h2>Chapter 5</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 6</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 7</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 8</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 9</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 10</h2> 
<p>This chapter explains ba bla 


<h2>Chapter 11</h2> 
<p>This chapter explains ba bla 


bla</p> 


bla</p> 


bla</p> 


bla</p> 


bla</p> 


bla</p> 


bla</p> 


bla</p> 


<h2>Chapter 12</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 13</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 14</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 15</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 16</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 17</h2> 
<p>This chapter explains ba bla bla</p> 


</body> 
</html> 


<p>This chapter explains ba bla bla</p> 


<h2>Chapter 15</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 16</h2> 
<p>This chapter explains ba bla bla</p> 


<h2>Chapter 17</h2> 
<p>This chapter explains ba bla bla</p> 


</body> 
</html> 
跳出 框架 
本 例 演示 如 何 跳出 框架 ， 假 如 你 的 页 面 被 固定 在 框架 之 内 。 


<html> 
<body> 
<p> 被 锁 在 框架 中 了 吗 ? </p> 


<a href="/index. html" 
target="_top"> 请 点 击 这 里 1 </a> 


</body> 
</html> 


创建 电子 邮件 链接 
本 例 演 示 如 何如 何 链 接 到 一 个 邮件 。 (本 例 在 安装 邮件 客户 端 程序 后 才能 工作 。) 


<html> 

<body> 

<p> 

这 是 邮件 链接 : 

«a hrefz"mailto:someoneQmicrosoft.com?subject-Hello9*20again"» £ jk op { 
</p> 

<p> 

<b> 注 意 : </b> 应 该 使 用 %20 来 替换 单词 之 间 的 空格 ， 这 样 浏览 器 就 可 以 正确 地 显示 文本 
</p> 


</body> 
</html> 


| 
创建 电子 邮件 链接 2 
本 例 演示 更 加 复杂 的 邮件 链接 。 





«html» 

«body» 

«p» 

这 是 另 一 个 mailto 链接 : 

«a href="mailto: someone@microsoft.com?cc=someoneelse@microsoft.comé 
</p> 

<p> 

<b> 注 意 : </b> 应 该 使 用 «20 来 替换 单词 之 间 的 空格 ， 这 样 浏 览 器 就 可 以 正确 地 显示 文才 
</p> 


</body> 
</html> 


相关 页 面 


HTML 教程 : HTML 链接 
HTML DOM 参考 手册 : Anchor 对 象 





HTML «abbr» 标签 


实例 
标记 一 个 缩写 : 


The «abbr title="People's Republic of China">PRC</abbr> was foundec 
ED | 


«| m 


浏览 器 支持 


IE Firefox Chrome Safari Opera 








所 有 浏览 器 都 支持 <abbr> 标签 
注释 :IE 6 或 更 早 版 本 的 IE 浏览 器 不 支持 «abbr» 标签 


定义 和 用 法 
«abbr» 标签 指示 简称 或 缩写 ， 上 比如 "WWW" 或 "NATO"。 
通过 对 缩写 进行 标记 ， Ta BE 4 IA 浏览 | as. 拼写 检查 和 搜索 引擎 提供 上 t 有 用 的 信息 。 


<abbr> 标签 aa HTML 4.0 中 引入 的 ， 表 示 它 所 包含 的 文本 是 一 个 更 长 的 单词 
或 短语 的 缩写 


SA 


ies 


提示 和 注释 


提示 : 可 以 在 «abbr» 标签 中 使 用 全 局 的 title 属性， 这 样 就 能 够 在 鼠标 指针 移动 到 
<abbr> 元 素 上 时 显示 出 简称 /缩写 的 完整 版 本 。 


HTML 4.01 与 HTML5 之 间 的 差异 


无 。 


全 局 属性 


<abbr> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<abbr> 标签 支持 HTML 中 的 事件 属性 。 


HTML «acronym? 标签 
实例 


标记 一 个 首 字 母 缩写 


<acronym title="World Wide web">www</acronym> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 主流 的 浏览 器 均 支 持 <acronym> 标签 
注释 : IE 5.5 或 更 早 版 本 的 |E 浏览 器 不 支持 <acronym> 标签 。 


rr . N 

HTML5 中 不 支持 «acronym? 标签 。 请 使 用 «abbr» HARE, 

<acronym> 标签 定义 首 字母 缩写 。 

缩写 能 够 作为 单词 来 朗读 ， 例 如 NATO, NASA, ASAP, GUI. 

通过 对 缩写 进行 标记 ， 您 能 够 为 浏览 器 、 拼 写 检 查 和 搜索 引擎 提供 有 用 的 信息 。 


提示 和 注释 
提示 : tile 属性 可 用 于 在 鼠标 指针 移动 到 元 素 上 时 显示 出 缩写 的 完整 版 本 。 


HTML 4.01 与 HTML5 之 间 的 差异 


HTML5 中 不 支持 «acronym» 标签 ， 但 是 在 HTML 4.01 中 支持 。 
标准 属性 


id, class, title, style, dir, lang, xml:lang 


如 需 完 整 的 描述 ， 请 访问 标准 属性 。 
事件 属性 


onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 


如 需 完 整 的 描述 ， 请 访问 事件 属性 。 


此 例 演示 如 何 实现 缩写 或 首 字母 缩写 。 


«html» 

«body» 

«abbr title="etcetera">etc.</abbr> 

«br /» 

«acronym title="World Wide Web">WwWW</acronym> 

<p> 在 某 些 浏览 器 中 ， 当 您 把 鼠标 移 至 缩 略 词语 上 时 ，tit1le 可 用 于 展示 表达 的 完整 版 本 。 
<p> 仅 对 于 IE 5 中 的 acronym 元 素 有 效 。</p> 

<p> 对 于 Netscape 6.2 中 的 abbr 和 acronym 元 素 都 有 效 。</p> 


</body> 
</html> 


HEE) 





HTML «address»? 标签 


实例 
Example.com 的 联系 信息 : 


<address> 

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.< 
Visit us at:<br> 

Example.com<br> 

Box 564, Disneyland<br> 

USA 

</address> 


ee 


浏览 器 支持 





IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <address> 标签 。 


定义 和 用 法 

«address» 标签 定义 文档 或 文章 的 作者 /拥有 者 的 联系 信息 。 

如 果 «address» 元 素 位 于 «body» 元 素 内 ， 则 它 表示 文档 联系 信息 。 

如 果 «address» 元 素 位 于 <article> 元 素 内 ， 则 它 表 示 文 章 的 联系 信息 。 

«address» 元 素 中 的 文本 通常 呈现 为 斜体 。 大 多 数 浏 览 器 会 在 address 元 素 前 后 添 
加 折 行 。 

提示 和 注释 

提示 : «address» 标签 不 应 该 用 于 描述 通讯 地 址 ， 除 非 它 是 联系 信息 的 一 部 分 。 
提示 : «address» 元 素 通常 连同 其 他 信息 被 包含 在 «footer» 元 素 中 。 


HTML 4.01 与 HTML5 之 间 的 差异 


HTML 4.01 不 支持 <article> 标签 ， 因 此 在 HTML 4.01 中 ，<address> 标签 始终 定 
义 文 档 作 者 /拥有 者 的 联系 信息 。 


全 局 属性 


<address> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<address> 标签 支持 HTML 中 的 事件 属性 。 


HTML <applet> 标签 


实例 
—Sfr AES Java applet : 


«applet code="Bubbles.class" width="350" height="350"> 
Java applet that draws animated bubbles. 
</applet> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


某 些 浏览 器 中 依然 存在 对 <applet> 标签 的 一 些 支持 ， 但 是 需要 额外 的 插件 和 安装 
过 程 才能 起 作用 。 


定义 和 用 法 

HTML5 中 不 支持 «applet» 标签 。 请 使 用 object T MARE. 
HTML 4.01 中 不 赞成 使 用 «applet» 元 素 。 

«applet» 4 XE 3L Bk A B3 applet. 

HTML 4.01 5 HTML5 z jg E325 5e 


在 HTML5 中 ， 不 支持 applet 7538 ; f£ HTML 4.01 中 ， 不 赞成 使 用 applet 755. 


必需 的 属性 


属性 值 描 
code URL 规定 Java applet 的 文件 名 。 
object name 定义 了 包含 该 applet 的 一 系列 版 本 的 资源 名 称 。 


学 


可 选 的 属性 


alt 


archive 


codebase 


height 


hspace 


name 


vspace 


width 


left right 
middle bas 
absmiddle 


text 


URL 


URL 


pixels 


pixels 


unique_name 


pixels 


pixels 


标准 属性 


id, class, title, style, dir, lang, xml:lang 


值 


top bottom 
eline texttop 
absbottom 


如 需 完整 的 描述 ， 请 访问 标准 属性 。 


事件 属性 


onclick, 


ondblclick, onmousedown, 


onmouseup, 


描述 


定义 applet 相对 于 
周围 元 素 的 对 齐 方 


Xo 


规定 applet 的 替换 
文本 。 
规定 档案 文件 的 位 


En 


规定 code 属性 中 
指定 的 applet 的 基 
准 URL。 

定义 applet 的 高 度 
定义 围绕 applet 的 
水 平 间隔 。 


规定 applet 的 名 称 
eat 
的 ) 。 


定义 围绕 applet 的 
垂直 间隔 。 


定义 applet 的 宽度 


onmouseover, 


onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 


如 需 完 整 的 描述 ， 请 访问 事件 属性 。 


HTML «area»? 标签 


带 有 可 点 击 区 域 的 图 像 映射 : 


<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets' 


<map name="planetmap" id="planetmap"> 
«area shape="circle" coords="180,139,14" href z'"venus.html" alt=' 
«area shape-z"circle" coords="129,161,10" href ="mercur.html" alt: 
«area shape="rect" coords="0,0,110,260" href ="Sun.html" alt="Sur 
</map> 


Aoo ëR 


浏览 器 支持 





IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <area> 标签 。 


定义 和 用 法 


~ 标签 定义 图 像 映射 中 的 区 域 ( 注 : 图 像 映 射 指 得 是 带 有 可 点 击 区 域 的 图 
area TR ERETT «map» 标签 中 。 


注释 : <img> 标签 中 的 usemap 属性 与 map 元 素 name 属性 相关 联 ， 创 建 图 像 与 
映射 之 间 的 联系 。 


HTML 与 XHTML z ig WEF 


在 HTML m, «area» 没有 结束 标签 。 
在 XHTML 中 ，<area> 必须 正确 地 关闭 。 


提示 和 注释 : 


注释 : <img> 中 的 usemap 属性 可 引用 «map» 中 的 id 或 name 属性 (由 浏览 器 决 
定 ) ， 所 以 我 们 需要 同时 向 <map> 添加 id 和 name 两 个 属性 。 


必需 的 属性 
属性 值 描述 
alt text 定义 此 区 域 的 替换 文本 。 
可 选 的 属性 
属性 值 描述 


定义 可 点 击 区 域 (对 外 标 敏感 的 区 


coords ”坐标 值 域 ) 的 坐标 


href URL 定义 此 区 域 的 目标 URL. 
nohref | nohref 从 图 像 映 射 排 除 某 个 区 域 。 
shape aa TECI geine 定义 区 域 的 形状 。 
toc .blank parent 规定 在 何 处 打开 href 属性 指定 的 目 
9 sel, top 标 URL。 
全 局 属性 
<area> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 
<area> 标签 支持 HTML 中 的 事件 属性 。 
相关 页 面 


HTML DOM 参考 手册 : Area 对 象 


HTML «article» 标签 


实例 


<article> 

<hi>Internet Explorer 9</h1> 

<p>Windows Internet Explorer 9 (简称 IE9) F 2011 年 3 A 14 日 发 布 . 
</article> 


a] mn z 
浏览 器 支持 


IE Firefox Chrome Safari Opera 





Internet Explorer 9, Firefox, Opera, Chrome 以 及 Safari 支持 «article» 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «article» 标签 。 


定义 和 用 法 

«article» 标签 规定 独立 的 自 包 含 内 容 。 

一 篇 文章 应 有 其 自身 的 意义 ， 应 该 有 可 能 独立 于 站 点 的 其 余部 分 对 其 进行 分 发 。 
«article» 元 素 的 潜在 来 源 : 


论坛 帖子 
报纸 文章 
博客 条 目 
用 户 评论 


HTML 4.01 5 HTML 5 ZW WER 


«article» 标签 是 HTML 5 中 的 新 标签 。 


全 局 属性 


<article> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<article> 标签 支持 HTML 中 的 事件 属性 。 


HTML «aside»? 标签 


实例 


<p>Me and my family visited The Epcot center this summer.</p> 
<aside> 

<h4>Epcot Center</h4> 

The Epcot Center is a theme park in Disney World, Florida. 
</aside> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 «aside» 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «aside» 标签 。 


定义 和 用 法 
«aside» 标签 定义 其 所 处 内 容 之 外 的 内 容 。 
aside 的 内 容 应 该 与 附近 的 内 容 相 关 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
«aside» 标签 是 HTML 5 的 新 标签 。 
提示 和 注释 : 

提示 : «aside» 的 内 容 可 用 作文 章 的 侧 栏 。 


全 局 属性 


<aside> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


W3School 前 端 教 程 合集 


<aside> 标签 支持 HTML 中 的 事件 属性 。 


HTML «aside» 标签 277 


HTML «audio»? 标签 


实例 
一 段 简单 的 HTML 5 音频 : 


«audio src="Ssomeaudio.wav"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 <audio> 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «audio» 标签 。 


定义 和 用 法 

«audio» 标签 定义 声音 ， 上 比如 音乐 或 其 他 音频 流 。 
HTML 4.01 与 HTML 5 之 间 的 差异 
<audio> 标签 是 HTML 5 的 新 标签 。 

提示 和 注释 


提示 : 可 以 在 开始 标签 和 结束 标签 之 间 放 置 文本 内 容 ， 这 样 老 的 浏览 器 就 可 以 显示 
出 不 支持 该 标签 的 信息 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 
autoplay 
controls 
loop 


muted 
preload 


STC 


全 局 属性 


值 
autoplay 
controls 
loop 


muted 
preload 


url 


描述 
如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 。 
如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 比 如 播放 按钮 。 
如 果 出 现 该 属性 ， 则 每 当 音 频 结 束 时 重新 开始 播放 。 
规定 视频 输出 应 该 被 静音 。 


如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预 
各 播放 。 如 果 使 用 "autoplay"， 则 忽略 该 属性 。 


要 播放 的 音频 的 URL. 


<audio> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<audio> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Audio 对 象 


HTML <b> 标签 


实例 


<p> 这 是 普通 文本 - <b> 这 是 粗 体 文本 </b>。</p> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «b» 标签 。 
定义 和 用 法 
<b> 标签 规定 粗 体 文 本 。 
HTML 4.01 与 HTML5 之 间 的 差异 
无 。 
提示 和 注释 


注释 : 根据 HTML5 规范 ， 在 没有 其 他 合适 标签 更 合适 时 ， 才 应 该 把 <b> 标签 作为 
最 后 的 选项 。HTML5 规范 声明 : 应 该 使 用 <h1> - <h6> 来 表示 标题 ， 使 用 <em> 
标签 来 表示 强调 的 文本 ， 应 该 使 用 <strong> 标签 来 表示 重要 文本 ， 应 该 使 用 
<mark> 标签 来 表示 标注 的 /突出 显示 的 文本 。 


提示 : 您 也 能 够 使 用 CSS "font-weight" 属性 来 设置 粗 体 文 本 。 


全 局 属性 


<b> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<b> 标签 支持 HTML 中 的 事件 属性 。 


W3School 前 端 教 程 合 


HTML <b> 标签 251 


HTML «base»? 标签 


实例 


<head> 

«base href="http://www.w3school.com.cn/i/" /> 
<base target="_blank" /> 

</head> 

<body> 

<img src="eg_smile.gif" /> 

«a href="http://www.w3school.com.cn">W3School</a> 
</body> 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <base> 标签 


定义 和 用 法 
<base> 标签 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 。 


通常 情况 下 ， 浏 览 器 会 从 当前 文档 的 URL 中 提取 相应 的 元 素来 填写 相对 URL 中 的 
空白 。 


使 用 «base» 标签 可 以 改变 这 一 点 。 浏 览 A s 将 不 再 使 用 当前 文档 的 URL， 而 使 
用 指定 的 基本 URL 来 解析 所 有 的 相对 URL。 这 其 中 包括 <a>、<img>、<link>、 
<form> 标签 中 的 URL。 


HTML 与 XHTML z jig WEF 


在 HTML Hi, «base» 标签 没有 结束 标签 ; TE XHTML 中 ，<base> 标签 必须 被 正确 
地 关闭 。 


提示 和 注释 : 


注释 : <base> 标签 必须 位 于 head 元 素 内 部 。 


属性 值 描述 
href URL 规定 页 面 中 所 有 相对 链接 的 基准 URL。 
可 选 的 属性 
属性 值 描述 
target | —Plank parent _self _top 在 何 处 打开 页 面 中 所 有 的 
ags framename 链接 。 
标准 的 属性 和 事件 
NONE 
相关 页 面 


HTML DOM 参考 手册 : Base 对 象 


HTML <basefont> 标签 


规定 页 面 上 的 默认 字体 颜色 和 字号 : 


<head> 
«basefont color="red" size="5" /> 
</head> 


<body> 
<hi>This is a header</h1i> 
<p>This is a paragraph</p> 
</body> 


T - nu 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
只 有 Internet Explorer 支持 <basefont> 标签 。 应 该 避免 使 用 该 标签 。 
ch 、 : 
定义 和 用 法 


<basefont> 标签 定义 基准 字体 。 该 标签 可 以 为 文档 中 的 所 有 文本 定义 默认 字体 颜 
色 、 字 体 大 小 和 字体 系列 。 


HTML 与 XHTML z WWE 


在 HTML 4.01 中 ， 不 赞成 使 用 basefont 元 素 ; f£ XHTML 1.0 Strict DTD rh, AX 
持 basefont 元 素 。 


可 选 的 属性 


属性 


Color 


face 


size 


值 


rgb(x,x,x) TExxxxxx 
colorname 


font family 


number 


标准 属性 


id, 


描述 
不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 文档 中 
的 默认 文本 颜色 。 


不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 文档 中 
的 默认 字体 。 


不 疯 成 使 用 。 请 使 用 样式 取代 它 。 规 定 文档 中 
的 默认 字体 大 小 。 


class, title, style, dir, lang, xml:lang 


如 需 完整 的 描述 ， 请 访问 标准 属性 。 


NONE 


HTML <bdi> 标签 


实例 
把 用 户 名 从 周围 的 文本 方向 设置 中 隔离 出 来 : 


<ul> 

<li>Username <bdi>Bill</bdi>:80 points</1li> 
<li>Username <bdi>Steve</bdi>: 78 points</1li> 
</ul> 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
目前 只 有 Firefox 和 Chrome 支持 <bdi> 标签 。 
定义 和 用 法 
bdi 指 的 是 bidi 隔离 。 


<bdi> 标签 允许 您 设置 一 段 文本 ， 使 其 脱离 其 父 元 素 的 文本 方向 设置 。 
在 发 布 用 户 评论 或 其 他 您 无 法 完全 控制 的 内 容 时 ， 该 标签 很 有 用 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
«bdi» 标签 是 HTML5 中 的 新 标签 。 
属性 


属 


述 
dir letras rel 可 选 。 规 定 <bdi> 元 素 内 的 文本 的 文本 方向 。 默 认 
auto 值 : auto。 


全 局 属性 


W3School 前 端 教 程 合集 
<bdi> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<bdi> 标签 支持 HTML 中 的 事件 属性 。 


HTML <bdi> 标签 


HTML «bdo»? 标签 


实例 


«bdo dir="rtl">Here is some text</bdo> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «bdo» 标签 。 
定义 和 用 法 
bdo 元 素 可 覆盖 默认 的 文本 方向 。 
HTML 与 XHTML 之 间 的 差异 
NONE 
可 选 的 属性 


属性 tä 描 
dir ler Ent 定义 文字 的 方向 


学 


全 局 属性 


<bdo> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<bdo> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


文字 方向 
此 例 演示 如 何 改 变 文字 的 方向 。 


HTML <big> 标签 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 «big» 标签 


定义 和 用 法 
<big> 标签 呈现 大 号 字体 效果 。 


使 用 <big> 标签 可 以 很 容易 地 放大 字体 。 这 简直 简单 了 : 浏 览 器 显示 包含 在 
<big> 标签 和 其 相应 的 </big> 标签 之 间 围 的 文字 要 大 一 号 。 
但 是 ， 如 果 文 字 已 经 是 最 大 号 字体 ， 这 个 <big> 标签 将 不 起 任何 作用 。 


mb, JURE <big> 标签 来 放大 文本 。 每 一 个 <big> 标签 都 可 以 使 字体 大 一 
号 ， 直 到 上 限 7 号 文本 ， 正 如 字体 模型 所 定义 的 那样 。 


但 是 使 用 «big» 标签 的 时 候 还 是 要 小 心 ， 因 为 浏览 EAR Ñ 总 是 很 宽 oe 
标签 ， 对 于 那些 不 支持 <big> 标签 的 浏览 器 来 说 ， 它 经 常 将 其 认为 是 粗 体 字 标 签 


参阅 


请 参 闵 HTML 5 参考 手册 ， 了 解 有 关 <big> 标签 的 最 新 信息 : 
HTML 5 <big> 标签 


HTML <blockquote> 标签 


实例 
标记 长 的 引用 : 


<blockquote> 
Here is a long quotation here is a long quotation here is a long qt 
here is a long quotation here is a long quotation here is a long qt 
here is a long quotation here is a long quotation here is a long qt 
</blockquote> 


ck  - 


浏览 器 支持 





IE Firefox Chrome Safari Opera 


所 有 主流 的 浏览 器 均 支 持 <blockquote> 标签 。 
注释 : 没有 浏览 器 能 够 正确 地 显示 cite 属性 。 


定义 和 用 法 


<blockquote> 标签 定义 块 引用 。 


«blockquote» 与 </blockquote> 之 间 的 所 有 文本 都 会 从 常规 文本 中 分 离 出 来 ， 经 常 
会 在 左 、 右 两 边 进 行 缩 进 ( 增 加 外 边 距 ) ， 而 且 有 时 会 使 用 斜体 。 也 就 是 说 ， 块 引 
用 拥有 它们 自己 的 空间 。 


HTML 与 XHTML z jig WE 


没有 。 
提示 和 注释 : 


提示 : 请 使 用 g 元 素来 标记 短 的 引用 。 


注释 : 如 需 把 页 面 作为 strict XHTML 进行 验证 ， 那 么 «blockquote» 元 素 必 须 包 含 
块 级 元 素 ， 上 比如 这 样 : 


<blockquote> 
<p>here is a long quotation here is a long quotation</p> 
</blockquote> 


可 选 的 属性 
属性 值 描述 
cite URL 规定 引用 的 来 源 。 

全 局 属性 

<blockquote> 标签 支持 HTML 中 的 全 局 属性 。 

事件 属性 

<blockquote> 标签 支持 HTML 中 的 事件 属性 。 

相 天 页 面 


HTML DOM 参考 手册 : Blockquote 对 象 


HTML <body> 标签 


实例 


一 个 简单 的 HTML 文档 ， 带 有 最 基本 的 必需 的 元 素 : 


<html> 
<head> 
<title> 文 档 的 标题 </title> 
</head> 
<body> 
文档 的 内 容 ...... 
</body> 


</html> 


浏览 器 支持 

IE Firefox Chrome 
所 有 主流 浏览 器 都 支持 <body> 标签 。 
定义 和 用 法 


body 元 素 定 义 文档 的 主体 。 


body 元 素 包 含 文档 的 所 有 内 容 (比如 文本 、 超 链接 、 


HTML 与 XHTML ZW WE 


Safari Opera 


图 像 、 表 格 和 列表 等 等 。 ) 


在 HTML 4.01 中 ， 所 有 body 元 素 的 “呈现 属性 ” 均 不 被 鞠 成 使 用 。 
在 XHTML 1.0 Strict DTD 中 ， 所 有 body 元 素 的 “呈现 属性 ” 均 不 被 支持 。 


可 选 的 属性 


属性 值 描述 
rgb(x,x,x) ge o RS 
不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 文档 
i 中 活动 链接 (active link) 的 的 颜色 。 
background URL Dd om 请 使 用 样式 取代 它 。 规定 文档 
rgb(x,x,x) z 、 pee pees 
nm eee TEMRE, sh ESRC. aesti 
colorname Fn erg 
- ee! 不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 文档 
PEE 中 未 访问 链接 的 默认 颜色 。 
rgb(x,x,x) e 
不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 文档 
OO 中 所 有 文本 的 颜色 。 
colorname 
T ene 不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 文档 
colorname 中 已 被 访 问 链接 的 颜色 。 
全 局 属性 
<body> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 


<body> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


一 个 简单 的 HTML 文件 


这 个 例子 是 一 个 很 简单 的 HTML 文件 ， 使 用 了 尽量 少 的 HTML 标签 。 它 向 您 演示 
了 body 元 素 中 的 内 容 是 如 何 被 浏览 器 显示 的 。 


<html> 


<head> 
<title> 我 的 第 一 个 HTML 页 面 </title> 
</head> 
<body> 


<p>body 元 素 的 内 容 会 显示 在 浏览 器 中 。</p> 
<p>title 元 素 的 内 容 会 显示 在 浏览 器 的 标题 栏 中 。</p> 
</body> 


</html> 


背景 颜色 


本 例 演示 如 何 为 HTML 页 面 添 加 背景 颜色 。 
<html> 
<head> 
«meta http-equiv="Content-Type" content-"text/html; charset-gb2312' 


«meta http-equiv-"Content-Language" content="zh-cn" /> 
«/head» 


«body bgcolor="yellow"> 

<h2> 请 看 : 改变 了 颜色 的 背景 。</h2> 

</body> 

</html> 
a NNNM 
背景 图 片 


本 例 演示 如 何 添加 背景 图 片 到 HTML 页 面 。 





<html> 

<body backgroundz"/i/eg background.jpg"» 
<h3> 图 像 背 景 </h3> 

<p>gif 和 jpg 文件 均 可 用 作 HTML Sx. </p> 
<p> 如 果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。</p> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Column 对 象 


HTML <br> 标签 


TIY 实例 
换行 
本 例 演示 如 何在 文档 中 插入 换行 符 。 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <br> 标签 。 


定义 和 用 法 
<br> 可 插入 一 个 简单 的 换行 符 。 


<br> 标签 是 空 标签 (意味 着 它 没有 结束 标签， 因此 这 是 错误 的 : <br></br>) 。 在 
XHTML 中 ， 把 结束 标签 放 在 开始 标签 中 ， 也 就 是 <br />。 


请 注意 ，<br> 标签 只 是 简单 地 开始 新 的 一 行 ， 而 当 浏 览 器 遇 到 <p> 标签 时 ， 通 常 
会 在 相 邻 的 段落 之 间 插 入 一 些 垂直 的 间距。 


clear 属性 


如 果 您 希望 文本 流 在 内 联 表格 或 图 像 的 下 一 行 继 续 输出 ， 请 使 用 clear 属性 ， 该 属 
性 有 三 个 可 选 的 值 : left, right 或 者 all， 每 个 值 都 代表 一 个 边界 或 两 边 的 边界 。 


更 多 有 关 <br> 标签 的 clear 属性 的 信息 。 


HTML 与 XHTML z ig WE 


在 HTML Pm, <br> 标签 没有 结束 标签 。 
在 XHTML m, «br» 标签 必须 被 正确 地 关闭 ， 比 如 这 样 : <br/>, 


提示 和 注释 : 


注释 : 请 使 用 <br> 来 输入 空 行 ， 而 不 是 分 割 段落 。 


全 局 属性 
«br» 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«br» 标签 支持 HTML 中 的 事件 属性 。 


HTML «button»? 标签 


实例 
以 下 代码 标记 了 一 个 按钮 


<button type="button">Click Me!</button> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 <button> 标签 。 


重要 事项 : 如 果 在 HTML 表单 中 使 用 button 元 素 ， 不 同 的 浏览 器 会 提交 不 同 的 
值 。Internet Explorer 将 提交 «button» 与 <button/> 之 间 的 文本 ， 而 其 他 浏览 器 将 
提交 value 属性 的 内 容 。 请 在 HTML 表单 中 使 用 input 元 素来 创建 按钮 。 


定义 和 用 法 
<button> 标签 定义 一 个 按钮 。 


在 button 元 素 内 部 ， 您 可 以 放置 内 容 ， 比 如 文本 或 图 像 。 这 是 该 元 素 与 使 用 input 
元 素 创建 的 按钮 之 间 的 不 同 之 处 。 


«button» 控件 与 <input type="button"> 相 比 ， 提 供 了 更 为 强大 的 功能 和 更 丰富 的 
内 容 。<button> 与 </button> 标签 之 间 的 所 有 内 容 都 是 按钮 的 内 容 ， 其 中 包括 任何 
可 接受 的 正文 内 容 ， 比 如 文本 或 多 媒体 内 容 。 例 如 ， 我 们 可 以 在 按钮 中 包括 一 个 图 
像 和 相关 的 文本 ， 用 它们 在 按钮 中 创建 一 个 吸引 人 的 标记 图 像 。 


唯一 禁止 使 用 的 元 素 是 图 像 映射 ， 因 为 它 对 鼠标 和 键盘 敏感 的 动作 会 干扰 表单 按钮 
的 行为 。 

请 始终 为 按钮 规定 type Blt. Internet Explorer 的 默认 类 型 是 "button"， 而 其 他 浏 
览 器 中 (包括 W3C 规范 ) 的 默认 值 是 "submit"。 


HTML 4.01 与 HTML 5 Za WER 


HTML 5 中 的 新 属性 : autofocus, form, formaction, formenctype, formmethod, 
formnovalidate 以 及 formtarget. 


提示 和 注释 


注释 : 如 果 在 HTML 表单 中 使 用 button 元 素 ， 不 同 的 浏览 器 会 提交 不 同 的 按钮 
值 。 请 使 用 input 元 素 在 HTML 表单 中 创建 按钮 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 
autofocus 


disabled 


form 


formaction 


formenctype 


formmethod 


formnovalidate 


formtarget 


name 
type 


value 


值 
autofocus 
disabled 


form_name 


url 


见 注 释 


get post 


formnovalidate 


blank —_self 
.parent _ top 
framename 


button name 


button reset 
submit 


text 


注释 : formenctype 属性 可 能 的 值 : 


e application/x-www-form-urlencoded 


e multipart/form-data 


e text/plain 


描述 
规定 当 页 面 加 载 时 按钮 应 当 自 动 地 
E 


按钮 属于 一 个 或 多 个 表单 。 


form 元 素 的 action 属性 。 注 
: 该 属性 与 type="submit" 配合 
em. 


fem form 元 素 的 enctype 属性 。 
注释 : 该 属性 与 type="submit" 配 
合 使 用 。 

18 ud D 元 素 的 method 属性 。 


注释 : 该 属性 与 type="submit" Bc 
合 使 用 ， 


覆盖 form 元 素 的 novalidate Æ 
性 。 注 释 : 该 属性 与 
type="submit" 配合 使 用 。 


28:5 form 元 素 的 target 属性 。 注 
ft : 该 属性 与 type="submit" 配合 
使 用 。 


规定 按钮 的 名 称 。 
规定 按钮 的 类 型 。 


规定 按钮 的 初始 值 。 可 由 脚本 进行 
修改 。 


全 局 属性 


<button> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<button> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Button 对 象 


HTML «canvas»? 标签 


实例 
如 何 通过 canvas 元 素来 显示 一 个 红色 的 矩形 : 


<canvas id="myCanvas"></canvas> 
<script type="text/javascript"> 


var canvas-document.getElementById('myCanvas'); 
var ctx-canvas.getContext('2d'); 
ctx.fillStyle-'ZFF0000'; 
ctx.fillRect(0,0,80,100); 


</script> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 <canvas> 标签 。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «canvas» 标签 。 


定义 和 用 法 
«canvas» 标签 定义 图 形 ， 上 比如 图 表 和 其 他 图 像 。 
<canvas> 标签 只 是 图 形容 器 ， 您 必须 使 用 脚本 来 绘制 图 形 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
<canvas> 标签 是 HTML 5 中 的 新 标签 。 

属性 

new : HTML5 中 的 新 属性 。 


iE 


属性 值 fia) 


height pixels 设置 canvas 的 高 度 。 
width pixels 设置 canvas 的 宽度 。 
全 局 属性 
<canvas> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 


<canvas> 标签 支持 HTML 中 的 事件 属性 。 


«canvas» 的 历史 


这 个 HTML 元 素 是 为 了 客户 端 矢量 图 形 而 设计 的 。 它 自己 没有 行为 ， 但 却 把 一 个 绘 
图 API 展现 给 客户 端 JavaScript 以 使 脚本 能 够 把 想 绘 制 的 东西 都 绘制 到 一 块 画布 
Es 


<canvas> 标记 由 Apple 在 Safari 1.3 Web 浏览 器 中 引入 。 对 HTML 的 这 一 根本 扩 


展 的 原因 在 于 HTML 在 Safari 中 的 绘图 能 力也 为 Mac OS X 桌面 的 Dashboard 
组 件 所 使 用 ， 并 且 Apple 希望 有 一 种 方式 在 Dashboard 中 支持 脚本 化 的 图 形 。 


Firefox 1.5 和 Opera 9 都 跟随 了 Safari 的 引领 。 这 两 个 浏览 器 都 支持 «canvas» 标 
记 。 
我 们 其 至 可 以 在 IE 中 使 用 «canvas? 标记 ， 并 在 IE 的 VML 支持 的 基础 上 用 开源 


的 JavaScript 代码 (H Google 发 起 ) 来 构建 兼容 性 的 画布 。 参 
见 : http://excanvas.sourceforge.net/. 


«canvas» 的 标准 化 的 努力 由 一 个 Web 浏览 器 厂商 的 非 正式 协会 在 推进 ， 目 前 
«canvas» 已 经 成 为 HTML 5 草案 中 一 个 正式 的 标签 。 FS 
见 : http://www.whatwg.org/specs/web-apps/current-work/ 


<canvas> 标记 和 SVG 以 及 VML 之 间 的 差异 
«canvas» 标记 和 SVG LAR VML 之 间 的 一 个 重要 的 不 同 是 ，<canvas> 有 一 个 基 
于 JavaScript 的 绘图 API， 而 SVG 和 VML 使 用 一 个 XML 文档 来 描述 绘图 。 


这 两 种 方式 在 功能 上 是 等 同 的 ， 任 何 一 种 都 可 以 用 另 一 种 来 模拟 。 从 表面 上 看 ， 它 
们 很 不 相同 ， 可 是 ， 每 一 种 都 有 强项 和 弱点 。 例 如 ，SVG 绘图 很 容易 编辑 ， 只 要 从 
其 描述 中 移 除 元 素 就 行 。 


要 从 同一 图 形 的 一 个 «canvas» 标记 中 移 除 元 素 ， 往 往 需 要 擦 掉 绘图 重新 绘制 它 。 


如 何 使 用 <canvas> 标记 绘 
大 多 数 Canvas 绘图 API 都 没有 定义 在 «canvas» 元 素 本 身上 ， 而 是 定义 在 通过 画 
布 的 getContext() 方法 获得 的 一 个 “绘图 环境 ”对象 上 。 


Canvas API 也 使 用 了 路 径 的 表示 法 。 但 是 ， 路 径 由 一 系列 的 方法 调用 来 定义 ， 而 
不 是 描述 为 字母 和 数字 的 字符 串 ， 比 如 调用 beginPath() 和 arc() 方法 。 


一 旦 定义 了 路 径 ， 其 他 的 方法 ， 如 fl()， 都 是 对 此 路 径 操作 。 绘 图 环境 的 各 种 属 
性 ， 比 如 fillStyle， 说 明了 这 些 操 作 如 何 使 用 。 


注释 : Canvas API 非常 紧凑 的 一 个 原因 上 它 没有 对 绘制 文本 提供 任何 支持 。 要 把 


文本 加 入 到 一 个 «canvas» 图 形 ， 必 须要 么 自己 绘制 它 再 用 位 图 图 像 合 并 它 ， 或 者 
在 «canvas» 上 方 使 用 CSS 定位 来 覆盖 HTML 文本 。 


相关 页 面 


HTML 教程 : HTML <canvas> 元 素 
HTML DOM 参考 手册 : HTML DOM Canvas 对 象 


HTML «caption»? 标签 


实例 


<table border="1"> 


<caption>Monthly savings</caption> 


<tr> 
<th>Month</th> 
<th>Savings</th> 

</tr> 

<tr> 
<td>January</td> 
<td>$100</td> 

</tr> 

</table> 


We 
JU 


器 支持 


Firefox 


浏 


IE Chrome 


所 有 浏览 器 都 支持 <caption> 标签 。 


定义 和 用 法 
caption 元 素 定 义 表格 标题 。 


caption 标签 必须 紧 随 table 标签 之 后 。 
标题 会 被 居中 于 表格 之 上 。 


尔 只 


JAN 


Safari Opera 


能 对 每 个 表格 定义 一 个 标题 。 通 常 这 个 


HTML 与 XHTML z WWE 


在 HTML 4.01 FB, caption 703484 align [EE = 748 4t FEX [58 FH BS 
在 XHTML 1.0 Strict DTD FB, caption 元 素 的 align 属性 是 不 被 支持 的 。 


可 选 的 属性 


属性 值 描述 


alti left right top 不 赞成 使 用 。 请 使 用 样式 取而代之 。 规 定 标 


bottom 题 的 对 齐 方 式 。 
全 局 属性 
<caption> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 


<caption> 标签 支持 HTML 中 的 事件 属性 。 


HTML <center> 标签 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <center> 标签 。 
定义 和 用 法 
对 其 所 包括 的 文本 进行 水 平 居 中 。 


HTML 与 XHTML ZW WEF 


在 HTML 4.01 rh, center 元 素 不 被 赞成 使 用 。 
在 XHTML 1.0 Strict DTD 中 ，center 元 素 不 被 支持 。 


提示 和 注释 : 
注释 : 提示 : 请 使 用 CSS 样式 来 居中 文本 |! 
标准 属性 
id, class, title, style, dir, lang, xml:lang 
如 需 完整 的 描述 ， 请 访问 标准 属性 。 


事件 属性 


onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 


如 需 完整 的 描述 ， 请 访问 事件 属性 。 


HTML <cite> 标签 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <cite> 标签 。 


定义 和 用 法 
<cite> 标签 通常 表示 它 所 包含 的 文本 对 某 个 参考 文献 的 引用 ， 上 比如 书籍 或 者 杂志 的 


标题 。 
按照 惯例 ， 引 用 的 文本 将 以 斜体 显示 。 


用 <cite> 标签 把 指向 其 他 文档 的 引用 分 离 出 来 ， 尤 其 是 分 离 那 些 传统 媒体 中 的 文 
档 ， 如 书籍 、 灯 志 、 期 刊 ， 等 等 。 如 果 引 用 的 这 些 文档 有 联机 版 本 ， 还 应 该 把 引用 
包括 在 一 个 <a> 标签 中 ， 从 而 把 一 个 超 链 接 指向 该 联机 版 本 。 


<cite> 标签 还 有 一 个 隐藏 的 功能 : 它 可 以 使 你 或 者 其 他 人 从 文档 中 自动 摘录 参考 书 
目 。 我 们 可 以 很 容易 地 想象 一 个 浏览 器 ， 它 能 够 自动 整理 引用 表格 ， 并 把 它们 作为 
脚注 或 者 独立 的 文档 来 显示 。 < 标签 的 语义 已 经 远 远 超过 了 改变 它 所 包含 的 文 
本 外 观 的 作用 ; 它 使 浏览 器 能 够 以 各 种 实用 的 方式 来 向 用 户 表达 文档 的 内 容 。 


HTML <em> <strong> <dfn> <code> <samp> 
<kbd><var> <cite> 标签 


定义 和 用 法 
以 下 元 素 都 是 短语 元 素 。 虽然 这 些 标签 定义 的 文本 大 多 会 呈现 出 特殊 的 样式 ， 但 实 
际 上 ， 这 些 标 签 都 拥有 确切 的 语义 。 


我 们 并 不 反对 使 用 它们 ， 但 是 如 果 您 只 是 为 了 达到 某 种 视觉 效果 而 使 用 这 些 标签 的 
话 ， 我 们 建议 您 使 用 样式 表 ， 那么 做 会 达到 更 加 丰富 的 效果 。 


| <em> | 把 文本 定义 为 强调 的 内 容 。 | | <strong> | 把 文本 定义 为 语气 更 强 的 强调 的 
内 容 。 | | <dfn> | 定义 一 个 定义 项 目 。 | | «code» | 定义 计算 机 代码 文本 。 | 
<samp> | 定义 样本 文本 。 | | <kbd> | 定义 键 胡 文本 。 它 表示 文本 是 从 键 胡 上 键入 
的 。 它 经 常用 在 与 计算 机 相关 的 文档 或 手册 中 。 | | <var> | 定义 变量 。 您 可 以 将 此 
标签 与 <pre> 及 «code» 标签 配合 使 用 。 | | <cite> | 定义 引用 。 可 使 用 该 标签 对 参 
考 文献 的 引用 进行 定义 ， 上 比如 书籍 或 杂志 的 标题 。 | 


HTML 5 XHTML 之 间 的 差异 
无 


标准 属性 


id, class, title, style, dir, lang, xml:lang 


onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 


如 需 完整 的 描述 ， 请 访问 事件 属性 。 


HTML 文本 格式 化 实例 
文本 格式 化 


此 例 演示 如 何在 一 个 HTML 文件 中 对 文本 进行 格式 化 


<html> 

<body> 

<b>This text is bold</b> 

<br /> 

<strong>This text is strong</strong> 
<br /> 

<big>This text is big</big> 

<br /> 

<em>This text is emphasized</em> 
<br /> 

<i>This text is italic</i> 

<br /> 

<small>This text is small</small> 
<br /> 


This text contains 
<sub>subscript</sub> 


<br /> 


This text contains 
<sup>superscript</sup> 


</body> 
</html> 


“计算 机 输出 "标签 
此 例 演示 不 同 的 “计算 机 输出 "标签 的 显示 效果 。 


<html> 
<body> 


<code>Computer code</code> 
<br /> 

<kbd>Keyboard input</kbd> 
<br /> 

<tt>Teletype text</tt> 

<br /> 

<samp>Sample text</samp> 

<br /> 

<var>Computer variable</var> 
<br /> 


<p> 
<b> 注 释 : </b> 这 些 标签 常用 于 显示 计算 机 /编程 代码 。 
</p> 


</body> 
</html> 


HTML <col> 标签 


实例 
col 元 素 为 表格 中 的 三 个 列 规定 了 不 同 的 对 章 方式 : 


«table width="100%" border="1"> 
<col align="left" /> 
<col align="left" /> 
<col align="right" /> 
<tr> 
<th>ISBN</th> 
<th>Title</th> 
<th>Price</th> 

</tr> 

<tr> 
<td>3476896</td> 
<td>My first HTML</td> 
<td>$53</td> 

</tr> 

</table> 


\、 - OO 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <col> 标签 。 


定义 和 用 法 
«col» 标签 为 表格 中 一 个 或 多 个 列 定义 属性 值 。 


如 需 对 全 部 列 应 用 样式 ，<col> 标签 很 有 用 ， 这 样 就 不 需要 对 各 个 单元 和 各 行 重复 
应 用 样式 了 。 


您 只 能 在 table 或 colgroup 元 素 中 使 用 <col> 标签 。 
HTML 5 XHTML z AER 


在 HTML 中 ，<col> 没有 结束 标签 。 
在 XHTML 中 ，<col> 标签 必须 被 正确 的 关闭 。 


提示 和 注释 : 


提示 : 请 为 <col> 标签 添加 class 属性 。 这 样 就 可 以 使 用 CSS 来 负责 对 齐 方式 、 


宽度 和 颜色 等 等 。 


提示 : 如 果 您 希望 在 colgroup 内 部 为 每 个 列 规定 不 同 的 属性 值 时 ， 请 使 用 此 元 素 。 
如 果 没 有 col 元 素 ， 列 会 从 colgroup 那里 继承 所 有 的 属性 值 。 


注释 : col 元 素 是 仅 包含 属性 的 空 元 素 。 如 需 创 建 列 ， 您 就 必须 在 tr 元 素 内 部 规定 


td 元 素 。 


参见 : <colgroup> 标签 。 


可 选 的 属性 


属性 值 
alan right left center 
9 Scu Elia 
char character 


charoff | number 
span number 


top middle bottom 


valign baseline 


width pixels % relative_length 


全 局 属性 
<col> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<col> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Column 对 象 


描述 


规定 与 col 元 素 相关 的 内 容 的 水 平 
Xt Ft 23 Th. 


规定 根据 哪个 字符 来 对 齐 与 col 元 
素 相 关 的 内 容 。 


规定 第 一 个 对 齐 字符 的 偏 移 量 。 
规定 col 元 素 应 该 横 跨 的 列 数 。 


定义 与 col 元 素 相关 的 内 容 的 垂直 
对 齐 方式 。 


规定 col 元 素 的 宽度 。 


HTML <colgroup> 标签 


实例 


两 个 colgroup 元 素 为 表格 中 的 三 列 规定 了 不 同 的 对 齐 方式 和 样式 (注意 第 一 个 
colgroup 元 素 横 跨 两 列 ) : 


«table width="100%" border="1"> 
«colgroup span="2" align="left"></colgroup> 
<colgroup align="right" style="color :#0000FF;"></colgroup> 
<tr> 
<th>ISBN</th> 
<th>Title</th> 
<th>Price</th> 
</tr> 
<tr> 
<td>3476896</td> 
<td>My first HTML</td> 
<td>$53</td> 
</tr> 
</table> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 <colgroup> 标签 。 
Firefox, Chrome EL Safari 仅 支 持 colgroup 元 素 的 span 和 width 属性 。 


定义 和 用 法 


<colgroup> 标签 用 于 对 表格 中 的 列 进行 组 合 ， 以 便 对 其 进行 格式 化 。 


如 需 对 全 部 列 应 用 样式 ，<colgroup> 标签 很 有 用 ， 这 样 就 不 需要 对 各 个 单元 和 各 行 
重复 应 用 样式 了 。 


<colgroup> 标签 只 能 在 table 元 素 中 使 用 。 


HTML 与 XHTML z jig WEF 


NONE 


提示 和 注释 : 


提示 : 请 为 <colgroup> 标签 添加 class 属性 。 这 样 就 可 以 使 用 CSS 来 负责 对 齐 方 


式 、 宽 度 和 颜色 等 等 。 


注释 : col 元 素 是 仅 包 含 属性 的 空 元 素 。 如 需 创 建 列 ， 您 就 必须 在 tr 元 素 内 部 规定 


td 元 素 。 
参见 : <col> 标签 。 
可 选 的 属性 


属性 值 


right left center 


align Justini Fechan 


char character 


charoff number 


span number 


top middle bottom 


valign baseline 


width pixels % relative length 


全 局 属性 


<colgroup> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<colgroup> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Column 对 象 


描述 
定义 在 列 组 合 中 内 容 的 水 平 对 
3:23 388 


规定 根据 哪个 字符 来 对 齐 列 组 
中 的 内 容 。 


规定 第 一 个 对 齐 字符 的 偏 移 


量 
规定 列 组 应 该 横 跨 的 列 数 。 


定义 在 列 组 合 中 内 容 的 垂直 对 
JF X. 


规定 列 组 合 的 宽度 。 


HTML «command? 标签 


实例 
标记 一 个 按钮 : 


<menu> 

«command onclick-"alert('Hello World')"> 
Click Me!</command> 

</menu> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


没有 浏览 器 支持 <command> 标签 。 
只 有 Internet Explorer 9 《更 早 或 更 晚 的 版 本 都 不 支持 ) 支持 «command»? 标签 。 


定义 和 用 法 
command 元 素 表 示 用 户 能 够 调用 的 命令 。 
«command» 标签 可 以 定义 命令 按钮 ， 比 如 单 选 按钮 、 复 选 框 或 按钮 。 


只 有 当 command 元 素 位 于 menu 元 素 内 时 ， 该 元 素 才 是 可 见 的 。 否 则 不 会 显示 这 
个 元 素 ， 但 是 可 以 用 它 规定 键 意 快捷 键 。 


浏览 器 支持 


目前 只 有 Internet Explorer 支持 <command> 标签 。 


HTML 4.01 与 HTML 5 Za WER 


«command»? 标签 是 HTML 5 中 的 新 标签 。 


属性 


new : HTML5 中 的 新 属性 。 
属性 值 
checked checked 
disabled disabled 
icon url 
label text 
radiogroup | groupname 


checkbox 


type command 


全 局 属性 


描述 


定义 是 否 被 选中 。 人 入 用 于 radio 或 
checkbox 类 型 。 


定义 command 是 否 可 用 。 


定义 作为 command 来 显示 的 图 像 的 
url. 


为 command 定义 可 见 的 label。 


定义 command 所 属 的 组 名 。 仅 在 类 型 
为 radio 时 使 用 。 


定义 该 command 的 类 型 。 默 认 是 
"command", 


«command»? 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<command> 标签 支持 HTML 中 的 事件 属性 。 


HTML <datalist> 标签 


实例 
下 面 是 一 个 input 元 素 ，datalist 中 描述 了 其 可 能 的 值 : 


<input id="myCar" list="cars" /> 
<datalist id="cars"> 

<option value="BMW"> 

<option value="Ford"> 

<option value="Volvo"> 
</datalist> 


定义 和 用 法 
<datalist> 标签 定义 选项 列表 。 请 与 input 元 素 配合 使 用 该 元 素 ， 来 定义 input 可 能 
的 值 。 

datalist 及 其 选项 不 会 被 显示 出 来 ， 它 仅仅 是 合法 的 输入 值 列 表 。 
请 使 用 input 元 素 的 list 属性 来 绑 定 datalist。 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 <datalist> 标签 ， 除 了 Internet Explorer 和 Safari. 


HTML 4.01 5 HTML 5 Za WE 


<datalist> 标签 是 HTML 5 中 的 新 标签 。 


全 局 属性 


<datalist> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<datalist> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Datalist 对 象 


HTML <dd> 标签 


实例 


<dl> 
<dt> 计 算 机 </dt> 
<dd> 用 来 计算 的 仪器 ... ... </dd> 
<dt> 显 示 器 </dt> 
<dd> 以 视觉 方式 显示 信息 的 装置 ..，..， </dd> 
«/dl» 


浏览 器 文 持 

IE Firefox Chrome 
所 有 浏览 器 都 支持 <dd> 标签 。 
定义 和 用 法 
<dd> 在 定义 列表 中 定义 条 目的 定义 部 分 。 
HTML 与 XHTML 之 间 的 差异 


NONE 


全 局 属性 


<dd> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<dd> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


定义 列表 


Safari 


Opera 


本 例 演示 一 个 定义 列表 。 
<html> 
<body> 
<h2> 一 个 定义 列表 : </h2> 


«dl» 
<dt> 计 算 机 </dt> 
<dd> 用 来 计算 的 仪器 ... ...</dd> 
<dt> 显 示 器 </dt> 
<dd> 以 视觉 方式 显示 信息 的 装置 ... ...</dd> 
«/dl» 


«/body» 
«/html» 


HTML «del» 标签 


实例 


a dozen is <del>20</del> 12 pieces 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 «del» 标签 。 
定义 和 用 法 
定义 文档 中 已 被 删除 的 文本 。 
提示 和 注释 : 
注释 : 请 与 <ins> 标签 配合 使 用 ， 来 描述 文档 中 的 更 新 和 修正 。 


HTML 与 XHTML z ig WEF 


NONE 
可 选 的 属性 
属性 t 描述 
Y" EL 指向 另外 一 个 文档 的 URL， 此 文档 可 解释 文本 被 


删除 的 原因 。 
datetime — YYYYMMDD 定义 文本 被 删除 的 日 期 和 时 间 。 


全 局 属性 


<del> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«del» 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


删除 和 插入 文本 
此 例 演 示 如 何 标记 文档 中 删除 和 插入 的 文本 。 
«html» 
«body» 
<p> 一 打 有 <del>—+</del> <ins> 十 二 </ins> fff, </p> 
<p> 大 多 数 浏 览 器 会 改写 为 删除 文本 和 下 划 线 文本 。</p> 
<p> 一 些 老式 的 浏览 器 会 把 删除 文本 和 下 划 线 文本 显示 为 普通 文本 。</p> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Del 对 象 


HTML «details» 标签 


实例 
关于 文档 的 细节 : 


<details> 

<summary>Copyright 2011.</summary> 

<p>All pages and graphics on this web site are the property of W3S« 
</details> 


E B 
浏览 器 支持 


IE Firefox Chrome Safari Opera 





目前 只 有 Chrome 和 Safari 6 支持 <details> 标签 。 
定义 和 用 法 

«details» 标签 用 于 描述 文档 或 文档 某 个 部 分 的 细节 。 
浏览 器 支持 

目前 只 有 Chrome 支持 <details> 标签 。 

HTML 4.01 与 HTML 5 之 间 的 差异 
<details> 标签 是 HTML 5 中 的 新 标签 。 

提示 和 注释 


提示 : & <summary> 标签 配合 使 用 可 以 为 details 定义 标题 。 标 题 是 可 见 的 ， 用 
户 点 击 标题 时 ， 会 显示 出 details, 


属性 


new : HTML5 中 的 新 属性 。 
属性 值 


open open 


全 局 属性 


<details> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<details> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Details 对 象 


描 


定义 details 是 否 可 见 。 


学 


HTML <dialog> 标签 


实例 
使 用 «dialog» 元 素 : 


<table border="1"> 
<tr> 
<th> 一 月 <dialog open> 这 是 打开 的 对 话 窗口 </dialog></th> 
<th> 二 月 </th> 
<th> 三 月 </th> 
</tr> 
<tr> 
<td>31</td> 
<td>28</td> 
<td>31</td> 
</tr> 
</table> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
目前 只 有 Chrome 和 Safari 6 支持 <dialog> 标签 。 
定义 和 用 法 
<dialog> 标签 定义 对 话 框 或 窗口 。 
HTML 4.01 与 HTML 5 之 间 的 差异 
«dialog» 标签 是 HTML 5 的 新 标签 。 
属性 


new : HTML5 中 的 新 属性 。 


属性 值 描述 
open open 规定 dialog 元 素 是 活动 的 ， 用 户 可 与 之 交互 。 


全 局 属性 


<dialog> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«dialog» 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Dialog 对 象 


HTML <dir> 标签 
不 赞成 使 用 dir 元 素 ! 
实例 

目录 列表 : 


<dir> 
«li»HTML«/li» 
«l1i»XHTML«/li» 
<1i>CSS</1i> 
</dir> 


3| Vas SOF 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <dir> 标签 。 
定义 和 用 法 
<dir> 标签 定义 目录 列表 。 


HTML 与 XHTML z WWE 


在 HTML 4.01 4, dir TRTR A RIEA. 
在 XHTML 1.0 Strict DTD #, dir 元 素 不 被 支持 。 


提示 和 注释 : 


提示 : 请 使 用 CSS 来 为 列表 添加 样式 ! 在 我 们 的 CSS 教程 中 ， 您 可 以 找到 更 多 有 
关 为 列表 添加 样式 的 细节 。 


可 选 的 属性 


属性 值 描述 
compact compact TRER. AEA. 


标准 属性 
id, class, title, style, dir, lang, xml:lang 
如 需 完整 的 描述 ， 请 访问 标准 属性 。 


事件 属性 


onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmot 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 





HTML <div> 标签 


实例 
文档 中 的 一 个 部 分 会 显示 为 绿色 : 


<div style="color :#00FF00"> 
<h3>This is a header</h3> 
<p>This is a paragraph .</p> 
</div> 


\、 - OO 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 «div» 标签 。 


定义 和 用 法 
<div> 可 定义 文档 中 的 分 区 或 节 (division/section) 。 


<div> 标签 可 以 把 文档 分 割 为 独立 的 、 不 同 的 部 分 。 它 可 以 用 作 严 格 的 组 织 工具 ， 
并 且 不 使 用 任何 格式 与 其 关联 。 


如 果 用 id 或 class 来 标记 <div>， 那 么 该 标签 的 作用 会 变 得 更 加 有 效 。 


用 法 

<div> 是 一 个 块 级 元 素 。 这 意味 着 它 的 内 容 自 动 地 开始 一 个 新 行 。 实 际 上 ， 换 行 是 
<div> 固有 的 唯一 格式 表现 。 可 以 通过 «div» 的 class 或 id 应 用 额外 的 样式 。 

不 必 为 每 一 个 <div> 都 加 上 类 或 jd， 虽然 这 样 做 也 有 一 定 的 好 义 。 


可 以 对 同一 个 <div> mR aM class Kid 属性 ， 但 是 更 常见 的 情况 是 只 应 用 其 中 一 
种 。 这 两 者 的 主要 差异 是 ，class 用 于 元 素 组 (类 似 的 元 素 ， 或 者 可 以 理解 为 某 一 
类 元 素 ) ， 而 id 用 于 标识 单独 的 唯一 的 元 素 。 


HTML 与 XHTML ZW WE 


在 HTML 4.01 中 ，div 元 素 的 "align" BIET ERA. 


在 XHTML 1.0 Strict DTD 中 ，div 元 素 的 "align" 属性 不 被 支持 。 


提示 和 注释 : 
注释 : <div> 是 一 个 块 级 元 素 ， 也 就 是 说 ， 浏 览 器 通常 会 在 div 元 素 前 后 放置 一 个 
换行 符 。 


提示 : 请 使 用 <div> 元 素来 组 合 块 级 元 素 ， 这 样 就 可 以 使 用 样式 对 它们 进行 格式 
化 。 


案例 分 析 


<body> 


<hi>NEWS WEBSITE</h1> 
<p>some text. some text. some text...</p> 


<div class="news"> 

<h2>News headline 1</h2> 

<p>some text. some text. some text...</p> 
</div> 

<div class="news"> 


<h2>News headline 2</h2> 
<p>some text. some text. some text...</p> 


</div> 


</body> 


例子 解释 


正如 您 看 到 的 ， 上 面 这 段 HTML 模拟 了 新 闻 网 站 的 结构 。 其 中 的 每 个 div 把 每 条 新 
闻 的 标题 和 摘要 组 合 在 一 起 ， 也 就 是 说 ，div 为 文档 添加 了 领 外 的 站 松 。 同时 ， 由 
于 这 些 div 属于 同一 类 元 素 ， 所 以 可 以 使 用 class="news" 对 这 些 div 进行 标识 ， 这 
么 做 不 仅 为 div 添加 了 合适 的 语义 ， 而 且 便 于 进一步 使 用 祥 式 对 div 进行 格式 化 ， 
可 谓 一 举 两 得 。 

提示 : 如 需 更 深入 地 学 习 class 和 id 的 用 法 ， 请 阅 《W3school 的 结构 化 标记 》 这 
一 章 中 div、id 和 其 他 帮手 这 一 


可 选 的 属性 


属性 值 描述 
left right 不 赞成 使 用 。 请 使 用 样式 取而代之 。 规 定 div 


align center justify 元 素 中 的 内 容 的 对 齐 方 式 。 
全 局 属性 
<div> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 


<div> 标签 支持 HTML 中 的 事件 属性 。 


HTML «dl» 标签 


实例 


<dl> 
<dt> 计 算 机 </dt> 
<dd> 用 来 计算 的 仪器 ... ... </dd> 
<dt> 显 示 器 </dt> 
<dd> 以 视觉 方式 显示 信息 的 装置 ..，..， </dd> 
«/dl» 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «dl» 标签 。 


定义 和 用 法 
«dl» 标签 定义 了 定义 列表 (definition list) 。 
«dl» 标签 用 于 结合 <d> (定义 列表 中 的 项 目 ) 和 <dd> (描述 列表 中 的 项 目 ) 。 


HTML 与 XHTML z jig WE 


NONE 


全 局 属性 


«dl» 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«dl» 标签 支持 HTML 中 的 事件 属性 。 


HTML <dt> 标签 


实例 


<dl> 
<dt> 计 算 机 </dt> 
<dd> 用 来 计算 的 仪器 ... ... </dd> 
<dt> 显 示 器 </dt> 
<dd> 以 视觉 方式 显示 信息 的 装置 ..，..， </dd> 
«/dl» 


浏览 器 文 持 


IE Firefox Chrome 


所 有 浏览 器 都 支持 <dt> 标签 
定义 和 用 法 
<dt> 标签 定义 了 定义 列表 中 的 项 目 ( 即 术语 部 分 ) o 


HTML 与 XHTML z jig WEF 


NONE 


全 局 属性 
<dt> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<dt> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 
定义 列表 


Safari 


Opera 


如 何 创建 定义 列表 。 


HTML <embed> 标签 
定义 和 用 法 
<embed> 标签 定义 岩 入 的 内 容 ， 上 比如 插件 。 


实例 


<embed src="helloworld.swf" /> 


HTML 4.01 与 HTML 5 ZW WE 


<embed> 标签 是 HTML 5 中 的 新 标签 


属性 


new : HTML5 中 的 新 属性 。 


属性 fil È 
height pixels 设置 对 入 内 容 的 高 度 。 
SIC url RAAB URL, 
type type EL ERA ABBY XW, 
width pixels KERANARN SR. 

全 局 属性 
<embed> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 


<embed> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


学 


W3School 前 端 教程 合集 


HTML DOM 参考 手册 : Embed 对 象 


HTML <embed> 标签 


337 


HTML <fieldset> 标签 


实例 
组 合 表 单 中 的 相关 元 素 : 
<form> 
«fieldset» 


<legend>health information</legend> 
height: <input type="text" /> 
weight: <input type="text" /> 
</fieldset> 
</form> 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <fieldset> 标签 
定义 和 用 法 
fieldset 元 素 可 将 表单 内 的 相关 元 素 分 组 。 


<fieldset> 标签 将 表单 内 容 的 一 部 分 打包 ， 生 成 一 组 相关 表单 的 字段 。 


E or <fieldset> 标签 内 时 ， 浏 览 器 会 以 特殊 方式 来 显示 它们 ， 
能 有 特殊 的 边界 、3D 效果 ， 或 者 甚至 可 创建 一 个 子 表 单 来 处 理 这 些 元 素 。 


<fieldset> 标签 没有 必需 的 或 唯一 的 属性 。 
«legend» 标签 为 fieldset 元 素 定义 标题 。 


HTML 4.01 与 HTML 5 Za WE 


HTML5 拥有 如 下 属性 disabled, form. name, HTML 4.01 中 不 支持 这 些 属 


属性 


它们 


性 。 


属性 值 描述 
disabled disabled 规定 应 该 禁用 fieldset。 
form form_id 规定 fieldset 所 属 的 一 个 或 多 个 表单 。 
name value 规定 fieldset 的 名 称 。 
全 局 属性 


<fieldset> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<fieldset> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Fieldset 对 象 


TIY 实例 


围绕 数据 的 Fieldset 
本 例 演示 如 何在 数据 周围 绘制 一 个 带 标题 的 框 。 


<!DOCTYPE HTML> 
<html> 


<body> 


«form» 
<fieldset> 
<legend>(# la SB</legend> 
身高 : <input type="text" /> 
体重 : <input type="text" /> 
</fieldset> 
</form> 


<p> 如 果 表 单 周围 没有 边框 ， 说 明 您 的 浏览 器 太 老 了 。</p> 


</body> 
</html> 


HTML <figcaption> 标签 


实例 
用 作文 档 中 插图 的 图 像 ， 带 有 一 个 标题 : : 


<figure> 
<figcaption> 黄 浦江 上 的 的 卢浦 大 桥 </figcaption> 
«img src-"shanghai lupu bridge.jpg" width="350" height="234" /> 
«/figure» 
Ei NEN ia 
M le 口 
浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 9, Firefox, Opera, Chrome 以 及 Safari 支持 <figcaption> 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «figcaption? 标签 。 


ch 、 : 
<figcaption> 标签 定义 figure 元 素 的 标题 (caption) 。 
"figcaption" 元 素 应 该 被 置 于 "figure" 元 素 的 第 一 个 或 最 后 一 个 子 元 素 的 位 置 。 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 <figcaption> 标签 。 
HTML 4.01 与 HTML 5 之 间 的 差异 


<figcaption> 标签 是 HTML 5 中 的 新 标签 。 


全 局 属性 


<figcaption> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<figcaption> 标签 支持 HTML 中 的 事件 属性 。 


HTML «figure» 标签 


实例 
用 作文 档 中 插图 的 图 像 : 


<figure> 
<p> 黄 浦江 上 的 的 卢浦 大 桥 </p> 
<img src-"shanghai lupu bridge.jpg" width="350" height="234" /> 
</figure> 
[eee 0090 35] 
浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 9, Firefox, Opera, Chrome 以 及 Safari 支持 «figure» 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «figure» 标签 。 


定义 和 用 法 
«figure» 标签 规定 独立 的 流 内 容 (BR BR HA. KROSS). 
figure 元 素 的 内 容 应 该 与 主 内容 相 关 ， 但 如 果 被 删除 ， 则 不 应 对 文档 流产 生 影 响 。 


浏览 器 支持 


所 有 主流 浏览 器 都 支持 «figure» 标签 


HTML 4.01 5 HTML 5 之 间 的 差异 
«figure» 标签 是 HTML 5 中 的 新 标签 
提示 和 注释 


提示 : 请 使 用 <figcaption> 元 素 为 figure 添加 标题 (caption) 。 


全 局 属性 


<figure> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<figure> 标签 支持 HTML 中 的 事件 属性 。 


HTML <font> 标签 


定义 和 用 法 

«font» 规定 文本 的 字体 、 字 体 尺 寸 、 字 体 颜 色 。 
实例 

规定 文本 字体 、 大 小 和 颜色 : 


<font size="3" color="red">This is some text!</font> 
<font size="2" color="blue">This is some text!</font> 
<font face="verdana" color="green">This is some text!</font> 


浏览 如 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 «font» 标签 。 
HTML 与 XHTML z A ER 


在 HTML 4.01 中 ，font 元 素 不 被 赞成 使 用 。 
在 XHTML 1.0 Strict DTD 中 ，font 元 素 不 被 支持 。 


提示 和 注释 : 
提示 : 请 使 用 祥 式 (RE <font>) 来 定义 文本 的 字体 、 字 体 颜 色 、 字 体 尺 寸 。 


可 选 的 属性 


属性 值 描述 


rgb(x,x,x) #XXXXXX AR AE. RAHA. MENA 
colorname 的 颜色 。 


ee a 不 可 成 使 用 。 清 使 用 样式 取代 它 。 规 定 文本 


不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 文本 


size number 的 大 小 。 


标准 属性 
id, class, title, style, dir, lang, xml:lang 


如 需 完整 的 描述 ， 请 访问 标准 属性 。 


如 需 完整 的 描述 ， 请 访问 事件 属性 。 


TIY 实例 


设置 文字 的 字体 
本 例 演示 如 何 设置 文字 的 字体 。 


<html> 

<body> 

«hi style="font-family:verdana">A heading</h1i> 
«p style="font-family:courier">A paragraph</p> 
</body> 

</html> 


设置 文字 的 尺寸 
本 例 演 示 如 何 设置 文字 的 尺寸 。 


«html» 
«body» 
«hi style="font-size:150%">A heading</h1i> 
«p style="font-size:80%">A paragraph</p> 
</body> 
</html> 


设置 文字 的 颜色 
本 例 演 示 如 何 设置 文字 的 颜色 。 


«html» 
«body» 
«hi style="color:blue">A heading</h1i> 
<p style="color:red">A paragraph</p> 
</body> 
</html> 


设置 文字 的 字体 、 字 体 尺 寸 、 字 体 颜色 
本 例 演 示 如 何 设置 文字 的 字体 、 字 体 尺 寸 、 字 体 颜 色 . 


<html> 

<body> 

<p style="font -family: verdana; font -size:80%;color:green"> 

This is a paragraph with some text in it. This is a paragraph with 
</p> 

</body> 

</html> 


| EN 





HTML «footer» 标签 


实例 
文档 中 的 页 脚 部 分 : 


<footer> 

<p>Posted by: W3School</p> 

<p>Contact information: «a href="mailto:someone@example.com">some 
</footer> 


4 — 3} 


浏览 器 支持 





IE Firefox Chrome Safari Opera 


Internet Explorer 9, Firefox, Opera, Chrome, and Safari 支持 <footer> 标签 。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «footer» 标签 。 


定义 和 用 法 

«footer» 标签 定义 文档 或 节 的 页 脚 。 

«footer» 元 素 应 当 含有 其 包含 元 素 的 信息 。 

页 脚 通常 包含 文档 的 作者 、 版 权 人 信息、 使 用 条 款 链 接 、 联 系 信息 等 等 。 
您 可 以 在 一 个 文档 中 使 用 多 个 <footer> 元 素 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
<footer> 标签 是 HTML 5 中 的 新 标签 。 
提示 和 注释 


提示 : «footer» 元 素 内 的 联系 信息 应 该 位 于 <address> 标签 中 。 


全 局 属性 


<footer> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<footer> 标签 支持 HTML 中 的 事件 属性 。 


HTML «form»? 标签 


例子 


<form action="form_action.asp" method="get"> 
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name-"lname" /></p> 
<input type="Submit" value="Submit" /> 

</form> 


T - OO 
浏览 右 文 持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «form» 标签 。 


定义 和 用 法 

«form» 标签 用 于 为 用 户 输 入 创建 HTML 表单 。 

表单 能 够 包含 input 元 素 ， 比 如 文本 字段 、 复 选 框 、 单 选 框 、 提 交 按 钮 等 等 。 
表单 还 可 以 包含 menus、textarea、fieldset、legend 和 label 元 素 。 

表单 用 于 向 服务 器 传输 数据 。 


提示 和 注释 
注释 : form 元 素 是 块 级 元 素 ， 其 前 后 会 产生 折 行 。 
HTML 5 XHTML 之 间 的 差异 


NONE 


属性 


new : HTML5 中 的 新 属性 。 


属性 值 
accept MIME type 
LN charset list 
charset 
action URL 


autocomplete on off 


enctype 见 说 明 
method get post 
name form_name 
novalidate novalidate 
_blank self parent 
target 
_top  framename 
说 明 
enctype 属性 可 能 的 值 : 


e application/x-www-form-urlencoded 
e multipart/form-data 
e text/plain 


全 局 属性 
<form> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<form> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 
文本 域 (Text fields) 


HTML 5 中 不 支持 。 


规定 服务 器 可 义理 的 表单 数 
据 字 符 集 。 

规定 当 提交 表单 时 向 何 处 发 
送 表 单数 据 。 
规定 是 否 启 用 表单 的 自动 完 
成 功能 。 

规定 在 发 送 表单 数据 之 前 如 
何 对 其 进行 编码 。 
规定 用 于 发 送 form-data 的 
HTTP 方法 。 


规定 表单 的 名 称 。 
如 果 使 用 该 属性 ， 则 提交 
单 时 不 进行 验证 。 


规定 在 何 处 打开 action 
URL. 


本 例 演 示 如 何在 HTML 页面 创建 文本 域 。 用 户 可 以 在 文本 域 写 人 文本。 
<html> 
<body> 
<form> 


<input type="text" name="firstname"> 
<br /> 


RE : 


<input type="text" name="lastname"> 
</form> 


</body> 
</html> 


密码 域 
本 例 演示 如 何 创 建 HTML 的 密码 域 。 


«html» 
«body» 


«form» 

用 户 : 

<input type="text" name="user"> 

<br /> 

密码 : 

<input type="password" name="password"> 
</form> 

<p> 

请 注意 ， 当 您 在 密码 域 中 键 人 字符 时 ， 浏 览 器 将 使 用 项 目 符 号 来 代替 这 些 字符 。 
</p> 

</body> 

</html> 


复 选 杠 


本 例 演示 如 何在 HTML 页 中 创建 文本 框 。 用 户 可 以 选中 或 取消 选取 复 选 框 。 


<html> 
<body> 


«form» 

我 喜欢 自行 车 : 

<input type="checkbox" name="Bike"> 
<br /> 

我 喜欢 汽车 : 

<input type="checkbox" name="Car"> 
</form> 


</body> 
</html> 


单 选 按钮 
本 例 演 示 如 何在 HTML 中 创建 单 选 按钮 。 


<html> 
<body> 


«form» 

男性 : 

<input type="radio" checked="checked" name="Sex" value="male" /> 
<br /> 

女性 : 

<input type="radio" name="Sex" value="female" /> 

</form> 


<p> 当 用 户 点 击 一 个 单 选 按钮 时 ， 该 按钮 会 变 为 选中 状态 ， 其 他 所 有 按钮 会 变 为 非 选中 状态 


</body> 
</html> 





SCAR isk (Textarea) 


本 例 演示 如 何 创 建 一 个 文本 域 (多 行文 本 输入 控制 ) 。 用 户 可 以 在 文本 域 中 写 人 文 
本 。 在 文本 域 中 ， 可 写 入 的 字符 字数 不 受 限 制 。 


<html> 
<body> 


<p> 
This example cannot be edited 
because our editor uses a textarea 
for input, 

and your browser does not allow 

a textarea inside a textarea. 

</p> 


<textarea rows="10" cols="30"> 
The cat was playing in the garden. 


创建 按钮 
本 例 演 示 如 何 创建 按钮 。 你 可 以 对 按钮 上 的 文字 进行 自 定义 。 


<html> 
<body> 
«form» 
<input type="button" value-"Hello world!" 


«/form» 


«/body» 
«/html» 


带 有 输入 框 和 确认 按钮 的 表单 
本 例 演 示 如 何 向 页 面 添 加 表单 。 此 表单 包含 两 个 输入 框 和 一 个 确认 按钮 。 


«html» 
«body» 


«form actionz"/example/html/form action.asp" method="get"> 
<p>First name: «input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name-"lname" /></p> 
<input type="Submit" value="Submit" /> 

</form> 


<p> 请 单 击 确认 按钮 ， 输 入 会 发 送 到 服务 器 上 名 为 "form action.asp" BRM. </p> 


</body> 
</html> 
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E 
市 


有 复 选 框 的 表单 


此 表单 包含 两 个 复 选 框 和 一 个 确认 按钮 。 


[E 


AE 
市 


<html> 
<body> 


«form name="input" action="/html/html_form_action.asp" method="get' 
I have a bike: 

<input type="checkbox" name="vehicle" value="Bike" checked="checkec 
<br /> 

I have a car: 

<input type="checkbox" name="vehicle" value="Car" /> 

<br /> 

I have an airplane: 

<input type="checkbox" name="vehicle" value="Airplane" /> 

<br /><br /> 

<input type="Submit" value="Submit" /> 

</form> 


<p> RA "Submit" 按钮 ， 您 将 把 输入 传送 到 名 为 html form action.asp 的 


</body> 
</html> 





有 单 选 按钮 的 表单 


此 表单 包含 两 个 单 选 框 和 一 个 确认 按钮 。 


<html> 
<body> 


«form name="input" action="/html/html_form_action.asp" method="get' 
Male: 

<input type="radio" name="Sex" value="Male" checked="checked"> 

<br /> 


Female: 

<input type="radio" name="Sex" value="Female"> 
<br /> 

<input type ="Submit" value ="Submit"> 

</form> 


<p>w RA "Submit" 按钮 ， 您 将 把 输入 传送 到 名 为 html form action.asp 的 


</body> 
</html> 








从 表单 发 送 电子 邮件 
此 例 演示 如 何 从 表单 发 送 电子 邮件 。 


<html> 


<body> 
<form action="MAILTO: someone@w3school.com.cn" method="post" enctype 


<h3> 这 个 表单 会 把 电子 邮件 发 送 到 W3School, </h3> 

姓名 : <br /> 

<input type="text" name="name" value="yourname" size="20"> 
<br /> 

电邮 :<br /> 

<input type="text" name="mail" value="yourmail" size="20"> 
<br /> 

AR: <br /> 

<input type="text" name="comment" value="yourcomment" size="40"> 
<br /><br /> 

«input type="submit" value=" 3k"> 

«input type="reset" Value=" 重 置 "> 


</form> 
</body> 
</html> 





相关 页 面 


HTML DOM 参考 手册 : Form 对 象 


HTML «frame» 标签 


实例 
简单 的 三 框架 页 面 : 


<html> 


«frameset cols="25%, 50%, 25%"> 
«frame src="frame_a.htm" /> 
«frame src="frame_b.htm" /> 
«frame src="frame_c.htm" /> 

«/frameset» 


«/html» 


M - OO 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <frame> 标签 。 


定义 和 用 法 
«frame» 标签 定义 frameset 中 的 一 个 特定 的 窗口 (框架) 。 


frameset 中 的 每 个 框架 都 可 以 设置 不 同 的 属性 ， 比 如 border、scrolling、noresize 
SS, 


HTML 5 XHTML 之 间 的 差异 

在 HTML 中 ，<frame> 标签 没有 结束 标签 。 

在 XHTML 中 ，<frame> 标签 必须 被 正确 地 关闭 。 
提示 和 注释 : 


注释 : 如 果 您 希望 验证 包含 框架 的 页 面 ， 请 确保 doctype 被 设置 为 "Frameset 
DTD"。 阅 读 更 多 有 关 DOCTYPE HAA. 


重要 事项 : 您 不 能 与 <frameset></frameset> 标签 一 起 使 用 <body></body> 标 
签 。 不 过 ， 如 果 您 需要 为 不 支持 框架 的 浏览 器 添加 一 个 <noframes> 标签 ， 请 务必 
将 此 标签 放置 在 <body></body> 标签 中 ! 


可 选 的 属性 


属性 值 描述 


frameborder @ 1 规定 是 否 显示 框架 周围 的 边框 。 

jonadese URL E nc DS 
marginheight | pixels 定义 框架 的 上 方 和 下 方 的 边 距 。 
marginwidth ^^ pixels 定义 框架 的 左 侧 和 右 侧 的 边 距 。 

name name 规定 框架 的 名 称 。 

noresize noresize 规定 无 法 调整 框架 的 大 小 。 

scrolling EN i 规定 是 否 在 框架 中 显示 滚动 条 。 

src URL 规定 在 框架 中 显示 的 文档 的 URL. 


标准 属性 
id, class, title, style 
如 需 完整 的 描述 ， 请 访问 标准 属性 。 


TIY 实例 


垂直 框架 
本 例 演示 : 如 何 使 用 三 份 不 同 的 文档 制作 一 个 垂直 框架 。 


<html> 

«frameset cols="25%, 50%, 25%"> 
«frame srcz"/example/html/frame a.html"» 
«frame srcz"/example/html/frame b.html"» 
«frame srcz"/example/html/frame c.html"» 


«/frameset» 


«/html» 


水 平 框架 
本 例 演 示 : 如 何 使 用 三 份 不 同 的 文档 制作 一 个 水 平 框架 。 


«html» 

«frameset rows="25%, 5096, 2596" 7 
«frame srcz"/example/html/frame a.html"» 
«frame srcz"/example/html/frame b.html"» 
«frame srcz"/example/html/frame c.html"» 


«/frameset» 


«/html» 


如 何 使 用 <noframes> 标签 
本 例 演示 : 如 何 使 用 <noframes> 标签 。 


<html> 


«frameset cols="25%, 50%, 25%"> 
«frame srcz"/example/html/frame a.html"» 
«frame srcz"/example/html/frame b.html"» 
«frame srcz"/example/html/frame c.html"» 


«noframes» 
<body> 您 的 浏览 器 无 法 义理 框架 ! </body> 
«/noframes» 


«/frameset» 


«/html» 


本 例 演示 如 何 制 作 含 有 三 份 文档 的 框架 结构 ， 同 时 将 他 们 混合 置 于 行 和 列 之 中 。 


<html> 

<frameset rows="50%, 50%"> 

«frame srcz"/example/html/frame a.html"» 
«frameset cols="25%, 75%"> 

«frame srcz"/example/html/frame b.html"» 
«frame srcz"/example/html/frame c.html"» 
«/frameset» 


«/frameset» 


«/html» 


含有 noresize-"noresize" 属性 的 框架 结构 
本 例 演示 noresize 属性 。 在 本 例 中 ， 框 架 是 不 可 调整 尺寸 的 。 在 框架 间 的 边框 上 拖 
动 鼠 标 ， 你 会 发 现 边 框 是 无 法 移动 的 。 
«html» 
«frameset cols="50%, *, 2596" 
«frame srcz"/example/html/frame a.html" noresize="noresize" /> 
«frame srcz"/example/html/frame b.html" /> 
«frame srcz'"/example/html/frame c.html" /> 
</frameset> 


</html> 


导航 框架 


本 例 演示 如 何 制 作 导 航 框架 。 导 航 框架 包含 一 个 将 第 二 个 框架 作为 目标 的 链接 列 
表 。 名 为 "contents.htm" 的 文件 包含 三 个 链接 。 


<html> 
«frameset cols="120, *"> 


«frame src="/example/html/html_contents.html"> 
«frame src="/example/html/frame_a. html" name="showframe"> 


</frameset> 


</html> 


内 联 框架 
本 例 演 示 如 何 创建 内 联 框架 (HTML 页 中 的 框架 ) o 


<html> 
<body> 
<iframe src="/i/eg_landscape. jpg"></iframe> 


<p> 一 些 老 的 浏览 器 不 支持 iframe. </p> 
<p> 如 果 得 不 到 支持 ，iframe 是 不 可 见 的 。</p> 


</body> 
</html> 
跳 转 至 框架 内 的 一 个 指定 的 节 


本 例 演示 两 个 框架 。 其 中 的 一 个 框架 设置 了 指向 另 一 个 文件 内 指定 的 节 的 链接 。 这 
个 "link.htm" 文件 内 指定 的 节 使 用 <a name="C10"> 进行 标识 。 


<html> 
<frameset cols="20%, 80%"> 


«frame srcz"/example/html/frame a.html"» 
«frame src="/example/html/link.html#C10"> 


«/frameset» 


«/html» 


使 用 框架 导航 跳 转 至 指定 的 节 
本 利 演示 两 个 框架 。 左 侧 的 导航 框架 包含 了 一 个 链接 列表 ， 这 些 链接 将 第 二 个 框架 


E E 
定 的 节 。 


<html> 
«frameset cols="180, *"> 


«frame srcz"/example/html/content.html"» 
«frame srcz"/example/html/link.html" name="sShowframe"> 


«/frameset» 


«/html» 


W3School 前 端 教 程 合 


HTML <frame> 标签 361 


HTML <frameset> 标签 


实例 
简单 的 三 框架 页 面 : 


<html> 


«frameset cols="25%, 50%, 25%"> 
«frame src="frame_a.htm" /> 
«frame src="frame_b.htm" /> 
«frame src="frame_c.htm" /> 

«/frameset» 


«/html» 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <frameset> 标签 。 


定义 和 用 法 
frameset 元 素 可 定义 一 个 框架 集 。 它 被 用 来 组 织 多 个 窗口 (框架) 。 每 个 框架 存 有 


独立 的 文档 。 在 其 最 简单 的 应 用 中 ，frameset 元 素 仅 仅 会 规定 在 框架 集中 存在 多 少 
列 或 多 少 行 。 您 必须 使 用 cols 或 rows 属性 。 


HTML 与 XHTML 之 间 的 差异 
NONE 
提示 和 注释 : 


注释 : 如 果 您 希望 验证 某 个 包含 框架 的 页 面 ， 请 确保 DTD 被 设置 为 "Frameset 
DTD"。 阅读 更 多 有 关 XHTML 验证 的 内 容 。 


重要 事项 : 您 不 能 与 <frameset></frameset> 标签 一 起 使 用 <body></body> 标 
签 。 不 过 ， 如 果 您 需要 为 不 支持 框架 的 浏览 器 添加 一 个 <noframes> 标签 ， 请 务必 
将 此 标签 放置 在 <body></body> 标签 中 ! 


可 选 的 属性 


属性 值 描述 
bale pixels 9 定义 框架 集中 列 的 数目 和 尺寸 。 有 关 cols 属性 的 详 
i 细 信 息 。 


pixels % 定义 框架 集中 行 的 数目 和 尺寸 。 有 关 rows 属性 的 详 


细 信 息 。 


标准 属性 


id, class, title, style 


如 需 完整 的 描述 ， 请 访问 标准 属性 。 


HTML <h1> 到 <h6> 标签 


实例 
六 个 不 同 的 HTML 标题 : 


<h1> 这 是 标题 1</h1> 
<h2> 这 是 标题 2</h2> 
<h3> 这 是 标题 3</h3> 
<h4> 这 是 标题 4</h4> 
<h5> 这 是 标题 5</h5> 
<h6> 这 是 标题 6</h6> 


浏览 器 支持 


IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <h1> - <h6> 标签 。 


定义 和 用 法 
<h1> - <h6> 标签 可 定义 标题 。<h1> 定义 最 大 的 标题 。<h6> 定义 最 小 的 标题 。 
由 于 h 元 素 拥 有 确切 的 语义 ， 因 此 请 您 愤 重 地 选择 恰当 的 标签 层级 来 构建 文档 的 结 


构 。 因 此 ， 请 不 要 利用 标题 标签 来 改变 同一 行 中 的 字体 大 小 。 相 反 ， 我 们 应 当 使 用 
层 滞 样式 表 定 义 来 达到 漂亮 的 显示 效果 。 


如 果 您 希望 了 解 更 多 有 关 HTML 标签 选择 和 使 用 的 信息 ， 请 阅读 《Web 品质 》。 


HTML 与 XHTML jig WE 


在 HTML 4.01 中 ，h1 - h6 元 素 的 "align" 属性 不 被 推荐 使 用 。 
在 XHTML 1.0 Strict DTD 中 ，h1 - h6 元 素 的 "align" 属性 不 被 支持 。 


可 选 的 属性 


属性 值 描述 


iam left center 不 推荐 使 用 。 请 使 用 样式 替代 它 。 规 定 标 
9 right justify 题 中 文本 的 排列 。 


标准 属性 
id, class, title, style, dir, lang, xml:lang 
如 需 完整 的 描述 ， 请 访问 标准 属性 。 


事件 属性 


onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 


如 需 完 整 的 描述 ， 请 访问 事件 属性 。 


44 


TIY 实例 


标题 


本 例 演 示 在 HTML 文档 中 显示 标题 的 标签 。 


<html> 
<body> 


<hi>This is heading 1</h1> 
<h2>This is heading 2</h2> 
<h3>This is heading 3</h3> 
<h4>This is heading 4</h4> 
<h5>This is heading 5</h5> 
<h6>This is heading 6</h6> 


<p> 请 仅仅 把 标题 标签 用 于 标题 文本 。 不 要 仅仅 为 了 产生 粗 体 文本 而 使 用 它们 。 请 使 用 其 它 


</body> 
</html> 


«| = 
居中 排列 的 标题 








本 例 演示 一 个 居中 排列 的 标题 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/1loose.dtd"» 


«html» 

«body» 

«hi align="center">This is heading 1</h1> 

<p> 上 面 的 标题 在 页 面 中 进行 了 居中 排列 。 上 面 的 标题 在 页 面 中 进行 了 居中 排列 。 上 面 的 标 


</body> 
</html> 


HE) 





HTML <head> 标签 


实例 
一 个 简单 的 HTML 文档 ， 带 有 最 基本 的 必需 的 元 素 : 


<html> 
<head> 
<title> 文 档 的 标题 </title> 
</head> 
<body> 
文档 的 内 容 ... ... 
</body> 


</html> 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «head» 标签 。 
定义 和 用 法 
<head> 标签 用 于 定义 文档 的 头 部 ， 它 是 所 有 头 部 元 素 的 容器 。<head> 中 的 元 素 可 
以 引用 脚本 、 指 示 浏 览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 等 。 
文档 的 头 部 描述 了 文档 的 各 种 属性 和 信息 ， 包 括 文档 的 标题 、 在 Web 中 的 位 置 以 
Bi ee ee eee ier i lene ne ene er 
ix o 


下 面 这 些 标签 可 用 在 head 部 分 : «base», «link», «meta», <script>, <style>, 以 及 
<title>。 


<title> 定义 文档 的 标题 ， 它 是 head 部 分 中 唯一 必需 的 元 素 。 


提示 和 注释 


提示 : 应 该 把 <head> 标签 放 在 文档 的 开始 处 ， 紧 跟 在 <html> 后 面 ， 并 处 于 
<body> 标签 或 <frameset> 标签 之 前 。 


提示 : 请 记 住 始终 为 文档 规定 标题 | 


HTML 与 XHTML z WWE 


NONE 

可 选 的 属性 

属性 ff 描述 

profle URL QE DIN URL AIK, 2E URL BSH IRA 


profile 属性 的 更 多 信息 

文档 的 头 部 经 常会 包含 一 些 <meta> 标签 ， 用 来 告诉 浏览 器 关于 文档 的 附加 信息 。 
在 将 来 ， 创 作者 可 能 会 利用 预先 定义 好 的 标准 文档 的 元 数据 配置 文件 (metadata 
profile) ， 以 便 更 好 地 描述 它们 的 文档 。profile 属性 提供 了 与 当前 文档 相关 联 的 配 
置 文件 的 URL. 


配置 文件 的 格式 以 及 浏览 器 使 用 它们 的 方式 都 还 没有 进行 定义 ， 这 个 属性 主要 是 为 
将 来 的 开发 而 保留 的 占 位 符 。 


全 局 属性 


<head> 标签 支持 HTML 中 的 全 局 属性 。 


TIY 实例 


文档 的 标题 
头 元 素 内 部 的 标题 信息 不 会 被 显示 在 浏览 器 窗口 中 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312' 
<meta http-equiv="Content-Language" content="zh-cn" /> 


<title> 标 题 不 会 显示 在 文档 区 </title> 
</head> 


<body> 
<p> 这 段 文本 会 显示 出 来 。</p> 
</body> 


</html> 





一 个 target， 所 有 的 链接 

本 例 显示 如 何 使 用 base 标签 使 页 面 中 的 所 有 标签 在 新 窗口 中 打开 。 
«IDOCTYPE html» 
«html» 
«head» 


«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312' 
«meta http-equiv-"Content-Language" content="zh-cn" /> 


«base target-" blank" /» 
«/head» 


«body» 

«p» 

«a href="http://www.w3school.com.cn" targetz" blank"> 这 个 连接 </a> 将 
</p> 

<p> 

«a href="http://www.w3school.com.cn"> 这 个 连接 /a> 也 将 在 新 窗口 中 加 载 ， 朋 
</p> 


</body> 
</html> 


Bra CNET 
HTML 中 的 样式 
本 例 演 示 如 何 使 用 添加 到 <head> 部 分 的 样式 信息 对 HTML 进行 格式 化 。 





<html> 


<head> 

<style type="text/css"> 
hi (color: red} 

p (color: blue} 
</style> 

</head> 


<body> 

<hi>header 1</hi> 
<p>A paragraph.</p> 
</body> 


</html> 


链接 到 一 个 外 部 样式 表 
本 例 演示 如 何 通 过 <link> 标签 链接 到 一 个 外 部 样式 表 。 


«html» 

«head» 

«link rel="stylesheet" type="text/css" hrefz"/html/csstesti.css" > 

</head> 

<body> 

<h1> 我 通过 外 部 样式 表 进 行 格式 化 。</h1> 

<p> 我 也 一 样 ! </p> 

</body> 

</html> 
二 
文档 描述 
Meta 元 素 中 的 信息 可 以 描述 HTML 文档 。 


<html> 


<head> 
«meta http-equiv="Content-Type" content="text/html; charset-gb2312' 


<meta name="author" 
content="w3school.com.cn"> 


<meta name="revised" 
content="David Yang, 8/1/07"> 


<meta name="generator" 
content="Dreamweaver 8.0en"> 


</head> 

<body> 

<p> 本 文档 的 meta 属性 标识 了 创作 者 和 编辑 软件 。</p> 

</body> 

</html> 
IIS 下 下， 
文档 关键 字 
Meta 元 素 中 的 信息 可 以 描述 文档 的 关键 词 。 





<html> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset-gb2312' 


<meta name="description" 
content="HTML examples"> 


<meta name="keywords" 
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> 


«/head» 

«body» 

<p> 本 文档 的 meta 属性 描述 了 该 文档 和 它 的 关键 词 。</p> 

</body> 

</html> 
加 守卫 
重 定向 
这 个 例子 演示 : 在 网 址 已 经 变更 的 情况 下 ， 将 用 户 重 定向 到 另外 一 个 地 址 。 





<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv-"Content-Type" content="text/html; charset=gb2312' 
«meta http-equiv-"Refresh" content="5;url=http://www.w3school.com. 
«/head» 


«body» 

«p» 

对 不 起 。 我 们 已 经 搬家 了 。 您 的 URL 是 «a hrefz"http://www.w3school.com.cn' 
</p> 

<p> 您 将 在 5 秒 内 被 重 定向 到 新 的 地 址 。</p> 

<p> 如 果 超 过 5 秒 后 您 仍然 看 到 本 消息 ， 请 点 击 上 面 的 链接 。</p> 


</body> 
</html> 


ES 





HTML «header» 标签 


实例 
对 主页 的 介绍 : 


<header> 

«hi»Welcome to my homepage</h1> 
<p>My name is Donald Duck</p> 
</header> 


<p>The rest of my home page...</p> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 9*, Firefox, Opera, Chrome 以 及 Safari 支持 «header» 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «header» 标签 。 


定义 和 用 法 
«header? 标签 定义 文档 的 页 眉 (介绍 信息 ) 。 


HTML 4.01 与 HTML 5 Za WE 


«header? 标签 是 HTML 5 中 的 新 标签 。 


全 局 属性 


<header> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<header> 标签 支持 HTML 中 的 事件 属性 。 


HTML <hr> 标签 


实例 
被 水 平 线 分 隔 的 标题 和 段落 : 


<hi>This is header 1</h1> 
<hr /> 
<p>This is some text</p> 


DA 32 FF 

IE Firefox Chrome Safari 
所 有 主流 浏览 器 都 支持 <hr> 标签 。 
定义 和 用 法 


<hr> 标签 在 HTML 页 面 中 创建 一 条 水 平 线 。 


水 平分 隔 线 (horizontal rule) 可 以 在 视觉 上 将 文档 分 隔 成 各 个 部 分 。 


HTML 与 XHTML ZW WE 


在 HTML Hm, «hr» 标签 没有 结束 标签 。 
在 XHTML 中 ，<hr> 必须 被 正确 地 关闭 ， 比 如 <hr />。 
在 HTML 4.01 4, hr 元 素 的 所 有 呈现 属性 均 不 被 赞成 使 用 。 


在 XHTML 1.0 Strict DTD FB, hr 元 素 的 所 有 呈现 属性 均 不 被 支持 。 


可 选 的 属性 


Opera 


属性 值 


center left 


align right 


noshade noshade 
size pixels 


width pixels % 


全 局 属性 


描述 


不 赞成 使 用 。 请 使 用 样式 取代 它 。 
素 的 对 齐 方 式 。 


不 赞成 使 用 。 请 使 用 样式 取代 它 。 
素 的 颜色 呈现 为 纯色 。 


不 赞成 使 用 。 请 使 用 样式 取代 它 。 
素 的 高 度 (EIE). 


不 装 成 使 用 。 请 使 用 祥 式 取代 它 。 
素 的 宽度 。 


<hr> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<hr> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


水 平 线 

如 何 插入 水 平 线 。 
<html> 
<body> 


<p>hr 标签 定义 水 平 线 : </p> 
<hr /> 

<p> 这 是 段落 。</p> 

<hr /> 

<p> 这 是 段落 。</p> 

<hr /> 

<p> 这 是 段落 。</p> 
</body> 

</html> 


HTML «html» 标签 


实例 


<html> 


<head> 
这 里 是 文档 的 头 部 ..， ... 


</head> 
<body> 

ER BA E E 
</body> 


</html> 


定义 和 用 法 
此 元 素 可 告知 浏览 器 其 自身 是 一 个 HTML 文档 。 


«html» 与 </html> 标签 限定 了 文档 的 开始 点 和 结束 点 ， 在 它们 之 间 是 文档 的 头 部 和 
主体 。 正 如 您 所 了 解 的 那样 ， 文 档 的 头 部 由 <head> 标签 定义 ， 而 主体 由 <body> 
标签 定义 。 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <html> 标签 。 


HTML 与 XHTML z WWE 


xmlns 属性 在 XHTML 中 是 必需 的 ， 但 在 HTML 中 不 是 。 不 过 ， 即 使 XHTML 文档 
中 的 «html» 没有 使 用 此 属性 ，W3C 的 验证 器 也 不 会 报错 。 这 是 因为 
"xmlns-http://www.w3.org/1999/xhtml" 是 一 个 固定 值 ， 即 使 您 没有 包含 它 ， 此 值 也 
会 RAIE! <html> 标签 中 。 


有 关 xmlns 属性 的 更 多 信息 。 


提示 和 注释 


注释 : 即使 html 元 素 是 文档 的 根 元 素 ， 它 也 不 包含 doctype 元 素 。doctype 元 素 必 
须 位 于 html 元 素 之 前 。 


属性 
new : HTML5 中 的 新 属性 。 
属性 fü 描述 
定义 一 个 URL， 在 这 个 URL 上 描 
maniesk |- 述 了 文档 的 缓存 信息 。 
xmlns http://www.w3.org/1999/xhtml ”定义 XML namespace 属性 。 
全 局 属性 


<html> 标签 支持 HTML 中 的 全 局 属性 。 


HTML <i> 标签 
浏览 如 支持 

IE Firefox Chrome 
所 有 浏览 器 都 支持 <i> 标签 。 
定义 和 用 法 
<i> 标签 显示 斜体 文本 效果 。 


Safari Opera 


<i> 标签 和 基于 内 容 的 样式 标签 <em> 类 似 。 它 告诉 浏览 器 将 包含 其 中 的 文本 以 斜 
(AS (italic) 或 者 倾斜 (oblique) 字体 显示 。 如 果 这 种 斜体 字 对 该 浏览 器 不 可 用 的 


话 ， 可 以 使 用 高 完 、 反 白 或 加 下 划 线 等 样式 。 


提示 : <i> 标签 一 定 要 和 结束 标签 </i> 结合 起 来 使 用 。 


参阅 


请 参阅 HTML 5 参考 手册 ， 了 解 有 关 <i> 标签 的 最 新 信息 : 


HTML 5 <i> 标签 


HTML «iframe»? 标签 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <iframe> 标签 。 
定义 和 用 法 
iframe 元 素 会 创建 包含 另外 一 个 文档 的 内 联 框 架 (即行 内 框架 ) 。 
HTML 与 XHTML 之 间 的 差异 
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中 ， 不 支持 iframe 元 素 。 
提示 和 注释 : 
提示 : 您 可 以 把 需要 的 文本 放置 在 <iframe> 和 </iframe> 之 间 ， 这 样 就 可 以 应 对 无 


法 理解 iframe 的 浏览 器 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 


align 


frameborder 


height 


longdesc 


marginheight 


marginwidth 


name 


sandbox 


scrolling 
seamless 
SIC 


srcdoc 


width 


全 局 属性 


值 


left) fright | top 
middle bottom 


1 0 
pixels % 


URL 


pixels 


pixels 


frame_name 


""  allow-forms 
allow-same-origin 
allow-scripts 
allow-top-navigation 


yes no auto 


seamless 


URL 


HTML code 


pixels 96 


«iframe» 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«iframe» 标签 支持 HTML 中 的 事件 属性 。 


描述 


不 赞成 使 用 。 请 使 用 样式 
代替 。 规 定 如 何 根 据 周转 
的 元 素来 对 齐 此 框架。 


规定 是 否 显示 框架 周围 的 
边框 。 


规定 iframe 的 高 度 。 


规定 一 个 页 面 ， 该 页 面包 
含 了 有关 iframe hja KK 


定义 iframe 的 顶部 和 底部 
的 边 距 。 


定义 iframe 的 左 侧 和 右 侧 
的 边 距 。 


规定 iframe 的 名 称 。 


启用 一 系列 对 «iframe» 中 
内 容 的 额外 限制 |。 


规定 是 否 在 iframe 中 显示 
滚动 条 。 


规定 <iframe> 看 上 去 像 是 
包含 文档 的 一 部 分 。 


规定 在 iframe 中 显示 的 文 
档 的 URL。 


规定 在 <iframe> 中 显示 的 
页 面 的 HTML 内 容 。 


定义 iframe 的 宽度 。 


相关 页 面 


HTML DOM 参考 手册 : IFrame 对 象 


W3School 前 端 教程 合集 


HTML <img> 标签 


实例 


在 下 面 的 例子 中 ， 我 们 在 页 面 中 插入 一 幅 W3School 的 工程 病 在 上 海鲜 花 港 拍摄 的 
郁金香 照片 : 


<img src="/i/eg_tulip.jpg" alt=" 上 海鲜 花 港 - 郁金香 " /> 


以 上 代码 的 效果 : 





(您 可 以 在 页 面 底部 找到 更 多 实例 ) 
浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <img> 标签 。 


定义 和 用 法 
img 元 素 向 网 页 中 族人 一 幅 图 像 。 


请 注意 ， 从 技术 上 讲 ，<img> 标签 并 不 会 在 网 页 中 插 和 图像， 而 是 从 网 页 上 链接 图 
像 。<img> 标签 创建 的 是 被 引用 图 像 的 占 位 空间 。 


<img> 标签 有 两 个 必需 的 属性 : src 属性 和 alt 属性 。 


HTML <img> 标签 382 


延伸 阅读 : 如 何 正 确 地 使 用 图 像 


HTML 与 XHTML z jig WE 


在 HTML m, <img> 标签 没有 结束 标签 。 
在 XHTML 中 ，<img> 标签 必须 被 正确 地 关闭 。 


在 HTML 4.01 中 ， 不 推荐 使 用 image 元 素 的 "align"、"border"、"hspace" 以 及 
"vspace" 属性 。 


在 XHTML 1.0 Strict DTD 中 ， 不 支持 image 元 素 的 "align", "border", "hspace" 
以 及 "vspace" 属性 。 


必需 的 属性 
属性 值 描述 
alt text 规定 图 像 的 替代 文本 。 
src URL 规定 显示 图 像 的 URL。 
可 选 的 属性 
属性 fü 描述 
alian top bottom middle 不 推荐 使 用 。 规 定 如 何 根据 周围 的 
9 left right 文本 来 排列 图 像 。 
SEG mu 定义 图 像 周围 的 边 
height pixels % 定义 图 像 的 高 度 。 
hspace pixels Qr 定义 图 像 左 侧 和 右 侧 
ismap URL 将 图 像 定 义 为 服务 器 端 图 像 映 射 。 
ongdesee| UPL ee aaa E 
usemap | URL 将 图 像 定 义 为 客户 器 端 图 像 映 射 。 
Vsbdeo T qr 定义 图 像 项 部 和 底部 


width pixels % 设置 图 像 的 宽度 。 


全 局 属性 


<img> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<img> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 
插入 图 像 
本 例 演 示 如 何在 网 页 中 显示 图 像 。 


<!DOCTYPE HTML> 
<html> 


<body> 

<p> 

一 幅 图 像 : 

<img srcz"/i/eg mouse.jpg" width="128" height="128" /> 
</p> 

<p> 

一 幅 动画 图 像 : 

<img src="/i/eg_cute.gif" width="50" height="50" /> 
</p> 

<p> 请 注意 ， 插 入 动画 图 像 的 语法 与 插入 普通 图 像 的 语法 没有 区 别 。</p> 


</body> 
</html> 


从 不 同 的 位 置 插入 图 片 
本 例 演 示 如 何 将 其 他 文件 夹 或 服务 器 的 图 片 显示 到 网 页 中 。 


«html» 

«body» 

«p» 

来 自 另 一 个 文件 夹 的 图 像 : 

<img src="/i/ct_netscape.jpg" /> 

</p> 

<p> 

来 自 W3School.com.cn MAR : 

«img src-"http://www.w3school.com.cn/i/w3school logo white.gif" /> 


</p> 


</body> 
</html> 


E] 
背景 图 片 


本 例 演示 如 何 添加 背景 图 片 到 HTML 页 面 。 


«html» 
«body backgroundz"/i/eg background.jpg"» 
<h3> 图 像 背 景 </h3> 
<p>gif 和 jpg 文件 均 可 用 作 HTML WR. </p> 
<p> 如 果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。</p> 
</body> 
</html> 

排列 图 片 

本 例 演示 如 何在 文字 中 排列 图 像 。 


<html> 
<body> 
<h2> 未 设置 对 齐 方式 的 图 像 : </h2> 
<p> 图 像 «img src ="/i/eg_cute.gif"> 在 文本 中 </p> 
<h2> 已 设置 对 齐 方式 的 图 像 : </h2> 
<p> 图 像 <img src="/i/eg_cute.gif" align="bottom"> 在 文本 中 </p> 
<p> 图 像 <img src ="/i/eg_cute.gif" align="middle"> 在 文本 中 </p> 
<p> 图 像 «img src ="/i/eg_cute.gif" align="top"> 在 文本 中 </p> 
<p> 请 注意 ，bottom 对 齐 方式 是 默认 的 对 齐 方式 。</p> 
</body> 
</html> 
浮动 图 像 
本 例 演示 如 何 使 图 片 浮动 至 段落 的 左边 或 右边 。 
<html> 
<body> 
<p> 
<img src ="/i/eg_cute.gif" align ="left"> 
Pier Sai 图 像 的 align 属性 设置 为 "left"。 图 像 将 浮动 到 文本 的 左 侧 。 
<p> 
<img src ="/i/eg_cute.gif" align ="right"> 
SRR rea i eae DEST ONE ae DE Ae Sena: 


</body> 
</html> 


ASS ëO 
调整 图 像 尺 十 
本 例 演 示 如 何 将 图 片 调整 到 不 同 的 尺寸 。 


<html> 

<body> 

«img src="/i/eg_mouse.jpg" width="50" height="50"> 

<br /> 

<img src="/i/eg_mouse. jpg" width="100" height="100"> 

<br /> 

«img src="/i/eg_mouse.jpg" width="200" height="200"> 

<p> 通 过 改变 img 标签 的 "height" 和 "width" 属性 的 值 ， 您 可 以 放大 或 缩小 图 像 。 


</body> 
</html> 


JE 了 
为 图 片 显 示 蔡 换文 本 


本 例 演示 如 何 为 图 片 显示 替换 文本 。 在 浏览 器 无 法 载 信 图像 时 ， 蔡 换文 本 属性 告诉 
读者 她 们 失去 的 信息 。 为 页 面 上 的 图 像 都 加 上 替换 文本 属性 是 个 好 习惯 。 





«html» 

«body» 

<p> 仅 支持 文本 的 浏览 器 无 法 显示 图 像 ， 仅 仅 能 够 显示 在 图 像 的 "alt" 属性 中 指定 的 文本 
<p> 请 注意 ， 如 果 您 把 鼠标 指针 移动 到 图 像 上 ， 大 多 数 浏 览 器 会 显示 "alt" 文本 。</p> 
<img src="/i/eg_goleft.gif" alt=" 向 左 转 " /> 

<p> 如 果 无 法 显示 图 像 ， 将 显示 "alt" 属性 中 的 文本 </p> 

«img src="/i/eg_golefti23.gif" alt=" 向 左 转 " /> 


</body> 
</html> 


PIT E) 
制作 图 像 链接 
本 例 演示 如 何 将 图 像 作 为 一 个 链接 使 用 。 





<html> 
<body> 


<p> 
您 也 可 以 把 图 像 作 为 链接 来 使 用 : 

«a hrefz"/example/html/lastpage.html"- 

«img border="0" srcz"/i/eg buttonnext.gif" /> 
</a> 

</p> 


</body> 
</html> 


创建 图 像 地 图 
本 例 显 示 如 何 创 建 带 有 可 供 点 击 区 域 的 图 像 地 图 。 其 中 的 每 个 区 域 都 是 一 个 超级 链 


o 


«html» 
«body» 


<p> 请 点 击 图 像 上 的 星球 ， 把 它们 放大 。</p> 


<img 

srcz"/i/eg planets.jpg" 
border="0" usemap="#planetmap" 
alt="Planets" /> 


<map name="planetmap" id="planetmap"> 


<area 

shape="circle" 
coords="180,139,14" 

href z"/example/html/venus.html" 
target ="_blank" 

alt="Venus" /> 


<area 

shape="circle" 
coords="129,161, 10" 

href z"/example/html/mercur.html" 
target ="_blank" 

alt="Mercury" /> 


<area 

shape="rect" 
coords="0,0,110, 260" 

href ="/example/html/sun. html" 
target ="_blank" 

alt="Sun" /> 


</map> 


<p><b> 注 释 : «/b»img 元 素 中 的 "usemap" 属性 引用 map 元 素 中 的 "id" 或 "nam 


</body> 
</html> 





延伸 阅读 - 如 何 正 确 地 使 用 图 像 


HTML 和 XHTML 最 引 人 注 目的 特征 之 一 ， 就 是 能 够 在 文档 的 文本 中 包括 图 像 ， 既 
可 以 把 图 像 作为 文档 的 内 在 对 象 (内 联 图 像 ) ， 也 可 以 将 其 作为 一 个 可 通过 超 链 接 
下 载 的 单独 文档 ， 或 者 作为 文档 的 背景 。 


合理 地 在 文档 内 容 中 加 入 图 像 (静态 的 或 者 具有 动画 效果 的 图 标 、 照 片 、 说 明 、 绘 
男 ， 等 等 ) 时， 会 使 文档 变 得 更 加 生动 活泼 ， 更 加 引人入胜 ， 而 且 看 上 去 更 加 专 
业 ， 更 具 信 息 性 并 易于 浏览 。 还 可 以 专门 使 一 个 图 像 成 为 超 链接 的 可 视 引 导 图 。 


然而 ， 如 果 过 度 使 用 图 像 ， 文 档 就 会 变 得 支离破碎 ， 混 乱 不 堪 ， 而 且 无 法 阅读 ， 用 
户 在 下 载 和 查看 该 页 面 时 ， 更 会 增加 很 多 不 必要 的 等 待 时 间 。 


请 阅读 下 面 的 文章 ， 学 习 Web 上 的 两 种 主要 图 像 格 式 : GIF 和 JPEG， 以 及 如 何 
正确 地 使 用 图 像 : 


e GIF 图 像 
e JPEG 图 像 
e f£ Web 上 使 用 图 像 


参阅 


e AR: HTML 图 像 
e 参考 手册 : HTML 5 <img> 标签 


相关 页 面 


HTML DOM 参考 手册 : Image 对 象 


HTML <input> 标签 
实例 


一 个 简单 的 HTML 表单 ， 包 含 两 个 文本 输入 框 和 一 个 提交 按钮 : 


<form action="form_action.asp" method="get"> 
First name: <input type="text" name="fname" /> 
Last name: <input type="text" name="1name" /> 
<input type="Submit" value="Submit" /> 

</form> 


(您 可 以 在 页 面 底部 找到 更 多 实例 ) 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «input» 标签 。 


定义 和 用 法 
«input» 标签 用 于 搜集 用 户 信息 。 


根据 不 同 的 type 属性 值 ， 输 入 字段 拥有 很 多 种 形式 。 输 入 字段 可 以 是 文本 字段 、 
复 选 框 、 扼 码 后 的 文本 控件 、 单 选 按钮 、 按 钮 等 等 。 


HTML 与 XHTML Za WEF 


在 HTML m, «input» 标签 没有 结束 标签 。 
在 XHTML 中 ，<input> 标签 必须 被 正确 地 关闭 。 


提示 和 注释 : 
提示 : 请 使 用 label 元 素 为 某 个 表单 控件 定义 标签 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 


accept 


align 
alt 


autocomplete 


autofocus 


checked 


disabled 


form 


formaction 


formenctype 


formmethod 


formnovalidate 


formtarget 


height 


list 


值 
mime_type 


left right 


middle bottom 


text 


AN Orr 


autofocus 


checked 


disabled 


formname 


URL 


见 注 释 


get post 


formnovalidate 


blank  J self 
parent | top 
framename 


pixels 96 


datalist-id 


描述 


规定 通过 文件 上 传 来 提交 的 
文件 的 类 型 。 


不 赞成 使 用 。 规 定 图 像 输 入 
的 对 齐 方 式 。 


定义 图 像 输 入 的 替代 文本 。 


规定 是 否 使 用 输入 字段 的 目 
动 完成 功能 Abo 


规定 输入 字段 在 页 面 加 载 时 
是 否 获得 焦点 。 (不 适用 于 
type="hidden") 


规定 此 input 元 素 首次 加 载 
时 应 当 被 选中 。 


当 input 元 素 加 载 时 禁用 此 


元 素 。 


规定 输入 字段 所 属 的 一 个 或 

多 个 表单 。 

覆盖 表单 的 action Blt. 
(适用 于 type="submit" 和 

type="image") 


覆盖 表单 的 enctype 属性 。 
(适用 于 type="submit" 和 
type="image") 


覆盖 表单 的 method 属性 。 
(适用 于 type="submit" 和 
type="image") 


覆盖 表单 的 novalidate 属 
性 。 如 果 使 用 该 属性 ， 则 提 
交 表 单 时 不 进行 验证 。 


履 盖 表单 的 target 属性 。 
(适用 于 type="submit" 和 

type="image") 

定义 input 字段 的 高 度 。 
(适用 于 type="image") 

引用 包含 输入 字段 的 预定 义 

选项 的 datalist 。 


max 


maxlength 
min 


multiple 


name 


pattern 


placeholder 
readonly 
required 
size 


src 
step 
type 


value 


width 


全 局 属性 


number date 


number 


number date 


multiple 


field_name 


regexp_pattern 


text 

readonly 
required 
number_of_char 


URL 


number 


button checkbox 
file hidden image 
password radio 
reset submit text 


value 


pixels 96 


«input» 标签 支持 HTML 中 的 全 局 属性 。 


规定 输入 字段 的 最 大 值 。 请 
5 "min" 属性 配合 使 用 ， 来 
创建 合法 值 的 范围 。 


规定 输入 字段 中 的 字符 的 最 
大 长 度 。 


规定 输入 字段 的 最 小 值 。 请 
5 "max" 属性 配合 使 用 ， 来 
创建 合法 值 的 范围 。 


如 果 使 用 该 属性 ， 则 允许 一 
个 以 上 的 值 。 


定义 input 元 素 的 名 称 。 


规定 输入 字段 的 值 的 模式 或 
格式 。 例 如 pattern="[0-9]" 
表示 输入 值 必须 是 0 与 9 之 
间 的 数字 。 


规定 帮助 用 户 填写 输入 字段 
的 提示 。 


规定 输入 字段 为 只 读 。 


指示 输入 字段 的 值 是 必需 
的 。 


定义 输入 字段 的 宽度 。 


定义 以 提交 按钮 形式 显示 的 
AREY URL. 


规定 输入 字 的 的 合法 数字 间 
VR 


规定 input 元 素 的 类 型 。 
规定 input 元 素 的 值 。 


定 
定义 input 字段 的 宽度 。 
(适用 于 type="image") 


W3School 前 端 教程 合集 


事件 属性 


«input» 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : 


Input Button 对 象 
Input Checkbox 对 象 
Input Color 对 象 

Input Date 对 象 

Input Datetime 对 象 
Input Datetime Local 对 象 
Input Email 对 象 

Input FileUpload 对 象 
Input Hidden 对 象 
Input Input Image 对 象 
Input Month 对 象 
Input Number 对 象 
Input Password 对 象 
Input Range 对 象 
Input Radio 对 象 

Input Reset 对 象 

Input Input Search 对 象 
Input Submit 对 象 
Input Text 对 象 

Input Input Time 对 象 
Input Input URL 对 象 
Input Week 对 象 


HTML <input> 标签 394 


HTML DOM Button 对 象 


Button 对 象 


Button 对 象 代 表 HTML 文档 中 的 一 个 按钮 。 
该 元 素 没 有 默认 的 行为 ， 但 是 必须 有 一 个 onclick 事件 句柄 以 便 使 用 。 


在 HTML 文档 中 <input type="button"> 标签 每 出 现 一 次 ， 一 个 Button 对 象 就 会 被 
创建 。 


您 可 以 通过 通 历 表单 的 elements[] 数组 来 访问 某 个 按钮 ， 或 者 通过 使 用 
document.getElementByld()。 


Button 对 象 的 属性 


属性 描述 
accessKey 设置 或 返回 访问 按钮 的 快捷 键 。 
alt 设置 或 返回 当 浏 览 器 无 法 显示 按钮 时 供 显示 的 蔡 代 文本 。 
disabled 设置 或 返回 是 否 茶 用 按钮 。 
form 返回 对 包含 该 按钮 的 表单 对 象 的 引用 。 
id 设置 或 返回 按钮 的 id。 
name 设置 或 返回 按钮 的 名 称 。 
tablndex 设置 或 返回 按钮 的 tab 键 控制 次 序 。 
type 返回 按钮 的 表单 元 素 类 型 
value 设置 或 返回 在 按钮 上 显示 的 文本 。 

标准 属性 
属性 描述 

className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 


lang 


x 


tB 
设置 或 返回 元 素 的 语言 代码 。 
设置 


title 或 返回 元 素 的 title 属性 。 


x 


Button 对 象 的 方法 


方法 描述 
blur() 把 焦点 从 元 素 上 移 开 。 
click() 在 某 个 按钮 上 模拟 一 次 鼠标 单 击 。 


focus() 为 某 个 按钮 赋予 焦点 。 


HTML DOM Checkbox 对 象 


Checkbox xt & 


Checkbox 对 象 代表 一 个 HTML 表单 中 的 一 个 选择 框 。 


在 HTML 文档 中 <input type="checkbox"> 每 出 现 一 


o 


fix n] LA at 388 75 zx 3 89 elements[] 数组 来 访问 某 个 选择 框 ， 或 者 通过 使 用 


document.getElementByld() 。 


Checkbox 对 象 的 属性 
属性 描述 

accessKey 设置 或 返回 访问 checkbox 的 快捷 键 。 
alt 设置 或 返回 不 支持 checkbox 时 显示 的 替代 文本 。 
checked 设置 或 返回 checkbox 是 否 应 被 选中 。 
defaultChecked 返回 checked 属性 的 默认 值 。 
disabled 设置 或 返回 checkbox 是 否 应 被 禁用 。 
form 返回 对 包含 checkbox 的 表单 的 引用 。 
id 设置 或 返回 checkbox 的 id。 
name 设置 或 返回 checkbox 的 名 称 。 
tablndex 设置 或 返回 checkbox 的 tab 键 控制 次 序 。 
type 返回 checkbox 的 表单 元 素 类 型 。 
value 设置 或 返回 checkbox 的 value 属性 的 值 


标准 属性 


次 ，Checkbox 对 象 就 会 被 创 


属性 描述 
className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 
lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性 。 

Checkbox 对 象 的 方法 
方法 描述 

blur() 从 checkbox 上 移 开 焦点 。 
click() 模拟 在 checkbox 中 的 一 次 鼠标 点 击 。 


focus() 为 checkbox 赋予 焦点 。 


HTML DOM Color 对 象 


Color 对 象 


Color 对 象 是 HTML5 中 的 新 对 象 。 
Color 对 象 表示 HTML <input type="color"> 元 素 。 
注释 : Internet Explorer 和 Safari 不 支持 <input type="color"> 元 素 。 


访问 Color 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «color» 元 素 : 


var x = document.getElementById("myColor"); 


提示 : 您 也 可 以 通过 通 万 表单 的 elements 集合 来 访问 Color 对 象 。 


创建 Color 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <color> 元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "color"); 


Color 对 象 属性 


属性 描述 


span 设置 或 返回 列 的 span 属性 的 值 。 
autocomplete ”设置 或 返回 色彩 选择 器 的 autocomplete 属性 值 。 
autofocus 设置 或 返回 色彩 选择 器 在 页 面 加 载 后 是 否 应 自动 获取 焦点 。 
defaultValue 设置 或 返回 色彩 选择 器 的 默认 值 。 
disabled 设置 或 返回 色彩 选择 器 是 否 被 禁用 
form 返回 对 包含 色彩 和 
list 返回 对 包含 色彩 选择 器 的 datalist 的 引用 。 
name 设置 或 返回 色彩 选择 器 的 name 属性 值 。 
type 返回 色彩 选择 器 的 表单 元 素 类 型 。 
value 设置 或 返回 色彩 选择 器 的 value 属性 值 。 
标准 属性 和 事件 
Color 对 象 支持 标准 属性 和 事件 。 
相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM Input Date 对 象 


Input Date 对 象 


Input Date 对 象 是 HTML5 中 的 新 对 象 。 
Input Date 对 象 表示 HTML <input type="datetime"> 元 素 。 
注释 : Internet Explorer 或 Firefox 不 支持 «input type="date"> 元 素 。 


访问 Input Date 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 <input type="date"> 元 素 : 


var x = document.getElementById("myDate"); 


提示 : {RH A Lit ie ARYAN elements 集合 来 访问 Input Date 对 象 。 


创建 Input Date 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <input type="date"> 元 


7IN * 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "date"); 


Input Date 对 象 属性 


属性 


autocomplete 设置 或 返回 date 字段 的 — 属性 值 。 
autofocus 设置 或 返回 date 字段 在 页 面 加 载 后 是 否 应 自动 获取 焦点 。 
defaultValue 设置 或 返回 date 字段 的 默认 值 。 
disabled 设置 或 返回 date 字段 是 否 被 禁用 。 
form 返回 对 包含 date 字段 的 表单 的 引用 。 
list 返回 对 包含 date 字段 的 datalist 的 引用 。 
max 设置 或 返回 date 字段 的 max 属性 值 。 
min 设置 或 返回 date 字段 的 min 属性 值 。 
name 设置 或 返回 date 字段 的 name 属性 值 。 
readOnly 设置 或 返回 date 字段 是 否 是 只 读 的 。 
required 设置 或 返回 在 提交 表单 之 前 是 否 必须 填写 date 字段 。 
step 设置 或 返回 date 字段 的 属性 值 。 
type 返回 date 字段 的 表单 元 素 类 型 
value 设置 或 返回 date 字段 的 value 属性 值 。 
标准 属性 和 事件 


描述 


Input Date 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML «input» 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM Datetime 对 象 


Datetime 对 象 


Datetime 对 象 是 HTML5 中 的 新 对 象 。 
Datetime 对 象 表 示 HTML <input type="datetime"> TR. 


注释 : Internet Explorer、Firefox 或 者 Chrome 不 支持 <input type="datetime"> 元 
素 ，Safari 中 部 分 支持 。Opera 12 以 及 更 早 的 版 本 中 完全 支持 。 


访问 Datetime 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «input type="myDatetime"> 元 素 : 


var x = document.getElementById("myDatetime"); 


提示 : 您 也 可 以 通过 通 历 表单 的 elements 集合 来 访问 Datetime 对 象 。 


创建 Datetime 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <input type="datetime"> 
元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "datetime"); 


Datetime 对 象 属性 


属性 描述 
autocomplete ”设置 或 返回 datetime 字段 的 aa 属性 值 。 
AIOE ES 返回 datetime 字段 在 页 面 加 载 后 是 否 应 自动 获取 焦 
defaultValue — 设置 或 返回 datetime 字段 的 默认 值 。 
disabled 设置 或 返回 datetime 字段 是 否 被 禁用 。 
form 返回 对 包含 datetime 字段 的 表单 的 引用 。 
list 返回 对 包含 datetime 字段 的 datalist 的 引用 。 
max 设置 或 返回 datetime 字段 的 max 属性 值 。 
min 设置 或 返回 datetime 字段 的 min 属性 值 。 
name 设置 或 返回 datetime 字段 的 name 属性 值 。 
readOnly 设置 或 返回 datetime 字段 是 否 是 只 读 的 。 
required 设置 或 返回 在 提交 表单 之 前 是 否 必须 填写 datetime 字段 。 
step 设置 或 返回 datetime 字段 的 step 属性 值 。 
type 返回 datetime 字段 的 表单 元 素 类 型 。 
value 设置 或 返回 datetime 字段 的 value 属性 值 。 
标准 属性 和 事件 


Datetime 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML X € 
HTML 参考 手册 : HTML «input» 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM Datetime Local 对 象 


Datetime Local 对 象 


Datetime Local 对 象 是 HTML5 中 的 新 对 象 。 
Datetime Local 对 象 表 示 HTML <colgroup> 元 素 。 
注释 : Internet Explorer 或 Firefox 不 支持 «input type="datetime-local"> 元 素 。 


访问 Datetime Local 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 <datetime-local> 元 素 : 
var x = document.getElementById("myLocalDate"); 
提示 : 您 也 可 以 通过 通 万 表单 的 elements 集合 来 访问 Input Date 对 象 。 


创建 Datetime Local 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <datetime-local> 元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "datetime-local"); 


Datetime Local 对 象 属性 


属性 
autocomplete 
autofocus 


defaultValue 


Datetime Local 对 象 支持 标准 属 


相关 页 面 


描述 
设置 或 返回 本 地 时 间 字 段 的 n 
设置 或 返回 本 地 时 间 字 段 在 页 面 加 载 后 
设置 或 返回 本 地 时 间 字 段 的 默认 值 。 
iB 


属性 值 。 


Nea 


we 


高 性 和 事件 。 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


disabled 设置 或 返回 本 地 时 间 字 段 是 否 被 禁用 。 

form 返回 对 包含 本 地 时 间 字 段 的 表单 的 引用 。 

list 返回 对 包含 本 地 时 间 字 段 的 datalist 的 引用 。 

max 设置 或 返回 本 地 时 间 字 段 的 max 属性 值 。 

min 设置 或 返回 本 地 时 间 字 段 的 min 属性 值 。 

name 设置 或 返回 本 地 时 间 字 段 的 name 属性 值 。 

readOnly 设置 或 返回 本 地 时 间 字 段 是 否 是 只 读 的 。 

required 设置 或 返回 在 提交 表单 之 前 是 否 必 须 填 写本 地 时 间 字 段 。 

step 设置 或 返回 本 地 时 间 字 段 的 step 属性 值 。 

type 返回 本 地 时 间 字 段 的 表单 元 素 类 型 。 

value 设置 或 返回 本 地 时 间 字 段 的 value 属性 值 。 
标准 属性 和 事件 


HTML DOM Email 对 象 


Email 对 象 


Email 对 象 是 HTML5 中 的 新 对 象 。 
Email 对 象 表 示 HTML «email» 元 素 。 


注释 : Internet Explorer9 (以 及 更 早 的 版 本 ) 或 Safari 不 支持 <input 
type="email"> 元 素 。 


访问 Email 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «email» 元 素 : 


var x = document.getElementById("myEmail"); 


创建 Email 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 «email» 元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "email"); 


Email 对 象 属性 


属性 描述 


autocomplete ”设置 或 返回 email 字段 的 ed a 属性 值 。 
autofocus 设置 或 返回 email 字段 在 页 面 加 载 后 是 否 应 自动 获取 焦点 。 
defaultValue 设置 或 返回 email 字段 的 默认 值 。 

disabled 设置 或 返回 email 字段 是 否 被 禁用 。 

form 返回 对 包含 email 字段 的 表单 的 引用 。 

list 返回 对 包含 email 字段 的 datalist 的 引用 。 

max 设置 或 返回 email 字段 的 max 属性 值 。 

min 设置 或 返回 email 字段 的 min 属性 值 。 

name 设置 或 返回 email 字段 的 name 属性 值 。 

pattern 设置 或 返回 email 字段 的 pattern 属性 值 。 
placeholder 设置 或 返回 email 字段 的 placeholder 属性 值 。 
readOnly 设置 或 返回 email 字段 是 否 是 只 读 的 。 

required 设置 或 返回 在 提交 表单 之 前 是 否 必须 填写 email 字段 。 
size 设置 或 返回 email 字段 的 size 属性 值 。 

step 设置 或 返回 email 字段 的 step 属性 值 。 

type 返回 email 字段 的 表单 元 素 类 型 

value 设置 或 返回 email 字段 的 value 属性 值 。 


标准 属性 和 事件 
Email 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM FileUpload 对 象 


FileUpload 对 象 
在 HTML 文档 中 «input type="file"> 标签 每 出 现 一 次 ， 一 个 FileUpload 对 象 就 会 被 
创建 。 


该 元 素 包 含 一 个 文本 输入 字段 ， 用 来 输入 文件 名 ， 还 有 一 个 按钮 ， 用 来 打开 文件 选 
择 对 话 框 以 便 图 形 化 选择 文件 。 


该 元 素 的 value 属性 保存 了 用 户 指定 的 文件 的 名 称 ， 但 是 当 包含 一 个 fle-upload 元 
素 的 表单 被 提交 的 时 候 ， 浏 览 器 会 向 服务 器 发 送 选中 的 文件 的 内 容 而 不 仅仅 是 发 送 
文件 名 。 


为 安全 起 见 ，file-upload 元 素 不 允许 HTML 作者 或 JavaScript 程序 员 指 定 一 个 默认 
的 文件 名 。 HTML value 属性 被 忽略 ， 并 且 对 于 此 类 元 素来 说 ， value 属性 是 只 读 
的 ， 这 意味 着 只 有 用 户 可 以 输入 一 个 文件 名 。 当 用 户 选择 或 编辑 一 个 文件 名 ， file- 
upload 元 素 触 发 onchange 事件 句柄 。 


您 可 以 通过 通 万 表单 的 elements[] 数组 ， 或 者 通过 使 用 
document.getElementByld() 来 访问 FileUpload 对 象 。 


FileUpload 对 象 的 属性 


属性 描述 
accept 设置 或 返回 指示 文件 传输 的 MIME 类 型 的 列表 (去 号 分 隔 ) 。 
accessKey 设置 或 返回 访问 FileUpload 对 象 的 快捷 键 。 
alt 设置 或 返回 不 支持 <input type="file"> 时 显示 的 替代 文字 。 
= 
iB 


defaultValue ”设置 或 返回 FileUpload 对 象 的 初始 值 。 


disabled 设置 或 返回 是 否 禁 用 FileUpload 对 象 。 

form 返回 对 包含 FileUpload 对 象 的 表单 的 引用 。 

id 设置 或 返回 FileUpload x1 RAY id. 

name 设置 或 返回 FileUpload 对 象 的 名 称 。 

tablndex 设置 或 返回 定义 FileUpload 对 象 的 tab 键 控制 次 序 的 索引 号 。 
type 返回 表单 元 素 的 类 型 。 对 于 FileUpload ， 则 是 "file". 


value 返回 由 用 户 输入 设置 的 文本 后 ，FileUpload 对 象 的 文件 名 。 


标准 属性 


属性 描述 
className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 
lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性 。 


FileUpload 对 象 的 方法 


方法 描述 
blur() 从 FileUpload 对 象 上 移 开 焦 点 。 
focus() 为 FileUpload 对 象 赋予 焦点 。 
select() 选取 FileUpload 对 象 。 


HTML DOM Hidden 对 象 


Hidden 对 象 


Hidden 对 象 代表 一 个 HTML 表单 中 的 某 个 隐藏 输入 域 。 


这 种 类 型 的 输入 元 素 实 际 上 是 隐藏 的 。 这 个 不 可 见 的 表单 元 素 的 value 属性 保存 了 
一 个 要 提交 给 Web 服务 器 的 任意 字符 串 。 如 果 想 要 提交 并 非 用 户 直接 输入 的 数据 
的 话 ， 就 是 用 这 种 类 型 的 元 素 。 


在 HTML 表单 中 <input type="hidden"> 标签 每 出 现 一 次 ， 一 个 Hidden 对 象 就 会 被 
创建 。 


您 可 通过 通 历 表单 的 elements[] 数组 来 访问 某 个 隐藏 输入 域 ， 或 者 通过 使 用 
document.getElementByld()。 


Hidden 对 象 的 属性 


属性 描述 
alt 设置 或 返回 当 不 支持 隐藏 输入 域 时 显示 的 替代 文本 。 
form 返回 一 个 对 包含 隐藏 域 的 表单 的 引用 。 
id 设置 或 返回 隐藏 域 的 ido 
name 设置 或 返回 隐藏 域 的 名 称 。 
type 返回 隐藏 输入 域 的 表单 类 型 。 


value 设置 或 返回 隐藏 域 的 value 属性 的 值 。 


标准 属性 

属性 描述 
className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 
lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性 。 


HTML DOM Input Image 对 象 


Input Image 对 象 


Input Image 对 象 是 HTML5 中 的 新 对 象 。 
Input Image 对 象 表 示 HTML «image? 元 素 。 


访问 Input Image 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «image» 元 素 : 
var x = document.getElementById("myImage"); 
提示 : 您 也 可 以 通过 通 历 表单 的 elements 集合 来 访问 Input Image 对 象 。 


创建 Input Image 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 «image» 元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "image"); 


Input Image 对 象 属性 


属性 


描述 


autocomplete 设置 或 返回 email 字段 的 autocomplete 属性 值 。 
alt 设置 或 返回 input image 的 alt ta 
Jt 已 ct 
Se AERE 返回 input image 在 页 面 加 载 后 是 否 应 自动 获取 入 
defaultValue 设置 或 返回 input image 的 默认 值 。 
disabled 设置 或 返回 input image 是否 被 禁用 。 
form 返回 对 包含 input image 的 表单 的 引用 。 
formAction 设置 或 返回 input image 的 formaction 属性 值 。 
formEnctype 设置 或 返回 input image 的 formenctype 属性 值 。 
formMethod 设置 或 返回 input image 的 formmethod 属性 值 。 
Jt - B Ze I yA vy a 
TREAT 设置 或 返回 在 提交 表单 时 是 否 应 该 验证 表单 数据 (form 
data) 。 
formTarget 设置 或 返回 input image 的 formtarget 属性 值 。 
height 设置 或 返回 input image 的 height 属性 值 。 
name 设置 或 返回 input image 的 name 属性 值 。 
SIC 设置 或 返回 input image 的 src EG 
type 返回 input image 字段 的 表单 元 素 类 
value 设置 或 返回 input image 的 value US 
width 设置 或 返回 input image 的 width 属性 值 。 
标准 属性 和 事件 
Input Image 对 象 支持 标准 属性 和 事件 。 
相 天 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM Month 对 象 


Month 对 象 


Month 对 象 是 HTML5 中 的 新 对 象 。 
Month 对 象 表示 HTML <input type="month"> 元 素 。 
注释 : Internet Explorer 或 Firefox 不 支持 <input type="month"> 元 素 。 


访问 Month 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «input type="month"> 7538 : 


var x = document.getElementById("myMonth"); 
提示 : 您 也 可 以 通过 通 历 表单 的 elements 集合 来 访问 Month 对 象 。 


创建 Month 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <input type="month"> 元 


7IN * 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "month"); 


Month 对 象 属性 


属性 


autocomplete ”设置 或 返 
autofocus 设置 或 返 
defaultValue 设置 或 返 
disabled 设置 
form 返回 
list 
max 设置 或 返 
min 设置 或 返 
name 设置 或 返 
readOnly 设置 或 返 
required 设置 或 返 
step 设置 
type 返回 
value 设置 或 返 
标准 属性 和 事件 


描述 
回 month 字段 的 autocomplete 
回 month 字段 在 页 面 加 载 后 
反 回 month 字段 的 默认 值 。 


属性 值 。 
是 否 应 自动 获取 焦 


或 返回 month 字段 是 否 被 禁用 。 
对 包含 month 字段 的 表单 的 引用 。 


返回 对 包含 month 字段 的 datalist 的 引用 。 


属性 值 。 

属性 值 。 
反 回 month 字段 的 name 属性 值 。 
回 month 字段 是 否 是 只 读 的 。 


回 在 提交 表单 之 前 是 否 必须 填写 month 字段 。 


回 month 字段 的 max 


回 month 字段 的 min 


或 返回 month 字段 的 step a 
month 字段 的 表单 元 素 类 


回 month 字段 的 value 属性 值 。 


Month 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML «input» 标签 
HTML 参考 手册 : HTML <input> type 属性 


点 


VO 


HTML DOM Number 对 象 


Number xt & 


Number 对 象 是 HTML5 中 的 新 对 象 。 
Number 对 象 表 示 HTML <input type="number"> 元 素 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 <input type="number"> 元 素 。 


访问 Number 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «number»? 元 素 : 
var x = document.getElementById("myNumber"); 
提示 : Rt n] Lt 8 HRA elements 集合 来 访问 Number 对 象 。 


创建 Number 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 «number» 元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "number"); 


Number 对 象 属性 


属性 描述 


autocomplete ”设置 或 返回 number 字段 的 se i 属性 值 。 
autofocus 设置 或 返回 number 字段 在 页 面 加 载 后 是 否 应 自动 获取 焦点 。 
defaultValue ”设置 或 返回 number 字段 的 默认 值 。 

disabled 设置 或 返回 number 字段 是 否 被 禁用 。 

form 返回 对 包含 number 字段 的 表单 的 引用 。 

list 返回 对 包含 number 字段 的 datalist 的 引用 。 

max 设置 或 返回 number 字段 的 max 属性 值 。 

min 设置 或 返回 number 字段 的 min 属性 值 。 

name 设置 或 返回 number 字段 的 name 属性 值 。 

placeholder 设置 或 返回 number 字段 的 placeholder 属性 值 。 
readOnly 设置 或 返回 number 字段 是 否 是 只 读 的 。 

required 设置 或 返回 在 提交 表单 之 前 是 否 必 须 填 写 number 字段 。 
step 设置 或 返回 number 字段 的 step 属性 值 。 

type 返回 number 字段 的 表单 元 素 类 型 。 

value 设置 或 返回 number 字段 的 value 属性 值 。 


标准 属性 和 事件 
Number 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM Password 对 象 


Password 对 象 


Password 对 象 代表 HTML 表单 中 的 密码 字段 。 


HTML 的 <input type="password"> 标签 在 表单 上 每 出 现 一 次 ， 一 个 Password 对 
象 就 会 被 创建 。 


该 文本 输入 字段 供用 户 输 入 某 些 敏感 的 数据 ， 比 如 密码 等 。 当 用 户 输入 的 时 候 ， 他 
的 输入 是 被 掩盖 的 (例如 使 用 星 号 *) ， 以 防止 旁边 的 人 从 他 背后 看 到 输入 的 内 容 。 
不 过 需要 注意 的 是 ， 当 表单 提交 时 ， 输 入 是 用 明文 发 送 的 。 


与 类 型 为 "text" 的 元 素 类 似 ， 当 用 户 改变 显示 值 时 ， 它 会 触发 onchange 事件 名 
柄 。 


fix n] EB 1t 38 75 zx 3€ BJ elements[] array 来 访问 密码 字段 ， 或 者 通过 使 用 
document.getElementByld() 。 


Password 对 象 属性 


属性 描述 
accessKey 设置 或 返回 访问 密码 字段 的 快捷 键 。 
alt 设置 或 返回 当 不 支持 密码 字段 时 显示 的 替代 文字 。 
defaultValue 设置 或 返回 密码 字段 的 默认 值 。 
disabled 设置 或 返回 是 否 应 被 禁用 密码 字段 。 


form 返回 对 包含 此 密码 字段 的 表单 的 引用 。 
id 设置 或 返回 密码 字段 的 id。 
maxLength 设置 或 返回 密码 字段 中 字符 的 最 大 数目 。 
name 设置 或 返回 密码 字段 的 名 称 。 
置 或 返回 密码 字段 是 否 应 当 是 只 读 的 。 
置 或 返回 密码 字段 的 长 度 。 
tablndex 设置 或 返回 密码 字段 的 tab 键 控制 次 序 。 
type 返回 密码 字段 的 表单 元 素 类 
value 设置 或 返回 密码 字段 的 value 属性 的 值 。 


readOnly 设 


size 设 


标准 属性 


属性 描述 
className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 
lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性 。 


Password 对 象 方 法 


属性 描述 
blur() 从 密码 字段 移 开 焦点 。 
focus() 为 密码 字段 赋予 焦点 。 
select() 选取 密码 字段 中 的 文本 。 


HTML DOM Input Range 对 象 


Input Range 对 象 

Input Range 对 象 是 HTML5 中 的 新 对 象 。 

Input Range 对 象 表 示 HTML «input type="range"> 元 素 。 

注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 <input type="range"> 元 素 。 
访问 Input Range 对 象 

您 可 以 通过 使 用 getElementByld() 来 访问 «input type="range"> 元 素 : 


var x = document.getElementById("myRange"); 


提示 : {RH AT Lit ie HRN elements 集合 来 访问 Input Range 对 象 。 


创建 Input Range 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <input type="range"> 元 
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var x = document.createElement ("INPUT"); 
x.setAttribute("type", "range"); 


Input Range 对 象 属性 


属性 描述 
autocomplete ”设置 或 返回 滑 块 控件 的 — 属性 值 。 
autofocus 设置 或 返回 滑 块 控件 在 页 面 加 载 后 
defaultValue 设置 或 返回 滑 块 控件 的 默认 值 。 
disabled 设置 或 返回 滑 块 控件 是 否 被 禁用 。 
form 返回 对 包含 滑 块 控件 的 表单 的 引用 。 
list 返回 对 包含 滑 块 控件 的 datalist 的 引用 。 
max 设置 或 返回 滑 块 控件 的 max 属性 值 。 
min 设置 或 返回 滑 块 控件 的 min 属性 值 。 
name 设置 或 返回 滑 块 控件 的 name 属性 值 。 
step 设置 或 返回 滑 块 控件 的 step E 
type 返回 滑 块 控件 的 表单 元 素 类 
value 设置 或 返回 滑 块 控件 的 value 属性 值 。 

标准 属性 和 事件 


Input Range 对 象 支 持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


否 应 自动 获取 


焦点 
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HTML DOM Radio 对 象 


Radio 对 象 


Radio 对 象 代表 HTML 表单 中 的 单 选 按钮 。 
在 HTML 表单 中 <input type="radio"> 每 出 现 一 次 ， 一 个 Radio 对 象 就 会 被 创建 。 


单 选 按钮 是 表示 一 组 互 斥 选项 按钮 中 的 一 个 。 当 一 个 按钮 被 选中 ， 之 前 选中 的 按钮 
就 变 为 非 选 中 的 。 


当 单 选 按钮 被 选中 或 不 选中 时 ， 该 按钮 就 会 触发 onclick 事件 句柄 。 


您 可 通过 通 历 表单 的 elements[] 数组 来 访问 Radio 对 象 ， 或 者 通过 使 用 
document.getElementByld()。 


Radio 对 象 属性 


属性 描述 
accessKey 设置 或 返回 访问 单 选 按钮 的 快捷 键 。 
alt 设置 或 返回 在 不 支持 单 选 按钮 时 显示 的 替代 文本 。 
checked 设置 或 返回 单 选 按钮 的 状态 。 
defaultChecked 返回 单 选 按钮 的 默认 状态 。 
disabled 设置 或 返回 是 否 禁 用 单 选 按 钮 。 
form 返回 一 个 对 包含 此 单 选 按钮 的 表单 的 引用 。 
id 设置 或 返回 单 选 按钮 的 id。 
name 设置 或 返回 单 选 按钮 的 名 称 。 
tablndex 设置 或 返回 单 选 按钮 的 tab 键 控制 次 序 。 
type 返回 单 选 按钮 的 表单 类 型 。 


value 设置 或 返回 单 选 按钮 的 value 属性 的 值 。 


标准 属性 


属性 描述 


className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 

lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性。 


Radio 对 象 方法 


方法 描述 
blur() 从 单 选 按钮 移 开 焦点 。 
click() 在 单 选 按钮 上 模拟 一 次 鼠标 点 击 。 


focus() 为 单 选 按钮 赋予 焦点 。 


HTML DOM Reset 对 象 


Reset 对 象 


Reset 对 象 代 表 HTML 表单 中 的 一 个 重 置 按钮 。 
在 HTML 表单 中 «input type="reset"> 标签 每 出 现 一 次 ， 一 个 Reset 对 象 就 会 被 创 
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认 值 由 HTML value 属性 或 JavaScript 的 defaultValue 属性 指定 。 


重 置 按钮 在 重 置 表单 之 前 触发 onclick 句柄 ， 并 且 这 个 句柄 可 以 通过 返回 fasle 来 取 


消 。 


参阅 Form.reset() 方法 和 Form.onreset 事件 句柄 。 


您 可 以 通过 通 历 表单 的 elements[] 数组 来 访问 某 个 重 置 按钮 ， 或 者 通过 使 用 
document.getElementByld()。 


Reset 对 象 属性 
属性 描述 
accesskey ”设置 或 返回 访问 重 置 按钮 的 快捷 键 。 
alt 设置 或 返回 当 浏 览 器 不 支持 重 置 按钮 时 供 显示 的 替代 文本 。 
disabled 设置 或 返回 重 置 按钮 是 否 应 被 禁用 。 
form 返回 一 个 对 包含 此 重 置 按钮 的 表单 对 象 的 引用 。 
id 设置 或 返回 重 置 按钮 的 id. 
name 设置 或 返回 重 置 按钮 的 名 称 。 
tablndex 设置 或 返回 重 置 按钮 的 tab 键 控制 次 序 。 
type 返回 重 置 按钮 的 表单 元 素 类 型 。 
value 设置 或 返回 重 置 按钮 上 显示 的 文本 。 


标准 属性 


属性 描述 
className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 
lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性 。 
Reset 对 象 方法 
方法 描述 
blur() 从 重 置 按钮 上 移 开 焦点 。 
click() 在 重 置 按钮 上 模拟 一 次 鼠标 点 击 。 


focus() 为 重 置 按钮 赋予 焦点 。 


HTML DOM Input Search 对 象 


Input Search x1 & 


Input Search 对 象 是 HTML5 中 的 新 对 象 。 
Input Search 对 象 表 示 HTML «input type="search"> TR. 


注释 : Internet Explorer 9 (以 及 更 早 的 版 本 ) 或 Safari 不 支持 <input 
type="search"> 元 素 。 


访问 Input Search 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «search» 元 素 : 


var x = document.getElementById("mySearch"); 


创建 Input Search 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <search> 元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "search"); 


Input Search 对 象 属性 


属性 描述 


autocomplete ”设置 或 返回 Search 字段 的 s 属性 值 。 
autofocus 设置 或 返回 Search 字段 在 页 面 加 载 后 是 否 应 自动 获取 焦点 。 
defaultValue 设置 或 返回 Search 字段 的 默认 值 。 

disabled 设置 或 返回 Search 字段 是 否 被 禁用 。 

form 返回 对 包含 Search 字段 的 表单 的 引用 。 

list 返回 对 包含 Search 字段 的 datalist 的 引用 。 

maxLength 设置 或 返回 search 字段 的 maxLength 属性 值 。 


name 设置 或 返回 Search 字段 的 name 属性 值 。 
或 返回 Search 字段 的 pattern 属性 值 。 
或 返回 Search 字段 的 placeholder 属性 值 。 


iB 
iB 
iB 
B 
readOnly 设置 或 返回 Search 字段 是 否 是 只 读 的 。 
iB 
iB 
iB 
回 
iB 


pattern 设 


placeholder 设 


或 返回 在 提交 表单 之 前 是 否 必 须 填写 Search 字段 。 
或 返回 Search 字段 的 size 属性 值 。 

或 返回 Search 字段 的 step 

Search 字段 的 表单 元 素 类 

或 返回 Search 字段 的 value 属性 值 。 


required 设 
size 设 
step 设 
type iW 


value 设 


标准 属性 和 事件 
Input Search 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML X € 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM Submit 对 象 


Submit 对 象 


Submit 对 象 代 表 HTML 表单 中 的 一 个 提交 按钮 (submit button). 


在 HTML 表单 中 <input type="submit"> 标签 每 出 现 一 次 ， 一 个 Submit 对 象 就 会 被 
创建 。 


触发 onclick 事件 句柄 ， 并 且 一 个 句柄 可 以 通过 返回 fasle 来 取消 
单 提交 。 


参阅 Form.submit() 方法 和 Form.onsubmit 事件 句柄 。 
实例 : 表单 验证 


您 可 以 通过 通 历 表单 的 elements[] 数组 来 访问 某 个 提交 按钮 ， 或 者 通过 使 用 
document.getElementByld()。 


Submit 对 象 属性 

属性 描述 
accessKey ” 设置 或 返回 访问 提交 按钮 的 快捷 键 。 
alt 设置 或 返回 当 浏览 器 不 支持 提交 按钮 时 供 显示 的 替代 文本 。 
disabled 设置 或 返回 提交 按钮 是 否 应 被 禁用 。 
form 返回 一 个 对 包含 此 提交 按钮 的 表单 的 引用 。 
id 设置 或 返回 提交 按钮 的 id。 
name 设置 或 返回 提交 按钮 的 名 称 。 
tablndex 设置 或 返回 提交 按钮 的 tab 键 控制 次 序 。 
type 返回 提交 按钮 的 表单 元 素 类 型 。 
value 设置 或 返回 在 提交 按钮 上 显示 的 文本 。 


标准 属性 


属性 描述 
className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 
lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性 。 
Submit 对 象 方法 

方法 描述 
blur() 从 提交 按钮 上 移 开 焦点 。 
click() fierce EMO ARRA Ra dro 


focus() 为 提交 按钮 赋予 焦点 。 


HTML DOM Text 对 象 


Text 对 象 


Text 对 象 代表 HTML 表单 中 的 文本 输入 域 。 
在 HTML 表单 中 «input type="text"> 每 出 现 一 次 ，Text 对 象 就 会 被 创建 。 


该 元 素 可 创建 一 个 单行 的 文本 输入 字段 。 当 用 户 编辑 显示 的 文本 并 随后 把 输入 和 焦点 
转移 到 其 他 元 素 的 时 候 ， 会 触发 onchange 事件 句柄 。 


您 可 以 使 用 HTML <textarea> 标记 来 创建 多 行文 本 输入 。 参 阅 Textarea 对 象 。 


对 于 掩 码 文 本 输入 ， 把 «input type="text"> 中 的 type 设置 为 "password"。 参 阅 
Input Password。 


您 可 以 通过 表单 的 elements[] 数组 来 访问 文本 输入 域 ， 或 者 通过 使 用 
document.getElementByld()。 


Text 对 象 属性 

属性 描述 
accessKey 设置 或 返回 访问 文本 域 的 快捷 键 。 
alt 设置 或 返回 当 浏览 器 不 支持 文本 域 时 供 显 示 的 替代 文本 。 
defaultValue ”设置 或 返回 文本 域 的 默认 值 。 
disabled 设置 或 返回 文本 域 是 否 应 被 禁用 。 
form 返回 一 个 对 包含 文本 域 的 表单 对 象 的 引用 。 
id 设置 或 返回 文本 域 的 id。 
maxLength 设置 或 返回 文本 域 中 的 最 大 字符 数 。 
name 设置 或 返回 文本 域 的 名 称 。 
readOnly 设置 或 返回 文本 域 是 否 应 是 只 读 的 。 
size 设置 或 返回 文本 域 的 尺寸 。 
tablndex 设置 或 返回 文本 域 的 tab 键 控制 次 序 。 
type 返回 文本 域 的 表单 元 素 类 型 


value 设置 或 返回 文本 域 的 value 属性 的 值 。 


标准 属性 


属性 描述 
className 设置 或 返回 元 素 的 class 属性 。 
dir 设置 或 返回 文本 的 方向 。 
lang 设置 或 返回 元 素 的 语言 代码 。 
title 设置 或 返回 元 素 的 title 属性 。 
Text 对 象 方法 

方法 描述 
blur() 从 文本 域 上 移 开 焦点 。 
focus() 在 文本 域 上 设置 焦点 。 


select() 选取 文本 域 中 的 内 容 。 


HTML DOM Input Time 对 象 


Input Time 对 象 

Input Time 对 象 是 HTML5 中 的 新 对 象 。 

Input Time 对 象 表示 HTML <input type="time"> 元 素 。 

注释 : Internet Explorer 或 Firefox 不 支持 «input type="time"> 元 素 。 

访问 Input Time 对 象 

您 可 以 通过 使 用 getElementByld() 来 访问 HTML <input type="time"> 元 素 : 


var x = document.getElementById("myTime"); 


创建 Input Time xt & 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 HTML <input type="time"> 


TTR : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "time"); 


Input Time 对 象 属性 


焦点 
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属性 描述 
autocomplete 设置 或 返回 time 字段 的 hs 属性 值 。 
autofocus 设置 或 返回 time 字段 在 页 面 加 载 后 是 否 应 自动 获取 
defaultValue 设置 或 返回 time 字段 的 默认 值 。 
disabled 设置 或 返回 time 字段 是 否 被 禁用 。 
form 返回 对 包含 time 字段 的 表单 的 引用 。 
list 返回 对 包含 time 字段 的 datalist 的 引用 。 
max 设置 或 返回 time 字段 的 max 属性 值 。 
min 设置 或 返回 time 字段 的 min 属性 值 。 
name 设置 或 返回 time 字段 的 name 属性 值 。 
readOnly 设置 或 返回 time 字段 是 否 是 只 读 的 。 
required 设置 或 返回 在 提交 表单 之 前 是 否 必须 填写 time 字段 。 
size 设置 或 返回 time 字段 的 size 属性 值 。 
step 设置 或 返回 time 字段 的 step 属性 值 。 
type 返回 time 字段 的 表单 元 素 类 型 。 
value 设置 或 返回 time 字段 的 value 属性 值 。 
标准 属性 和 事件 
Input Time 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML X € 
HTML 参考 手册 : HTML <input> 标签 
HTML 参考 手册 : HTML <input> type 属性 


HTML DOM Input URL 对 象 


Input URL 对 象 


Input URL 对 象 是 HTML5 中 的 新 对 象 。 
Input URL 对 象 表示 HTML <input type="url"> 元 素 。 


注释 : Internet Explorer 9 (以 及 更 早 的 版 本 ) 或 Safari 不 支持 <input 
type="search"> 元 素 。 


访问 Input URL 对 象 
您 可 以 通过 使 用 getElementByld() 来 访问 «input type="url"> 7558 : 


var x = document.getElementById("myUrl"); 


创建 Input URL 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <input type="url"> 元 素 : 


var x = document.createElement ("INPUT"); 
x.setAttribute("type", "url"); 


Input URL 对 象 属性 


属性 描述 


autocomplete ”设置 或 返回 Search 字段 的 autocomplete 属性 值 。 
autofocus 设置 或 返回 Search 字段 在 页 面 加 载 后 是 否 应 自动 获取 焦点 。 
defaultValue ”设置 或 返回 Search 字段 的 默认 值 。 

disabled 设置 或 返回 Search 字段 是 否 被 禁用 。 

form 返回 对 包含 Search 字段 的 表单 的 引用 。 

list 返回 对 包含 Search 字段 的 datalist 的 引用 。 

maxLength 设置 或 返回 search 字段 的 maxLength 属性 值 。 

anual ni 否 人 允许 用 户 在 URL 字段 中 输入 不 止 一 条 url 地 
name 设置 或 返回 Search 字段 的 name 属性 值 。 


pattern 设置 或 返回 Search 字段 的 pattern 属性 值 。 
或 返回 Search 字段 的 placeholder 属性 值 。 
readOnly 设置 或 返回 Search 字段 是 否 是 只 读 的 。 


iB 
iB 
iB 
iB 
required 设置 或 返回 在 提交 表单 之 前 是 否 必须 填写 Search 字段 。 
iB 
iB 
回 
iB 


placeholder 设 


WA 
或 返回 Search 字段 的 size 属性 值 。 
或 返回 Search 字段 的 step ol 
Search 字段 的 表单 元 素 类 
或 返回 Search 字段 的 value 属性 值 。 


size ix 
step 设 
type ix 


value A 


标准 属性 和 事件 
Input URL 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML «input» 标签 
HTML 参考 手册 : HTML «input» type 属性 


HTML DOM Input Week 对 象 


Input Week 对 象 


Input Week 对 象 是 HTML5 中 的 新 对 象 。 

Input Week 对 象 表 示 HTML «input type="week"> 元 素 。 

注释 : Internet Explorer 或 Firefox 不 支持 <input type="Week"> 元 素 。 
访问 Input Week 对 象 

您 可 以 通过 使 用 getElementByld() 来 访问 «input type="week"> 元 素 : 


var x = document.getElementById("myWeek"); 


提示 : ftu Lt ie ARAN elements 集合 来 访问 Input Week 对 象 。 


创建 Input Week 对 象 


您 可 以 通过 使 用 document.createElement() 方法 来 创建 <input type="Wweek"> 元 
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var x = document.createElement ("INPUT"); 
x.setAttribute("type", "week"); 


Input Week 对 象 属性 


属性 描述 
autocomplete ， 设置 或 返回 week 字段 的 e 属性 值 。 
autofocus 设置 或 返回 week 字段 在 页 面 加 载 后 是 否 应 自动 获取 焦 
defaultValue 设置 或 返回 week 字段 的 默认 值 。 
disabled 设置 或 返回 week 字段 是 否 被 禁用 。 
form 返回 对 包含 week 字段 的 表单 的 引用 。 
list 返回 对 包含 week 字段 的 datalist 的 引用 。 
max 设置 或 返回 week 字段 的 max 属性 值 。 
min 设置 或 返回 week 字段 的 min 属性 值 。 
name 设置 或 返回 week 字段 的 name 属性 值 。 
readOnly 设置 或 返回 week 字段 是 否 是 只 读 的 。 
required 设置 或 返回 在 提交 表单 之 前 是 否 必 须 填 写 week 字段 。 
step 设置 或 返回 week 字段 的 step a 
type 返回 week 字段 的 表单 元 素 类 
value 设置 或 返回 week 字段 的 value 属性 值 。 
标准 属性 和 事件 
Input Week 对 象 支持 标准 属性 和 事件 。 


相关 页 面 


HTML 教程 : HTML 表单 
HTML 参考 手册 : HTML «input» 标签 
HTML 参考 手册 : HTML <input> type 属性 


ry 


AWO 


HTML «ins» 标签 


实例 
带 有 已 删除 部 分 和 新 插入 部 分 的 文本 : 


a dozen is <del>20</del> <ins>12</ins> pieces 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 <ins> 标签 。 
注释 : 没有 主流 浏览 器 能 够 正确 地 显示 «ins» 标签 的 cite 或 datetime Blt. 


定义 和 用 法 

«ins» 标签 定义 已 经 被 插入 文档 中 的 文本 。 

HTML 5 XHTML 之 间 的 差异 

NONE 

提示 和 注释 : 

提示 : 请 与 <del> 一 同 使 用 ， 来 描述 文档 中 的 更 新 和 修正 。 


可 选 的 属性 

属性 值 描述 

. 指向 另外 一 个 文档 的 URL， 此 文档 可 解释 文本 被 
cite URL 插入 的 原因 。 


datetime YYYYMMDD ”定义 文本 被 插入 的 日 期 和 时 间 。 


全 局 属性 
«ins» 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<ins> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


删除 字 效 果 和 插入 字 效 果 
此 例 演示 如 何 标 示 删 除 文 本 和 插入 文本 。 
«html» 
«body» 
<p> 一 打 有 <del>—+</del> <ins> 十 二 </ins> ff, </p> 
<p> 大 多 数 浏 览 器 会 改写 为 删除 文本 和 下 划 线 文本 。</p> 
<p> 一 些 老 式 的 浏览 器 会 把 删除 文本 和 下 划 线 文本 显示 为 普通 文本 。</p> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Ins 对 象 


HTML «keygen? 标签 
实例 


带 有 keygen 字段 的 表单 : 


<form action="demo_keygen.asp" method="get"> 
Username: <input type="text" name="usr_name" /> 
Encryption: «keygen name="Ssecurity" /> 

<input type="submit" /> 

</form> 


| Jt ds SHE 

IE Firefox Chrome Safari 
Firefox, Chrome, Opera EL Safari 6 支持 «keygen» 标签 。 
= ~ > 


<keygen> 标签 规定 用 于 表单 的 密 钥 对 生成 器 字段 。 
当 提 交 表 单 时 ， 私 钥 存储 在 本 地 ， 公 钥 发 送 到 服务 器 。 


浏览 器 支持 


Opera 


所 有 主流 浏览 器 都 支持 <keygen> 标签 ， 除 了 Internet Explorer 和 Safari。 


HTML 4.01 与 HTML 5 之 间 的 差异 
keygen 是 HTML 中 的 新 元 素 。 
属性 


new : HTML5 中 的 新 属性 。 


属性 值 描述 
autofocus autofocus ”使 keygen 字段 在 页 面 加载 时 获得 焦点 。 
challenge challenge 如果 使 用 ， 则 将 keygen 的 值 设置 为 在 提交 时 询问 。 
disabled disabled 禁用 keytag 字段 。 
form formname ”定义 该 keygen 字段 所 属 的 一 个 或 多 个 表单 。 
keytype rsa 定义 keytype。rsa 生成 RSA 948. 
定义 keygen 元 素 的 唯一 名 称 。name 属性 用 于 在 提 
name “Cneme ， 交 表单 时 搜集 字段 的 值 。 
全 局 属性 
<keygen> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 
<keygen> 标签 支持 HTML 中 的 事件 属性 。 
相 天 页 面 


HTML DOM 参考 手册 : Keygen 对 象 


HTML «label» 标签 


实例 
带 有 两 个 输入 字段 和 相关 标记 的 简单 HTML 表单 : 


«form» 
«label for="male">Male</label> 
<input type="radio" name="sex" id="male" /> 
<br /> 
<label for="female">Female</label> 
<input type="radio" name="sex" id="female" /> 
</form> 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 «label» 标签 。 
Safari 2 或 更 早 的 版 本 不 支持 <label> 标签 。 
定义 和 用 法 
«label» 标签 为 input 元 素 定义 标注 〈 标 记 ) 。 
label 元 素 不 会 向 用 户 呈 现任 何 特殊 效果 。 不 过 ， 它 为 鼠标 用 户 改进 了 可 用 性 。 如 果 


您 在 label 元 素 内 点 击 文本 ， 就 会 触发 此 控件 。 就 是 说 ， 当 用 户 选择 该 标签 时 ， 浏 
览 器 就 会 自动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 。 


«label» 标签 的 for 属性 应 当 与 相关 元 素 的 id 属性 相同 。 


HTML 与 XHTML ; NER 


NONE 


提示 和 注释 : 


注释 : "for" 属性 可 把 label 绑 定 到 另外 一 个 元 素 。 请 把 "for 属性 的 值 设 置 为 相关 元 
素 的 id 属性 的 值 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 值 描述 
for id 规定 label eee nae 
form formid 规定 label 字段 所 属 的 一 个 或 多 个 表单 。 


全 局 属性 
<label> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<label> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


label 


如 何 为 控件 定义 标记 。 


<html> 
<body> 


<p> 请 点 击 文本 标记 之 一 ， 就 可 以 触发 相关 控件 : </p> 


<form> 

«label for="male">Male</label> 

<input type="radio" name="sex" id="male" /> 
<br /> 

«label for="female">Female</label> 

<input type="radio" name="sex" id="female" /> 
</form> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Column 对 象 


HTML «legend» 标签 


实例 
组 合 表 单 中 的 相关 元 素 : 
<form> 
«fieldset» 


<legend>health information</legend> 
height: <input type="text" /> 
weight: <input type="text" /> 
</fieldset> 
</form> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <legend> 标签 。 
定义 和 用 法 
legend 元 素 为 fieldset 元 素 定 义 标 题 (caption) 。 


HTML 与 XHTML z jig WE 


在 HTML 4.01 4, align RIETI # EA. 
在 XHTML 1.0 Strict DTD 4, align 属性 不 被 支持 。 


可 选 的 属性 

DTD 指示 此 属性 允许 在 哪 种 DTD 中 使 用 。S=Strict, T=Transitional, F=Frameset. 
fü 描述 DTD 
align | Eo Eo a 不 赞成 使 用 。 请 使 用 样式 代替 。 为 TF 


left right fieldset 中 的 标题 定义 对 齐 方式 。 


全 局 属性 


<fieldset> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<fieldset> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 
绕 数 据 的 Fieldset 
本 例 演示 如 何在 数据 周围 绘制 一 个 带 标题 的 框 。 


<!DOCTYPE HTML> 
<html> 


<body> 


<form> 
<fieldset> 
<legend> 健 康信 息 </legend> 
身高 : <input type="text" /> 
体重 : <input type="text" /> 
</fieldset> 
</form> 


<p> 如 果 表 单 周围 没有 边框 ， 说 明 您 的 浏览 器 太 老 了 。</p> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Legend 对 象 


HTML <li> 标签 


实例 


<ol> 
«li»Coffee«/li» 
«li»Tea«c/li» 
«li»Milk«/li» 

«/ol» 

«ul» 
«li»Coffee«/li» 
«li»Tea«/li» 
«li»Milk«/li» 

«/ul» 


《请 在 页 面 底部 查看 更 多 实例 ) 
浏览 如 支持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <li> 标签 。 
定义 和 用 法 


<li> 标签 定义 列表 项 目 。 
<li> 标签 可 用 在 有 序列 表 (<ol>) 和 无 序列 表 (<ul>) 中 。 


HTML 5 XHTML 之 间 的 差异 

在 HTML 4.01 中 , 下 元 素 的 "type" 和 "value" 属性 是 不 被 攀 成 使 用 的 。 

f£ XHTML 1.0 Strict DTD 中 ， 目 元 素 的 "type" 和 "value" 属性 是 不 被 支持 的 。 
提示 和 注释 : 

提示 : 请 使 用 CSS 来 定义 列表 和 列表 项 目的 类 型 。 


属性 值 描述 
T 78 E ES E ES En TRER. GEE. A 
yP square circle 定 使 用 哪 种 项 目 符号 。 

不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 
dic Bid 定 列表 项 目的 数字 。 
全 局 属性 


<li> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<li> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


一 个 无 序列 表 
本 例 演示 一 个 无 序列 表 。 


<html> 
<body> 


<h4> 一 个 无 序列 表 : </h4> 

<ul> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 
<1i> 牛 奶 </1i> 

</ul> 


</body> 
</html> 
不 同类 型 的 无 序列 表 
本 例 演示 不 同类 型 的 无 序列 表 。 


«html» 
«body» 


«h4»Disc 项 目 符号 列表 : </h4> 


<ul type="disc"> 
<1i> 茶 果 </1i> 
«li»Zi£«/li» 
<1i> 柠 檬 </1i> 
<li>} f </li> 
</ul> 


<h4>Circle 项 目 符号 列表 
<ul type="circle"> 
<1i> 茶 果 </1i> 
«li»Zi£«/li» 
<1i> 柠 檬 </1i> 
<1i> 桂 子 </1i> 

</ul> 


<h4>Square 项 目 符 号 列表 
<ul type="Square"> 
<1i> 茶 果 </1i> 
«li»Zi£«/li» 
<1i> 柠 檬 </1i> 
<1i> 桂 子 </1i> 

</ul> 


</body> 
</html> 


一 个 有 序列 表 
本 例 演 示 一 个 有 序列 表 。 


: </h4> 


: </h4> 


«IDOCTYPE html» 
«html» 
«body» 


«ol» 
<1i> 咖 啡 </1i> 
<1i> 牛 奶 </1i> 
<1i> 茶 </1i> 

</ol> 


<ol start="50"> 
<1i> 咖 啡 </1i> 
<1i> 牛 奶 </1i> 
<1i> 茶 </1i> 
</ol> 


</body> 
</html> 
不 同类 型 的 有 序列 表 
本 例 演 示 不 同类 型 的 有 序列 表 。 


«html» 
«body» 


<h4> 数 字 列 表 : «/h4» 
<ol> 
<1i>#R</1i> 
«li»Z£«/li» 
<1i> 柠 檬 </1i> 
<1i> 桂 子 </1i> 
</ol> 


<h4> 字 母 列表 : </h4> 
«ol type="A"> 
<1i> 茶 果 </1i> 
«li»Zi£«/li» 
<1i> 柠 檬 </1i> 
<1i> 桂 子 </1i> 
</ol> 


<h4> 小 写字 母 列 表 : </h4> 
«ol type="a"> 
<1i>#R</1i> 
«li»Zi£«/li» 
<1i> 柠 檬 </1i> 
<1i> 桂 子 </1i> 

</ol> 


<h4> 罗 马 字 母 列 表 : </h4> 
«ol type="I"> 
<1i> 茶 果 </1i> 
«li»Zi£«/li» 
<1i> 柠 檬 </1i> 
<1i> 桂 子 </1i> 

</ol> 


<h4> 小 写 罗 马 字 母 列 表 : «/h4» 
«ol type="i"> 
<1i> 茶 果 </1i> 
«li»Z£«/li» 
<1i> 柠 檬 </1i> 
<1i> 桂 子 </1i> 

</ol> 


</body> 
</html> 
BUE 
AN Rz BU TER AUR 


<html> 
<body> 


<h4>—T B ESI : </h4> 
<ul> 


<1i> 咖 啡 </1i> 
«lik 
«ul» 
<1i> 红 茶 </1i> 
<1i> 绿 茶 </1i> 
</ul> 
</li> 
<li>#ġħ</li> 
</ul> 
</body> 
</html> 
BRE INR 2 


RBS BS Ae ERE PU 


«html» 
«body» 


«h4»—^7 ERE WR : «/h4» 
«ul» 
<1i> 咖 啡 </1i> 
<1i> 茶 
<ul> 
<1i> 红 茶 </1i> 
<li>% 
<ul> 
<1 > 中 国 茶 </11i> 
<1i> 非 洲 茶 </1i> 
</ul> 
</li> 
</ul> 
</li> 
<li>#ġħ</li> 
</ul> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Li 对 象 


HTML «link» 标签 


实例 
链接 一 个 外 部 样式 表 : 


<head> 


<link rel="stylesheet" type="text/css" href="theme.css" /> 


</head> 


浏览 器 支持 


IE Firefox Chrome 


Safari Opera 


在 用 于 样式 表 时 ，<link> 标签 得 到 了 几乎 所 有 浏览 器 的 支持 。 但 是 几乎 没有 浏览 


支持 其 他 方面 的 用 途 。 


定义 和 用 法 
<link> 标签 定义 文档 与 外 部 资源 的 关系 。 


<link> 标签 最 常见 的 用 途 是 链接 样式 表 。 


HTML 与 XHTML z NER 


在 HTML 中 ，<link> 标签 没有 结束 标签 。 
f£ XHTML m, «link» 标签 必须 被 正确 地 关闭 。 


提示 和 注释 : 


注释 : link 元 素 是 空 元 素 ， 它 仅 包 含 属性 。 


注释 : 此 元 素 只 能 存在 于 head 部 分 ， 不 过 它 可 出 现任 何 次 数 。 


属性 


new : HTML5 中 的 新 属性 。 


AN 


属性 值 


charset char_encoding 


href URL 


hreflang | language code 


media media query 


alternate author help icon 
licence next pingback prefetch 


rel 

j prev search sidebar stylesheet 
tag 

rev reversed relationship 

sizes heightxwidth any 
_blank _self _top parent 

sien frame name 

type MIME type 

全 局 属性 


<link> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«link» 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Link 对 象 


描述 


HTML5 中 不 支 
持 。 


HL FE AR HE REC 
档 的 位 置 。 


规定 被 链接 文 
档 中 文本 的 语 


Fo 


规定 被 链接 文 
USE Y. mE 
什么 设备 上 。 


规定 当前 文档 
与 被 链接 文档 
之 间 的 天 系 。 


HTML5 中 不 支 
持 。 


规定 被 链接 资 
源 的 尺寸 。 信 
适用 于 
rel="icon"。 


HTML5 中 不 支 
持 。 


规定 被 链接 文 
档 的 MIME 类 
型 。 


HTML «main»? 标签 


实例 


<main> 
<hi>web Browsers</h1i> 
<p>Google Chrome, Firefox 以 及 Internet Explorer 是 目前 最 流行 的 浏览 器 


<article> 

<hi>Google Chrome</h1i> 

<p>Google Chrome 是 由 Google 开发 的 一 款 免费 的 开源 web 浏览 器 ， 于 200 
</article> 


<article> 

<hi>Internet Explorer</h1> 

<p>Internet Explorer 由 微软 开发 的 一 款 免 费 的 web 浏览 器 ， 发 布 于 1995 ' 
</article> 


<article> 
<hi>Mozilla Firefox</hi> 
<p>Firefox 是 一 款 来 自 Mozilla 的 免费 开源 web 浏览 器 ， 发 布 于 2004 年 。 
</article> 
</main> 


E — E 
LER EE 


IE Firefox Chrome Safari Opera 





所 有 浏览 器 都 支持 <main> 标签 ， 除 了 Internet Explorer. 


定义 和 用 法 
<main> 标签 规定 文档 的 主要 内 容 。 


«main» 元 素 中 的 内 容 对 于 文档 来 说 应 当 是 唯一 的 。 它 不 应 包含 在 文档 中 重复 出 现 
的 内 容 ， 比 如 侧 栏 、 导 航 栏 、 版 权 信息 、 站 点 标志 或 搜索 表单 。 


注释 : 在 一 个 文档 中 ， 不 能 出 现 一 个 以 上 的 «main» 元 素 。<main> 元 素 不 能 是 以 
下 元 素 的 后 代 : <article>、<aside>、<footer>、<header> 或 «nav», 


HTML 4.01 5 HTML 5 ZW WER 


«main» 标签 是 HTML 5 中 的 新 标签 。 


全 局 属性 


<main> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<main> 标签 支持 HTML 中 的 事件 属性 。 


HTML «map? 标签 


实例 
带 有 可 点 击 区 域 的 图 像 映射 : 


<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets' 


<map name="planetmap" id="planetmap"> 
«area shape="circle" coords="180,139,14" href z'"venus.html" alt=' 
«area shape-z"circle" coords="129,161,10" href ="mercur.html" alt: 
«area shape="rect" coords="0,0,110,260" href ="Sun.html" alt="Sur 


</map> 


浏览 器 支持 





IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <map> 标签 。 
me. S 
定义 和 用 法 


图 像 映 射 (image-map) 指 带 有 可 点 击 区 域 的 一 幅 图 


HTML 与 XHTML z WE 


NONE 


提示 和 注释 : 
注释 : area TRKE map 元 素 内 部 。area 元 素 可 定义 图 像 映 射 中 的 区 域 。 


注释 : <img> 中 的 usemap 属性 可 引用 «map» 中 的 id 或 name 属性 (取决 于 浏览 
器 ) ， 所 以 我 们 应 同时 向 «map» 添加 id 和 name 属性 。 


必需 的 属性 


属性 值 描述 


id unique_name 为 map 标签 定义 唯一 的 名 称 。 

可 选 的 属性 
属性 值 描述 

name mapname 为 image-map 规定 的 名 称 。 
全 局 属性 
<map> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 
<map> 标签 支持 HTML 中 的 事件 属性 。 
相关 页 面 


HTML DOM 参考 手册 : Map 对 象 


HTML <mark> 标签 


<p>Do not forget to buy <mark>milk</mark> today.</p> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome LAR Safari 支持 «mark» 标签 。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «mark» 标签 。 
定义 和 用 法 
«mark» 标签 定义 带 有 记号 的 文本 。 请 在 需要 突出 显示 文本 时 使 用 «m» 标签 。 


HTML 4.01 与 HTML 5 Za WE 


«mark» 4$ & HTML 5 中 的 新 标签 。 


全 局 属性 


«mark» 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<mark> 标签 支持 HTML 中 的 事件 属性 。 


HTML <menu> 标 


实例 


ds 


带 有 两 个 菜单 按钮 ("File" 和 "Edit") 的 工具 栏 ， 每 个 按钮 都 包含 带 有 一 系列 选项 


的 下 拉 列 表 : 


«menu type="toolbar"> 


<li> 


<menu label="File"> 


<button 
<button 
<button 
</menu> 
</li> 
<li> 


type="button" 
type="button" 
type="button" 


<menu label="Edit"> 


<button 
<button 
<button 
</menu> 
</li> 
</menu> 


type="button" 
type="button" 
type="button" 


浏览 器 支持 


IE 


Firefox 


onclick="file_new()">New...</button> 
onclick="file_open()">Open...</button> 
onclick="file_save()">Save</button> 


onclick="edit_cut()">Cut</button> 
onclick="edit_copy()">Copy</button> 
onclick="edit_paste()">Paste</button> 


Chrome Safari Opera 


目前 所 有 主流 浏览 器 都 不 支持 «menu» 标签 。 


定义 和 用 法 
«menu» 标签 定义 命令 的 列表 或 菜单 。 


«menu» 标签 用 于 上 下 文 菜单 、 工 具 栏 以 及 用 于 列 出 表单 控件 和 命令。 


提示 和 注释 : 


提示 : 请 使 用 CSS 来 设置 菜单 列表 的 样式 ! 


HTML 4.01 与 HTML5 之 间 的 差异 
在 HTML 4.01 HEA «menu»? TR. 

在 HTML5 中 重新 定义 了 <menu> 元 素 。 

HTML 5 XHTML z ig Sz x 


ft HTML 4.01 rh, menu TRATAERA., 
f£ XHTML 1.0 Strict DTD F, menu 元 素 不 被 支持 。 


属性 
New: HTML5 中 的 新 属性 。 
属性 值 描述 

label text 规定 菜单 的 可 见 标签 。 
type popup toolbar 规定 要 显示 哪 种 菜单 类 型 。 

全 局 属性 

<menu> 标签 支持 HTML 中 的 全 局 属性 。 

事件 属性 

<menu> 标签 支持 HTML 中 的 事件 属性 。 

相关 页 面 


HTML DOM 参考 手册 : Column 对 象 


HTML <menuitem> 标签 


实例 
包含 不 同 <menuitem> 元 素 的 上 下 文 菜单 : 


<menu type="context" id="mymenu"> 
«menuitem label-"Refresh" onclick="window.location.reload();" icc 
</menuitem> 
«menu label="Share on..."> 
<menuitem label="Twitter" icon="ico_twitter.png" 
onclick="Wwindow.open('//twitter.com/intent/tweet?text='+window 
</menuitem> 
<menuitem label="Facebook" icon="ico_facebook.png" 
onclick="window. open('//facebook.com/sharer/sharer .php?uz ' +winc 
</menuitem> 
</menu> 
<menuitem label="Email This Page" 
onclick="window. location='mailto:?body='+window. location.href; ">< 
</menu> 


LLL = 
DAC 32 FF 


IE Firefox Chrome Safari Opera 






bi 


Firefox 8.0 以 及 更 高 的 版 本 支持 «menuitem» 标签 。 
定义 和 用 法 

«menuitem» 标签 定义 用 户 可 以 从 弹出 菜单 调用 的 命 合 / 菜 单项 目 。 
HTML 4.01 与 HTML 5 之 间 的 差异 


<menuitem> 标签 是 HTML5 中 的 新 标签 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 
checked 


default 
disabled 
icon 


open 


label 


radiogroup 


type 


全 局 属性 


值 
checked 


default 
disabled 
URL 


open 


text 


groupname 


checkbox 
command 
radio 


描述 


规定 在 页 面 加载 后 选中 命令 /菜单 项 目 。 仅 适用 
T type="radio" 或 type="checkbox". 


TE dp B/E A HME 7] SAGA fip 43. 


规定 命令 /菜单 项 应 该 被 禁用 。 
规定 命令 /菜单 项 的 图 标 。 
定义 details 是 否 可 见 

rA Se 


Wo AEM B/S RAM, MAAP E 


人 小。 


规定 命令 组 的 名 称 ， 命 仿 组 会 在 命令 /菜单 项 本 
身 被 切换 时 进行 切换 。 仅 适用 于 
type="radio"。 


规定 命令 /菜单 项 的 类 型 。 默 认 是 
"command", 


<menuitem> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«menuitem? 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Menultem 对 象 


HTML «meta? 标签 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «meta» 标签 。 


定义 和 用 法 


«meta» 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information) ， 上 比如 针对 搜索 引擎 和 
更 新 频 度 的 描述 和 关键 词 。 


«meta» 标签 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标签 的 属性 定义 了 与 文档 
相关 联 的 名 称 / 值 对 。 


HTML 与 XHTML ZW WEF 


在 HTML m, «meta» 标签 没有 结束 标签 。 


f£ XHTML 中 ，<meta> 标签 必须 被 正确 地 关闭 。 


提示 和 注释 : 
注释 : <meta> 标签 永远 位 于 head 元 素 内 部 。 
注释 : 元 数据 总 是 以 名 称 / 值 的 形式 被 成 对 传递 的 。 


必需 的 属性 


属性 值 描述 
content | some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 


可 选 的 属性 


属性 值 描述 


http- content-type expires refresh 把 content 属性 关联 
equiv set-cookie 到 HTTP 头 部 。 
d author description keywords 把 content 属性 关联 
generator revised others 到 一 个 名 称 。 
定义 用 于 翻译 
scheme | some text content 属性 值 的 格 
Tie 
name 属性 
name 属性 提供 2 HTML 和 XHTML 标签 都 没有 指定 任何 预先 
定义 的 «meta» 名 称 。 通 常情 况 下 ， 您 可 以 自由 使 用 对 自己 和 源 文档 的 读者 来 说 富 
意义 的 名 称 。 


"keywords" 是 一 个 经 常 被 用 到 的 名 称 。 它 为 文档 定义 了 一 组 关键 字 。 有 某 些 搜索 引擎 
在 遇 到 这 些 关 键 字 时 ， 会 用 这 些 关 键 字 对 文档 进行 分 类 。 


类 似 这 样 的 meta 标签 可 能 对 于 进入 搜索 引擎 的 索引 有 帮助 : 


<meta name="keywords" content="HTML,ASP,PHP,SQL"> 
如 果 没 有 提供 name 属性 ， 那 么 名 称 / 值 对 中 的 名 称 会 采用 http-equiv 属性 的 值 。 


http-equiv 属性 
http-equiv 属性 为 名 称 / 值 对 提供 了 名 称 。 并 指示 服务 器 在 发 送 实际 的 文档 之 前 先 在 
要 传送 给 浏览 器 的 MIME 文档 头 部 包含 名 称 / 值 对 。 


当 服 务 器 向 浏览 器 发 送 文 档 时 ， 会 先 发 送 许多 名 称 / 值 对 。 虽然 有 些 服 务 器 会 发 送 许 
多 这 种 名 称 / 值 对 ， 但 是 所 有 服务 器 都 至 少 要 发 送 一 个 : content-type:text/html, 这 
将 告诉 浏览 器 准备 接受 一 个 HTML 文档 。 


使 用 带 有 http-equiv 属性 的 <meta> 标签 时 ， 服 务 器 将 把 名 称 / 值 对 添加 到 发 送 给 浏 
览 器 的 内 容 头 部。 例如， 添加 


<meta http-equiv-"charset" content="iso-8859-1"> 
<meta http-equiv="expires" content="31 Dec 2008"> 


这 样 发 送 到 浏览 器 的 关 部 就 应 该 包含 


content-type: text/html 
charset:iso-8859-1 
expires:31 Dec 2008 


当然 ， 只 有 浏览 器 可 以 接受 这 些 附 加 的 头 部 字段 ， 并 能 以 适当 的 方式 使 用 它们 时 ， 
这 些 字段 寺 有 意义 。 


content 属性 


content 属性 提供 了 名 称 / 值 对 中 的 值 。 该 值 可 以 是 任何 有 效 的 字符 串 。 
content 属性 始终 要 和 name 属性 或 http-equiv 属性 一 起 使 用 。 


scheme 属性 


scheme 属性 用 于 指定 要 用 来 翻译 属性 值 的 方案 。 此 方案 应 该 在 由 <head> 标签 的 
profile 属性 指定 的 概况 文件 中 进行 了 定义 。 


全 局 属性 


«meta» 标签 支持 HTML 中 的 全 局 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Meta 对 象 


HTML «meter»? 标签 


实例 
使 用 meter 元 素来 度量 给 定 范 围 (gauge) 内 的 数据 : 


«meter value="3" min="0" max="10"> 十 分 之 三 </meter> 


<meter value="0.6">60%</meter> 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
Firefox, Chrome, Opera LA Safari 6 支持 «meter» 标签 。 
定义 和 用 法 
«meter» 标签 定义 已 知 范围 或 分 数值 内 的 标量 测量 。 也 被 称 为 gauge (RE) 。 


例子 : 磁盘 用 量 、 查 询 结果 的 相关 性 ， 等 等 。 


注释 : <meter> 标签 不 应 用 于 指示 进度 (在 进度 条 中 ) 。 如 果 标 记 进度 条 ， 请 使 用 
«progress? 标签 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
<meter> 标签 是 HTML 5 中 的 新 标签 。 
属性 


new : HTML5 中 的 新 属性 。 


属性 值 描述 


form form_id 规定 <meter> 元 素 所 属 的 一 个 或 多 个 表单 。 
high number 规定 被 视 作 高 的 值 的 范围 。 

low number ”规定 被 祝 作 低 的 值 的 范围 。 

max number 规定 范围 的 最 大 值 。 

min number 规定 范围 的 最 小 值 。 

optimum number 规定 度量 的 优化 值 。 

value number 必需 。 规 定 度量 的 当前 值 。 


全 局 属性 
<meter> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<meter> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Meter 对 象 


相关 页 面 


HTML DOM 参考 手册 : Meter 对 象 


HTML «nav»? 标签 


实例 


<nav> 

<a href="index.asp">Home</a> 

«a hrefz'"html5 meter.asp">Previous</a> 
«a hrefz'"html5 noscript.asp"»Next«/a» 
</nav> 


浏览 器 支持 


IE Firefox Chrome Safari 


Opera 


Internet Explorer 9, Firefox, Opera, Chrome 以 及 Safari 支持 <nav> 标签 。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «nav» 标签 。 
定义 和 用 法 

<nav> 标签 定义 导航 链接 的 部 分 。 

HTML 4.01 与 HTML 5 之 间 的 差异 

«nav» 标签 是 HTML 5 中 的 新 标签 。 

提示 和 注释 

提示 : 如 果 文 档 中 有 “前 后 ”按钮 ， 则 应 该 把 它 放 到 <nav> 元 素 中 。 


全 局 属性 
<nav> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


W3School 前 端 教程 合 


<nav> 标签 支持 HTML 中 的 事件 属性 。 


HTML <nav> 标签 470 


HTML <noframes> 标签 


实例 

«frameset cols = "25%, 25%, *"> 
<noframes> 
<body>Your browser does not handle frames!</body> 
</noframes> 
<frame src ="venus.htm" /> 
<frame src z"sun.htm" /> 
<frame src ="mercur.htm" /> 

«/frameset» 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <noframes> 标签 


定义 和 用 法 


noframes 元 素 可 为 那些 不 支持 框架 的 浏览 器 显示 文本 。noframes 元 素 位 于 
frameset 元 素 内 部 。 


HTML 5 XHTML 之 间 的 差异 

NONE 

提示 和 注释 : 

注释 : 如 果 浏 览 器 有 能 力 人 处理 框架 ， 就 不 会 显示 出 frameset 元 素 中 的 文本 。 


重要 事项 : 如 果 您 希望 fameset 添加 <noframes> 标签 ， 就 必须 把 其 中 的 文本 包装 


在 <body></body> EN | 

注释 : 如 果 您 希望 验证 包含 框架 的 页 面 ， 请 确保 DTD 被 设置 为 "Frameset DTD". 
阅读 更 多 有 关 XHTML 验证 的 内 容 。 

注释 : 在 XHTML 1.0 Strict DTD 中 ，<noframes> 标签 是 不 被 允许 的 。 


标准 属性 


id, class, title, style, dir, lang, xml:lang 


如 需 完整 的 描述 ， 请 访问 标准 属性 。 


44 


TIY 实例 


如 何 使 用 <noframes> 标签 
本 例 演示 : 如 何 使 用 <noframes> 标签 。 


<html> 


«frameset cols="25%, 50%, 25%"> 
«frame srcz"/example/html/frame a.html"» 
«frame srcz"/example/html/frame b.html"» 
«frame srcz"/example/html/frame c.html"» 


«noframes» 
<body> 您 的 浏览 器 无 法 义理 框架 ! </body> 
«/noframes» 


«/frameset» 


«/html» 


HTML <noscript> 标签 


例子 
JavaScript 
<body> 


<script type="text/javascript"> 
Ex ee 
document.write("Hello World!") 
//--> 

</script> 


<noscript>Your browser does not support JavaScript!</noscript> 
</body> 
VBScript 
<body> 


<script type="text/vbscript"> 
<!-- 


document.write("Hello World!") 
1 - -> 
</script> 


<noscript>Your browser does not support VBScript!</noscript> 


</body> 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <noscript> 标签 。 

定义 和 用 法 

noscript 元 素 用 来 定义 在 脚本 未 被 执行 时 的 替代 内 容 (文本 ) 。 

此 标签 可 被 用 于 可 识别 <script> 标签 但 无 法 支持 其 中 的 脚本 的 浏览 器 。 
HTML 5 XHTML 之 间 的 差异 


NONE 


提示 和 注释 : 

注释 : 如 果 浏 览 器 支持 脚本 ， 那 么 它 不 会 显示 出 noscript 元 素 中 的 文本 。 

注释 : 无 法 识别 «script» 标签 的 浏览 器 会 把 标签 的 内 容 显 示 到 页 面 上 。 为 了 避免 浏 
览 器 这 样 做 ， 您 应 当 在 注释 标签 中 隐藏 脚本 。 老 式 的 (无 法 识别 <script> 标签 的 ) 


浏览 器 会 忽略 注释 ， 这 样 就 不 会 把 标签 的 内 容 写 到 页 面 上 ， 而 新 式 的 浏览 器 则 懂得 
执行 这 些 脚 本 ， 即 使 它们 被 包围 在 注释 标签 中 ! 


全 局 属性 


<noscript> 标签 支持 HTML 中 的 全 局 属性 。 


HTML <object> 标签 


实例 
向 HTML 代码 添加 一 个 对 象 : 


«object classid-"clsid:F08DF954-8592-11D1-B16A-00COF0283628" id-'S. 
widthz"100" height="50"> 

«param name-"BorderStyle" value="1" /> 

<param name="MousePointer" value="0" /> 

<param name="Enabled" value="1" /> 

<param name="Min" value="0" /> 

<param name="Max" value="10" /> 
</object> 


浏览 器 支持 


IE Firefox Chrome Safari Opera 





几乎 所 有 主流 浏览 器 都 拥有 部 分 对 «object» 标签 的 支持 。 


定义 和 用 法 


定义 一 个 敬 入 的 对 象 。 请 使 用 此 元 素 向 您 的 XHTML 页 面 添加 多 媒体 。 此 元 素 允 许 
您 规定 插入 HTML 文档 中 的 对 象 的 数据 和 参数 ， 以 及 可 用 来 显示 和 操作 数据 的 代 
码 。 


<object> 标签 用 于 包含 对 象 ， 比 如 图 像 、 音 频 、 视 频 、Java applets, Activex, 
PDF 以 及 Flash。 


UH IRER img 和 applet 元 素 。 不 过 由 于 漏洞 以 及 缺乏 浏览 器 支持 ， 这 一 
点 并 未 实现 。 


浏览 器 的 对 象 支持 有 赖 于 对 象 类 型 。 不 幸 的 是 ， 主 流 浏览 器 都 使 用 不 同 的 代码 来 加 
载 相同 的 对 象 类 型 。 


而 幸运 的 是 ，object 对 象 提供 了 解决 方案 。 如 果 未 显示 object 元 素 ， 就 会 执行 位 于 
<object> 和 </object> 之 间 的 代码 。 通 过 这 种 方式 ， 我 们 能 够 嵌 套 多 个 object 元 素 
(每 个 对 应 一 个 浏览 器 ) 。 


HTML 与 XHTML 之 间 的 差异 
NONE 
提示 和 注释 : 


注释 : <param> 标签 定义 用 于 对 象 的 run-time 设置 。 
注释 : 不 要 对 图 像 使 用 «object? 标签 ， 请 使 用 <img> 标签 代替 。 


可 选 的 属性 


属性 


align 


archive 


border 


classid 


codebase 


codetype 


data 


declare 


form 
height 
hspace 
name 


standby 
type 


usemap 
vspace 
width 


全 局 属性 


值 


left 
right 
top 
bottom 


URL 


pixels 


class ID 


URL 


MIME type 


URL 


declare 


form id 
pixels 

pixels 

unique name 


text 
MIME type 


URL 
pixels 


pixels 


H 


Ef 


定义 围绕 该 对 象 的 文本 对 齐 方式 。 


由 空格 分 隔 的 指向 档案 文件 的 URL 列表 。 这 些 
档案 文件 包含 了 与 对 象 相关 的 资源 。 
定义 对 象 周围 的 边框 。 

ELERA Windows Registry 中 或 某 个 URL 中 的 
类 的 ID 值 ， 此 属性 可 用 来 指定 浏览 器 中 包含 的 
对 象 的 位 置 ， 通 常 是 一 个 Java X. 


定义 在 何 处 可 找到 对 象 所 需 的 代码 ， 提 供 一 个 基 
准 URL。 


通过 classid 属性 所 引用 的 代码 的 MIME 类 型 。 


定义 引用 对 象 数 据 的 URL. MRA Rt RR 
的 数据 文件 ,要 用 data 属性 来 指定 这 些 数据 文 


o 


可 定义 此 对 象 仅 可 被 声明 ， 但 不 能 被 创建 或 例 
示 ， 直 到 此 对 象 得 到 应 用 为 止 。 


规定 对 象 所 属 的 一 个 或 多 个 表单 。 
定义 对 象 的 高 度 。 

定义 对 象 周围 水 平方 向 的 空白 。 

为 对 象 定 义 唯一 的 名 称 〈 以 便 在 脚本 中 使 用 ) 。 
定义 当 对 象 正 在 加 载 时 所 显示 的 文本 。 


定义 被 规定 在 data 属性 中 指定 的 文件 中 出 现 的 
数据 的 MIME 类 型 。 


规定 与 对 象 一 同 使 用 的 客户 端 图 像 映 射 的 URL. 
定义 对 象 的 垂直 方向 的 空白 。 
定义 对 象 的 宽度 。 


<object> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<object> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Object 对 象 


HTML <ol> 标签 


实例 
有 序 HTML 列表 : 


<ol> 
<1i>Coffee</1li> 
<li>Tea</1li> 
<]1i>Milk</1i> 
</ol> 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 «ol» 标签 。 
定义 和 用 法 
<ol> 标签 定义 有 序列 表 。 


HTML 与 XHTML z jig WE 


在 HTML 4.01 rh, ol 元 素 的 "compact", "start" LAR "type" 属性 是 不 被 赞成 使 用 


s 
o 


f£ XHTML 1.0 Strict DTD FB, ol 753&HJ "compact", "start" 以 及 "type" 属性 是 不 被 
支持 的 。 


提示 和 注释 : 
提示 : 请 使 用 CSS 来 定义 列表 的 类 型 。 
属性 


New : HTML5 中 的 新 属性 。 


属性 值 
compact compact 


reversed | reversed 


start number 
43. oA 
type a I 
al 
全 局 属性 


描述 


HTML5 中 不 支持 。HTML 4.01 中 不 赞成 使 用 。 规 定 
列表 呈现 的 效果 上 比 正常 情况 更 小 巧 。 


规定 列表 顺序 为 降序 。(9,8,7.…) 
规定 有 序列 表 的 起 始 值 。 


规定 在 列表 中 使 用 的 标记 类 型 。 


<ol> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<ol> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Ol 对 象 


HTML <optgroup> 标签 
实例 


通过 <optgroup> 标签 把 相关 的 选项 组 合 在 一 起 : 


<select> 
<optgroup label="Swedish Cars"> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
</optgroup> 
<optgroup label="German Cars"> 
<option value ="mercedes">Mercedes</option> 
<option value ="audi">Audi</option> 
</optgroup> 
</select> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <optgroup> 标签 
re. : 
定义 和 用 法 
<optgroup> 标签 定义 选项 组 。 


optgroup 元 素 用 于 组 合 选项 。 当 您 使 用 一 个 长 的 选项 列表 时 ， 对 相关 的 选项 进行 组 
合 会 使 处 理 更 加 容易 。 


HTML 与 XHTML z jig WEF 


NONE 


需 的 属性 


~ 
4 
I 


可 选 的 属性 


属性 fà 描述 


disabled disabled 规定 禁用 该 选项 组 。 


全 局 属性 


<optgroup> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<optgroup> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : OptionGroup 对 象 


HTML <option> 标签 


实例 
创建 带 有 4 个 选项 的 选择 列表 : 


<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
«option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 


M - OO 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <option> 标签 。 


定义 和 用 法 
option 元 素 定 义 下 拉 列 表 中 的 一 个 选项 〈 一 个 条 目 ) 。 


浏览 器 将 <option> 标签 中 的 内 容 作 为 «select» 标签 的 菜单 或 是 滚动 列表 中 的 一 个 
元 素 显 示 。 


option 元 素 位 于 select 元 素 内 部 。 
HTML 5 XHTML z AER 


在 HTML 中 ，<option> 没有 结束 标签 。 
在 XHTML 中 ，<option> 必须 被 正确 关闭 。 


提示 和 注释 : 


注释 : «option? 标签 可 以 在 不 带 有 任何 属性 的 情况 下 使 用 ， 但 是 您 通常 需要 使 用 
value 属性 ， 此 属性 会 指示 出 被 送 往 服务 器 的 内 容 。 


注释 : 请 与 select 元 素 配 合 使 用 此 标签 ， 否 则 这 个 标签 是 没有 意义 的 。 


提示 : 如 果 列 表 选 项 很 多 ， 可 以 使 用 <optgroup> 标签 对 相关 选项 进行 组 合 。 


可 选 的 属性 


属性 值 描述 
disabled disabled ”规定 此 选项 应 在 首次 加 载 时 被 禁用 。 
label text 定义 当 使 用 <optgroup> 时 所 使 用 的 标注 。 
selected selected ”规定 选项 (在 首次 显示 在 列表 中 时 ) 表现 为 选中 状态 。 
value text 定义 送 往 服务 器 的 选项 值 。 


全 局 属性 


<option> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<option> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


简单 的 下 拉 列 表 
本 例 演示 如 何在 HTML 页 面 中 创建 简单 的 下 拉 列 表 框 。 下 拉 列 表 框 是 一 个 可 选 列 


o 


«html» 
<body> 


<form> 

<select name="cars"> 

<option value="volvo">Volvo</option> 
«option value="saab">Saab</option> 
<option value="fiat">Fiat</option> 
<option value="audi">Audi</option> 
</select> 

</form> 


</body> 
</html> 


另 一 个 下 拉 列 表 


本 例 演示 如 何 创 建 一 个 简单 的 带 有 预选 值 的 下 拉 列 表 。 CE: 预选 值 指 预 先 指定 的 
首选 项 。) 


<html> 
<body> 


<form> 

<select name="cars"> 

<option value="volvo">Volvo</option> 

«option value="sSaab">Saab</option> 

<option value="fiat" selected="selected">Fiat</option> 
<option value="audi">Audi</option> 

</select> 

</form> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Option 对 象 


HTML <output> 标签 


实例 
执行 计算 然后 在 <output> 元 素 中 显示 结果 : 


«form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 
<input type="range" id="a" value="50">100 
+<input type="number" id="b" value="50"> 
-«output name="x" for="a b"></output> 

</form> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Firefox, Chrome, Safari 以 及 Opera 支持 «output» 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «output» 标签 。 


定义 和 用 法 
«output» 标签 定义 不 同类 型 的 输出 ， 比 如 脚本 的 输出 。 
HTML 4.01 与 HTML 5 之 间 的 差异 


«output» 标签 是 HTML 5 中 的 新 标签 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 值 描述 
for element_id 定义 输出 域 相 关 的 一 个 或 多 个 元 素 。 
form form_id 定义 输入 字段 所 属 的 一 个 或 多 个 表单 。 


name name 定义 对 象 的 唯一 名 称 。 (表单 提交 时 使 用 ) 


全 局 属性 


<output> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<output> 标签 支持 HTML 中 的 事件 属性 。 


HTML <p> 标签 


实例 
以 下 代码 标记 了 一 个 段落 : 


<p>This is some text in a very short paragraph</p> 


(在 页 面 下 部 ， 您 可 以 找到 更 多 实例 。) 


浏览 右 文 持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <p> 标签 
定义 和 用 法 
<p> 标签 定义 段落 。 
p 元 素 会 自动 在 其 前 后 后 创建 一 些 空白 。 zl» Las A ASI ZEE, 您 也 可 以 在 社 
式 表 中 规定 。 
HTML 5 XHTML 之 间 的 差异 
ft HTML 4.01 中 ， 所 有 p 元 素 的 呈现 属性 均 不 被 鞠 成 使 用 。 
在 XHTML 1.0 Strict DTD 中 ， 所 有 p 元 素 的 呈现 属性 均 不 被 支持 。 
可 选 的 属性 
属性 值 描述 
ai Tepes Erst TREH. GAN. WEF 
9 center justify 落 中 文本 的 对 齐 方式 。 


全 局 属性 


<p> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<p> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


简单 的 段落 
此 例 演示 : 段落 元 素 中 的 文字 如 何 被 浏览 器 显示 。 
<html> 
<body> 
<p> 这 是 段落 。</p> 
<p> 这 是 段落 。</p> 
<p> 这 是 段落 。</p> 
<p> 段 落 元 素 由 p 标签 定义 。</p> 


</body> 
</html> 


更 多 的 段落 
本 例 演示 段落 元 素 的 某 些 缺 省 的 行为 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/loose.dtd"> 


«html» 
«body» 


«p» 
这 个 段落 
在 源 代码 中 
包含 许多 行 
但 是 浏览 器 
忽略 了 它们 。 
</p> 


<p> 
这 个 段落 

在 源 代 码 中 
包含 ”许多 行 

但 是 浏览 器 
忽略 了 Eie 
</p> 


<p> 
段落 的 行 数 依赖 于 浏览 器 窗口 的 大 小 。 如 果 调 节 浏览 器 窗口 的 大 小 ， 将 改变 段落 中 的 行 数 。 
</p> 


</body> 
</html> 


b BEREIT 
“诗歌 "问题 


本 例 演示 HTML 格式 化 的 某 些 问题 。 


<html> 
<body> 
<h1> 春 晓 </h1> 


<p> 
春 眠 不 觉 晓 ， 
Be A TAG 5 
夜来 风雨 声 ， 
花 落 知 多 少 。 
</p> 


<p> 注 意 ， 浏 览 器 忽略 了 源 代 码 中 的 排版 〈 省 略 了 多 余 的 空格 和 换行 ) o </p> 
</body> 


</html> 


延伸 阅读 : 允许 的 段落 用 法 


可 以 只 在 块 (block) 内 指定 段落 ， 也 可 以 把 段落 和 其 他 段落 、 列 表 、 表 单 和 预定 义 
格式 的 文本 一 起 使 用 。 总 的 来 讲 ， 这 意味 着 段落 可 以 在 任何 有 合适 的 文本 流 的 地 方 
出 现 ， 例 如 文档 的 主体 中 、 列 表 的 元 素 里 ， 等 等 。 

从 技术 角度 将 ， 段 落 不 可 以 出 现在 头 部 、 锚 或 者 其 他 严格 要 求 内 容 必 须 只 能 是 文本 
et ne eee ne ree 
容 一 起 格式 化 。 


HTML <param> 标签 


实例 


向 HTML 代码 添加 一 个 对 象 : 


<object classid-"clsid:F08DF954-8592-11D1-B16A-00COF0283628" id="S- 


width="100" height="50"> 
«param name="BorderStyle" value="1" /> 
<param name="MousePointer" value="0" /> 
<param name="Enabled" value="1" /> 
<param name="Min" value="0" /> 
<param name="Max" value="10" /> 
</object> 


EJ y 


浏览 器 文 持 


IE Firefox Chrome Safari 
所 有 浏览 器 都 支持 <param> 标签 
定义 和 用 法 


param 元 素 允 许 您 为 插入 XHTML 文档 的 对 象 规定 run-time 设置 
签 可 为 包含 它 的 <object> 或 者 <applet> 标签 提供 参数 。 


HTML 与 XHTML z ig WE 


在 HTML Hi, <param> 标签 没有 结束 标签 
在 XHTML 中 ，<param> 标签 必须 被 正确 地 关闭 。 


必需 的 属性 


属性 值 描述 


name unique_name 定义 参数 的 名 称 (用 在 脚本 中 ) 。 





Opera 


也 就 是 说 ， 此 标 


性 值 描述 
ipe MIME type 规定 参数 的 MIME 类 型 (internet media 
type) 。 

value value 规定 参数 的 值 。 

valuetype a ref 规定 值 的 MIME 类 型 。 
全 局 属性 
<param> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 
<param> 标签 支持 HTML 中 的 事件 属性 。 
相 天 页 面 


HTML DOM 参考 手册 : Parameter 对 象 


HTML <pre> 标签 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <pre> 标签 


定义 和 用 法 


pre 元 素 可 定义 预 格式 化 的 文本 。 被 包围 在 pre 元 素 中 的 文本 通常 会 保留 空格 和 换 
行 符 。 而 文本 也 会 呈现 为 等 宽 字体 。 


<pre> 标签 的 一 个 常见 应 用 就 是 用 来 表示 计算 机 的 源 代 码 。 


可 以 导致 段落 断 开 的 标签 〈 例 如 标题 、<p> 和 <address> 标签 ) 绝 不 能 包含 在 
<pre> 所 定义 的 块 里 。 尽管 有 些 浏 览 器 会 把 段落 结束 标签 解释 为 简单 地 换行 ， 但 是 
这 种 行为 在 所 有 浏览 器 上 并 不 都 是 一 样 的 。 


pre 元 素 中 允许 的 文本 可 以 包括 物理 样式 和 基于 内 容 的 样式 变化 ， 还 有 和 链接、 图 像 
和 水 平分 阳线 。 当 把 其 他 标签 (比如 <a> 标签 ) BEI <pre> 块 中 时 ， 就 像 放 在 
HTML/XHTML 文档 的 其 他 部 分 中 一 样 即 可 。 请 看 下 面 的 例子 


<pre> 
&lt;html&gt; 


&lt;head&gt; 

&lt;script type-&quot;text/javascript&quot; src-&quot;loadxmldoc 
&lt;/script&gt; 
&lt;/head&gt; 


&lt;body&gt; 
&lt;script type-&quot;text/javascript&quot;&gt; 
xmlDoc-«a href="dom_loadxmldoc.asp">lLoadXMLDoc</a>(&quot; books 
document .write(&quot;xmlDoc is loaded, ready for use&quot; ); 
&lt;/script&gt; 
&lt;/body&gt; 


&lt;/html&gt; 
</pre> 








在 上 面 的 代码 中 ，<pre> 标签 中 的 特殊 符号 被 转换 为 符号 实体 ， 比 如 "<" 代表" 
ey ct 代表 ">"。 另 外 ， 请 注意 蓝 色 的 代码 ， 我 们 在 <pre> 标签 中 使 用 了 链接 ， 也 
就 是 «a 标签 。 上 面 这 段 代码 的 显示 效果 如 下 : 
«html» 
«head» 
«script type="text/javascript" src="loadxmldoc.js"> 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
xmlDoc-[loadXMLDoc](/xmldom/dom loadxmldoc.asp)("books.xml"); 
document.write("xmlDoc is loaded, ready for use"); 
</script> 
</body> 
</html> 


IE | 
提示 和 注释 

提示 : 制 表 符 (tab) 在 «pre» 标签 定义 的 块 当中 可 以 起 到 应 有 的 作用 ， 每 个 制 表 
符 占 据 8 个 字符 的 位 置 。 但 是 我 们 不 推荐 使 用 它 ， 因 为 在 不 同 的 浏览 器 中 ，Tab 的 
实现 各 不 相同 。 在 用 <pre> 标签 格式 化 的 文档 段 中 使 用 空格 ， 可 以 确保 文本 正确 的 
水 平 位 置 。 


提示 : 如 果 您 希望 使 用 <pre> 标签 来 定义 计算 机 源 代码 ， 比 如 HTML 源 代 码 ， 请 
使 用 符号 实体 来 表示 特殊 字符 ， 比 如 "e" 代表 "<"，">" 代表 ">"，"&" 代表 "a" 


提示 : 在 W3School 中 ， 非 常 多 页 面 中 的 源 代 码 实例 都 是 通过 <pre> 标签 定义 的 ， 


您 可 以 参考 这 些 页 面 ， 学 习 如 何 使 用 该 标签 。 我 们 其 至 把 <pre> 标签 与 <code> pr 
签 结合 起 来 使 用 ， 以 获得 更 加 精确 的 语义 。 


HTML 与 XHTML z WWE 


在 HTML 4.01 4, pre TRHY "width" BIETER 4t PX; FH B, 
在 XHTML 1.0 Strict DTD FB, pre TRHY "width" 属性 是 不 被 支持 的 。 


可 选 的 属性 


属性 值 描述 
width ^ number 定义 每 行 的 最 大 字符 数 (通常 是 40、80 或 132) 。 


全 局 属性 


<pre> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<pre> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


预 格式 文本 
此 例 演示 如 何 使 用 pre 标 签 对 空 行 和 空格 进行 控制 。 


<html> 
<body> 


<pre> 

这 是 

预 格式 文本 。 

它 保留 空格 
和 换行 。 

</pre> 


<p>pre 标签 很 适合 显示 计算 机 代码 : </p> 


<pre> 

for i = 1 to 10 
print i 

next i 

</pre> 


</body> 
</html> 


HTML «progress? 标签 


实例 
正在 进行 的 下 载 : 


<progress value="22" max="100"></progress> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera, Chrome 以 及 Safari 6 支持 <progress> 标 
A 


SL o 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 «progress? 标签 。 
定义 和 用 法 

<progress> 标签 标示 任务 的 进度 (进程 ) 。 

HTML 4.01 与 HTML 5 ZANE 

<progress> 标签 是 HTML 5 中 的 新 标签 。 

提示 和 注释 

提示 : 请 结合 «progress» 标签 与 JavaScript 一 同 使 用 ， 来 显示 任务 的 进度 。 


注释 : «progress» 标签 不 适合 用 来 表示 度量 衡 〈 例 如 ， 磁 盘 空 间 使 用 情况 或 查询 结 
R) 。 如 需 表 示 度 量 衡 ， 请 使 用 <meter> 标签 代替 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 值 描述 


max number 规定 任务 一 共 需 要 多 少 工作 。 
value number 规定 已 经 完成 多 少 任务 。 

全 局 属性 

«progress» 标签 支持 HTML 中 的 全 局 属性 。 

事件 属性 

<progress> 标签 支持 HTML 中 的 事件 属性 。 

相关 页 面 


HTML DOM 参考 手册 : Progress 对 象 


HTML <q> 标签 
实例 


标记 短 的 引用 : 


<q>Here is a short quotation here is a short quotation</q> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <q> 标签 。 


定义 和 用 法 

«q» 标签 定义 短 的 引用 。 

浏览 器 经 常 在 引用 的 内 容 周 围 添加 引号 。 

<q> 与 <blockquote> 的 区 别 

<q> # SHEA RES <blockquote> 是 一 样 的 。 不 同 之 处 在 于 它们 的 显示 和 应 用 。 


<q> 标签 用 于 简短 的 行内 引用 。 如 果 需 要 从 周围 内 容 分 离 出 来 比较 长 的 部 分 (通常 
显示 为 缩 进 的 块 ) ， 请 使 用 «blockquote» 标签 。 


HTML 与 XHTML 之 间 的 差异 

NONE 

提示 和 注释 : 

提示 : 根据 HTML 4.01 规范 ，q 元 素 应 当 使 用 分 界 引 号 来 呈现 ， 就 是 说 ，9 元 素 包 


含 的 文本 必须 以 引号 来 开始 和 结束 。 Mozilla 浏览 器 (Firefox) 以 及 Opera 符合 这 个 
规定 ， 但 是 Internet Explorer 却 不 支持 此 规定 。 结 果 ， 如 果 要 使 用 <q> 标签 ， 而 且 


用 自己 的 引号 来 满足 Internet Explorer， 那 么 就 要 在 符合 标准 的 浏览 器 使 用 两 组 引 
号 。 尽 管 如 此 ， 我 们 还 是 推荐 使 用 <q> 标签 ， 这 不 仅仅 因为 我 们 喜欢 标准 ， 还 因为 
我 们 预见 到 了 将 其 应 用 于 文档 义理、 信息 提取 等 方面 的 显示 效果 。 


可 选 的 属性 

属性 值 描述 

cite citation 定义 引用 的 出 处 或 来 源 (citation) 
全 局 属性 


<abbr> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<abbr> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


引用 
此 例 演示 如 何 实现 长 短 不 一 的 引用 语 。 


<html> 
<body> 


这 是 长 的 引用 : 

<blockquote> 

这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引用 。 这 是 长 的 引 
</blockquote> 


这 是 短 的 引用 : 
<q> 

这 是 短 的 引用 。 
</q> 


<p> 
使 用 blockquote 元 素 的 话 ， 浏 览 器 会 插入 换行 和 外 边 距 ， 而 q 元 素 不 会 有 任何 特殊 的 
</p> 


</body> 
</html> 








相关 页 面 


HTML DOM 参考 手册 : Quote 对 象 


HTML «rp»? 标签 


实例 
一 个 ruby 注释 : 


<ruby> 
EE «rt»«rp»(«/rp»] 4° <rp>)</rp></rt> 
</ruby> 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 <rp> 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 <rp> 标签 。 


定义 和 用 法 

«rp» 标签 在 ruby 注释 中 使 用 ， 以 定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 。 
ruby 注释 是 中 文 注音 或 字符 。 

在 东亚 使 用 ， 显 示 的 是 东亚 字符 的 发 音 。 

与 <ruby> 以 及 <rt> 标签 一 同 使 用 : 


ruby 元 素 由 一 个 或 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 
成 ， 还 包括 可 选 的 rp 元 素 ， 定 义 当 浏览 器 不 支持 "ruby" 元 素 时 显示 的 内 容 。 


HTML 4.01 5 HTML 5 之 间 的 差异 
«rp» 标签 是 HTML 5 的 新 标签 。 
提示 和 注释 


提示 : 支持 "ruby" 元 素 的 浏览 器 不 会 显示 "rp" 元 素 的 内 容 。 


全 局 属性 
<rp> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«rp» 标签 支持 HTML 中 的 事件 属性 。 


HTML <rt> 标签 


实例 
一 个 ruby 注释 : 


<ruby> 
E «rt» 73° </rt> 
</ruby> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 <rt> 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «rt» 标签 。 


定义 和 用 法 

«r^ 标签 定义 字符 (中文 注音 或 宇 符 ) 的 解释 或 发 音 。 
ruby 注释 是 中 文 注音 或 字符 。 

在 东亚 使 用 ， 显 示 的 是 东亚 字符 的 发 音 。 

与 <ruby> 以 及 <rt> 标签 一 同 使 用 : 


ruby 元 素 由 一 个 或 多 个 字符 〈 需 要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 
成 ， 还 包括 可 选 的 rp 元 素 ， 定 义 当 浏览 器 不 支持 "ruby" 元 素 时 显示 的 内 容 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
<rt> 标签 是 HTML 5 的 新 标签 。 
提示 和 注释 


提示 : 支持 "ruby" 元 素 的 浏览 器 不 会 显示 "rp" 元 素 的 内 容 。 


全 局 属性 
<rt> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<rt> 标签 支持 HTML 中 的 事件 属性 。 


HTML <ruby> 标签 


实例 
一 个 ruby 注释 : 


<ruby> 
EE «rt»«rp»(«/rp»] 4° <rp>)</rp></rt> 
</ruby> 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 <ruby> 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 <ruby> 标签 。 

= . i 

«ruby» 标签 定义 ruby 注释 (中文 注 音 或 字符 ) 。 

在 东亚 使 用 ， 显 示 的 是 东亚 字符 的 发 音 。 


与 <ruby> 以 及 <rt> 标签 一 同 使 用 : 


ruby 元 素 由 一 个 或 多 个 字符 〈 需 要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 
成 ， 还 包括 可 选 的 rp 元 素 ， 定 义 当 浏览 器 不 支持 "ruby" 元 素 时 显示 的 内 容 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
«ruby» 标签 是 HTML 5 的 新 标签 。 
提示 和 注释 


提示 : 支持 "ruby" 元 素 的 浏览 器 不 会 显示 "rp" 元 素 的 内 容 。 


全 局 属性 


<ruby> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«ruby» 标签 支持 HTML 中 的 事件 属性 。 


HTML <s> 标签 
例子 


可 以 像 这 样 标记 删除 线 文本 : 


在 HTML 5 中 ，<s> 仍 然 支 持 </s> 已 经 不 支持 这 个 标签 了 。 


\、 - OO 
浏览 右 文 持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <s> 标签 。 


rr . N 
«s» 标签 可 定义 加 删除 线 文本 定义 。 
«s» 标签 是 <strike> 标签 的 缩写 版 本 ，Netscape 和 Internet Explorer 都 支持 它 。 


但 在 HTML4 和 XHTML 中 已 经 不 再 赞成 使 用 它 了 ， 意 思 就 是 不 再 使 用 了 ; CRE 
有 一 天 将 会 消失 。 


HTML 与 XHTML z ig WE 


在 HTML 4.01 rh, «s» 标签 不 被 赞成 使 用 。 
在 XHTML 1.0 Strict DTD 中 ，<s> 标签 不 被 支持 。 


提示 和 注释 : 
注释 : 请 使 用 <de> BRE ! 


全 局 属性 


«s» 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«s» 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 
删除 线 文 本 
此 例 演示 如 何 为 文本 标记 添加 删除 线 。 
<html> 
<body> 
<p>E HTML 5 中 ，<s> 仍 然 支持 </s> 已 经 不 支持 这 个 标签 了 。</p> 


</body> 
</html> 


参阅 


请 参阅 HTML 5 参考 手册 ， 了 解 有 关 «s» 标签 的 最 新 信息 : 
HTML 5 «s» 标签 


HTML «script» 标签 


实例 
在 HTML 页 面 中 插入 一 段 JavaScript : 


<script type="text/javascript"> 
document .write("Hello World!") 
</script> 


(在 本 页 底部 可 以 找到 更 多 实例 ) 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «script? 标签 。 


定义 和 用 法 

<script> 标签 用 于 定义 客户 端 脚本 ， 比 如 JavaScript. 

script 元 素 既 可 以 包含 脚本 语句 ， 也 可 以 通过 src 属性 指向 外 部 脚本 文件 。 
必需 的 type 属性 规定 脚本 的 MIME 类 型 。 

JavaScript 的 常见 应 用 时 图 像 操 作 、 表 单 验 证 以 及 动态 内 容 更 新 。 


提示 和 注释 : 


注释 : 假如 此 元 素 内 部 的 代码 没有 位 于 某 个 函数 中 ， 那 么 这 些 代 码 会 在 页 面 被 加 载 
时 被 立即 执行 。<frameset> 标签 之 后 的 脚本 会 被 忽略 。 


提示 : 请 参阅 noscript 元 素 ; 对 于 那些 在 浏览 器 中 禁用 脚本 或 者 其 浏览 器 不 支持 客 
户 端 脚 本 的 用 户 来 说 ， 该 元 素 非 常 有 用 。 


HTML 与 XHTML z ig WEF 


在 HTML 4.01 FB, script 元 素 的 "language" 属性 不 被 赞成 使 用 。 


f£ XHTML 1.0 Strict DTD 中 ，script 元 素 的 "language" 属性 不 被 支持 。 


HTML 4 和 XHTML 在 处 理 脚 本 中 的 内 容 方面 有 所 不 同 : 
在 HTML 4 中， 内 容 类 型 声明 为 CDATA， 就 是 说 不 会 对 实体 进行 解析 。 
在 XHTML 中 ， 内 容 类 型 声明 为 (#PCDATA)， 也 就 是 说 会 对 实体 进行 解析 。 


这 意味 着 ， 在 XHTML 中 ， 应 该 编码 所 有 特殊 的 字符 ， 或 者 把 所 有 内 容 揪 套 在 
CDATA 部 分 中 。 


为 了 确保 在 XHTML 文档 中 脚本 正确 进行 解析 ， 请 使 用 如 下 语法 : 


«script type="text/javascript"><! [CDATA[ 
document.write("Hello World!") 


//]]»«x/script» 
必 选 的 属性 
属性 值 描述 
type MIME-type 指示 脚本 的 MIME 类 型 。 
可 选 的 属性 
属性 值 描述 
async async 步 执 行 脚本 ( 仅 适用 于 外 部 脚本 ) 。 


否 对 脚本 执行 进行 延迟 ， 直 到 页 面 加载 为 止 。 
成 使 用 。 规 定 脚 本 语言 。 请 使 用 type BERS 


AVES 
charset charset 规定 在 外 部 脚本 文件 中 使 用 的 字符 编码 。 
defer defer 规定 是 

7 


不 
B 
规定 外 部 脚本 文件 的 URL, 
规定 是 否 保留 代码 中 的 空白 。 


language Script 


src URL 


xml:space preserve 


全 局 属性 
<script> 标签 支持 HTML 中 的 全 局 属性 。 


TIY 实例 


插入 一 段 脚本 
本 例 演示 如 何 将 脚本 插入 HTML 文档 。 


<html> 

<body> 

<script type="text/javascript"> 
document .write("<hi>Hello World!</h1i>") 
</script> 


</body> 


</html> 


运行 于 不 支持 脚本 的 浏览 器 
本 例 演 示 如 何 对 付 不 支持 脚本 的 浏览 器 。 


<!DOCTYPE html» 
<html> 
<body> 


<script type="text/javascript"> 

document .write("Hello World!") 

</script> 

<noscript>Sorry, your browser does not support JavaScript!«/noscri| 


<p> 不 支持 JavaScript 的 浏览 器 将 显示 noscript 元 素 中 的 文本 。</p> 


</body> 
</html> 





相关 页 面 


教程 : JavaScript 教程 
教程 : VBScript 教程 


相关 页 面 


HTML DOM 参考 手册 : Script 对 象 


HTML «section»? 标签 


实例 
文档 中 的 区 段 ， 解 释 了 PRC : 


<section> 
<hi>PRC</h1> 


<p>The People's Republic of China was born in 1949...</p> 


</section> 


定义 和 用 法 


«section» 标签 定义 文档 中 的 节 (section、 区 段 ) 。 上 比如 章节 、 页 眉 、 


中 的 其 他 部 分 。 


HTML 4.01 与 HTML 5 之 间 的 差异 
<section> 标签 是 HTML 5 中 的 新 标签 。 
属性 


属性 fii 描述 
cite URL section 的 URL, (40 section 摘自 web 的 话 。 


全 局 属性 


<section> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<section> 标签 支持 HTML 中 的 事件 属性 。 


页 脚 或 文档 


HTML <select> 标签 


实例 
创建 带 有 4 个 选项 的 选择 列表 : 


<select> 
<option value ="volvo">Volvo</option> 
«option value ="Ssaab">Saab</option> 
«option value="opel">Opel</option> 
«option value="audi">Audi</option> 
</select> 


浏览 如 支持 

IE Firefox Chrome Safari 
所 有 主流 浏览 器 都 支持 <select> 标签 。 
定义 和 用 法 


select 元 素 可 创建 单 选 或 多 选 菜单 。 
<select&> 元 素 中 的 <option> 标签 用 于 定义 列表 中 的 可 用 选项 。 


HTML 4.01 与 HTML 5 之 间 的 差异 

HTML5 添加 了 一 些 新 属性 。 

提示 和 注释 : 

提示 : select 元 素 是 一 种 表单 控件 ， 可 用 于 在 表单 中 接受 用 户 输入 。 


属性 


New: HTML5 中 的 新 属性 。 


Opera 


属性 
autofocus 
disabled 
form 
multiple 
name 
required 


size 


全 局 属性 


<Select> 标签 


事件 属性 


值 
autofocus 
disabled 
form_id 
multiple 
name 
required 


number 


描述 


规定 在 页 面 加 载 后 文本 区 域 自动 获得 焦点 。 
规定 禁用 该 下 拉 列 表 。 
规定 文本 区 域 所 属 的 一 个 或 多 个 表单 。 
规定 可 选择 多 个 选项 。 

规定 下 拉 列 表 的 名 称 。 


规定 文本 区 域 是 必 填 的 。 
规定 下 拉 列 表 中 可 见 选 项 的 数目 。 


签 支 持 HTML 中 的 全 局 属性 。 


<select> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Select 对 象 


HTML «small» 标签 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <small> 标签 


定义 和 用 法 
«small» 标签 呈现 小 号 字体 效果 。 


«small» 标签 和 它 所 对 应 的 <big> 标签 一 样 ， 但 它 是 缩小 字体 而 不 是 放大 。 如 果 被 
包围 的 字体 已 经 是 字体 模型 所 支持 的 最 小 字号 ， 那 么 «small» 标签 将 不 起 任何 作 
用 。 


5 «big» 标签 类 似 ，<small> 45 & th JAURE, 从 而 连续 地 把 文字 缩小 。 每 个 
<small> 标签 都 把 文本 的 字体 变 小 一 号 ， 直 到 达到 下 限 的 一 号 字 。 


参阅 


请 参阅 HTML 5 参考 手册 ， 了 解 有 关 «small» 标签 的 最 新 信息 : 
HTML 5 <small> 标签 


HTML <source> 标签 


实例 
拥有 两 份 源 文件 的 音频 播放 器 。 浏 览 器 应 该 选择 它 所 支持 的 文件 (如 果 有 的 话 ) 


<audio controls> 
<source src="horse.ogg" type="audio/ogg"> 
<source src="horse.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 <source> 标签 。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «source» 标签 。 


定义 和 用 法 

«source» 标签 为 媒介 元 素 (比如 «video» 和 <audio>) 定义 媒介 资源 。 

«source» 标签 允许 您 规定 可 蔡 换 的 视频 /音频 文件 供 浏 览 器 根据 它 对 媒体 类 型 或 者 
编 解码 器 的 支持 进行 选择 。 

HTML 4.01 与 HTML 5 之 间 的 差异 

<source> 标签 是 HTML 5 中 的 新 标签 。 

属性 

new : HTML5 中 的 新 属性 。 


属性 值 描述 


media media query 规定 媒体 资源 的 类 型 。 
src url 规定 媒体 文件 的 URL。 
type numeric value 规定 媒体 资源 的 MIME 类 型 。 
全 局 属性 
<source> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 
<source> 标签 支持 HTML 中 的 事件 属性 。 
相关 页 面 


HTML DOM 参考 手册 : Source 对 象 


HTML <span> 标签 
浏览 器 文 持 


IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «span» 标签 。 


定义 和 用 法 
<span> 标签 被 用 来 组 合 文 档 中 的 行内 元 素 。 


HTML 与 XHTML z NER 


NONE 


提示 和 注释 : 
提示 : 请 使 用 <span> 来 组 合 行内 元 素 ， 以 便 通 过 样式 来 格式 化 它们 。 


注释 : span 没有 固定 的 格式 表现 。 当 对 它 应 用 样式 时 ， 它 才 会 产生 视觉 上 的 变 
化 。 


例子 


<p><span>some text.</span>some other text.</p> 


例子 解释 


如 果 不 对 span 应 用 样式 ， 那 么 span 元 素 中 的 文本 与 其 他 文本 不 会 任何 视觉 上 的 
差异 。 尽 管 如 此 ， 上 例 中 的 span 元 素 仍然 为 p 元 素 增加 了 人 额外 的 结构 。 


可 以 为 span 应 用 id 或 class 属性 ， 这 样 既 可 以 增加 适当 的 语义 ， 又 便于 对 span 
应 用 样式 。 


可 以 对 同一 个 <span> 元 素 应 用 class 或 id 属性 ， 但 是 更 常见 的 情况 是 只 应 用 其 中 
一 种 。 这 两 者 的 主要 差异 是 ，class 用 于 元 素 组 (类 似 的 元 素 ， 或 者 可 以 理解 为 某 
一 类 元 素 ) ， 而 id 用 于 标识 单独 的 唯一 的 元 素 。 


提示 : 事实 上 ， 您 也 许 已 经 注意 到 了 ，W3School 站 点 上 有 一 些 文本 的 样式 与 其 他 
文本 是 不 同 的 。 比 如 “提示 ”使 用 了 粗 体 的 桶 红色。 尽管 实现 这 种 效果 的 方法 非常 

多 ， 但 是 我 们 的 做 法 是 : 使 用 “提示 ”使 用 span 元 素 ， 然 后 对 这 个 span 元 素 的 父 元 
素 ， 即 p 元 素 应 用 class， 这 样 就 可 以 对 这 个 类 的 子 元 素 span 应 用 相应 的 样式 了 。 


HTML: 


<p class="tip"><span> 提 示 : </span>... ... ... </p> 
CSS: 
p.tip span { 


font-weight :bold; 
color :#ff9955; 


全 局 属性 


<span> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<span> 标签 支持 HTML 中 的 事件 属性 。 


HTML <strike> 标签 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <strike> 标签 。 
定义 和 用 法 
<strike> 标签 可 定义 加 删除 线 文本 定义 。 


HTML 与 XHTML z HER 


在 HTML 4.01 rh, «strike» 4; A TIR AEA. 
f£ XHTML 1.0 Strict DTD FB, «strike» 标签 不 被 支持 。 


提示 和 注释 : 
注释 : 请 使 用 «del» 替代 它 ! 
标准 属性 
id, class, title, style, dir, lang, xml:lang 
如 需 完整 的 描述 ， 请 访问 标准 属性 。 


事件 属性 


onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 


如 需 完整 的 描述 ， 请 访问 事件 属性 。 


TIY 实例 


删除 线 文 本 
此 例 演示 如 何 为 文本 标记 添加 删除 线 。 
<html> 
<body> 
<p> 在 HTML 5 中 ，<strike> 仍 然 支持 </strike> 已 经 不 支持 这 个 标签 了 。</p> 


</body> 
</html> 


参阅 


请 参阅 HTML 5 参考 手册 ， 了 解 有 关 <strike> 标签 的 最 新 信息 : 
HTML 5 <strike> 标签 


HTML <style> 标签 


实例 


«html» 

«head» 

«style type="text/css"> 
hi (color:red) 

p {color:blue} 
</style> 

</head> 

<body> 

<hi>Header 1</h1i> 
<p>A paragraph.</p> 
</body> 

</html> 


` - OO 
AX] i ae 2 FF 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <style> 标签 。 


定义 和 用 法 

<style> 标签 用 于 为 HTML 文档 定义 样式 信息 。 

在 style 中 ， 您 可 以 规定 在 浏览 器 中 如 何 呈现 HTML 文档 。 

type 属性 是 必需 的 ， 定 义 style 元 素 的 内 容 。 了 唯一 可 能 的 值 是 "text/css", 
style 元 素 位 于 head 部 分 中 。 


提示 和 注释 


提示 : 如 需 链 接 外 部 样式 表 ， 请 使 用 <link> E. 
提示 : 如 需 学 习 更 多 有 关 样 式 表 的 知识 ， 请 阅读 我 们 的 CSS AB, 


HTML 与 XHTML z ig WE 


NONE 
必需 的 属性 
属性 ri 描述 
type text/css 规定 样式 表 的 MIME 类 型 。 
可 选 的 属性 
属性 值 
di screen tty tv projection 
meda handheld print braille aural all 
全 局 属性 
<style> 标签 支持 HTML 中 的 全 局 属性 。 
事件 属性 
<style> 标签 支持 HTML 中 的 事件 属性 。 
TIY 实例 
HTML 中 的 样式 


描述 


为 样式 表 规定 不 
同 的 媒介 类 型 。 


本 例 演 示 如 何 使 用 添加 到 <head> 部 分 的 样式 信息 对 HTML 进行 格式 化 。 


<html> 


<head> 

<style type="text/css"> 
hi (color: red} 

p (color: blue} 
</style> 

</head> 


<body> 

<hi>header 1</hi> 
<p>A paragraph.</p> 
</body> 


</html> 


没有 下 划 线 的 链接 


本 例 演示 如 何 使 用 样式 属性 做 一 个 没有 下 划 线 的 链接 。 
<html> 
<head> 
«meta http-equiv="Content-Type" content="text/html; charset=gb2312' 


<meta http-equiv-"Content-Language" content="zh-cn" /> 
</head> 


<body> 
«a href="/example/html/lastpage.html" style="text-decoration: none": 
这 是 一 个 链接 ! 


</a> 


</body> 
</html> 


EJE 
链接 到 一 个 外 部 样式 表 
本 例 演示 如 何 <link> 标 签 链接 到 一 个 外 部 样式 表 。 





«html» 

«head» 

«link rel="stylesheet" type="text/css" hrefz"/html/csstesti.css" > 
</head> 

<body> 

<h1> 我 通过 外 部 样式 表 进 行 格式 化 。</h1> 

<p> 我 也 一 样 ! </p> 

</body> 

</html> 


| 


相关 页 面 


HTML DOM 参考 手册 : Style 对 象 


HTML <sub> 标签 


例子 


这 段 文 本 包含 <sub> 下 标 </sub> 


T - OO 
浏览 器 文 持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «sub» 标签 。 


定义 和 用 法 
<sub> 标签 可 定义 下 标 文本 。 


包含 在 «sub» 标签 和 其 结束 标签 </sub> 中 的 内 容 将 会 以 当前 文本 流 中 字符 高 度 的 
一 半 来 显示 ， 但 是 与 当前 文本 流 中 文字 的 字体 和 字号 都 是 一 样 的 。 


提示 : 无 论 是 «sub» 标签 还 是 和 它 对 应 的 <sup> 标签 ， 在 数学 等 式 、 科 学 符号 和 
化 学 公式 中 都 非常 有 用 。 


HTML 与 XHTML z WWE 


NONE 


全 局 属性 


<sub> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<sub> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 


上 标 和 下 标 
本 例 演 示 如 何 使 用 sup 和 sub 元 素 。 


<html> 
<body> 


<p> 
This text contains <sub>subscript</sub> 
</p> 


<p> 
This text contains <sup>superscript</sup> 
</p> 


</body> 
</html> 


HTML <summary> 标签 


实例 
有 关 文 档 的 详细 信息 : 
<details> 


<summary>HTML 5</summary> 
This document teaches you everything you have to learn about HTML : 
</details> 


LE 


浏览 器 支持 





IE Firefox Chrome Safari Opera 
只 有 Chrome 以 及 Safari 6 支持 <summary> 标签 。 
ris. 3 
定义 和 用 法 


<summary> 标签 包含 details 元 素 的 标题 ，"details" 元 素 用 于 描述 有 关 文 档 或 文档 
片段 的 详细 信息 。 


HTML 4.01 与 HTML 5 之 间 的 差异 

<summary> 标签 是 HTML 5 中 的 新 标签 。 

提示 和 注释 

提示 : 请 与 <details> 标签 一 起 使 用 。 标 题 是 可 见 的 ， 当 用 户 点 击 标题 时 会 显示 出 


详细 信息 。 


注释 : "summary" 元 素 应 该 是 "details" 元 素 的 第 一 个 子 元 素 。 


全 局 属性 


<summary> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<summary> 标签 支持 HTML 中 的 事件 属性 。 


HTML «sup»? 标签 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 «sup» 标签 。 
定义 和 用 法 
«sup? 标签 可 定义 上 标 文本 。 


包含 在 «sup» 标签 和 其 结束 标签 </sup> 中 的 内 容 将 会 以 当前 文本 流 中 字符 高 度 的 
一 半 来 显示 ， 但 是 与 当前 文本 流 中 文字 的 字体 和 字号 都 是 一 样 的 。 


提示 : 这 个 标签 在 向 文档 添加 脚注 以 及 表示 方程 式 中 的 指数 值 时 非常 有 用 。 如 果 和 
<a> 标签 结合 起 来 使 用 ， 就 可 以 创建 出 很 好 的 超 链接 脚注 。 

HTML 5 XHTML z ig WEF 

NONE 


例子 


这 段 文 本 包含 <sup> 上 标 </sup> 


全 局 属性 


<sup> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<sup> 标签 支持 HTML 中 的 事件 属性 。 


HTML <table> 标签 


实例 
一 个 简单 的 HTML 表格 ， 包 含 两 行 两 列 : 


<table border="1"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <table> 标签 。 


定义 和 用 法 

<table> 标签 定义 HTML 表格 。 

简单 的 HTML 表格 由 table 元 素 以 及 一 个 或 多 个 tr, th 或 td 元 素 组 成 。 
tr 元 素 定 义 表格 行 ，th 元 素 定 义 表 头 ，td 元 素 定 义 表 格 单 元 。 


更 复杂 的 HTML 表格 也 可 能 包括 caption、col、colgroup、thead、tfoot 以 及 tbody 
元 素 。 


HTML 与 XHTML ; jig WE 


在 HTML 4.01 4, table 元 素 的 "align" 和 "bgcolor" 属性 是 不 被 赞成 使 用 的 。 
在 XHTML 1.0 Strict DTD, table 元 素 的 "align" 和 "bgcolor" 属性 是 不 被 支持 的 。 


可 选 的 属 
属性 
align 
bgcolor 
border 


cellpadding 


cellspacing 
frame 


rules 


summary 


width 


全 局 属性 


性 


left 


center 


right 


rgb(x,x,x) #Xxxxxx colorname 


pixels 
pixels 96 
pixels 96 
void above 
hsides  lhs 


vsides box 


none groups 
colisa Mai 

text 

26 pixels 


below 
rhs 
border 


rows 


<table> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<table> 标签 支持 HTML 中 的 事件 属性 。 


TIY 实例 
表格 


这 个 例子 演示 如 何在 HTML 文档 中 创建 表格 。 


描述 


不 赞成 使 用 。 请 使 用 样式 代 
蔡 。 规 定 表 格 相对 周围 元 素 
的 对 齐 方式 。 


不 赞成 使 用 。 请 使 用 样式 代 
蔡 。 规 定 表 格 的 背景 颜色 。 


规定 表格 边框 的 宽度 。 


规定 单元 边 治 与 其 内 容 之 间 
的 空白 。 


规定 单元 格 之 间 的 空白 。 


规定 外 侧 边框 的 哪个 部 分 是 
可 见 的 。 


规定 内 侧 边 框 的 哪个 部 分 是 
可 见 的 。 


规 


<html> 
<body> 


<p> 每 个 表格 由 table 标签 开始 。</p> 
<p> 每 个 表格 行 由 tr 标签 开始 。</p> 
<p> 每 个 表格 数据 由 td 标签 开始 。</p> 


<h4> 一 列 : </h4> 
<table border="1"> 
<tr> 

<td>100</td> 
</tr> 
</table> 


<h4> 一 行 三 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 


<h4> 两 行 三 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 
</tr> 
</table> 


</body> 
</html> 
表格 边框 
本 例 演示 各 种 类 型 的 表格 边框 。 


<html> 
<body> 


<h4> 带 有 普通 的 边框 : </h4> 

<table border="1"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


<h4> 带 有 粗 的 边框 : </h4> 

<table border="8"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


<h4> 带 有 很 粗 的 边框 : </h4> 
<table border="15"> 
<tr> 
<td>First</td> 
<td>Row</td> 
</tr> 
<tr> 
<td>Second</td> 
<td>Row</td> 
</tr> 
</table> 


</body> 
</html> 
没有 边框 的 表格 
本 例 演示 一 个 没有 边框 的 表格 。 


<html> 
<body> 


<h4> 这 个 表格 没有 边框 : </h4> 

<table> 

<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 

</tr> 

<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 

</tr> 

</table> 


<h4> 这 个 表格 也 没有 边框 : </h4> 
<table border="0"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 
</tr> 
</table> 


</body> 

</html> 
表格 中 的 标题 (Headings) 
本 例 演示 如 何 显示 表格 标题 。 


<html> 
<body> 


<h4> 表 头 : </h4> 

<table border="1"> 

<tr> 
<th> 姓 名 </th> 
<th> 电 话 </th> 
<th> 电 话 </th> 

</tr> 

<tr> 
<td>Bill Gates</td> 
<td>555 77 854</td> 
<td>555 77 855</td> 

</tr> 

</table> 


<h4># BARS : </h4> 
«table border="1"> 
<tr> 
<th> 姓 名 </th> 
<td>Bill Gates</td> 
</tr> 
<tr> 
<th> 电 话 </th> 
<td>555 77 854</td> 
</tr> 
<tr> 
<th> 电 话 </th> 
<td>555 77 855</td> 
</tr> 
</table> 


</body> 
</html> 
空 单元 格 
本 例 展示 如 何 使 用 "" 处 理 没 有 内 容 的 单元 格 。 


<html> 
<body> 


<table border="1"> 
<tr> 
<td>Some text</td> 
<td>Some text</td> 
</tr> 
<tr> 
<td></td> 
<td>Some text</td> 
</tr> 
</table> 


<p> 正 如 您 看 到 的 ， 其 中 一 个 单元 没有 边框 。 这 是 因为 它 是 空 的 。 在 该 单元 中 插入 一 个 空格 
<p> 我 们 的 技巧 是 在 单元 中 插入 一 个 no-breaking 空格 。</p> 

<p>no-breaking 空格 是 一 个 字符 实体 。 如 果 您 不 清楚 什么 是 字符 实体 ， 请 阅读 关于 字符 
«p»no-breaking 空格 由 和 号 开始 ("&")， 然 后 是 字符 "nbsp"， 并 以 分 号 结尾 (";")。 


</body> 
</html> 


了 = x 
带 有 标题 的 表格 
本 例 演示 一 个 带 标题 (caption) 的 表格 





«html» 
«body» 
<h4> 这 个 表格 有 一 个 标题 ， 以 及 粗 边框 : </h4> 


<table border="6"> 
<caption> 我 的 标题 </caption> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 
</tr> 
</table> 


</body> 


跨行 或 跨 列 的 表格 单元 格 
本 例 演 示 如 何 定义 跨行 或 跨 列 的 表格 单元 格 。 


<html> 
<body> 


<h4> 横 跨 两 列 的 单元 格 : </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
«th colspan="2"> 电 话 </th> 
</tr> 
<tr> 
<td>Bill Gates</td> 
<td>555 77 854</td> 
<td>555 77 855</td> 
</tr> 
</table> 


<h4> 横 跨 两 行 的 单元 格 : </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
<td>Bill Gates</td> 
</tr> 
<tr> 
«th rowspanz"2"»$j£«/th» 
<td>555 77 854«/td» 
«/tr» 
«tr» 
<td>555 77 855«/td» 
«/tr» 
</table> 


</body> 
</html> 
表格 内 的 标签 
本 例 演 示 如 何在 不 同 的 元 素 内 显示 元 素 。 


<html> 
<body> 


<table border="1"> 
<tr> 
<td> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 另 一 个 段落 。</p> 
</td> 
<td> 这 个 单元 包含 一 个 表格 : 
<table border="1"> 
<tr> 
<td>A</td> 
<td>B</td> 
</tr> 
<tr> 
<td>C</td> 
<td>D</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 这 个 单元 包含 一 个 列表 : 
<ul> 
<li> </li> 
<li>B#</1li> 
«lis # </li> 
</ul> 
</td> 
<td>HELLO</td> 
</tr> 
</table> 


</body> 
</html> 

单元 格 填充 (Cell padding) 

本 例 演示 如 何 使 用 单元 格 填充 来 创建 单元 格 内 容 与 其 边框 之 间 的 空白 。 


<html> 
<body> 


<h4> 没 有 cellpadding : </h4> 

<table border="1"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


<h4>‘% #4 cellpadding : </h4> 

<table border="1" 

cellpadding="10"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


</body> 
</html> 

单元 格 间距 (Cell spacing) 

本 例 演示 如 何 使 用 单元 格 间 距 增 加 单元 格 之 间 的 距离 。 


<html> 
<body> 


<h4> 没 有 cellspacing : </h4> 

<table border="1"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


<h4> 带 有 cellspacing : </h4> 

<table border="1" 

cellspacing="10"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


</body> 

</html> 
向 表格 添加 背景 颜色 或 背景 图 像 
本 例 演 示 如 何 向 表格 添加 背景 


<html> 
<body> 


<h4> 背 景 颜色 : </h4> 

<table border="1" 

bgcolor="red"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


<h ŽRDI : </h4> 

<table border="1" 

background="/i/eg_bg_07.gif"> 

<tr> 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 


</body> 
</html> 


向 表格 单元 添加 背景 颜色 或 者 背景 图 像 
本 例 演示 如 何 向 一 个 或 者 更 多 表格 单元 添加 背景 


HHHH 单元 背景 : 


First | 
Row | 
Second | 
Row | 
在 表格 单元 中 排列 内 容 


本 例 演 示 如 何 使 用 "align" 属性 排列 单元 格 内 容 ,以 便 创建 一 个 美观 的 表格 。 


<html> 
<body> 


<table width="400" border="1"> 
<tr> 
«th align="left"> € iB....</th> 
«th align-"right"»— H«/th» 
<th align="right"> 二 月 </th> 
</tr> 
<tr> 
<td align="left"> fk</td> 
<td align="right">$241.10</td> 
<td align="right">$50.20</td> 
</tr> 
<tr> 
<td align="left"> 化 妆 品 </td> 
<td align="right">$30.00</td> 
<td align="right">$44.45</td> 
</tr> 
<tr> 
<td align="left"> 食 物 </td> 
<td align="right">$730.40</td> 
«td align="right">$650.00</td> 
</tr> 
<tr> 
«th align="left"> it</th> 
«th align="right">$1001.50</th> 
<th align="right">$744.65</th> 
</tr> 
</table> 


</body> 
</html> 


框架 (frame) 属 性 
本 例 演 示 如 何 使 用 "frame" 属性 来 控制 围绕 表格 的 边框 。 


«html» 
«body» 


<p><b> 注 释 : </b>frame 属性 无 法 在 Internet Explorer 中 正确 地 显示 。</p> 


<p>Table with frame="box":</p> 
«table frame="box"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 


<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


<p>Table with frame="above": </p> 
«table frame="above"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


<p>Table with frame="below": </p> 
«table frame="below'> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


<p>Table with frame="hsides":</p> 
<table frame="hsides"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


<p>Table with frame="vsides":</p> 
<table frame="vsides"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


</body> 
</html> 


相关 页 面 


HTML DOM 参考 手册 : Table 对 象 


HTML <tbody> 标签 


实例 


带 有 thead, tbody LAR tfoot 元 素 的 HTML 表格 : 


<table border="1"> 
<thead> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
</thead> 


<tfoot> 
<tr> 
<td>Sum</td> 
<td>$180</td> 
</tr> 
</tfoot> 


<tbody> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
<tr> 
<td>February</td> 
<td>$80</td> 
</tr> 
</tbody> 
</table> 


浏览 器 支持 
IE Firefox Chrome 
<tbody> 标签 仅 得 到 所 有 主流 浏览 器 的 部 分 支持 。 


定义 和 用 法 


Safari 


Opera 


<tbody> 标签 表格 主体 (EX) 。 该 标签 用 于 组 合 HTML 表格 的 主体 内 容 。 


tbody 元 素 应 该 与 thead 和 tfoot 元 素 结合 起 来 使 用 。 


thead 元 素 用 于 对 HTML 表格 中 的 表 头 内 容 进 行 分 组 ， 而 tfoot 元 素 用 于 对 HTML 
表格 中 的 表 注 (页 脚 ) 内 容 进行 分 组 。 


注释 : 如 果 您 使 用 thead、tfoot 以 及 tbody 元 素 ， 您 就 必须 使 用 全 部 的 元 素 。 它 们 
的 出 现 次 序 是 : thead、tfoot、tbody， 这 样 浏览 器 就 可 以 在 收 到 所 有 数据 前 呈现 页 
脚 了 。 您 必须 在 table 元 素 内 部 使 用 这 些 标签 。 


提示 : 在 默认 情况 下 这 些 元 素 不 会 影响 到 表格 的 布局 。 不 过 ， 您 可 以 使 用 CSS 使 
这 些 元 素 改 变 表 格 的 外 观 。 

详细 描述 

thead, tfoot 以 及 tbody 元 素 使 您 有 能 力 对 表格 中 的 行进 行 分 组 。 当 您 创建 某 个 表 
格 时 ， 您 也 许 希望 拥有 一 个 标题 行 ， 一 些 带 有 数据 的 行 ， 以 及 位 于 底部 的 一 个 总 计 


行 。 这 种 划分 使 浏览 器 有 能 力 支持 独立 于 表格 标题 和 页 脚 的 表格 正文 滚动 。 当 长 的 
表格 被 打印 时 ， 表 格 的 表 头 和 页 脚 可 被 打印 在 包含 表格 数据 的 每 张 页 面 上 。 


HTML 与 XHTML z ig WEF 


NONE 


提示 和 注释 : 
注释 : <thead> 内 部 必须 拥有 <tr> 标签 ! 
注释 : <thead>, <tbody> 以 及 <tfoot> 很 少 被 使 用 ， 这 是 因为 糟糕 的 浏览 器 支持 。 


我 们 期 望 在 XHTML 的 未 来 版 本 中 这 种 情况 会 发 生变 化 。 假 如 您 使 用 Internet 
Explorer 5.0 或 更 新 的 浏览 器 ， 可 以 在 我 们 的 XML 教程 中 查看 一 个 例子 。 


可 选 的 属性 
属性 值 描述 
Alen right left center 定义 tbody 元 素 中 内 容 的 对 齐 
9 justify char 方式 。 
= eA mA vr /二 
char character 人 那个 字符 来 进行 文本 
33To 
E BB — AN gt 3€ Se A a EZ 
charoff number : 个 对 齐 字符 的 偏 移 
top middle bottom 规定 tbody 元 素 中 内 容 的 垂直 


valign baseline xt FAK. 


全 局 属性 


<tbody> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<tbody> 标签 支持 HTML 中 的 事件 属性 。 


HTML «td» 标签 


实例 
一 个 简单 的 HTML 表格 ， 包 含 两 行 两 列 : 


<table border="1"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <td> 标签 。 
定义 和 用 法 
<td> 标签 定义 HTML 表格 中 的 标准 单元 格 。 


HTML 表格 有 两 类 单元 格 : 


。 表 头 单元 - 包含 头 部 信息 (由 th 元 素 创建 ) 
e 标准 单元 - 包含 数据 (由 td TREE) 


td 元 素 中 的 文本 一 般 显示 为 正常 字体 且 左 对 齐 。 


HTML 与 XHTML z WWE 


在 HTML 4.01 rh, td 753885 "bgcolor", "height", "width" 以 及 "nowrap" ETIR 5t 
成 使 用 的 。 


f£ XHTML 1.0 Strict DTD FB, td 元 素 的 "bgcolor", "height", "width" 以 及 
"nowrap" 是 不 被 支持 的 。 


提示 和 注释 


提示 : 请 使 用 colspan 和 rowspan 属性 来 实现 内 容 横 跨 多 个 行 或 列 。 


可 选 的 属性 


属性 值 
abbr text 
left right 
align center justify 
char 
axis category name 
bgcolor rgb(x,x,x) #XXXXXX 
colorname 
char character 
charoff number 
colspan | number 
headers headercells'id 


height pixels % 


nowrap nowrap 
rowspan | number 

col  colgroup 
Scope 

row  rowgroup 
daian top middle 

9 bottom baseline 

width pixels % 


全 局 属性 


<td> 标签 支持 HTML 中 的 全 局 属性 。 


描述 
规定 单元 格 中 内 容 的 缩写 版 本 。 


规定 单元 格 内 容 的 水 平 对 齐 方式 。 


对 单元 进行 分 类 。 


不 赞成 使 用 。 请 使 用 样式 取而代之 。 
规定 单元 格 的 背景 颜色 。 


规定 根据 哪个 字符 来 进行 内 容 的 对 
文 


JV o 

规定 对 齐 字符 的 偏 移 量 。 
规定 单元 格 可 横 跨 的 列 数 。 
规定 与 单元 格 相关 的 表 头 。 


不 赞成 使 用 。 请 使 用 样式 取而代之 。 
规定 表格 单元 格 的 高 度 。 


不 赞成 使 用 。 请 使 用 样式 取而代之 。 
规定 单元 格 中 的 内 容 是 否 折 行 。 


规定 单元 格 可 横 跨 的 行 数 。 

定义 将 表 头 数据 与 单元 数据 相关 联 的 
Jk. 

规定 单元 格 内 容 的 垂直 排列 方式 。 


不 赞成 使 用 。 请 使 用 样式 取而代之 。 
规定 表格 单元 格 的 宽度 。 


事件 属性 


<td> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : TableData 对 象 


HTML <textarea> 标签 


实例 


<textarea rows="3" cols="20"> 
在 w3schoo1， 你 可 以 找到 你 所 需要 的 所 有 的 网 站 建设 教程 。 


</textarea> 


` - OO 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <textarea> 标签 。 


定义 和 用 法 
<textarea> 标签 定义 多 行 的 文本 输入 控件 。 


文本 区 中 可 容纳 无 限 数量 的 文本 ， 其 中 的 文本 的 默认 字体 是 等 宽 字 体 (通常 是 
Courier) 。 


可 以 通过 cols 和 rows 属性 来 规定 textarea 的 尺寸 ， 不 过 更 好 的 办 法 是 使 用 CSS 
的 height 和 width 属性 。 


注释 : 在 文本 输入 区 内 的 文本 行 间 ， 用 "%OD%OA"”( 回 车 /换行 ) 进行 分 隔 。 
提示 : 可 以 通过 <textarea> 标签 的 wrap 属性 设置 文本 输入 区 内 的 换行 模式 。 有 关 
wrap 属性 的 详细 信息 。 

HTML 与 XHTML 之 间 的 差异 


NONE 


属性 


New: HTML5 中 的 新 属性 。 


属性 值 描述 
规定 在 页 面 加 载 后 文本 区 域 自动 获得 焦 


autofocus autofocus 点 。 

cols number 规定 文本 区 内 的 可 见 宽度 。 

disabled disabled 规定 禁用 该 文本 区 。 

form form_id 规定 文本 区 域 所 属 的 一 个 或 多 个 表单 。 
maxlength | number 规定 文本 区 域 的 最 大 字符 数 。 

name name of textarea 规定 文本 区 的 名 称 。 

placeholder text 规定 描述 文本 区 域 预 期 值 的 简短 提示 。 
readonly readonly 规定 文本 区 为 只 读 。 

required required 规定 文本 区 域 是 必 填 的 。 

rows number 规定 文本 区 内 的 可 见 行 数 。 


规定 当 在 表单 中 提交 时 ， 文 本 区 域 中 的 文 


Wrap hard soft 本 如 何 换行 


全 局 属性 
<textarea> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<textarea> 标签 支持 HTML 中 的 事件 属性 。 


HTML <tfoot> 标签 


实例 
带 有 thead, tbody LAR tfoot 元 素 的 HTML 表格 : 


<table border="1"> 
<thead> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
</thead> 


<tfoot> 
<tr> 
<td>Sum</td> 
<td>$180</td> 
</tr> 
</tfoot> 


<tbody> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
<tr> 
<td>February</td> 
<td>$80</td> 
</tr> 
</tbody> 
</table> 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
<tfoot> 标签 仅 得 到 所 有 主流 浏览 器 的 部 分 支持 。 
定义 和 用 法 


<tfoot> 标签 定义 表格 的 页 脚 (脚注 或 表 注 ) 。 该 标签 用 于 组 合 HTML 表格 中 的 表 
注 内 容 。 


tfoot 元 素 应 该 与 thead 和 tbody 元 素 结 合 起 来 使 用 。 


thead 元 素 用 于 对 HTML 表格 中 的 表 头 内 容 进行 分 组 ， 而 tbody 元 素 用 于 对 HTML 
表格 中 的 主体 内 容 进行 分 组 。 


注释 : 如 果 您 使 用 thead, tfoot LAR tbody 元 素 ， 您 就 必须 使 用 全 部 的 元 素 。 它 们 
的 出 现 次 序 是 : thead、tfoot、tbody， 这 样 浏览 器 就 可 以 在 收 到 所 有 数据 前 呈现 页 
脚 了 。 您 必须 在 table 元 素 内 部 使 用 这 些 标签 。 


提示 : 在 默认 情况 下 这 些 元 素 不 会 影响 到 表格 的 布局 。 不 过 ， 您 可 以 使 用 CSS 使 
这 些 元 素 改 变 表 格 的 外 观 。 

详细 描述 

thead, tfoot 以 及 tbody 元 素 使 您 有 能 力 对 表格 中 的 行进 行 分 组 。 当 您 创建 某 个 表 
格 时 ， 您 也 许 希望 拥有 一 个 标题 行 ， 一 些 带 有 数据 的 行 ， 以 及 位 于 底部 的 一 个 总 计 


行 。 这 种 划分 使 浏览 器 有 能 力 支持 独立 于 表格 标题 和 页 脚 的 表格 正文 滚动 。 当 长 的 
表格 被 打印 时 ， 表 格 的 表 头 和 页 脚 可 被 打印 在 包含 表格 数据 的 每 张 页 面 上 。 


HTML 与 XHTML z ig WEF 


NONE 


提示 和 注释 : 
注释 : <thead> 内 部 必须 拥有 <tr> 标签 ! 
注释 : <thead>, <tbody> 以 及 <tfoot> 很 少 被 使 用 ， 这 是 因为 糟糕 的 浏览 器 支持 。 


我 们 期 望 在 XHTML 的 未 来 版 本 中 这 种 情况 会 发 生变 化 。 假 如 您 使 用 Internet 
Explorer 5.0 或 更 新 的 浏览 器 ， 可 以 在 我 们 的 XML 教程 中 查看 一 个 例子 。 


可 选 的 属性 
属性 值 描述 
alien right left center 定义 tfoot 元 素 中 内 容 的 对 齐 
9 justify) char 方式 。 
[I wa ^N m xm s= 
char character rum 那个 字符 来 进行 文本 
YI o 
mom Aq. ma HIE 
charoff number 1 Nxt FF PRAY ARR 
top middle bottom 规定 tfoot 元 素 中 内 容 的 垂直 


valign baseline 对 齐 方 式 。 


全 局 属性 


<tfoot> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<tfoot> 标签 支持 HTML 中 的 事件 属性 。 


HTML <th> 标签 


实例 
普通 的 HTML 表格 ， 包 含 两 行 两 列 : 


<table border="1"> 
<tr> 
<th>Company</th> 
<th>Address</th> 
</tr> 
<tr> 
<td>Apple, Inc.</td> 
<td>1 Infinite Loop Cupertino, CA 95014</td> 
</tr> 
</table> 


\、 - OO 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <th> 标签 。 


定义 和 用 法 
定义 表格 内 的 表 头 单元 格 。 
HTML 表单 中 有 两 种 类 型 的 单元 格 : 


。 表 头 单元 格 - 包含 表 头 信息 (由 th 元 素 创建 ) 
e 标准 单元 格 - 包含 数据 (由 td TREE) 


th 元 素 内 部 的 文本 通常 会 呈现 为 居中 的 粗 体 文本 ， 而 td 元 素 内 的 文本 通常 是 左 对 
齐 的 普通 文本 。 


提示 和 注释 


提示 : 如 果 需 要 将 内 容 横 跨 多 个 行 或 列 ， 请 使 用 colspan 和 rowspan 属性 。 


HTML 与 XHTML Za WEF 


在 HTML 4.01 rh, th 元 素 的 "bgcolor", "height", "width" LAR "nowrap" 属性 是 不 
被 推荐 使 用 的 。 


f£ XHTML 1.0 Strict DTD FB, th 元 素 的 "bgcolor", "height", "width" 以 及 
"nowrap" 属性 是 不 被 支持 。 


可 选 的 属性 
属性 值 描述 
abbr text 规定 单元 格 中 内 容 的 缩写 版 本 。 
left right 
align center justify 规定 单元 格 内 容 的 水 平 对 齐 方式 。 
char 
axis category_name 对 单元 格 进行 分 类 。 
pocolor ‘9b(%,X,X) #xxxxxx 不 推荐 使 用 。 请 使 用 样式 替代 它 。 规 
9 colorname 定 表 格 单元 格 的 背景 颜色 。 
T aimee 规定 根据 哪个 字符 来 进行 内 容 的 对 
Jl o 
charoff number 规定 对 齐 字符 的 偏 移 量 。 
colspan | number 设置 单元 格 可 横 跨 的 列 数 。 
由 空格 分 隔 的 表 头 单元 格 ID 列表 ， 为 
人 数据 单元 格 提供 表 头 信息 。 
. 不 推荐 使 用 。 请 使 用 样式 替代 它 。 规 
mee || Pee 定 表格 单元 格 的 高 度 。 


不 推荐 使 用 。 请 使 用 样式 取而代之 。 


Db M i udis 规定 单元 格 中 的 内 容 是 否 折 行 。 


rowspan number 规定 单元 格 可 横 跨 的 行 数 。 

TE col colgroup 定义 将 表 头 数据 与 单元 数据 相关 联 的 
P row  rowgroup Jh. 

valign Eon Dunne 规定 单元 格 内 容 的 垂直 排列 方式 。 


bottom baseline 


width pixels 96 Do 3 TF uus 


全 局 属性 
«th» 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


«th» 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : TableHeader 对 象 


HTML <thead> 标签 


实例 


带 有 thead, tbody LAR tfoot 元 素 的 HTML 表格 : 


<table border="1"> 
<thead> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
</thead> 


<tfoot> 
<tr> 
<td>Sum</td> 
<td>$180</td> 
</tr> 
</tfoot> 


<tbody> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
<tr> 
<td>February</td> 
<td>$80</td> 
</tr> 
</tbody> 
</table> 


浏览 器 支持 
IE Firefox Chrome 


<thead> 标签 仅 得 到 所 有 主流 浏览 器 的 部 分 支持 。 


定义 和 用 法 


Safari 


Opera 


<thead> 标签 定义 表格 的 表 头 。 该 标签 用 于 组 合 HTML 表格 的 表 头 内 容 。 


thead 元 素 应 该 与 tbody 和 tfoot 元 素 结合 起 来 使 用 。 


tbody 元 素 用 于 对 HTML 表格 中 的 主体 内 容 进行 分 组 ， 而 tfoot 元 素 用 于 对 HTML 
表格 中 的 表 注 (KH) 内 容 进行 分 组 。 


注释 : 如 果 您 使 用 thead、tfoot LAR tbody 元 素 ， 您 就 必须 使 用 全 部 的 元 素 。 它 们 
的 出 现 次 序 是 ; thead, tfoot, tbody, EN 4, 器 就 可 以 在 收 到 所 有 数据 前 呈现 页 
脚 了 。 您 必须 在 table 元 素 内 部 使 用 这 些 标签 


提示 : 在 默认 情况 下 这 些 元 素 不 会 影响 到 表格 的 布局 。 不 过 ， 您 可 以 使 用 CSS 使 
这 些 元 素 改变 表格 的 外 观 。 
详细 描述 


thead, tfoot 以 及 tbody 元 素 使 您 有 能 力 对 表格 中 的 行进 行 分 组 。 当 您 创建 某 个 表 
格 时 ， 您 也 许 希 望 拥 有 一 个 标题 行 ， 一 些 带 有 数据 的 行 ， 以 及 位 于 底部 的 一 个 总 计 
行 。 这 种 划分 使 浏览 器 有 能 力 支持 独立 于 表格 标题 和 页 脚 的 表格 正文 滚动 。 当 长 的 
表格 被 打印 时 ， 表 格 的 表 头 和 页 脚 可 被 打印 在 包含 表格 数据 的 每 张 页 面 上 。 


HTML 与 XHTML z ig WEF 


NONE 


提示 和 注释 : 
注释 : <thead> 内 部 必须 拥有 <tr> 标签 ! 


注释 : <thead>, <tbody> 以 及 <tfoot> 很 少 被 使 用 ， 这 是 因为 糟糕 的 浏览 器 支持 。 
我 们 期 望 在 XHTML 的 未 来 版 本 中 这 种 情况 会 发 生变 化 。 假 如 您 使 用 Internet 
Explorer 5.0 或 更 新 的 浏览 器 ， 可 以 在 我 们 的 XML 教程 中 查看 一 个 例子 。 


可 选 的 属性 
属性 值 描述 
Alen right left center 定义 thead 元 素 中 内 容 的 对 齐 
9 justify) char 方式 。 
Uu NIE str c 4 
char character S 那个 字符 来 进行 文本 
Dio 
— AN ya Se AE aS 
charoff | number 1v 个 对 齐 字符 的 偏 移 
top middle bottom 规定 thead 元 素 中 内 容 的 垂直 


valign baseline 对 齐 方 式 。 


全 局 属性 


<thead> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<thead> 标签 支持 HTML 中 的 事件 属性 。 


HTML «time»? 标签 


实例 
如 何 定义 时 间 和 日 期 : 


<p> 我 们 在 每 天 早上 <time>9:00</time> 开始 营业 。</p> 


<p> 我 在 «time datetime="2008-02-14"> 情 人 节 </time> 有 个 约会 。</p> 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
<time> 标签 不 会 在 任何 浏览 器 中 呈现 任何 特殊 效果 。 
定义 和 用 法 
«time» 标签 定义 公历 的 时 间 (24 小 时 制 ) 或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的 。 
该 元 素 能 够 以 机 器 可 读 的 方式 对 日 期 和 时 间 进 行 编码 ， 这 样 ， 举 例 说 ， 用 户 代理 能 


n 日 提醒 或 排 定 的 事件 添加 到 用 户 日 程 表 中 ， 搜 索引 擎 也 能 够 生成 更 智能 的 搜 
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浏览 器 支持 

目前 所 有 主流 浏览 器 都 不 支持 <time> 标签 。 
HTML 4.01 与 HTML 5 之 间 的 差异 
<time> 标签 是 HTML 5 中 的 新 标签 。 

属性 


new : HTML5 中 的 新 属性 。 


属性 值 HAR 
规定 日 期 /时间 。 人 否则 ， 由 元 素 的 内 容 给 定 日 期 / 时 
间 


o 


datetime datetime 


指示 «time» 元 素 中 的 日 期 /时 间 是 文档 (或 <article> 
pubdate pubdate 元 素 ) 的 发 布 日 期 。 


全 局 属性 
<time> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<time> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Time 对 象 


HTML «title» 标签 


实例 
一 个 简单 的 HTML 文档， 带 有 尽 可 能 少 的 必需 的 标签 : 
<html> 


<head> 
<title>XHTML Tag Reference</title> 
</head> 


<body> 
The content of the document...... 
</body> 


</html> 


\、 - OO 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <title> 标签 。 


定义 和 用 法 
«title» 元 素 可 定义 文档 的 标题 。 
浏览 器 会 以 特殊 的 方式 来 使 用 标题 ， 并 且 通 常 把 它 放置 在 浏览 器 窗口 的 标题 栏 或 状 


态 栏 上 。 同 样 ， 当 把 文档 加 入 用 户 的 链接 列表 或 者 收藏 夹 或 书签 列表 时 ， 标 题 将 成 
为 该 文档 链接 的 默认 名 称 。 


HTML 与 XHTML 之 前 的 差异 
NONE 
提示 和 注释 


提示 : «title» 标签 是 «head» 标签 中 唯一 要 求 包含 的 东西 。 


标准 属性 


<title> 标签 支持 以 下 标准 属性 : 


属性 值 描述 
dir Pen p us 规定 元 素 中 内 容 的 文本 方向 。 
lang language_code 规定 元 素 中 内 容 的 语言 代码 。 


xml:lang language_code WE XHTML 文档 中 元 素 内 容 的 语言 代码 。 


DTD : 指示 在 哪 种 XHTML 1.0 DTD 中 人 允许 该 标签 。S=Strict, T=Transitional, 
F=Frameset. 


如 需 更 多 有 关 HTML 标准 属性 的 信息 ， 请 访问 标准 属性 。 


全 局 属性 


<title> 标签 支持 HTML 中 的 全 局 属性 。 


延伸 阅读 : 标题 里 是 什么 ? 


一 定 要 选择 一 个 正确 的 标题 ， 这 对 于 定义 文档 并 确保 它 能 够 在 Web 上 有 效 利用 来 
说 是 十 分 重要 的 。 


请 记 住 ， 用 户 可 以 用 任何 顺序 、 独 立地 访问 文档 集中 的 每 一 个 文档 。 所 以 ， 文 档 的 
标题 不 仅 应 当 根 据 其 他 文档 的 上 下 文 定义 ， 而 且 还 要 显示 其 自身 的 特点 


含有 文档 引用 排序 的 标题 通常 不 是 什么 好 标题 。 举 个 例子 ， 像 “第 十 六 章 " 或 “第 五 部 
分 ”这样 的 标题 ， 对 读者 理解 其 内 容 方面 毫 无 用 人 处。 描述 性 更 强 的 标题 ， 像 “第 十 六 
章 : HTML 标题 "， 或 者 “第 五 部 分 : 如 何 使 用 标题 "” 这 样 的 标题 不 仅 表 达 了 它 在 一 
个 大 型 文档 集中 的 位 置 ， 还 说 明了 文档 的 具体 内 容 ， 吸 引 读者 更 有 兴趣 污 下 去 。 


自我 引用 的 标题 也 没有 什么 用 处 。 像 主页: 20 ro Sane aA 类 似 的 还 
有 “反馈 页 "或 “常用 链接 "等 。 你 应 该 设计 一 个 能 够 传达 一 定 内 容 和 目的 的 标 Si, Wik 
BART 八 标题 就 可 以 判断 是 否 由 必要 访 癌 这 个 ^ 页 面 。 "HTML <title> 标签 的 详细 信 
息 "， 这 就 是 一 个 描述 性 的 标题 ， 类似 的 还 有 “HTML «title? 标签 的 反馈 页 "等 等 。 


人 们 常常 会 花费 大 量 时 间 去 创建 Web 文档 ， 但 却 经 常 只 是 因为 一 个 不 吸引 人 或 无 
意义 的 标题 ， 而 把 这 些 努 力 全 都 浪费 掉 了 。 当 自动 为 用 户 搜集 链接 的 特殊 软件 在 
Web 上 越 来 越 流 行 时 ， 只 有 网 页 的 标题 才 会 作为 与 页 面相 关 的 描述 性 词语 ， 被 插入 
到 庞大 的 链接 数据 库 中 。 因 此 ， 我 们 怎么 强调 这 一 点 都 不 过 分 : 请 为 自己 的 每 个 文 
档 都 认真 地 选择 一 个 描述 性 的 、 实 用 的 并 与 上 下 文 独 立 的 标题 。 


相关 页 面 
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HTML DOM 参考 手册 : Title 对 象 


HTML <title> 标签 569 


HTML <tr> 标签 


实例 
一 个 简单 的 HTML 表格 ， 包 含 两 行 两 列 : 


<table border="1"> 
<tr> 
<th>Month</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>January</td> 
<td>$100</td> 
</tr> 
</table> 


DA 32 FF 

IE Firefox Chrome 
所 有 浏览 器 都 支持 <tr> 标签 。 
定义 和 用 法 


<tr> 标签 定义 HTML 表格 中 的 行 。 
tr 元 素 包 含 一 个 或 多 个 th 或 td TR. 


HTML 与 XHTML ZW WEF 


Safari 


在 HTML 4.01 FB, tr TRH "bgcolor" 是 不 被 赞成 使 用 的 。 


在 XHTML 1.0 Strict DTD 中 ，tr 元 素 的 "bgcolor" 是 不 被 支持 的 。 


可 选 的 属性 


Opera 


属性 值 


right left center 


lign 
ii justina Melia 
bgcolor rgb(x,x,x) TExxxxxx 
colorname 
char character 


charoff number 


top middle bottom 


valign baseline 


全 局 属性 
<tr> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<tr> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : TableRow 对 象 


Hai 


iE 


定义 表格 行 的 内 容 对 齐 方式 。 


不 赞成 使 用 。 请 使 用 样式 取而代之 。 
规定 表格 行 的 背景 颜色 。 

规定 根据 哪个 字符 来 进行 文本 对 齐 。 
规定 第 一 个 对 齐 字符 的 偏 移 量 。 


规定 表格 行 中 内 容 的 垂直 对 齐 方 式 。 


HTML <track> 标签 


例 
播放 带 有 字幕 的 视频 : 


将 


<video width="320" height="240" controls="controls"> 
<source src="forrest_gump.mp4" type="video/mp4" /> 
<source src="forrest_gump.ogg" type="video/ogg" /> 
«track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Cl 
«track kind-"subtitles" src="subs_eng.srt" srclang="en" label="Er 
</video> 


加 本 = 二 = 一 
浏览 器 支持 


IE Firefox Chrome Safari Opera 





Internet Explorer 10, Chrome 以 及 Opera 支持 <track> 标签 。 


定义 和 用 法 
«track» 标签 为 诸如 video 元 素 之 类 的 媒介 规定 外 部 文本 轨道 。 
用 于 规定 字幕 文件 或 其 他 包含 文本 的 文件 ， 当 媒介 播放 时 ， 这 些 文件 是 可 见 的 。 


浏览 器 支持 
目前 所 有 主流 浏览 器 都 不 支持 <track> 标签 。 
HTML 4.01 与 HTML 5 之 间 的 差异 


<track> 标签 是 HTML 5 中 的 新 标签 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 


default 


kind 


label 


src 


srclang 


值 
default 


captions chapters 
descriptions metadata 
subtitles 


label 


url 


language_code 


全 局 属性 
<track> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<track> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Track 对 象 


描述 
规定 该 轨道 是 默认 的 ， 假 如 没 
有 选择 任何 轨道 。 
表示 轨道 属于 什么 文本 类 型 。 


轨道 的 标签 或 标题 。 
轨道 的 URL。 


轨道 的 语言 ， 若 kind 属性 值 是 
"subtitles"， 则 该 属性 必需 的 。 


一 ke 
HTML <tt> 标签 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 <tt> 标签 。 


定义 和 用 法 

<tt> 标签 呈现 类 似 打 字 机 或 者 等 宽 的 文本 效果 。 

<tt> 标签 与 «code» 和 <kbd> 标签 一 样 ，<tt> 标签 和 必需 的 </tt> 结束 标签 告诉 浏 
览 器 ， 要 把 其 中 包含 的 文本 显示 为 等 帘 字 体 。 对 于 那些 已 经 使 用 了 等 宽 字 体 的 浏览 
器 来 说 ， 这 个 标签 在 文本 的 显示 上 就 没有 什么 特殊 效果 了 。 

参阅 


请 参阅 HTML 5 参考 手册 ， 了 解 有 关 <tt> 标签 的 最 新 信息 : 
HTML 5 <tt> 标签 


HTML <u> 标签 


实例 
使 用 <u> 标签 为 文本 添加 下 划 线 : 


<p> 如 果 文 本 不 是 超 链接 ， 就 不 要 <u> 对 其 使 用 下 划 线 </u>。</p> 


浏览 器 支持 


IE Firefox Chrome Safari 
所 有 浏览 器 都 支持 <u> 标签 
定义 和 用 法 
<U> 标签 可 定义 下 划 线 文本 。 


HTML 与 XHTML ZW WEF 


在 HTML 4.01 FB, u 元 素 是 不 被 推荐 使 用 的 。 
在 XHTML 1.0 Strict DTD 中 ，u 元 素 是 不 被 支持 的 。 


提示 和 注释 : 


注释 : 请 尽量 避免 为 文本 加 下 划 线 - 用 户 会 把 它 混淆 为 一 个 超 链接 ! 


全 局 属性 
<u> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<u> 标签 支持 HTML 中 的 事件 属性 。 


Opera 


HTML «ul» 标签 


实例 
无 序 HTML 列表 : 


<ul> 
<1i>Coffee</1li> 
<li>Tea</1li> 
<]1i>Milk</1i> 
</ul> 


《请 在 页 面 底部 查看 更 多 实例 ) 
浏览 如 支持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 <ul> 标签 。 
定义 和 用 法 
<ul> 标签 定义 无 序列 表 。 


HTML 与 XHTML z jig WEF 


在 HTML 4.01 FB, ul 元 素 的 "compact" 和 "type" 属性 是 不 被 赞成 使 用 的 。 
在 XHTML 1.0 Strict DTD FB, ul 元 素 的 "compact" 和 "type" 属性 是 不 被 支持 的 。 


提示 和 注释 : 
提示 : 请 使 用 样式 来 定义 列表 的 类 型 。 


可 选 的 属性 


属性 ri 描述 
不 赞成 使 用 。 请 使 用 样式 取代 它 。 规 定 列表 呈 


COmpaSE | “compact 现 的 效果 上 比 正常 情况 更 小 巧 。 

Wee square Dn riu EL 
全 局 属性 

<ul> 标签 支持 HTML 中 的 全 局 属性 。 

事件 属性 


<ul> 标签 支持 HTML 中 的 事件 属性 。 


HTML «video»? 标签 


实例 
一 段 简单 的 HTML5 视频 : 


<video src="movie.ogg" controls="controls"> 
您 的 浏览 器 不 支持 Video 标签。 
</video> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safari 支持 <video> 标签 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 «video» 标签 。 


定义 和 用 法 

«video» 标签 定义 视频 ， 上 比如 电影 片段 或 其 他 视频 流 。 
HTML 4.01 与 HTML 5 之 间 的 差异 
<video> 标签 是 HTML 5 的 新 标签 。 

提示 和 注释 


提示 : 可 以 在 开始 标签 和 结束 标签 之 间 放 置 文本 内 容 ， 这 样 老 的 浏览 器 就 可 以 显示 
出 不 支持 该 标签 的 信息 。 


属性 


new : HTML5 中 的 新 属性 。 


属性 值 描述 
autoplay autoplay ”如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 。 
controls controls ”如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 。 
height pixels 设置 视频 播放 器 的 高 度 。 
loon fe 如 果 出 现 该 属性 ， 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播 
muted muted 规定 视频 的 音频 输出 应 该 被 静音 。 
规定 视频 下 载 时 显示 的 图 像 ， 或 者 在 用 户 点 击 播放 按钮 
poster URL 前 显示 的 图 像 。 
如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预 
preload preload — 各 播放 。 如 果 使 用 "autoplay"， 则 忽略 该 属性 。 
SIC url 要 播放 的 视频 的 URL. 
width pixels 设置 视频 播放 器 的 宽度 。 
全 局 属性 


<video> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


<video> 标签 支持 HTML 中 的 事件 属性 。 


相关 页 面 


HTML DOM 参考 手册 : Video 对 象 


HTML <wbr> 标签 


实例 
一 段 带 有 Word Break Opportunity 的 文本 : 


<p> 
如 果 想 学 习 AJAX， 那 么 您 必须 熟悉 XML<wbr>Http<wbr>Request 对 象 。 
</p> 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 <wbr> 标签 ， 除 了 Internet Explorer. 


定义 和 用 法 
Word Break Opportunity (<wbr>) 规定 在 文本 中 的 何 处 适合 添加 换行 符 。 


提示 : 如 果 单 词 太 长 ， 或 者 您 担心 浏览 器 会 在 错误 的 位 置换 行 ， 那 么 您 可 以 使 用 
<wbr> 元 素来 添加 Word Break Opportunity (单词 换行 时 机 ) 。 


浏览 器 文 持 


所 有 主流 浏览 器 均 支持 <wbr> 标签 ， 除 了 Internet Explorer。 


HTML 4.01 5 HTML 5 Za WER 


«wbr? 标签 是 HTML 5 中 的 新 标签 


全 局 属性 
<wbr> 标签 支持 HTML 中 的 全 局 属性 。 


事件 属性 


W3School 前 端 教程 合 


«wbr» 标签 支持 HTML 中 的 事件 属性 。 


HTML <wbr> 标签 581 


HTML 全 局 属性 


HTML 属性 赋予 元 素 意义 和 语 境 。 
下 面 的 全 局 属性 可 用 于 任何 HTML TR. 


HTML 全 局 属性 
= HTML5 中 添加 的 属性 。 
属性 描述 
accesskey 规定 激活 元 素 的 快捷 键 。 
class 规定 元 素 的 一 个 或 多 个 类 名 (引用 样式 表 中 的 类 ) o 


contenteditable ”规定 元 素 内 容 是 否 可 编辑 。 


规定 元 素 的 上 下 文 菜单 。 上 下 文 菜单 在 用 户 点 击 元 素 时 显 


contextmenu 

data-* 用 于 存储 页 面 或 应 用 程序 的 私有 定制 数据 。 
dir 规定 元 素 中 内 容 的 文本 方向 。 

draggable 规定 元 素 是 否 可 拖 动 。 

dropzone 规定 在 拖 动 被 拖 动 数 据 时 是 否 进行 复制 、 移 动 或 链接 。 
hidden 规定 元 素 仍 未 或 不 再 相关 。 

id 规定 元 素 的 唯一 

lang 规定 元 素 内 容 的 语言 。 

spellcheck 规定 是 否 对 元 素 进 行 拼写 和 语法 检查 。 
style 规定 元 素 的 行内 CSS 样式 。 

tabindex 规定 元 素 的 tab 键 次 序 。 

title 规定 有 关 元 素 的 额外 信息 。 

translate 规定 是 否 应 该 翻译 元 素 内 容 。 


HTML accesskey 属性 
HTML 全 局 属性 

实例 

带 有 指定 快捷 键 的 超 链接 : 


«a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a><t 
«a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a> 


Ei — g 


浏览 器 支持 


几乎 所 有 浏览 器 均 accesskey 属性 ， 除 了 Opera。 





定义 和 用 法 
accesskey 属性 规定 激活 (使 元 素 获得 焦点 ) 元 素 的 快捷 键 。 
提示 和 注释 


注释 : 以 下 元 素 支 持 accesskey 属性 : <a>, <area>, <button>, <input>, <label>, 
<legend> 以 及 <textarea>。 


语法 


<element accesskey="_character_"> 


属性 值 
值 描述 
character 规定 激活 (使 元 素 获 得 焦点 ) 元 素 的 便捷 按键 。 


HTML 全 局 属性 


HTML class 属性 


HTML 全 局 属性 


实例 
在 HTML 文档 中 使 用 class 属性 : 


<html> 

<head> 

<style type="text/css"> 
hi.intro {color:blue; } 
p.important {color:green; } 
</style> 

</head> 


<body> 

<hi class="intro">Header 1</h1> 

<p>A paragraph.</p> 

<p class="important">Note that this is an important paragraph.</p> 
</body> 

</html> 


ay | 
(可 以 在 本 页 底部 找到 更 多 实例 ) 


定义 和 用 法 
class 属性 规定 元 素 的 类 名 (classname) 。 


class 属性 大 多 数 时候 用 于 指向 样式 表 中 的 类 (class) 。 不 过 ， 也 可 以 利用 它 通过 
JavaScript 来 改变 带 有 指定 class 的 HTML 元 素 。 


提示 和 注释 
注释 : class 属性 不 能 在 以 下 HTML 元 素 中 使 用 : base, head, html, meta, param, 
script, style LAR title. 


提示 : 可 以 给 HTML 元 素 赋予 多 个 class， 例 如 : «span class="left_menu 
important">。 这 么 做 可 以 把 若干 个 CSS 类 合并 到 一 个 HTML 元 素 。 


提示 : 类 名 不 能 以 数字 开头 上 只 有 Internet Explorer 支持 这 种 做 法 。 


浏览 器 文 持 

W3C: "W3C" 列 指示 W3C 的 HTML/XHTML 推荐 标准 中 是 否定 义 了 该 属性 。 
W3C 

YES 


IE Firefox Opera Safari 
YES YES YES YES 


语法 


«element class-" value "> 


属性 值 
值 描述 
规定 元 素 的 类 的 名 称 。 如 需 为 一 个 元 素 规定 多 个 类 ， 用 空格 分 隔 


classname E 
类 名 。 


亲自 试 一 试 - 实例 
向 元 素 添 加 多 个 类 
如 何 向 一 个 元 素 添加 多 个 类 。 


HTML 全 局 属性 


HTML contenteditable 属性 


HTML 全 局 属性 


实例 
一 段 可 编辑 的 段落 : 


<p contenteditable="true"> 这 是 一 个 可 编辑 的 段落 。</p> 


浏览 器 文 持 


IE Firefox Chrome Safari 
所 有 主流 浏览 器 都 支持 contenteditable 属性 。 
rm. N 


contenteditable 属性 规定 元 素 内 容 是 否 可 编辑 。 
注释 : 如 果 元 素 未 设置 contenteditable 属性 ， 那 么 元 素 会 


HTML 4.01 与 HTML5 之 间 的 差异 


contenteditable 属性 是 HTML5 中 的 新 属性 。 
BK 


« element contenteditable="true| false"> 


属性 值 


学 


值 TE 


true 规定 元 素 可 编辑 。 
false 规定 元 素 不 可 编辑 。 


Opera 


元 素 继承 该 属性 。 
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HTML 全 局 属性 


HTML contenteditable 属性 587 


HTML contextmenu 属性 

HTML 全 局 属性 

实例 

规定 <div> 元 素 的 上 下 文 菜单 。 上 下 文 菜单 会 在 用 户 右键 点 击 元 素 时 出 现 : 


<div contextmenu="mymenu"> 


<menu type="context" id="mymenu"> 
<menuitem label="Refresh"></menuitem> 
<menuitem label="Twitter"></menuitem> 
</menu> 


</div> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
目前 只 有 Firefox 支持 contextmenu 属性 。 
定义 和 用 法 
contextmenu 属性 规定 元 素 的 上 下 文 菜单 。 当 用 户 右键 点 击 元 素 时 ， 会 出 现 上 下 文 


菜单 。 
contextmenu 属性 的 值 是 要 打开 的 <menu> 元 素 的 id。 


HTML 4.01 与 HTML5 之 间 的 差异 


contextmenu 属性 是 HTML5 中 的 新 属性 。 
语法 


< element contextmenu="*menu_id*"> 
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属性 值 
值 描述 
menu_id 要 打开 的 «menu» 元 素 的 id, 
HTML 全 局 属性 


HTML contextmenu 属性 589 


HTML data-* 属性 


HTML 全 局 属性 


实例 
使 用 data-* 属性 来 嵌入 自 定义 数据 : 


<ul> 

«li data-animal-type="bird">0Owl</11i> 

<li data-animal-type="fish">Salmon</1i> 

<li data-animal-type-"spider"»Tarantulac/li» 


</ul> 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 data-* 属性 。 


定义 和 用 法 
data-* 属性 用 于 存储 页 面 或 应 用 程序 的 私有 自 定 义 数 据 。 
data-* 属性 赋予 我 们 在 所 有 HTML 763R E BRA ELE 3L data 属性 的 能 


存储 的 (BEL) 数据 能 够 被 页 面 的 JavaScript 中 利用 ， 以 创建 更 好 的 用 户 体验 
(不 进行 Ajax 调用 或 服务 器 端 数据 库 查 询 ) 。 


data-* 属性 包括 两 部 分 
属性 名 不 应 该 包含 任何 大 宇 字 母 ， 并 且 在 前 缀 "data-" 之 后 必须 有 至 少 一 个 字 


符 
e 属性 值 可 以 是 任意 字符 串 
注释 : 用 户 代理 会 完全 忽略 前 级 为 "data-" 的 自 定 义 属 性 。 
HTML 4.01 与 HTML5 之 间 的 差异 


data-* 属性 是 HTML5 中 的 新 属性 。 


语法 


<_element_ data-*="_somevalue_"> 


属性 值 


值 


somevalue 


HTML 全 局 属性 


fü 
规定 属性 的 值 〈 以 字符 串 ) 。 


学 


HTML dir 属性 
HTML 全 局 属性 

实例 

一 段 方向 从 右 向 左 的 段落 : 


«p dir="rtl">write this text right-to-left!</p> 
浏览 器 支持 
所 有 浏览 器 均 支 持 dir 属性 。 
ra. 3 
dir 属性 规定 元 素 内 容 的 文本 方向 。 
提示 和 注释 
注释 : dir 属性 在 以 下 标签 中 无 效 : <base>, <br>, <frame>, <frameset>, <hr>， 
«iframe», <param> 以 及 «script», 


语法 


«element dir="1tr|rtl"> 


属性 值 

值 描述 
Itr 默认 。 从 左 向 右 的 文本 方向 。 
rtl 从 右 向 左 的 文本 方向 。 


HTML 全 局 属性 


HTML draggable 属性 


HTML 全 局 属性 


实例 
一 个 可 拖 动 的 段落 : 


«p draggable="true"> 这 是 一 个 可 拖 动 的 段落 。</p> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性 。 
注释 : Internet Explorer 8 以 及 更 早 的 版本， 不 支持 draggable 属性 。 


定义 和 用 法 

draggable 属性 规定 元 素 是 否 可 拖 动 。 

提示 : 链接 和 图 像 默 认 是 可 拖 动 的 。 

提示 : draggable 属性 常用 在 拖 放 操作 中 。 请 在 我 们 的 拖 放 教程 中 学 习 更 多 内 容 。 


HTML 4.01 与 HTML5 之 间 的 差异 


draggable 属性 是 HTML5 中 的 新 属性 。 
语法 


<_element_ draggable="true|false|auto"> 


属性 值 
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值 描述 
true 规定 元 素 的 可 拖 动 的 。 
false 规定 元 素 不 可 拖 动 。 
auto 使 用 浏览 器 的 默认 行为 。 
HTML 全 局 属性 


HTML draggable 属性 594 


HTML dropzone 属性 


HTML 全 局 属性 


实例 
拖 动 数据 会 产生 被 拖 动 数据 的 副本 : 


<div dropzone="copy"></div> 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
目前 所 有 主流 浏览 器 都 不 支持 contenteditable 属性 。 
定义 和 用 法 
dropzone 属性 规定 在 元 素 上 拖 动 数据 时 ， 是 否 拷 贝 、 移 动 或 链接 被 拖 动 数据 。 


HTML 4.01 与 HTML5 之 间 的 差异 


dropzone 属性 是 HTML5 中 的 新 属性 。 
语法 


« element dropzone="copy|move|link"> 


属性 值 
值 描述 
copy 拖 动 数据 会 产生 被 拖 动 数据 的 副本 。 


move 拖 动 数据 会 导致 被 拖 动 数据 被 移动 到 新 位 置 。 
link 拖 动 数据 会 产生 指向 原始 数据 的 链接 。 
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HTML 全 局 属性 


HTML dropzone 属性 596 


HTML hidden 属性 
HTML 全 局 属性 

实例 

被 隐藏 的 段落 : 


<p hidden> 这 个 段落 应 该 被 隐藏 。</p> 


浏览 器 支持 
IE Firefox Chrome Safari 


所 有 主流 浏览 器 都 支持 hidden 属性 ， 除 了 Internet Explorer。 


定义 和 用 法 

hidden 属性 是 布尔 属性 。 

如 果 设 置 该 属性 ， 它 规定 元 素 仍 未 或 不 再 相关 。 
浏览 器 不 应 显示 已 规定 hidden 属性 的 元 素 。 


Opera 


hidden 属性 也 可 用 于 防止 用 户 查 看 元 素 ， 直 到 匹配 某 些 条 件 (比如 选择 了 某 个 复 选 


框 ) 。 然 后 ，JavaScript 可 以 删除 hidden 属性 ， 以 使 此 元 素 可 见 。 


HTML 4.01 与 HTML5 之 间 的 差异 


hidden 属性 是 HTML5 中 的 新 属性 。 


HTML 与 XHTML Za WE 


在 XHTML 中 ， 属 性 简 宇 是 禁止 的 ，hidden 属性 必须 定义 为 <element 


hidden-"hidden"», 


语法 
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< element M hidden> 


HTML 全 局 属性 


HTML hidden 属性 598 


HTML id 属性 


HTML 全 局 属性 


实例 
通过 JavaScript 利用 id 属性 来 改变 一 段 文本 : 


«html» 

«head» 

«script type="text/javascript"> 
function change header() 


{ 
document .getElementById("myHeader").innerHTML="Nice day!"; 


} 

</script> 

</head> 

<body> 

«hi id="myHeader">Hello World!</h1> 

«button onclick="change_header()">Change text</button> 
</body> 


</html> 
(可 以 在 本 页 底部 找到 更 多 实例 ) 


定义 和 用 法 
id 属性 规定 HTML 元 素 的 唯一 的 id, 
id 在 HTML 文档 中 必须 是 唯一 的 。 


id 属性 可 用 作 链 接 锚 (link anchor) ， 通 过 JavaScript (HTML DOM) 或 通过 
CSS 为 带 有 指定 id 的 元 素 改 变 或 添加 样式 。 


支持 


W3C: "W3C" 列 指 示 W3C 的 HTML/XHTML 推荐 标准 中 是 否定 义 了 该 属性 。 


IE Firefox Opera Safari W3C 
YES YES YES YES YES 


语法 
<element id="_value_"> 


属性 值 


值 


id 规定 元 素 的 唯一 id。 


亲 目 试 一 试 - 实例 


向 HTML 元 素 添加 唯一 的 id 
如 何 向 HTML 元 素 添 加 id 属性 。 
在 CSS 中 使 用 id 属性 

如 何在 CSS 中 使 用 id 属性 
HTML 全 局 属性 


Br 


学 


HTML lang 属性 


HTML 全 局 属性 


实例 
段落 中 的 一 些 法 文 : 


<p lang="fr">Ceci est un paragraphe.</p> 
浏览 器 支持 
所 有 浏览 器 均 支 持 lang 属性 。 
定义 和 用 法 
lang 属性 规定 元 素 内 容 的 语言 。 
提示 和 注释 


注释 : lang 属性 在 以 下 标签 中 无 效 : <base>, <br>, <frame>, <frameset>, <hr>， 
«iframe», <param> 以 及 «script», 


语法 


<element lang="* language_code*"> 


属性 值 
值 描述 
language_code 规定 元 素 内 容 的 语言 代码 。 语 言 代码 参考 


HTML 全 局 属性 


HTML spellcheck 属性 


HTML 全 局 属性 


<p contenteditable="true" spellcheck="true"> 这 是 一 个 段落 。</p> 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera, Chrome 以 及 Safari 支持 spellcheck 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 spellcheck 属性 。 


res. : 
spellcheck 属性 规定 是 否 对 元 素 进 行 拼写 和 语法 检查 。 
可 以 对 以 下 内 容 进行 拼写 检查 : 


e input 元 素 中 的 文本 值 ( 非 密码 ) 
e <textarea> 元 素 中 的 文本 
e 可 编辑 元 素 中 的 文本 


HTML 4.01 与 HTML5 之 间 的 差异 


spellcheck 属性 是 HTML5 中 的 新 属性 。 
语法 


<_element_ spellcheck="true|false"> 


属性 值 
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值 描述 
true 对 元 素 进行 拼写 和 语法 检查 
false 不 检查 元 素 。 
HTML 全 局 属性 


HTML spellcheck 属性 603 


HTML style 属性 


HTML 全 局 属性 


实例 
在 HTML 文档 中 使 用 style 属性 : 


«hi style="color:blue; text-align:center">This is a header</h1i> 
<p style="color:red">This is a paragraph.</p> 


(可 以 在 本 页 底部 找到 更 多 实例 ) 


定义 和 用 法 
style 属性 规定 元 素 的 行内 样式 (inline style) 


style 属性 将 履 盖 任何 全 局 的 样式 设 定 ， 例 如 在 «style» 标签 或 在 外 部 样式 表 中 规定 
的 样式 。 


支持 


W3C: "W3C" 列 指 示 W3C 的 HTML/XHTML 推荐 标准 中 是 否定 义 了 该 属性 。 


IE Firefox Opera Safari W3C 
YES YES YES YES YES 
语法 


<element style="_value_"> 


属性 值 
值 描述 
style_definition 一 个 或 多 个 由 分 号 分 隔 的 CSS 属性 和 值 。 


HTML 全 局 属性 
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HTML style 属性 605 


HTML tabindex 属性 


HTML 全 局 属性 


实例 
带 有 指定 tab 键 顺序 的 链接 : 


«a href="http://www.w3school.com.cn/" tabindex="2">w3School</a> 
«a href="http://www.google.com/" tabindex="1">Google</a> 
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a> 


浏览 器 支持 

几乎 所 有 浏览 器 均 tabindex 属性 ， 除 了 Safari。 

定义 和 用 法 

tabindex 属性 规定 元 素 的 tab 键 控制 次 序 (34 tab 键 用 于 导航 时 ) 。 

提示 和 注释 

注释 : 以 下 元 素 支持 tabindex 属性 : <a>, <area>, <button>, <input>, <object>， 
<select> 以 及 <textarea>。 


语法 


<element tabindex-" number "» 


属性 值 
值 描述 
number 规定 元 素 的 tab 键 控 制 次 序 (1 是 第 一 个 ) 。 


HTML 全 局 属性 


HTML title 属性 


HTML 全 局 属性 


实例 
在 HTML 文档 中 使 用 title 属性 : 


<abbr title="People's Republic of China">PRC</abbr> was founded in 
<p title="Free Web tutorials">w3School.com.cn</p> 


a =- 
(可 以 在 本 页 底部 找到 更 多 实例 ) 





ch 、 : 

定义 和 用 法 

title 属性 规定 关于 元 素 的 额外 信息 。 

这 些 信息 通常 会 在 鼠标 移 到 元 素 上 时 显示 一 段 工 具 提 示 文 本 (tooltip text) 。 


提示 : tile 属性 常 与 form 以 及 a 元 素 一 同 使 用 ， 以 提供 关于 输入 格式 和 链接 目标 
的 信息 。 同 时 它 也 是 abbr 和 acronym 元 素 的 必需 属性 。 


支持 


W3C: "W3C" 列 指 示 W3C 的 HTML/XHTML 推荐 标准 中 是 否定 义 了 该 属性 。 


IE Firefox Opera Safari W3C 
YES YES YES YES YES 
语法 


<element title=" value "> 


属性 值 
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值 描述 
text 规定 元 素 的 工具 提示 文本 (tooltip text) 。 
HTML 全 局 属性 


HTML title 属性 608 


HTML translate 属性 


HTML 全 局 属性 


实例 
规定 不 应 翻译 某 些 元 素 : 


<p translate="no"> 请 勿 翻译 本 段 。</p> 
<p> 本 段 可 被 译 为 任意 语言 。</p> 


浏览 器 支持 

IE Firefox Chrome Safari 
所 有 主流 浏览 器 都 无 法 正确 地 支持 translate 属性 。 
定义 和 用 法 


translate 规定 是 否 应 该 翻译 元 素 内 容 。 


提示 : 请 使 用 class="notranslate" 替代 。 


HTML 4.01 与 HTML5 之 间 的 差异 


translate 属性 是 HTML5 中 的 新 属性 。 
语法 


<_element_ translate="yes|no"> 


属性 值 


Opera 
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值 
yes 规定 应 该 翻译 元 素 内 容 。 
no 规定 不 应 翻译 元 素 内 容 。 
HTML 全 局 属性 


HTML translate 属性 


Hi 


学 


610 


HTML 事件 属性 
全 局 事件 属性 


HTML 4 增加 了 使 事件 在 浏览 器 中 触发 动作 的 能 力 ， 上 比如 当 用 户 点 击 元 素 时 启动 
JavaScript. 


如 需 学 习 更 多 有 关 事件 编程 的 知识 ， 请 访问 我 们 的 JavaScript 教程 。 
下 面 列 出 了 添加 到 HTML 元 素 以 定义 事件 动作 的 全 局 事件 属性 。 
= HTML5 中 新 的 事件 属性 。 


Window 事件 属性 


针对 window 对 象 触发 的 事件 〈 应 用 到 <body> 标签 ) : 


属性 值 描述 


onafterprint script ”文档 打印 之 后 运行 的 脚本 。 

onbeforeprint script ”文档 打印 之 前 运行 的 脚本 。 
onbeforeunload script ”文档 卸载 之 前 运行 的 脚本 。 

onerror script ”在 错误 发 生 时 运行 的 脚本 。 

onhaschange script ” 当 文 档 已 改变 时 运行 的 脚本 。 

onload script ”页 面 结束 加 载 之 后 触发 。 

onmessage script ”在 消息 被 触发 时 运行 的 脚本 。 

onoffline script ” 当 文 档 离 线 时 运行 的 脚本 。 

ononline script ” 当 文 档 上 线 时 运行 的 脚本 。 

onpagehide script ” 当 窗 口 隐藏 时 运行 的 脚本 。 

onpageshow script ” 当 窗 口 成 为 可 见 时 运行 的 脚本 。 
onpopstate script ” 当 窗 口 历 史记 录 改 变 时 运行 的 脚本 。 
onredo script ” 当 文 档 执行 撤销 (redo) 时 运行 的 脚本 。 
onresize script ” 当 浏 览 器 窗口 被 调整 大 小 时 触发 。 
onstorage script ”在 Web Storage 区 域 更 新 后 运行 的 脚本 。 
onundo script ”在 文档 执行 undo 时 运行 的 脚本 。 
€ sent oe (或 者 浏览 器 窗口 已 被 关 


Form 事件 


由 HTML 表单 内 的 动作 触发 的 事件 (应 用 到 几乎 所 有 HTML 元 素 ， 但 最 常用 在 
form 元 素 中 ) : 


属性 值 描述 


onblur script ”元 素 失 去 焦点 时 运行 的 脚本 。 
onchange script ”在 元 素 值 被 改变 时 运行 的 脚本 。 
oncontextmenu | script ” 当 上 下 文 菜单 被 触发 时 运行 的 脚本 。 
onfocus script ” 当 元 素 失 去 焦点 时 运行 的 脚本 。 
onformchange script ， 在 表单 改变 时 运行 的 脚本 。 
onforminput script ” 当 表 单 获得 用 户 输 入 时 运行 的 脚本 。 
oninput script ” 当 元 素 获得 用 户 输 入 时 运行 的 脚本 。 
oninvalid script ” 当 元 素 无 效 时 运行 的 脚本 。 

— Beni aoe HTML5 中 不 支 
onselect script ”在 元 素 中 文本 被 选中 后 触发 。 
onsubmit script ”在 提交 表单 时 触发 。 


Keyboard 事件 


属性 值 描述 
onkeydown script 在 用 户 按 下 按键 时 触发 。 
onkeypress script 在 用 户 敲 击 按钮 时 触发 。 
onkeyup script 当 用 户 释 放 按 键 时 触发 。 


Mouse 事件 


由 好 标 或 类 似 用 户 动作 触发 的 事件 : 


属性 值 描述 


onclick script ， 元 素 上 发 生 鼠 标点 击 时 触发 。 

ondblclick script “元素 上 发 生 鼠 标 双 击 时 触发 。 

ondrag script ， 元 素 被 拖 动 时 运行 的 脚本 。 

ondragend script ”在 拖 动 操作 末端 运行 的 脚本 。 

enaracenict siipi 当 元 素 元 素 已 被 拖 动 到 有 效 拖 放 区 域 时 运行 的 脚 


ondragleave script ” 当 元 素 离开 有 效 拖 放 目 标 时 运行 的 脚本 。 
当 元 素 在 有 效 拖 放 目标 上 正在 被 拖 动 时 运行 的 脚 


ondragover script 
ondragstart script ”在 拖 动 操作 开端 运行 的 脚本 。 
ondrop script ” 当 被 拖 元 素 正在 被 拖 放 时 运行 的 脚本 。 


onmousedown script ， 当 元 素 上 按 下 鼠标 按钮 时 触发 。 
onmousemove ”script ， 当 鼠标 指针 移动 到 元 素 上 时 触发 。 
onmouseout script “， 当 鼠标 指针 移出 元 素 时 触发 。 
onmouseover script ， 当 鼠标 指针 移动 到 元 素 上 时 触发 。 


onmouseup script ， 当 在 元 素 上 释放 鼠标 按钮 时 触发 。 
onmousewheel script ” 当 饥 标 滚轮 正在 被 滚动 时 运行 的 脚本 。 
onscroll script ， 当 元 素 滚动 条 被 滚动 时 运行 的 脚本 。 


Media 事件 


由 媒介 〈 比 如 视频 、 图 像 和 音频 ) 触发 的 事件 (适用 于 所 有 HTML 元 素 ， 但 常见 于 
媒介 元 素 中 ， 比 如 «audio», «embed», «img». «object» 以 及 <video>) : 


fl 描述 
oe script ”在 退出 时 运行 的 脚本 。 
oncanplay script ， 当 文件 就 绪 可 以 开始 播放 时 运行 的 脚本 《缓冲 


已 足够 开始 时 ) 。 


当 媒 介 能 够 无 需 因 缓 冲 而 停止 即 可 播放 至 结尾 
时 运行 的 脚本 。 


ondurationchange script ” 当 媒 介 长 度 改变 时 运行 的 脚本 。 
当 发 生 故 障 并 且 文 件 突然 不 可 用 时 运行 的 脚本 


oncanplaythrough Script 


onended 


onerror 


onloadeddata 


onloadedmetadata 


onloadstart 


onpause 
onplay 
onplaying 


onprogress 


onratechange 


onreadystatechange 


onseeked 


onseeking 


onstalled 


onsuspend 


ontimeupdate 


onvolumechange 


onwaiting 


script 


script 


script 


script 


script 


script 
script 
script 


script 


script 


script 


script 


script 


script 


script 


script 


script 


script 


(比如 连接 意外 断 开 时 ) 。 


当 媒 介 已 到 达 结 尾 时 运行 的 脚本 (可 发 送 类 
似 “ 感 谢 观看 "之 类 的 消息 ) 。 


当 在 文件 加 载 期 间 发 生 错 误 时 运行 的 脚本 。 
当 媒 介 数 据 已 加 载 时 运行 的 脚本 。 


当 元 数据 (比如 分 辩 率 和 时 长 ) 被 加 载 时 运行 
的 脚本 。 


在 文件 开始 加 载 且 未 实际 加 载 任何 数据 前 运行 
的 脚本 。 


当 媒 介 被 用 户 或 程序 暂停 时 运行 的 脚本 。 

当 媒 介 已 就 绪 可 以 开始 播放 时 运行 的 脚本 。 
当 媒 介 已 开始 播放 时 运行 的 脚本 。 

当 浏 览 器 正在 获取 媒介 数据 时 运行 的 脚本 。 
每 当 回放 速率 改变 时 运行 的 脚本 (上 比如 当 用 户 
切换 到 慢 动 作 或 快 进 模式 ) 。 

每 当 就 绪 状 态 改 变 时 运行 的 脚本 〈 就 绪 状 态 监 
测 媒介 数据 的 状态 ) 。 

当 seeking 属性 设置 为 false (指示 定位 已 结 
FR) 时 运行 的 脚本 。 

当 seeking 属性 设置 为 true (指示 定位 是 活动 
的 ) 时 运行 的 脚本 。 

在 浏览 器 不 论 何 种 原因 未 能 取 回 媒介 数据 时 运 
行 的 脚本 。 

在 媒介 数据 完全 加 载 之 前 不 论 何 种 原因 终止 取 
回 媒介 数据 时 运行 的 脚本 。 

当 播 放 位 置 改变 时 (比如 当 用 户 快 进 到 媒介 中 
一 个 不 同 的 位 置 时 ) 运行 的 脚本 。 

每 当 音 量 改变 时 (包括 将 音量 设置 为 静音 ) 时 
运行 的 脚本 。 

当 媒 介 已 停止 播放 但 打算 继续 播放 时 (比如 当 
媒介 暂停 已 缓冲 更 多 数据 ) 运行 脚本 


HTML 5 视频 /音频 参考 手册 


HTML5 视频 和 音频 的 DOM 参考 手册 


HTML5 DOM 7; «audio» 和 «video» 元 素 提 供 了 方法 、 属 性 和 事件 。 
这 些 方法 、 属 性 和 事件 允许 您 使 用 JavaScript 来 操作 <audio> 和 <video> 元 素 。 


HTML5 Audio/Video 方法 


方法 描述 
addTextTrack() 向 音频 /视频 添加 新 的 文本 轨道 
canPlayType() 伟 测 浏览 器 是 否 能 播放 指定 的 音频 /视频 类 型 
load() 重新 加 载 音频 /视频 元 素 
play() 开始 播放 音频 /视频 
pause() 暂停 当前 播放 的 音频 /视频 


HTML5 Audio/Video 属性 


属性 描述 
audioTracks 返回 表示 可 用 音 轨 的 AudioTrackList 对 象 
autoplay 设置 或 返回 是 否 在 加 载 完 成 后 随即 播放 音频 /视频 
buffered 返回 表示 音频 /视频 已 缓冲 部 分 的 TimeRanges 对 象 
ee Ri ME 示 音 频 / 视 频 当 前 媒体 控制 器 的 MediaController 
controls E 显示 控件 (比如 播放 /暂停 
crossOrigin 设置 或 返回 音频 /视频 的 CORS 设置 
currentSrc 返回 当前 音频 /视频 的 URL 
currentTime 设置 或 返回 音频 /视频 中 的 当前 播放 位 置 (以 秒 计 ) 
defaultMuted 设置 或 返回 音频 /视频 默认 是 否 静 音 
defaultPlaybackRate ”设置 或 返回 音频 /视频 的 默认 播放 速度 


duration 
ended 
error 


loop 
mediaGroup 


muted 
networkState 
paused 
playbackRate 
played 
preload 
readyState 
seekable 
seeking 

src 

startDate 
textTracks 
videoTracks 


volume 


返回 当前 音频 /视频 的 长 度 (以 秒 计 ) 
返回 音频 /视频 的 播放 是 否 已 结 


返回 表示 音频 /视频 错误 状态 的 MediaError 对 象 
或 返回 音频 /视频 是 否 应 在 结束 时 重新 播放 


IL 


Xi [nl E Ae FS 
或 返回 音频 /视频 播放 的 速度 

示 音 频 / 视 频 已 播放 部 分 的 TimeRanges 对 象 
设置 或 返回 音频 /视频 是 否 应 该 在 页 面 加 载 后 进行 加 载 
返回 音 二 

返回 表示 音频 /视频 可 寻 址 部 分 的 TimeRanges 对 象 
返回 用 户 是 否 正在 音频 /视频 中 进行 查找 

设置 或 返回 音频 /视频 元 素 的 当前 来 源 

返回 表示 当前 时 间 偏 移 的 Date 对 象 

返回 表示 可 用 文本 轨道 的 TextTrackList 对 象 

返回 表示 可 用 视频 轨道 的 VideoTrackList 对 象 

受 置 或 返回 音频 /视频 的 音量 


fai x 
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a 


li 


M 


HTML5 Audio/Video 事件 


事件 
abort 
canplay 
canplaythrough 
durationchange 
emptied 
ended 
error 


loadeddata 


loadedmetadata 


loadstart 
pause 
play 
playing 
progress 
ratechange 
seeked 
seeking 
stalled 
suspend 
timeupdate 
volumechange 


waiting 


描述 

音频 /视频 的 加 载 已 放弃 时 
当 浏 览 器 可 以 播放 音频 /视频 时 
当 浏 览 器 可 在 不 因 缓 冲 而 停顿 的 情况 下 进行 播放 时 
音频 /视频 的 时 长 已 更 改 时 
当 目 前 的 播放 列表 为 空 时 
当 目 前 的 播放 列表 已 结束 时 
当 在 音频 /视频 加 载 期 间 发 生 错误 时 
当 浏览 器 已 加 载 音频 /视频 的 当前 帧 时 
当 浏 览 器 已 加 载 音 频 /视频 的 元 数据 时 
当 浏 览 器 开始 查找 音频 /视频 时 

音频 /视频 已 暂停 时 

音频 /视频 已 开始 或 不 再 暂停 时 

音频 /视频 在 已 因 缓冲 而 暂停 或 停止 后 
当 浏 览 器 正在 下 载 音 频 / 视 频 时 

音频 /视频 的 播放 速度 已 更 改 时 
当 用 户 已 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 
当 用 户 开始 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 
当 浏 览 器 尝试 获取 媒体 数据 ， 但 数据 不 可 用 时 
当 浏 览 器 刻意 不 获取 媒体 数据 时 
当 目 前 的 播放 位 置 已 更 改 时 

音量 已 更 改 时 
当 视 频 由 于 需要 缓冲 下 一 帧 而 停止 


已 就 绪 时 


HTML 5 Canvas 参考 手册 


描述 
HTML5 «canvas»? 标签 用 于 绘制 图 像 (通过 脚本 ， 通 常 是 JavaScript) 。 


Ait, «canvas» 元 素 本 身 并 没有 绘制 能 力 ( 它 仅 仅 是 图 形 的 容器 ) - 您 必须 使 用 
脚本 来 完成 实际 的 绘图 任务 。 


getContext() 方法 可 返回 一 个 对 象 ， 该 对 象 提供 了 用 于 在 画布 上 绘图 的 方法 和 属 
性 


o 


本 手册 提供 完整 的 getContext("2d") 对 象 属性 和 方法 ， 可 用 于 在 画布 上 绘制 文本 、 
A. J. HBSS. 


浏览 器 支持 


Internet Explorer 9、Firefox、Opera、Chrome 以 及 Safari 支持 <canvas> 及 其 属 
性 和 方法 。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 <canvas> 元 素 。 


颜色 、 样 式 和 阴影 


属性 描述 


fillStyle 设置 或 返回 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 
strokeStyle 设置 或 返回 用 于 笔触 的 颜色 、 渐 变 或 模式 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 

shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 距 形状 的 水 平 距离 
shadowOffsetY 设置 或 返回 阴影 距 形状 的 垂直 距离 
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方法 描述 
createLinearGradient() 创建 线性 渐变 (用 在 画布 内 容 上 ) 
createPattern() 在 指定 的 方向 上 重复 指定 的 元 素 
createRadialGradient() 创建 放射 状 /环形 的 渐变 (用 在 画布 内 容 上 ) 
addColorStop() 规定 渐变 对 象 中 的 颜色 和 停止 位 置 
线条 样式 

属性 描述 
lineCap 设置 或 返回 线条 的 结束 端点 样式 
lineJoin 设置 或 返回 两 条 线 相交 时 ， 所 创建 的 拐角 类 型 
lineWidth 设置 或 返回 当前 的 线条 宽度 
miterLimit 设置 或 返回 最 大 斜 接 长 度 


起 形 


方法 描述 
rect() 创建 矩形 
fillRect() 绘制 "被 填充 ”的 矩形 
strokeRect() 绘制 矩形 (无 填充 ) 
clearRect() 在 给 定 的 矩形 内 清除 指定 的 像素 


路 径 


fill() 
stroke() 
beginPath() 
move To() 


closePath() 


line To() 


clip() 
quadraticCurve To() 
bezierCurve To() 
arc() 


arcTo() 


isPointInPath() 


转换 


方法 
scale() 
rotate() 
translate() 
transform() 


setTransform() 


文本 


属性 
font 
textAlign 


textBaseline 


M 


x 


x 
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填充 当前 绘图 (路径) 

绘制 已 定义 的 路 径 

起 始 一 条 路 径 ， 或 重 置 当前 路 径 

把 路 径 移 动 到 画布 中 的 指定 点 ， 不 创建 线条 
创建 从 当前 点 回 到 起 始点 的 路 径 


添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 指定 


的 线条 
从 原始 画布 剪 切 任意 形状 和 尺寸 的 区 域 
创建 二 次 贝 塞 尔 曲线 

建 三 次 方 贝 塞 尔 曲线 
DXX 《用 于 创建 圆 形 或 部 分 圆 ) 
创建 两 切线 之 间 的 弧 / 曲 线 


如 果 指 定 的 点 位 于 当前 路 径 中 ， 则 返回 true, Amik 
false 
描述 
缩放 当前 绘图 至 更 大 或 更 小 
旋转 当前 绘图 


重新 映射 画布 上 的 (0,0) 位 置 
替换 绘图 的 当前 转换 矩阵 
将 当前 转换 重 置 为 单位 和 矩阵。 然后 运行 transform() 


描述 
置 或 返回 文本 内 容 的 当前 字体 属性 
设置 或 返回 文本 内 容 的 当前 对 齐 方式 
设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 


rH 
PAN 
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方法 描述 


fillText() 在 画布 上 绘制 “被 填充 的 "文本 

strokeText() 在 画布 上 绘制 文本 (无 填充 ) 

measureText() 返回 包含 指定 文本 宽度 的 对 象 
(RY til 

Aik 描述 

drawlmage() 向 画布 上 绘制 图 像 、 画 布 或 视频 

像素 操作 
属性 描述 


width 返回 ImageData 对 象 的 宽度 
height ”返回 ImageData 对 象 的 高 度 
data 返回 一 个 对 象 ， 其 包含 指定 的 ImageData 对 象 的 图 像 数据 


方法 描述 
createlmageData() ”创建 新 的 、 空 白 的 ImageData 对 象 
getlmageData() "c e a 对 象 ， 该 对 象 为 画布 上 指定 的 矩形 复制 


putImageData() 把 图 像 数据 (从 指定 的 ImageData + &) 放 回 画布 上 


合成 
属性 描述 
globalAlpha 设置 或 返回 绘图 的 当前 alpha 或 透明 值 
globalCompositeOperation 设置 或 返回 新 图 像 如 何 绘制 到 已 有 的 图 像 上 


其 他 


学 


方法 fü 


save() 保存 当前 环境 的 状态 

restore() 返回 之 前 保存 过 的 路 径 状 态 和 属性 
createEvent() 

getContext() 


toDataURL() 


HTML 元 素 和 和 有效 的 DTD 


HTML5/HTML 4.01/XHTML 元 素 和 有 效 的 DTD 


下 面 的 表格 列 出 了 所 有 的 HTML5/HTML 4.01/XHTML 元 素 ， 以 及 它们 会 出 现在 什 
么 文档 类 型 (DTD) 中 : 


Transitional 
<a> 
<abbr> 
<acronym> 
<address> 
<applet> 
<area> 
<article> 
<aside> 
<audio> 
<b> 
<base> 
<basefont> 
<bdi> 
<bdo> 
<big> 
<blockquote> 
<body> 
<br> 
<button> 


<canvas> 


HTMLS 


Strict 


HTML 4.01 / XHTML 


1.0 


Frameset 


Yes 
Yes 
Yes 
No 

Yes 
Yes 
Yes 
Yes 
Yes 
Yes 


No 


XHTML 


Yes 
Yes 
Yes 
Yes 
No 
Yes 
No 
No 
No 
Yes 
Yes 
No 
No 
Yes 
Yes 
Yes 
Yes 
Yes 
Yes 


No 


Yes 
Yes 
Yes 
Yes 
Yes 
Yes 
No 

No 

No 

Yes 
Yes 
Yes 
No 

Yes 
Yes 
Yes 
Yes 
Yes 
Yes 


No 


Yes 
Yes 
Yes 
Yes 
No 
No 
No 
No 
No 
Yes 
Yes 
No 
No 
No 
Yes 
Yes 
Yes 
Yes 
Yes 


No 
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<Caption> Yes Yes Yes Yes Yes 
<center> No Yes No Yes | No 
<cite> Yes Yes Yes Yes | Yes 
<code> Yes Yes Yes Yes | Yes 
<col> Yes Yes Yes Yes | No 
<colgroup> Yes Yes Yes Yes | No 
«command? Yes No No No No 
<datalist> Yes No No No No 
<dd> Yes Yes Yes Yes | Yes 
<del> Yes Yes Yes Yes | No 
«details? Yes No No No No 
<dfn> Yes Yes Yes Yes | Yes 
<dir> No Yes No Yes | No 
«div» Yes Yes Yes Yes | Yes 
«dl» Yes Yes Yes Yes | Yes 
«dt» Yes Yes Yes Yes | Yes 
<em> Yes Yes Yes Yes | Yes 
<embed> Yes No No No No 
<fieldset> Yes Yes Yes Yes | Yes 
<figcaption> Yes No No No No 
<figure> Yes No No No No 
<font> No Yes No Yes | No 
«footer? Yes No No No No 
«form» Yes Yes Yes Yes | Yes 
<frame> No No No Yes No 
<frameset> No No No Yes | No 
«head» Yes Yes Yes Yes | Yes 
«header» Yes No No No No 
<h1> to <h6> Yes Yes Yes Yes | Yes 
<hr> Yes Yes Yes Yes | Yes 
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«html» Yes Yes Yes Yes | Yes 


<i> Yes Yes Yes Yes | Yes 
<iframe> Yes Yes No Yes | No 
<img> Yes Yes Yes Yes Yes 
<input> Yes Yes Yes Yes Yes 
<ins> Yes Yes Yes Yes | No 
<keygen> Yes No No No No 
<kbd> Yes Yes Yes Yes | Yes 
<label> Yes Yes Yes Yes | Yes 
<legend> Yes Yes Yes Yes Yes 
<li> Yes Yes Yes Yes | Yes 
<link> Yes Yes Yes Yes | Yes 
<map> Yes Yes Yes Yes No 
<mark> Yes No No No No 
<menu> Yes Yes No Yes | No 
«meta» Yes Yes Yes Yes | Yes 
«meter? Yes No No No No 
«nav» Yes No No No No 
<noframes> No Yes No Yes | No 
<noscript> Yes Yes Yes Yes Yes 
<object> Yes Yes Yes Yes Yes 
<ol> Yes Yes Yes Yes | Yes 
<optgroup> Yes Yes Yes Yes Yes 
<option> Yes Yes Yes Yes Yes 
<output> Yes No No No No 
<p> Yes Yes Yes Yes Yes 
<param> Yes Yes Yes Yes Yes 
<pre> Yes Yes Yes Yes Yes 
<progress> Yes No No No No 
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<Samp> 
<script> 
<section> 
<select> 
<small> 
<source> 
<span> 
<strike> 
<strong> 
<style> 
<sub> 
<summary> 
<sup> 
<table> 
<tbody> 
<td> 
<textarea> 
<tfoot> 
<th> 
<thead> 
<time> 
<title> 
<tr> 
<track> 


<tt> 
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No 
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Yes 
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Yes 
Yes 
Yes 
No 
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Yes 
No 


Yes 


Yes 
No 
No 
No 
No 
Yes 
Yes 
No 
Yes 
Yes 
No 
Yes 
No 
Yes 
Yes 
Yes 
No 
Yes 
Yes 
Yes 
Yes 
Yes 
Yes 
Yes 
Yes 
No 
Yes 
Yes 
No 
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Yes 
No 

No 

No 

Yes 
Yes 
Yes 
No 

Yes 
Yes 
No 
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Yes 
No 
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Yes 
Yes 
No 

Yes 
Yes 
No 


Yes 


Yes 
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<U> 
<ul> 
<Var> 
<video> 


<wbr> 
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HTML 颜色 名 


本 页 提供 了 被 大 多 数 浏览 器 支持 的 颜色 名 。 


提示 : W3C 的 HTML 4.0 标准 仅 支持 16 种 颜色 名 ， 它 们 是 : aqua, black, 
blue, fuchsia, gray. green. lime, maroon, navy, olive, purple, red, 


silver, teal, white, yellow. 


如 果 使 用 其 它 颜色 的 话 ， 就 应 该 使 用 十 六 进 制 的 颜色 值 。 


颜色 名 列表 


单 击 一 个 颜色 名 或 者 16 进 制 值 ， 就 可 以 查看 与 不 同文 字 颜 色 搭配 的 


颜色 名 
AliceBlue 
AntiqueWhite 
Aqua 
Aquamarine 
Azure 
Beige 
Bisque 
Black 
BlanchedAlmond 
Blue 
BlueViolet 
Brown 
BurlyWood 
CadetBlue 
Chartreuse 
Chocolate 
Coral 


CornflowerBlue 


十 六 进 制 颜色 值 


#FOF8FF 
ZFAEBD?7 
#00FFFF 
#7FFFD4 
#FOFFFF 
#F5F5DC 
#FFE4C4 
#000000 
#FFEBCD 
#0000FF 
#8A2BE2 
#A52A2A 
#DEB887 
#5F9EAO 
#7FFFOO 
#D2691E 
#FF7F50 
#6495ED 


db 
F3 景 颜色 。 


颜色 
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Cornsilk #FFF8DC 
Crimson #DC143C 
Cyan #00FFFF 
DarkBlue #00008B 
DarkCyan #008B8B 
DarkGoldenRod #B8860B 
DarkGray #A9A9A9 
DarkGreen #006400 
DarkKhaki #BDB76B 
DarkMagenta #8B008B 
DarkOliveGreen #556B2F 
Darkorange #FF8C00 
DarkOrchid #9932CC 
DarkRed #8B0000 
DarkSalmon #E9967A 
DarkSeaGreen #8FBC8F 
DarkSlateBlue #483D8B 
DarkSlateGray #2F4F4F 
DarkTurquoise #00CED1 
DarkViolet #9400D3 
DeepPink #FF1493 
DeepSkyBlue #00BFFF 
DimGray #696969 
DodgerBlue #1E90FF 
Feldspar #D19275 
FireBrick #B22222 
FloralWhite #FFFAFO 
ForestGreen #228B22 
Fuchsia #FFOOFF 
Gainsboro #DCDCDC 
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GhostWhite 
Gold 
GoldenRod 
Gray 

Green 
GreenYellow 
HoneyDew 
HotPink 
IndianRed 
Indigo 

Ivory 

Khaki 
Lavender 
LavenderBlush 
LawnGreen 
LemonChiffon 
LightBlue 
LightCoral 
LightCyan 
LightGoldenRodYellow 
LightGrey 
LightGreen 
LightPink 
LightSeaGreen 
LightSkyBlue 
LightSlateBlue 
LightSlateGray 
LightSteelBlue 
LightYellow 








HTML 颜色 名 


#F8F8FF 
#FFD700 
#DAA520 
#808080 

#008000 

#ADFF2F 
#FOFFFO 
#FF69B4 
#CD5C5C 
#4B0082 

#FFFFFO 
#FOE68C 
#E6E6FA 
#FFFOFS 
#7CFCOO 
#FFFACD 
#ADD8E6 
#F 08080 

#EOFFFF 
#FAFAD2 
#D3D3D3 
#90EE90 
#FFB6C1 
#FFAO7A 
#20B2AA 
#87CEFA 
#8470FF 

#778899 

#BOC4DE 
#FFFFEO 
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Lime #00FF00 
LimeGreen #32CD32 
Linen #FAFOE6 
Magenta #FFOOFF 
Maroon #800000 
MediumAquaMarine #66CDAA 
MediumBlue #0000CD 
MediumOrchid #BA55D3 
MediumPurple #9370D8 
MediumSeaGreen #3CB371 
MediumSlateBlue #7B68EE 
MediumSpringGreen #00FA9A 
MediumTurquoise #48D1CC 
MediumVioletRed #C71585 
MidnightBlue #191970 
MintCream #FSFFFA 
MistyRose #FFE4E1 
Moccasin #FFE4B5 
NavajoWhite #FFDEAD 
Navy #000080 
OldLace #FDF5E6 
Olive #808000 
OliveDrab #6B8E23 
Orange #FFA500 
OrangeRed #FF4500 
Orchid #DA70D6 
PaleGoldenRod #EEE8AA 
PaleGreen #98FB98 
PaleTurquoise ZAFEEEE 
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PaleVioletRed 
PapayaWhip 
PeachPuff 
Peru 

Pink 

Plum 
PowderBlue 


Purple 


RosyBrown 
RoyalBlue 
SaddleBrown 
Salmon 
SandyBrown 
SeaGreen 
SeaShell 
Sienna 
Silver 
SkyBlue 
SlateBlue 
SlateGray 
Snow 
SpringGreen 
SteelBlue 
Tan 

Teal 

Thistle 


Tomato 





Violet 





HTML 颜色 名 


Turquoise 


#D87093 
#FFEFDS 
#FFDAB9 
#CD853F 
#FFCOCB 
#DDAODD 
#BOEOE6 
#800080 
#FF0000 
#BC8F8F 
#4169E1 
#8B4513 
#FA8072 
#F4A460 
#2E8B57 
#FFFSEE 
#A0522D 
#COCOCO 
#87CEEB 
#6A5ACD 
#708090 
#FFFAFA 
#00FF7F 
#4682B4 
#D2B48C 
#008080 
#D8BFD8 
#FF6347 
#40E0D0 
#EE82EE 
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VioletRed 
Wheat 
White 
WhiteSmoke 
Yellow 


YellowGreen 





HTML 颜色 名 


#D02090 
#F5DEB3 
#FFFFFF 


#F5F5F5 
#FFFF00 
#9ACD32 
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HTML 字符 集 


HTML 字符 集 


如 需 正确 地 显示 HTML 页 面 ， 浏 览 器 必须 知道 使 用 何 种 字符 集 。 


万 维 网 早期 使 用 的 字符 集 是 ASCII, ASCI 支持 0-9 的 数字 ， 大 写 和 小 写 英 文字 母 
表 ， 以 及 一 些 特 殊 字 符 。 


完整 的 ASCI 参考 手册 


由 于 很 多 国家 使 用 的 字符 并 不 属于 ASCII， 现 代 浏 览 器 的 默认 字符 集 是 ISO-8859- 
1. 


完整 的 ISO-8859-1 参考 手册 
如 果 网 页 使 用 不 同 于 ISO-8859-1 的 字符 集 ， 就 应 该 在 «meta» 标签 进行 指定 。 


ISO 字符 集 


ISO 字符 集 是 国际 标准 组 织 (ISO) 针对 不 同 的 字母 表 / 语 言 定义 的 标准 字符 集 。 
下 面 列 出 了 世界 各 地 使 用 的 不 同 字符 集 : 


字符 集 


ISO- 
8859-1 


ISO- 
8859-2 


ISO- 
8859-3 


ISO- 
8859-4 


ISO- 
8859-5 


ISO- 
8859-6 


ISO- 
8859-7 


ISO- 
8859-8 


ISO- 
8859-9 


ISO- 
8859- 
10 


ISO- 
8859- 
15 


ISO- 
2022- 
JP 


ISO- 
2022- 
JP-2 


ISO- 
2022- 
KR 


Hah 


Latin alphabet 
part 1 


Latin alphabet 
part 2 


Latin alphabet 
part 3 


Latin alphabet 
part 4 


Latin/Cyrillic 
part 5 


Latin/Arabic 
part 6 


Latin/Greek 
part 7 


Latin/Hebrew 
part 8 


Latin 5 part 9 


Latin 6 


Latin 9 (aka 
Latin O) 


Latin/Japanese 


part 1 


Latin/Japanese 


part 2 


Latin/Korean 
part 1 


Unicode 标准 


使 用 范围 


北美 、 西 欧 、 拉 丁 美 洲 、 加 勒 比 海 、 加 拿 大 、 非 
洲 


东欧 


SE Europe、 世 界 语 、 其 他 杂项 


斯 卉 的 纳 维 亚 / 波 罗 的 海 ( 以 及 其 他 没有 包括 在 
ISO-8859-1 中 的 部 分 ) 


使 用 古代 斯 拉夫 语 字 母 表 的 语言 ， 上 比如 保加利亚 
语 、 白 俄罗斯 文 、 俄 罗斯 语 、 马 其 顿 语 

使 用 阿拉 伯 字 母 的 语言 

现代 希腊 语 ， 以 及 有 希腊 语 衍生 的 数学 符号 
使 用 希 伯 来 语 的 语言 

土耳其 语 


拉 普 兰 语 、 上 日耳曼 语 、 爱 斯 基 摩 北欧 话 


5 ISO 8859-1 类 似 ， 欧 元 符号 和 其 他 一 些 字符 
取代 了 一 些 较 少 使 用 的 符号 


日 本 语 


日 本 语 


韩语 


由 于 上 面 列 出 的 字符 集 都 有 容量 限制 ， 而 且 不 兼容 多 语言 环境 ，Unicode 联盟 开发 
了 Unicode 标准 。 


Unicode 标准 酒 盖 了 世界 上 的 所 有 字符 、 标 点 和 符号 。 


不 论 是 何 种 平台 、 程 序 或 语言 ，Unicode 都 能 够 进行 文本 数据 的 义理、 存储 和 区 
换 。 


Unicode 联盟 
Unicode 联盟 开发 了 Unicode 标准 。 他 们 的 目标 是 用 标准 的 Unicode 转换 格式 
(UTF) 来 取代 现 有 的 字符 集 。 


Unicode 标准 已 经 获得 了 成 功 ， 在 XML. Java, ECMAScript (JavaScript), 
LDAP、CORBA 3.0、WML 中 ，Unicode 已 经 得 到 了 实现 。 在 许多 操作 系统 以 及 所 
有 的 现代 浏览 器 中 ，Unicode 同样 得 到 了 支持 。 


Unicode 联盟 与 领导 性 的 标准 发 展 组 织 进 行 合 作 ， 比 如 ISO, W3C 以 及 ECMA. 
Unicode 可 以 被 不 同 的 字符 集 兼 容 。 最 常用 的 编码 方式 是 UTF-8 和 UTF-16 : 
UTF-8 


UTF8 中 的 字符 可 以 是 1-4 个 字 节 长 。UTF-8 可 以 表示 Unicode 标准 中 的 任意 字 
符 。UTF-8 向 后 兼容 ASCII。UTF-8 是 网 页 和 电子 邮件 的 首选 编码 。 


UTF-16 


16 比特 的 Unicode 转换 格式 是 一 种 Unicode 可 变 字 符 编码 ， 能 够 对 全 部 Unicode 
指 合 表 进行 编码 。UTF-16 主要 被 用 于 操作 系统 和 环境 中 ， 比 如 微软 的 Windows 
2000/XP/2003/Vista/CE LAR Java 和 .NET 字 节 代码 环境 。 


提示 : 最 前 面 的 256 个 Unicode 字符 集 字符 对 应 于 256 个 ISO-8859-1 字符 。 


提示 : 所 有 HTML 4 义理 器 均 已 支持 UTF-8， 而 所 有 XHTML 和 XML 义理 器 支持 
UTF-8 和 UTF-16。 


HTML ASCII 参考 手册 


HTML 和 XHTML 用 标准 的 7 比特 ASCI 代码 在 网 络 上 传输 数据 。 


7 比特 ASCII 代码 可 提供 128 个 不 同 的 字符 值 。 


7 比特 可 显示 的 ASCII 代码 


结果 描述 


! exclamation mark 


quotation mark 


H number sign 

$ dollar sign 

% percent sign 

& ampersand 

j apostrophe 

( left parenthesis 

) right parenthesis 

i asterisk 

3: plus sign 
comma 

- hyphen 
period 

/ slash 

0 digit 0 

1 digit 1 

2 digit 2 

3 digit 3 

4 digit 4 

5 digit 5 


«|o |-|Oo 


V Il 


€ 


EU = foe "l| O EN v E © 


A EN UI gr 


digit 6 
digit 7 
digit 8 
digit 9 

colon 
semicolon 
less-than 
equals-to 
greater-than 
question mark 
at sign 
uppercase A 
uppercase B 
uppercase C 
uppercase D 
uppercase E 
uppercase F 
uppercase G 
uppercase H 
uppercase | 
uppercase J 
uppercase K 
uppercase L 
uppercase M 
uppercase N 
uppercase O 
uppercase P 
uppercase Q 


uppercase R 


&#54; 
&#55; 
&1t56; 
&#57; 
&#58; 
&1t59; 
&#60; 
&#61; 
&#62; 
&#63; 
&ft64; 
&#65; 
&#66; 
&#67; 
&#68; 
&#69; 
&#70; 
&#7 1; 
&#72; 
&#73; 
&#74; 
&#75; 
&#76; 
&#77; 
&#78; 
&#79; 
&#80; 
&#81; 
&182; 


N|<|x<|s|</c|a|o@ 


— mA 


Cr 


> 


uppercase S 
uppercase T 
uppercase U 
uppercase V 
uppercase W 
uppercase X 
uppercase Y 


uppercase Z 


left square bracket 


backslash 


right square bracket 


caret 
underscore 
grave accent 
lowercase a 
lowercase b 
lowercase c 
lowercase d 
lowercase e 
lowercase f 
lowercase g 
lowercase h 
lowercase | 
lowercase j 
lowercase k 
lowercase | 
lowercase m 
lowercase n 
lowercase o 


lowercase p 


&183; 
&#84; 
&#85; 
&#86; 
&#87; 
&#88; 
&189; 
&#90; 
&#91; 
&#92; 
&#93; 
&#94; 
&#95; 
&#96; 
&#97; 
&198; 
&199; 
&#100; 
&#101; 
&#102; 
&#103; 
&#104; 
&#105; 
&#106; 
&#107; 
&#108; 
&#109; 
&#110; 
&#111; 
&#112; 


q lowercase q &#113; 


r lowercase r &#114; 
S lowercase s &#115; 
t lowercase t &#116; 
U lowercase u &#117; 
V lowercase v &#118; 
Ww lowercase w &#119; 
X lowercase x &#120; 
y lowercase y &#121; 
Z lowercase z &#122; 
{ left curly brace &#123; 
&11124; vertical bar &11124; 
) right curly brace &#125; 
= tilde &#126; 


7 比特 设备 控制 ASCI 


ASCIIl 设 各 控制 代码 最 初 被 设计 为 用 来 控制 诸如 打印 机 和 磁带 驱动 器 之 类 的 硬件 设 
各 。 在 HTML 文 档 中 这 些 代 码 不 会 起 任何 作用 。 


结果 描述 实体 编号 
NUL null character &#00; 
SOH start of header &#01; 
STX start of text &#02; 
ETX end of text &#03; 
EOT end of transmission &#04; 
ENQ enquiry &#05; 
ACK acknowledge &#06; 
BEL bell (ring) &#07; 
BS backspace &#08; 


HT horizontal tab &#09; 


LF 
VT 
FF 
CR 
SO 
SI 
DLE 
DC1 
DC2 
DC3 
DC4 
NAK 
SYN 
ETB 
CAN 
EM 
SUB 
ESC 
FS 
GS 
RS 
US 
DEL 


line feed 
vertical tab 

form feed 
carriage return 
shift out 

shift in 

data link escape 
device control 1 
device control 2 
device control 3 


device control 4 


negative acknowledge 


synchronize 


end transmission block 


cancel 

end of medium 
substitute 
escape 

file separator 
group separator 
record separator 
unit separator 


delete (rubout) 


&#10; 
&#11; 
&#12; 
&#13; 
&#14; 
&#15; 
&#16; 
&#17; 
&#18; 
&#19; 
&#20; 
&#21; 
&#22; 
&#23; 
&#24; 
&#25; 
&#26; 
&#27; 
&128; 
&129; 
&#30; 
&#31; 
&#127; 


HTML ISO-8859-1 参考 手册 


HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符 集 。 
ISO-8859-1 的 较 低 部 分 (从 1 到 127 之 间 的 代码 ) 是 最 初 的 7 LS ASCII, 
ISO-8859-1 的 较 高 部 分 (M 160 到 255 之 间 的 代码 ) 全 都 有 实体 名 称 。 


这 些 符号 中 的 大 多 数 都 可 以 在 不 进行 实体 引用 的 情况 下 使 用 ， 但 是 实体 名 称 或 实体 
编号 为 那些 不 容易 通过 键盘 键 人 的 符号 提供 了 表达 的 方法 。 


注释 : 实体 名 称 对 大 小 写 敏 感 。 


带 有 实体 名 称 的 ASCII 实体 


结果 描述 实体 名 称 实体 编号 
" quotation mark js &#34; 
‘ apostrophe ; &#39; 
& ampersand & &#38; 
< less-than < &#60; 
> greater-than > &#62; 


ISO 8859-1 符号 实体 


结果 描述 实体 名 称 实体 编号 

non-breaking space &#160; 
Y inverted exclamation mark i &#161; 
£ cent ¢ &#162; 
& pound £ &#163; 
a currency H 834164; 
X yen ¥ &#165; 
| broken vertical bar | &#166; 
§ section § &#167; 

spacing diaeresis 7 &#168; 


? convriaht © &#169° 


多 copyright © &#169; 


a feminine ordinal indicator a &#170; 
名 angle quotation mark (left) 《 &#171; 
? negation a &#172; 
- soft hyphen &#173; 
? registered trademark ® &#174; 
了 spacing macron E &#175; 
i degree j &#176; 
f plus-or-minus 二 &#177; 
2 superscript 2 2 &#178; 
3 superscript 3 s &#179; 
: spacing acute ‘ &#180; 
H micro u &#181; 

paragraph T &#182; 

middle dot ; &#183; 
? spacing cedilla i &#184; 
1 superscript 1 : &#185; 
o masculine ordinal indicator is &#186; 
? angle quotation mark (right) » &#187; 
? fraction 1/4 Ya &#188; 
? fraction 1/2 7 &#189; 
? fraction 3/4 Ya &#190; 
? inverted question mark ¿ &#191; 
x multiplication x &#215; 
+ division + &#247; 


ISO 8859-1 字符 实体 


结果 描述 实体 名 称 实体 编号 


a capital a, grave accent A &#192; 


9» < c: 


capital a, acute accent 
capital a, circumflex accent 
capital a, tilde 

capital a, umlaut mark 
Capital a, ring 

capital ae 

capital c, cedilla 

capital e, grave accent 
capital e, acute accent 
capital e, circumflex accent 
capital e, umlaut mark 
capital i, grave accent 
capital i, acute accent 
capital i, circumflex accent 
capital i, umlaut mark 
capital eth, Icelandic 
capital n, tilde 

capital o, grave accent 
capital o, acute accent 
capital o, circumflex accent 
capital o, tilde 

capital o, umlaut mark 
capital o, slash 

capital u, grave accent 
capital u, acute accent 
capital u, circumflex accent 
capital u, umlaut mark 
capital y, acute accent 
capital THORN, Icelandic 


small sharp s, German 


> > 


中 m| m| mi TROO m o 2 0m 


Oi ola 


O 


S| CI O I 


ce uu-c|o 


&#193; 
&#194; 
&#195; 
&#196; 
&#197; 
&#198; 
&#199; 
&#200; 
&#201; 
&#202; 
&#203; 
&1204; 
&#205; 
&#206; 
&#207; 
&#208; 
&#209; 
&#210; 
&#211; 
&#21 2; 
&#213; 
&1214; 
&#216; 
&#217; 
&#218; 
&#219; 
&#220; 
&1221; 
&1222; 
&1223; 


small a, grave accent 
small a, acute accent 
small a, circumflex accent 
small a, tilde 
small a, umlaut mark 
small a, ring 

small ae 

small c, cedilla 

small e, grave accent 
small e, acute accent 
small e, circumflex accent 
small e, umlaut mark 
small i, grave accent 
small i, acute accent 
small i, circumflex accent 
small i, umlaut mark 
small eth, Icelandic 
small n, tilde 

small o, grave accent 
small o, acute accent 
small o, circumflex accent 
small o, tilde 
small o, umlaut mark 
small o, slash 

small u, grave accent 
small u, acute accent 
small u, circumflex accent 
small u, umlaut mark 
small y, acute accent 


small thorn, Icelandic 


&1224; 
&1225; 
&#226; 
&#227; 
&#228; 
&1229; 
&#230; 
&1231; 
&1232; 
&1233; 
&1234; 
&1235; 
&#236; 
&#237; 
&#238; 
&#239; 
&1240; 
&1241; 
&1242; 
&1243; 
&1t244; 
&1245; 
&#246; 
&#248; 
&1249; 
&#250; 
&#251; 
&#252; 
&#253; 
&#254; 
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? small y, umlaut mark y &#255; 
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HTML 4.01 符号 实体 


本 字符 实体 参考 手册 包括 了 数学 符号 、 和 希腊 字符 、 各 种 箭头 记号 、 


状 。 


注释 : 实体 名 称 对 大 小 写 敏 感 。 


HTML 支持 的 数学 符号 
描述 
? for all 
f. part 
? exists 
名 empty 
? nabla 
€ isin 
? notin 
? ni 
p prod 
>: sum 
? minus 
? lowast 
y square root 
x proportional to 
oo infinity 
人 angle 
A and 
V Or 
1 cap 
U cup 
J integral 


实体 名 称 


2Di€|- 


科技 符号 以 及 形 


实体 编号 
&#8704; 
&#8706; 
&#8707; 
&#8709; 
&#87 11; 
8418712; 
8418713; 
&#87 15; 
&#87 19; 
8418721; 
8418722; 
&#8727; 
&#8730; 
&#8733; 
8418734; 
8418736; 
8418743; 
8418744; 
8418745; 
8418746; 
&#8747; 


therefore 


simular to 

? approximately equal 

= almost equal 

* not equal 

E equivalent 

< less or equal 

> greater or equal 

? subset of 

? superset of 

? not subset of 

? subset or equal 

2 superset or equal 

e circled plus 

? cirled times 

L perpendicular 

? dot operator 
HTML 支持 的 希腊 字 

描述 

A Alpha 

B Beta 

[ Gamma 

A Delta 

E Epsilon 

Z Zeta 

H Eta 

© Theta 

| lota 


QIr mwN|Im ela! ow > 


IU In A U hf 


F ® o 


实体 名 称 


&#8756; 
&#8764; 
&#8773; 
&#8776; 
&#8800; 
&#8801; 
&#8804; 
&#8805; 
&#8834; 
&#8835; 
&#8836; 
&#8838; 
&#8839; 
&#8853; 
&#8855; 
&#8869; 
&#8901; 


实体 编号 
841913; 
&#914; 
&#915; 
&#916; 
&#917; 
&#918; 
&#919; 
&#920; 
&#921; 


ma z [Ee > IEN 


U gm O 


Sigmaf 


DO € x 9 < JA M 


O |3 |yn|™ A|l= IDIR 


An < T > RA 


Omicron 
Pi 

Rho 
undefined 
Sigma 
Tau 
Upsilon 
Phi 
Chi 

Psi 
Omega 
alpha 
beta 
gamma 
delta 
epsilon 
zeta 
eta 
theta 
iota 
kappa 
lambda 
mu 

nu 


X 


My Zz) ey, A 


DO € x 9o «x AM U E O 


qD | |yn|™ Oi < D QA 


“Mm < T 2 天 


&#922; 
&#923; 
&1924; 
&1925; 
&#926; 
&#927; 
&#928; 
&1929; 


&1931; 
&1932; 
&#933; 
&1934; 
&#935; 
&#936; 
&#937; 
&#945; 
&#946; 
&#947; 
&1948; 
&1949; 
&1950; 
&1951; 
&#952; 
&#953; 
&#954; 
&1923; 
&#956; 
&#925; 
&#958; 


omicron 

pi 

rho 

sigmaf 
sigma 

tau 

upsilon 

phi 

chi 

psi 

omega 

theta symbol 
upsilon symbol 


pi symbol 


HTML 支持 的 其 他 实体 


Na 


? 
? 


? 


描述 
capital ligature OE 
small ligature oe 
capital S with caron 
small S with caron 
capital Y with diaeres 
f with hook 
modifier letter circumflex accent 
small tilde 
en space 
em space 
thin space 


zero width non-joiner 


gio el;e |x |S 


实体 名 称 


8 m 


UX 


&1959; 
&#960; 
&#96 1; 
&#962; 
&#963; 
&#964; 
&#965; 
&#966; 
&1967; 
&#968; 
&1969; 
&#977; 
&#978; 
&#982; 


实体 编号 
&#338; 
&#339; 
&#352; 
&#353; 
&#376; 
&#402; 
&#7 10; 
&#732; 
&#8194; 
&#8195; 
&#8201; 
&#8204; 


D EM" E 


zero width joiner 
left-to-right mark 
right-to-left mark 

en dash 

em dash 

left single quotation mark 
right single quotation mark 
single low-9 quotation mark 
left double quotation mark 
right double quotation mark 
double low-9 quotation mark 
dagger 

double dagger 

bullet 

horizontal ellipsis 

per mille 

minutes 

seconds 

single left angle quotation 
single right angle quotation 
overline 

euro 

trademark 

left arrow 

up arrow 

right arrow 

down arrow 

left right arrow 

Carriage return arrow 


left ceiling 


&#8205; 
&#8206; 
&#8207; 
&#8211; 
&#82 12; 
&#8216; 
&#8217; 
&#8218; 
&#8220; 
&#8221; 
&#8222; 
&#8224; 
&#8225; 
&#8226; 
&#8230; 
&#8240; 
&#8242; 
&#8243; 
&#8249; 
&#8250; 
&#8254; 
&#8364; 
&#8482; 
&18592; 
&#8593; 
&#8594; 
&#8595; 
&#8596; 
&#8629; 
&#8968; 


right ceiling 
left floor 
right floor 
lozenge 
spade 
club 

heart 


diamond 


* 


&#8969; 
&#8970; 
&#897 1; 
&#9674; 
&#9824; 
&#9827; 
&#9829; 
&#9830; 


HTML URL 编码 


下 面 是 用 URL 编码 形式 表示 的 ASCI 字符 (十 六 进 制 格式 ) 。 
十 六 进 制 格式 用 于 在 浏览 器 和 插件 中 显示 非 标准 的 字母 和 字符 。 


URL 编码 - 从 %00 到 %8f 


ASCII URL- ASCII URL- ASCII URL- 
Value encode Value encode Value encode 
? %00 0 %30 ` %60 
%01 1 %31 a %61 
%02 2 %32 b %62 
%03 3 %33 © %63 
%04 4 %34 d %64 
%05 5 %35 e %65 
%06 6 %36 f %66 
%07 7 %37 g %67 
backspace %08 8 %38 h %68 
tab %09 9 %39 i %69 
linefeed %0a : %3a j %6a 
%0b ; %3b k %6b 
%0c < %3C | %6C 
c return %0d = %3d m %6d 
%0e > %3e n %6e 
%Of q %3f O %6f 
%10 @ %40 p %70 
%11 A %41 q 967 1 
%12 B %42 r %72 
%13 C %43 S %73 
%14 D %44 t %74 


%15 
%16 
%17 
%18 
%19 
%1a 
%1b 
%1c 
%1d 
%1e 
%1f 


I|GQGn,rr 


J 
K 
L 
M 
N 
O 
space %20 P 
! %21 Q 
%22 R 
H %23 S 
$ %24 T 
% %25 U 
& %26 V 
; %27 W 
( %28 X 
) %29 Y 
: 702a Z 
Bi 902b [ 
%2C \ 
- %2d ] 
%2e ^ 
/ %2f 


URL 编码 - 从 %90 到 “ff 


%45 
%46 
9047 
%48 
%49 
%4a 
%4b 
%4c 
%4d 
%4e 
%4f 
%50 
%51 
%52 
%53 
%54 
%55 
%56 
%57 
%58 
%59 
%5a 
%5b 
%OC 
%5d 
%5e 
%5f 


%75 
%76 
%77 
%78 
%79 
%Ta 
%7b 
%7c 
%7d 
%Te 
%7f 
%80 
%81 
%82 
%83 
%84 
%85 
%86 
%87 
%88 
%89 
%8a 
%8b 
%8C 
%8d 
7o8e 
%8f 


ASCII URL- ASCII URL- ASCII URL- 


Value encode Value encode Value encode 
%90 à %c0 e %fO 
%91 a %c1 ? %f1 
%92 ? %c2 Ó %f2 
%93 名 %c3 6 %f3 
%94 ? %c4 ? %f4 
%95 2 %c5 f %f5 
%96 f %c6 ? %f6 

-一 %97 多 %c7 + %f7 
%98 e %c8 2 %f8 
%99 é %c9 ù %f9 
%9a e %ca ú %fa 
%9b R %cb fi %fb 
%9c i %oCC ü ofc 
%9d i %cd y %fd 
%9e ? %ce t %fe 
%9f f %cf fe off 
%a0 D %d0 
Hat y %d1 
%a2 Ó %d2 
%a3 6 %d3 
%a4 ? %d4 
%a5 多 %d5 
%a6 ? %d6 
%a7 %d7 
%a8 ? %d8 
%a9 ù %d9 
%aa ú %da 


%ab ? %db 


I+ 


%ac 
%ad 
%ae 
oat 
%b0 
%b1 
%b2 
%b3 
%b4 
%b5 
%b6 
%b7 
%b8 
%b9 
%ba 
%bb 
%bc 
%bd 
%be 
%bf 


9» 4 -« ci: 


%dc 
%dd 
%de 
%df 
%e0 
%e1 
%e2 
Ye3 
%e4 
Ye5 
%e6 
Ye7 
%e8 
%e9 
%ea 
%eb 
%ec 
%ed 
%ee 


%ef 
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ISO ; ie = ERa 


HTML 的 lang 属性 可 用 于 网 页 或 部 分 网 页 的 语言 。 这 对 搜索 引擎 和 浏览 器 是 有 才 
助 的 。 


根据 W3C 推荐 标准 ， 您 应 该 通过 «html» 标签 中 的 lang 属性 对 每 张 页 面 中 的 主要 
语言 进行 声明 ， 上 比如 : 


<html lang="en"> 
«/html» 
在 XHTML 中 ， 采 用 如 下 方式 在 «html» 标签 中 对 语言 进行 声明 : 
«html xmlns-"http://www.w3.0rg/1999/xhtml" lang="en" xml: lang="en": 
</html> 
4 | 
ISO 639-1 语言 代码 


ISO 639-1 为 各 种 语言 定义 了 缩 略 词 。 您 可 以 在 HTML 和 XHTML 中 的 lang 和 
xml:lang 属性 中 使 用 它们 。 


Language ISO Code 
Abkhazian ab 
Afar aa 
Afrikaans af 
Albanian sq 
Amharic am 
Arabic ar 
Armenian hy 
Assamese as 


Aymara ay 


Azerbaijani 

Bashkir 

Basque 

Bengali (Bangla) 
Bhutani 

Bihari 

Bislama 

Breton 

Bulgarian 

Burmese 
Byelorussian (Belarusian) 
Cambodian 

Catalan 

Cherokee 

Chewa 

Chinese (Simplified) 
Chinese (Traditional) 
Corsican 

Croatian 

Czech 

Danish 

Divehi 

Dutch 

Edo 

English 

Esperanto 

Estonian 

Faeroese 

Farsi 


Fiji 


az 
ba 
eu 
bn 
dz 
bh 
bi 
br 
bg 
my 
be 
km 


ca 


zh 
zh 
CO 
hr 
cs 


da 


nl 


en 
eo 
et 
fo 
fa 


fj 


Finnish 
Flemish 
French 
Frisian 
Fulfulde 
Galician 
Gaelic (Scottish) 
Gaelic (Manx) 
Georgian 
German 
Greek 
Greenlandic 
Guarani 
Gujarati 
Hausa 
Hawaiian 
Hebrew 
Hindi 
Hungarian 
Ibibio 
Icelandic 
Igbo 
Indonesian 
Interlingua 
Interlingue 
Inuktitut 
Inupiak 
Irish 

Italian 


Japanese 


fi 


he, iw 


Javanese 
Kannada 
Kanuri 

Kashmiri 
Kazakh 
Kinyarwanda (Ruanda) 
Kirghiz 

Kirundi (Rundi) 
Konkani 

Korean 

Kurdish 
Laothian 

Latin 

Latvian (Lettish) 
Limburgish ( Limburger) 
Lingala 
Lithuanian 
Macedonian 
Malagasy 
Malay 
Malayalam 
Maltese 

Maori 

Marathi 
Moldavian 
Mongolian 
Nauru 

Nepali 


Norwegian 


Occitan 

Oriya 

Oromo (Afan, Galla) 
Papiamentu 
Pashto (Pushto) 
Polish 
Portuguese 
Punjabi 
Quechua 
Rhaeto-Romance 
Romanian 
Russian 

Sami (Lappish) 
Samoan 

Sangro 

Sanskrit 
Serbian 
Serbo-Croatian 
Sesotho 
Setswana 
Shona 

Sindhi 
Sinhalese 
Siswati 

Slovak 
Slovenian 
Somali 

Spanish 
Sundanese 


Swahili (Kiswahili) 


OC 
or 


om 


ps 
pl 
pt 
pa 
qu 
rm 
ro 


ru 


sm 
Sg 
sa 
sr 
sh 
st 
tn 
sn 
sd 
Si 
SS 
sk 
sl 
SO 
es 
SU 


SW 


Swedish 
Syriac 
Tagalog 
Tajik 
Tamazight 
Tamil 
Tatar 
Telugu 
Thai 
Tibetan 
Tigrinya 
Tonga 
Tsonga 
Turkish 
Turkmen 
Twi 
Uighur 
Ukrainian 
Urdu 
Uzbek 
Venda 
Vietnamese 
Volapuk 
Welsh 
Wolof 
Xhosa 

Yi 
Yiddish 
Yoruba 


Zulu 


SV 


t 
tg 


ta 
tt 
te 
th 
bo 
ti 
to 
ts 
tr 
tk 
tw 
ug 
uk 
ur 


UZ 


vi 
vo 
cy 
wo 


xh 


yi, ji 
yo 


ZU 
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HTTP 状态 消息 


当 浏 览 器 从 web 服务 器 请 求 服务 时 ， 可 能 会 发 生 错 误 。 


从 而 有 可 能 会 返 


1xx: 信息 
消息 : 


100 Continue 


101 Switching 


Protocols 


2xx: 成 功 


消息 : 
200 OK 
201 Created 


202 
Accepted 


203 Non- 
authoritative 
Information 


204 No 
Content 


205 Reset 
Content 


206 Partial 
Content 


3xx: 重 定 向 


回 下 面 的 一 系列 状态 消息 : 


描述 : 


服务 器 仅 接 收 到 部 分 请 求 ， 但 是 一 旦 服务 器 并 没有 拒绝 该 请 
求 ， 客 户 端 应 该 继续 发 送 其 余 的 请 求 。 


服务 器 转换 协议 : 服务 器 将 遵从 客户 的 请 求 转换 到 另外 一 种 协 
议 。 


描述 : 
请 求 成 功 〈 其 后 是 对 GET 和 POST 请 求 的 应 答 文 档 。 ) 
请 求 被 创建 完成 ， 同 时 新 的 资源 被 创建 。 


供 处 理 的 请 求 已 被 接受 ， 但 是 处 理 未 完成 。 


文档 已 经 正常 地 返回 ， 但 一 些 应 答 头 可 能 不 正确 ， 因 为 使 用 的 
是 文档 的 拷贝 。 


没有 新 文档 。 浏 览 器 应 该 继续 显示 原来 的 文档 。 如 果 用 户 定 期 
地 刷新 页 面 ， 而 Servlet 可 以 确定 用 户 文档 足够 新 ， 这 个 状态 代 
码 是 很 有 用 的 。 


没有 新 文档 。 但 浏览 器 应 该 重 置 它 所 显 
览 器 清除 表单 输入 内 容 。 


示 的 内 容 。 用 来 强制 济 


客户 发 送 了 一 个 带 有 Range 头 的 GET 请 求 ， 服 务 器 完成 了 它 。 


saw 
消息 : 


300 Multiple 
Choices 


301 Moved 
Permanently 


302 Found 


303 See 
Other 


304 Not 
Modified 


305 Use 
Proxy 


306 Unused 
307 


Temporary 
Redirect 


描述 : 
多 重 选择 。 链 接 列表 。 用 户 可 以 选择 某 链接 到 达 目 的 地 。 最 多 
允许 五 个 地 址 。 
所 请 求 的 页 面 已 经 转移 至 新 的 url。 
所 请 求 的 页 面 已 经 临时 转移 至 新 的 url。 
所 请 求 的 页 面 可 在 别 的 url 下 被 找到 。 


未 按 预 期 修改 文档 。 客 户 端 有 缓冲 的 文档 并 发 出 了 一 个 条 件 性 
的 请 求 (一般 是 提供 |f-Modified-Since 头 表示 客户 只 想 比 指定 日 
期 更 新 的 文档 ) 。 服 务 器 告诉 客户 ， 原 来 缓冲 的 文档 还 可 以 继 
续 使 用 。 

客户 请 求 的 文档 应 该 通过 Location 头 所 指明 的 代理 服务 器 提 
取 。 


此 代码 被 用 于 前 一 版 本 。 目 前 已 不 再 使 用 ， 但 是 代码 依然 被 保 
Ao 


被 请 求 的 页 面 已 经 临时 移 至 新 的 url。 


消息 : 
400 Bad 
Request 


401 
Unauthorized 


402 Payment 
Required 


403 Forbidden 
404 Not Found 


405 Method Not 
Allowed 


406 Not 
Acceptable 


407 Proxy 
Authentication 
Required 


408 Request 
Timeout 


409 Conflict 
410 Gone 


411 Length 
Required 


412 Precondition 
Failed 


413 Request 
Entity Too Large 


414 Request-url 
Too Long 


415 
Unsupported 
Media Type 


416 


417 Expectation 
Failed 


Br 
EH 


服务 器 未 能 理解 请 求 。 
被 请 求 的 页 面 需要 用 户 名 和 密码 。 


此 代码 尚 无 法 使 用 。 


对 被 请 求 页 面 的 访问 被 禁止 。 
服务 器 无 法 找到 被 请 求 的 页 面 。 


请 求 中 指定 的 方法 不 被 允许 。 
服务 器 生成 的 响应 无 法 被 客户 端 所 接受 。 


用 户 必须 首先 使 用 代理 服务 器 进行 验证 ， 这 样 请 求 才 会 被 
处 理 。 


请 求 超出 了 服务 器 的 等 待 时 间 。 


由 于 冲突 ， 请 求 无 法 被 完成 。 
被 请 求 的 页 面 不 可 用 。 
"Content-Length" 未 被 定义 。 如 果 无 此 内 容 ， 服 务 器 不 会 


接受 请 求 。 
请 求 中 的 前 提 条 件 被 服务 器 评估 为 失败 。 
由 于 所 请 求 的 实体 的 太 大 ， 服 务 器 不 会 接受 请 求 。 


由 于 url 太 长 ， 服 务 器 不 会 接受 请 求 。 当 post 请 求 被 转换 为 
带 有 很 长 的 查询 信息 的 get 请 求 时 ， 就 会 发 生 这 种 情况 。 


由 于 媒介 类 型 不 被 支持 ， 服 务 器 不 会 接受 请 求 。 


服务 器 不 能 满足 客户 在 请 求 中 指定 的 Range 头 。 


5xx: HRA aa REX 


消息 : 
500 Internal Server Error 


501 Not Implemented 
502 Bad Gateway 


503 Service Unavailable 
504 Gateway Timeout 


505 HTTP Version Not 
Supported 


请 求 未 完成 。 
请 求 未 完成 。 


请 求 未 完成 。 
的 响应 。 


请 求 未 完成 。 
网 关 超 时 。 


描述 : 
服务 器 遇 到 不 可 预知 的 情况 。 
服务 器 不 支持 所 请 求 的 功能 。 
服务 器 从 上 游 服务 器 收 到 一 个 无 效 


服务 器 临时 过 载 或 当 机 。 


服务 器 不 支持 请 求 中 指明 的 HTTP 协 议 版 本 。 


HTTP 方法 : GET 对 比 POST 


两 种 最 常用 的 HTTP 方法 是 : GET 和 POST。 


什么 是 HTTP ? 


超 文 本 传输 协议 (HTTP) 的 设计 目的 是 保证 客户 机 与 服务 器 之 间 的 通信 。 
HTTP 的 工作 方式 是 客户 机 与 服务 器 之 间 的 请 求 -应 答 协议 。 
web 浏览 器 可 能 是 客户 端 ， 而 计算 机 上 的 网 络 应 用 程序 也 可 能 作为 服务 器 端 。 


举例 : 客户 端 (浏览 器 ) 向 服务 器 提交 HTTP 请 求 ; 服务 器 向 客户 端 返回 响应 。 响 
应 包含 关于 请 求 的 状态 信息 以 及 可 能 被 请 求 的 内 容 。 


两 种 HTTP 请 求 方法 : GET 和 POST 
在 客户 机 和 服务 器 之 间 进 行 请 求 - 响 应 时 ， 两 种 最 常 被 用 到 的 方法 是 : GET 和 
POST, 


e GET - 从 指定 的 资源 请 求 数据 。 
e POST - 向 指定 的 资源 提交 要 被 处 理 的 数据 


GET 方法 
请 注意 ， 查 询 字符 串 〔 名 称 / 值 对 ) 是 在 GET 请 求 的 URL 中 发 送 的 : 


/test/demo form.asp?namei1-valuei&name2-value2 


有 关 GET 请 求 的 其 他 一 些 注释 : 


GET 请 求 可 被 缓存 

GET 请 求 保留 在 浏览 器 历史 记录 中 
GET 请 求 可 被 收藏 为 书签 

GET 请 求 不 应 在 处 理 敏感 数据 时 使 用 
GET 请 求 有 长 度 限制 

GET 请 求 只 应 当 用 于 取 回 数据 


POST 方法 


请 注意 ， 查 询 字符 串 (名 称 / 值 对 ) 是 在 POST 请 求 的 HTTP 消息 主体 中 发 送 的 : 


POST /test/demo_form.asp HTTP/1.1 
Host: w3schools.com 
namei-valuei&name2-value2 


有 关 POST 请 求 的 其 他 一 些 注释 : 


POST 请 求 不 会 被 缓存 

POST 请 求 不 会 保留 在 浏览 器 历史 记录 中 
POST 不 能 被 收藏 为 书签 

POST 请 求 对 数据 长 度 没 有 要 求 


比较 GET 与 POST 


下 面 的 表格 比较 了 两 种 HTTP 方法 : GET 和 POST。 


Ht Ht tt 


ISI 


GET 


xu 
可 收藏 为 书签 
能 被 缓存 


application/x-www-form-urlencoded 


参数 保留 在 浏览 器 历史 中 。 


是 的 。 = SRE GET Ale URL 
an BAKKER 2048 d c 符 ) 。 


只 人 允许 ASCI 字符 。 


5 POST 相 比 ，GET 的 安全 性 较 差 ， 
为 所 发 送 的 数据 是 URL 的 一 部 分 。 在 发 
送 密码 或 其 他 敏感 信息 时 绝 不 要 使 用 
GET ! 


数据 在 URL 中 对 所 有 人 都 是 可 见 的 。 


POST 


数据 会 被 重新 提交 (浏览 器 
应 该 告知 用 户 数据 会 被 重新 


不 可 收藏 为 书签 


不 能 缓存 


application/x-www-form- 
urlencoded 或 
multipart/form-data, 7j — 3t 
制 数据 使 用 多 重 编码 。 
参数 不 会 保存 在 浏览 器 历史 


o 


无 限制 。 


也 人 允许 二 进 制 数 
m 


POST tt GET 更 安全 ， 
为 参数 不 会 被 保存 在 浏览 器 
历史 或 web 服务 器 日 志 中 。 


数据 不 会 显示 在 URL 中 。 


其 他 HTTP 请 求 方法 
下 面 的 表格 列 出 了 其 他 一 些 HTTP 请 求 方 法 : 


方法 
HEAD 
PUT 
DELETE 
OPTIONS 
CONNECT 


描述 
与 GET 相同 ， 但 只 返回 HTTP 报头 ， 不 返回 文档 主体 。 
上 传 指定 的 URI 表示 。 
删除 指定 资源 。 
返回 服务 器 支持 的 HTTP 方法 。 
把 请 求 连接 转换 到 透明 的 TCP/IP 通道 。 


W3School CSS 教 程 


来 源 : CSS 教 程 
整理 : 飞龙 


CSS 样式 


CSS 背景 


CSS 人 允许 应 用 纯色 作为 背景 ， 也 人 允许 使 用 背景 图 像 创 建 相当 复杂 的 效果 。 
CSS 在 这 方面 的 能 力 远 远 在 HTML 之 上 。 
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可 以 使 用 background-color 属性 为 元 素 设置 背景 色 。 这 个 属性 接受 任何 合法 的 颜色 
值 。 


这 条 规则 把 元 素 的 背景 设置 为 灰色 : 


p {background-color: gray; } 


如 果 您 希望 背景 色 从 元 素 中 的 文本 向 外 少 有 延伸 ， 只 需 增 加 一 些 内 边 距 : 
p {background-color: gray; padding: 20px;} 
如 需 查 看 本 例 的 效果 ， 可 以 ! 


可 以 为 所 有 元 素 设 置 背 景色 ， 这 包括 body 一 直到 em 和 a 等 行内 元 素 。 


background-color 不 能 继承 ， 其 默认 值 是 transparent。transparent 有 “透明 ”之 意 。 
也 就 是 说 ， 如 果 一 个 元 素 没 有 指定 背景 色 ， 那 么 背景 就 是 透明 的 ， 这 样 其 祖先 元 素 
的 背景 才能 可 见 。 


背景 图 像 


要 把 图 像 放 入 背景 ， 需 要 使 用 background-image 属性 。background-image 属性 的 
默认 值 是 none， 表 示 背 景 上 没有 放置 任何 图 像 。 


如 果 需 要 设置 一 个 背景 图 像 ， 必 须 为 这 个 属性 设置 一 个 URL 值 : 


body {background-image: url(img/eg_bg_04.gif);} 


大 多 数 背 景 都 应 用 到 body 元 素 ， 不 过 并 不 仅 限于 此 。 
下 面 例子 为 一 个 段落 应 用 了 一 个 背景 ， 而 不 会 对 文档 的 其 他 部 分 应 用 背景 : 


p.flower {background-image: url(img/eg_bg_03.gif);} 


您 其 至 可 以 为 行内 元 素 设置 背景 图 像 ， 下 面 的 例子 为 一 个 链接 设置 了 背景 图 像 : 


a.radio {background-image: url(img/eg_bg_07.gif);} 


如 需 查 看 上 述 例子 的 效果 ， 可 以 ! 


理论 上 讲 ， 基 至 可 以 向 textareas 和 select 等 替换 元 素 的 背景 应 用 图 像 ， 不 过 并 不 
是 所 有 用 户 代 理 都 能 很 好 地 处理 这 种 情况 。 


另外 还 要 补充 一 点 ，background-image 也 不 能 继承 。 事 实 上 ， 所 有 背景 属性 都 不 
能 继承 。 


背景 重复 


如 果 需 要 在 页 面 上 对 背景 图 像 进行 平 铺 ， 可 以 使 用 background-repeat 属性 。 


属性 值 repeat 导致 图 像 在 水 平 垂直 方向 上 都 平 铺 ， 就 像 以 往 背 景 图 像 的 通常 做 法 一 
样 。repeat-x 和 repeat-y 分 别 导致 图 像 只 在 水 平 或 垂直 方向 上 重复 ，no-repeat 则 
不 允许 图 像 在 任何 方向 上 平 铺 。 


默认 地 ， 背 景 图 像 将 从 一 个 元 素 的 左上 角 开 始 。 请 看 下 面 的 例子 
body 
{ 
background-image: url(img/eg_bg_03.gif); 


background-repeat: repeat-y; 


} 


如 需 查看 上 例 的 效果 ， 可 以 。 


abe 


SAE 


可 以 利用 background-position 属性 改变 图 像 在 背景 中 的 位 置 。 
下 面 的 例子 在 body 元 素 中 将 一 个 背景 图 像 居 中 放置 : 
body 
{ 
background-image:url('/i/eg bg 03.gif'); 


background-repeat:no-repeat; 
background-position:center; 


为 background-position 属性 提供 值 有 很 多 方法 。 首 先 ， 可 以 使 用 一 些 关 键 字 : 
top. bottom, left, right 和 center, 通常 ， 这 些 关 键 字 会 成 对 出 现 ， 不 过 也 不 总 是 
这 样 。 还 可 以 使 用 长 度 值 ， 如 100px 或 5cm， 最 后 也 可 以 使 用 百分数 值 。 不 同类 
型 的 值 对 于 背景 图 像 的 放置 稍 有 差异 。 

AE 

图 像 放置 关键 字 最 容易 理解 ， 其 作用 如 其 名 称 所 表明 的 。 例 如 ，top right HARM 
置 在 元 素 内 边 距 区 的 右上 和 角 。 


根据 规范 ， 位 置 关 键 字 可 以 按 任何 顺序 出 现 ， 只 要 保证 不 超过 两 个 关键 字 - 一 个 对 
应 水 平方 向 ， 另 一 个 对 应 垂直 方向 。 


如 果 只 出 现 一 个 关键 字 ， 则 认为 另 一 个 关键 字 是 center. 
所 以 ， 如 果 希 望 每 个 段落 的 中 部 上 方 出 现 一 个 图 像 ， 只 需 声明 如 下 : 


background-image:url('bgimg.gif'); 
background-repeat:no-repeat; 
background-position:top; 


下 面 是 等 价 的 位 置 关键 字 : 


单一 关键 字 等 价 的 关键 字 
center center center 
top top center 或 center top 
bottom bottom center 或 center bottom 
right right center 或 center right 
left left center 或 center left 
百分数 值 


百分数 值 的 表现 方式 更 为 复杂 。 假 设 你 希望 用 百分数 值 业 图 像 在 其 元 素 中 居中 ， 这 
很 容易 : 


body 
{ 


background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-position:50% 50%; 


会 导致 图 像 适当 放置 ， 其 中 心 与 其 元 素 的 中 心 对 齐 。 换 句 话说， 百分数 值 同时 应 
ae era ib. 也 就 是 说 ， 图 像 中 描述 为 50965096 的 点 (中 心 点 ) 与 元 素 中 描 
述 为 5096 50% 的 点 (HDR) 对 齐 。 


如 果 图 像 位 于 0% 0%， 其 左上 和 角 将 放 在 元 素 内 边 距 区 的 左上 角 。 如 果 图 像 位 置 是 
100% 100%， a 边 距 的 右 下 角 。 


因此 ， 如 果 你 想 把 一 个 图 像 放 在 水 平方 向 2/03、 垂 直方 向 1/3 处 ， 可 以 这 样 声明 : 


body 


{ 
background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-position: 66% 33%; 

} 


如 果 只 提供 一 个 百分数 值 ， 所 提供 的 这 个 值 将 用 作 水 平 值 ， 垂 直 值 将 假设 为 50%。 
这 一 点 与 关键 字 类 似 。 


background-position 的 默认 值 是 0% 0%， 在 功能 上 相当 于 top left。 这 就 解释 了 背 
景 图 像 为 什么 总 是 从 元 素 内 边 距 区 的 左上 角 开 始 平 铺 ， 除 非 您 设置 了 不 同 的 位 置 
值 。 


长 度 值 
长 度 值 解 释 的 是 元 素 内 边 距 区 左上 角 的 偏 移 。 偏 移 点 是 图 像 的 左上 和 角 。 


比如 ， 如 果 设 置 值 为 50px 100px， 图 像 的 左上 角 将 在 元 素 内 边 距 区 左上 和 角 向 右 50 
像素 、 向 下 100 像素 的 位 置 上 : 


body 


{ 
background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-position:50px 100px; 

j 


注意 ， 这 一 点 与 百分数 值 不 同 ， 因 为 偏 移 只 是 从 一 个 左上 角 到 另 一 个 左上 角 。 也 就 
是 说 ， 图 像 的 左上 角 与 background-position 声明 中 的 指定 的 点 对 齐 。 


ERAR 

如 果 文 档 比 较 长 ， 那 么 当 文 档 向 下 滚动 时 ， 背 景 图 像 也 会 随 之 滚动 。 当 文档 滚动 到 
超过 图 像 的 位 置 时 ， 图 像 就 会 消失 。 

您 可 以 通过 background-attachment 属性 防止 这 种 滚动 。 通 过 这 | 个 属性 ， 可 以 声明 
图 像 相 对 于 可 视 区 是 固定 的 (fixed) ， 因 此 不 会 受到 滚动 的 影响 


body 


{ 
background-image:url(img/eg_bg_02.gif); 
background-repeat:no-repeat; 
background-attachment: fixed 


} 


如 需 查 看 上 例 的 效果 ， 可 以 。 
background-attachment 属性 的 默认 值 是 scroll， 也 就 是 说 ， 在 默认 的 情况 下 ， 背 景 
会 随 文档 滚动 。 


CSS 背景 实例 

设置 背景 颜色 
设置 文本 的 背景 颜色 

将 图 像 设 置 为 背景 
将 图 像 设 置 为 背景 

如 何 重复 背景 图 像 

如 何在 垂直 方向 重复 背景 图 像 
如 何在 水 平方 向 重复 背景 图 像 
如 何 仅 显示 一 次 背景 图 像 

如 何 放置 背景 图 像 

如 何 使 用 % 来 定位 背景 图 像 
如 何 使 用 像素 来 定位 背景 图 像 
如 何 设置 固定 的 背景 图 像 

所 有 背景 属性 在 一 个 声明 之 中 


CSS 背景 属性 


ff 
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属性 
background 
background-attachment 
background-color 
background-image 
background-position 


background-repeat 


CSS 背景 


描述 
简写 属性 ， 作 用 是 将 背景 属性 设置 在 一 个 声明 中 。 
背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 。 
JIRA RE. 
把 图 像 设 置 为 背景 。 
设置 背景 图 像 的 起 始 位 置 
设置 背景 图 像 是 否 及 如 何 重复 。 
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CSS 文本 


CSS 文本 属性 可 定义 文本 的 外 观 。 

通过 文本 属性 ， 您 可 以 改变 文本 的 颜色 、 字 符 间 距 ， 对 齐 文本 ， 装 饰 文 本 ， 对 文本 
进行 缩 进 ， 等 等 。 

缩 进 文本 

把 Web 页 面 上 的 段落 的 第 一 行 缩 进 ， 这 是 一 种 最 常用 的 文本 格式 化 效果 。 

CSS 提供 了 text-indent 属性 ， 该 属性 可 以 方便 地 实现 文本 缩 进 。 


通过 使 用 text-indent 属性 ， 所 有 元 素 的 第 一 行 都 可 以 缩 进 一 个 给 定 的 长 度 ， 甚 至 该 
长 度 可 以 是 负 值 。 


这 个 属性 最 常见 的 用 途 是 将 段落 的 首 行 缩 进 ， 下 面 的 规则 会 使 所 有 段落 的 首 行 缩 进 
5em: 


p {text-indent: 5em;} 


注意 : 一 般 来 说 ， 可 以 为 所 有 块 级 元 素 应 用 text-indent， 但 无 法 将 该 属性 点 用 于 行 
内 元 素 ， 图 像 之 类 的 替换 元 素 上 也 无 法 应 用 text-indent 属性 。 不 过 ， 如 果 一 个 块 级 
TR (比如 段落 ) 的 首 行 中 有 一 个 图 像 ， 它 会 随 该 行 的 其 余 文 本 移动 。 

提示 : 如 果 想 把 一 个 行内 元 素 的 第 一 行 “ 缩 进 "， 可 以 用 左 内 边 距 或 外 边 距 创造 这 种 
效果 。 

使 用 负 值 


text-indent 还 可 以 设置 为 负 值 。 利 用 这 种 技术 ， 可 以 实现 很 多 有 趣 的 效果 ， 比 如 "有 其 
挂 缩 进 ”， 即 第 一 行 悬 挂 在 元 素 中 余下 部 分 的 左边 : 


p {text-indent: -5em;} 


不 过 在 为 text-indent 设置 负 值 时 要 当心 ， 如 果 对 一 个 段落 设置 了 负 值 ， 那 么 首 行 的 
某 些 文本 可 能 会 超出 浏览 器 窗口 的 左边 界 。 为 了 避免 出 现 这 种 显示 问题 ， 建 议 针对 
负 缩 进 再 设置 一 个 外 边 距 或 一 些 内 边 距 : 


p (text-indent: -5em; padding-left: 5em;} 


使 用 百分比 值 


text-indent 可 以 使 用 所 有 长 度 单位 ， 包 括 百 分 比值 。 


百分数 要 相对 于 缩 进 元 素 父 元 素 的 宽度 。 换 句 话说 ， 如 果 将 缩 进 值 设置 为 20%， 所 
影响 元 素 的 第 一 行 会 缩 进 其 父 元 素 宽 度 的 20%。 


在 下 例 中 ， 缩 进 值 是 父 元 素 的 20%， 即 100 个 像素 : 


div {width: 500px;} 
p {text-indent: 20%;} 


<div> 
<p>this is a paragragh</p> 
</div> 


继承 
text-indent 属性 可 以 继承 ， 请 考虑 如 下 标记 : 


div#outer (width: 500px; } 
div#inner {text-indent: 10%; } 
p (width: 200px;} 


«div id="outer"> 

«div id="inner">some text. some text. some text. 
<p>this is a paragragh.</p> 

«/div» 

«/div» 


E S 会 缩 进 50 像素 ， 这 是 因为 这 个 段落 继承 了 id 为 inner 的 div 
元 素 的 缩 进 


水 平 对 齐 


text-align 是 一 个 基本 的 属性 ， 它 会 影响 一 个 元 素 中 的 文本 行 互相 之 间 的 对 齐 方 式 。 
它 的 前 3 个 值 相 当 直 接 ， 不 过 第 4 个 和 第 5 个 则 略 有 些 复 灯 。 


值 left、right 和 center 会 导致 元 素 中 的 文本 分 别 左 对 齐 、 右 对 齐 和 居中 。 


西方 语言 都 是 从 左 向 右 读 ， 所 有 text-align 的 默认 值 是 left。 文 本 在 左边 界 对 齐 ， 右 
边界 呈 锯 齿 状 〈 称 为 “从 左 到 右 " 文 本 ) 。 对 于 希 伯 来 语 和 阿拉 伯 语 之 类 的 的 语言 ， 
text-align 则 默认 为 right， 因 为 这 些 语 BM. 不 出 所 料 ，center 会 使 每 个 
文本 行 在 元 素 中 居中 。 


提示 : 将 块 级 元 素 或 表 元 素 居中 ， 要 通过 在 这 些 元 素 上 适当 地 设置 左 、 右 外 边 距 来 
实现 。 


text-align:center 与 <CENTER> 


您 可 能 会 认为 textralign:center 与 «CENTER» 元 素 的 作用 一 样 ， 但 实际 上 二 者 大 
不 相同 。 


«CENTER? 不 仅 影 响 文 本 ， 还 会 把 整个 元 素 居中 。text-align 不 会 控制 元 素 的 对 
3r, m 而 只 影响 内 部 内 容 。 元 素 本 身 不 会 从 一 段 移 到 另 一 端 ， 只 是 其 中 的 文本 受 影 
响 。 

justify 

最 后 一 个 水 平 对 齐 属 性 是 justify。 


在 两 端 对 齐 文 本 中 ， 文 本 行 的 左右 两 端 都 放 在 父 元 素 的 内 边界 上 。 然 后 ， 调 整 单词 
和 字母 间 的 间隔 ， 使 各 行 的 长 度 恰好 相等 。 您 也 许 已 经 注意 到 了 ， 两 端 对 齐 文 本 在 
打印 领域 很 常见 


需要 注意 的 是 ， 要 由 用 户 代理 (而 不 是 CSS) 来 确定 两 端 对 齐 文 本 如 何 拉 伸 ， 以 填 


满 父 元 素 左 右边 界 之 间 的 空间 。 如 需 了 解 详 情 ， 请 参阅 CSS ne -align 属性 参考 
To 


ri qmm 
+ [8] bs 
word-spacing 属性 可 以 改变 字 (单词 ) 之 间 的 标准 间隔 。 其 默认 值 normal 与 设置 
值 为 0 是 一 样 的 。 
word-spacing 属性 接受 一 个 正 长 度 值 或 负 长 度 值 。 如 果 提 供 一 个 正 长 度 值 ， 那 么 字 
之 间 的 间隔 就 会 增加 。 为 word-spacing 设置 一 个 负 值 ， 会 把 它 拉 近 : 
p.spread {word-spacing: 30px;} 
p.tight {word-spacing: -0.5em;) 
«p class="Spread"> 
This is a paragraph. The spaces between words will be increased. 
</p> 
<p class="tight"> 


This is a paragraph. The spaces between words will be decreased. 
</p> 


实例 TIY : 增加 或 减少 单词 间距 〈 字 间隔 ) 
注释 : 如 需 深 入 理解 CSS 对 “ 字 ”(word) 的 定义 ， 请 访问 CSS word-spacing 属性 


字母 间隔 


letter-spacing 属性 与 word-spacing 的 区 别 在 于 ， 字 母 间 隔 修改 的 是 字符 或 字母 之 
间 的 间隔 。 


与 word-spacing 属性 一 样 ，letter-spacing 属性 的 可 取 值 包括 所 有 长 度 。 默 认 关 键 
FÆ normal (3x4 letter-spacing:0 相同 ) 。 输 入 的 长 度 值 会 使 字母 之 间 的 间隔 增 
加 或 减少 指定 的 量 : 


hi {letter-spacing: -0.5em} 
h4 {letter-spacing: 20px} 


<hi>This is header 1</h1> 
<h4>This is header 4</h4> 


实例 TIY : 规定 字符 间距 (字母 间隔 ) 


字符 转换 


text-transform 属性 处 理 文本 的 大 小 写 。 这 个 属性 有 4 个 值 : 


none 
uppercase 
lowercase 
capitalize 


默认 值 none 对 文本 不 做 任何 改动 ， 将 使 用 源 文档 中 的 原 有 大 小 写 。 顾 名 思 义 ， 
uppercase 和 lowercase 将 文本 转换 为 全 大 宇和 全 小 写字 符 。 最 后 ，capitalize 只 
对 每 个 单词 的 首 字 母 大 写 。 


作为 一 个 属性 ，text-transform 可 能 无 关 紧 要 ， 不 过 如 果 您 突然 决定 把 所 有 h1 元 素 
变 为 大 写 ， 这 个 属性 就 很 有 用 。 不 必 单 独 地 修改 所 有 h1 元 素 的 内 容 ， 只 需 使 用 
text-transform 为 你 完成 这 个 修改 : 


h1 {text-transform: uppercase} 


使 用 text-transform 有 两 方面 的 好 人 处。 首先 ， 只 需 写 一 个 简单 的 规则 来 完成 这 个 修 
改 ， 而 无 需 修改 h1 元 素 本 身 。 其 次 ， 如 果 您 以 后 决定 将 所 有 大 小 写 再 切换 为 原来 
的 大 小 写 ， 可 以 更 容易 地 完成 修改 。 


实例 TY : 控制 文本 中 字母 的 大 小 宇 
MARE hi 
接 下 来 ， 我 们 讨论 text-decoration 属性 ， 这 是 一 个 很 有 意思 的 属性 ， 它 提供 了 很 多 


非常 有 趣 的 行为 。 
text-decoration 有 5 个 值 : 


none 
underline 
overline 
line-through 
blink 


AHA, underline 会 对 元 素 加 下 划 线 ， 就 像 HTML 中 的 U 元 素 一 样 。overline 
的 作用 恰好 相反 ， 会 在 文本 的 顶端 画 一 个 上 划 线 。 值 line-through 则 在 文本 中 间 画 
一 个 贯穿 线 ， 等 价 于 HTML 中 的 All strike 元 素 。blink 会 让 文本 闪烁 ， 类 似 于 
Netscape 支持 的 颇 招 非议 的 blink 标记 。 


none 值 会 关闭 原本 应 用 到 一 个 元 素 上 的 所 有 装饰 。 通 常 ， 无 装饰 的 文本 是 默认 外 


观 ， 但 也 不 总 是 这 样 。 例 如 ， 链 接 默 认 地 会 有 下 划 线 。 如 果 您 希望 去 掉 超 链接 的 下 
划 线 ， 可 以 使 用 以 下 CSS 来 做 到 这 一 点 : 


a {text-decoration: none; } 


注意 : 如 果 显 式 地 用 这 样 一 个 规则 去 掉 链 接 的 下 划 线 ， 那 么 锚 与 正常 文本 之 间 在 视 
觉 上 的 唯一 差别 就 是 颜色 (至少 默认 是 这 样 的， 不 过 也 不 能 完全 保证 其 颜色 肯定 有 
区 别 ) 。 

还 可 以 在 一 个 规则 中 结合 多 种 装饰 。 如 果 希 望 所 有 超 链 接 既 有 下 划 线 ， 又 有 上 划 
线 ， 则 规则 如 下 : 


a:link a:visited {text-decoration: underline overline; } 


不 过 要 注意 的 是 ， 如 果 两 个 不 同 的 装饰 都 与 同一 元 素 匹 配 ， 胜 出 规则 的 值 会 完全 取 
代 另 一 个 值 。 请 考虑 以 下 的 规则 : 


h2.stricken {text-decoration: line-through; } 
h2 {text-decoration: underline overline; } 


对 于 给 定 的 规则 ， 所 有 class 为 stricken 的 h2 元 素 都 只 有 一 个 贯穿 线装 饰 ， 而 没 
有 下 划 线 和 上 划 线 ， 因 为 text-decoration 值 会 替换 而 不 是 累积 起 来 。 


处 理 空白 符 


white-space 属性 会 影响 到 用 户 代 理 对 源 文 档 中 的 空格 、 换 行 和 tab 字符 的 处 理 。 


通过 使 用 该 属性 ， 可 以 影响 浏览 器 处 理 字 之 间 和 文本 行 之 间 的 空白 符 的 方式 。 从 某 
种 程度 上 讲 ， 默 认 的 XHTML 义理 已 经 完成 了 空白 符 处 理 : 它 会 把 所 有 空白 符合 并 
为 一 个 空格 。 所 以 给 定 以 下 标记 ， 它 在 Web 浏览 器 中 显示 时 ， 各 个 字 之 间 只 会 显 
示 一 个 空格 ， 同 时 忽略 元 素 中 的 换行 : 


<p>This paragraph has many 
Spaces in it.</p> 


可 以 用 以 下 声明 显 式 地 设置 这 种 默认 行为 : 


p {white-space: normal;j 


上 面 的 规则 告诉 浏览 器 按照 平常 的 做 法 去 处 理 : 丢掉 多 余 的 空白 符 。 pec 
i 换行 字符 (Il) 会 转换 为 空格 ， 一 行 中 多 个 空格 的 序列 也 会 转换 为 一 


实例 TIY : white-space: normal 


值 pre 
不 过 ， 如 果 将 white-space 设置 为 pre， 受 这 -1 空白 符 的 处 理 
就 有 所 不 同 ， 其 行为 就 像 XHTML 的 pre 元 素 一 空白 符 不 会 被 忽略 。 


如 果 white-space 属性 的 值 为 pre， 浏 览 器 将 会 注意 额外 的 空格 ， 甚 至 回 车 。 在 这 
个 方面 ， 而 且 仅 在 这 个 方面 ， 任何 元 素 都 可 以 相当 于 一 个 pre 元 素 。 


实例 TIY : white-space: pre 
注意 : 经 测试 ，IE 7 以 及 更 早 版 本 的 浏览 器 不 支持 该 值 ， 因 此 请 使 用 非 IE 的 浏览 
器 来 查看 上 面 的 实例 。 


值 nowrap 


与 之 相对 的 值 是 nowrap， 它 会 防止 元 素 中 的 文本 换行 ， 除非 使 用 了 一 个 br 元 素 。 
在 CSS 中 使 用 nowrap 非常 类 似 于 HTML 4 中 用 «td nowrap> 将 一 个 表单 元 格 设 
置 为 不 能 换行 ， 不 过 white-space 值 可 以 应 用 到 任何 元 素 。 


实例 TIY : white-space: nowrap 


{4 pre-wrap 和 pre-line 
CSS2.1 8I A T 44 pre-wrap 和 pre-line， 这 在 以 前 版 本 的 CSS 中 是 没有 的 。 这 些 
值 的 作用 是 允许 创作 人 员 更 好 地 控制 空白 符 处 理 。 


如 果 元 素 的 white-space 设置 为 pre-wrap， 那 么 该 元 素 中 的 文本 会 保留 空白 符 序 
列 ， 但 是 文本 行 会 正常 地 换行 。 如 果 设 置 为 这 个 值 ， 源 文本 中 的 行 分 隔 符 以 及 生成 
的 行 分 隔 符 也 会 保留 。pre-line 与 pre-wrap 相反 ， 会 像 正常 文本 中 一 样 合 并 空白 符 
序列 ， 但 保留 换行 符 。 


实例 TIY : white-space: pre-wrap 
实例 TIY : white-space: pre-line 


注意 : 我 们 在 IE7 和 FireFox2.0 浏览 器 中 测试 了 上 面 的 两 个 实例 ， 但 是 结果 是 ， 值 
pre-wrap 和 pre-line 都 没有 得 到 很 好 的 支持 。 


总 结 


^ 


下 面 的 表格 总 结 了 white-space 属性 的 行为 : 


值 
pre-line 
normal 
nowrap 
pre 


pre-wrap 


SARA A 


空白 符 


换行 符 
保留 
忽略 
忽略 
保留 
保留 


目 动 换行 


如 果 您 阅读 的 是 英文 书籍 ， 就 会 从 左 到 右 、 从 上 到 下 地 阅读 ， 这 就 是 英文 的 流 方 
向 。 不 过 ， 并 不 是 所 有 语言 都 如 此 。 我 们 知道 古 汉 语 就 是 从 右 到 左 来 阅读 的 ， 当 然 
还 包 插 希 伯 来 语 和 阿拉 伯 语 等 等 。CSS2 引入 了 一 个 属性 来 描述 其 方向 性 。 


direction 属性 影响 块 级 元 素 中 文本 的 书写 方向 、 表 中 列 布 局 的 方向 、 内 容 水 平 填充 


其 元 素 框 的 方向 、 以 及 两 端 对 齐 元 素 中 最 后 一 行 的 位 置 。 


注释 : 对 于 行内 元 素 ， 只 有 当 unicode-bidi 属性 设置 为 embed 或 bidi-override 时 


会 应 用 direction 属性 。 


direction 属性 有 两 个 值 : Itr 和 rtl。 大 多 数 情 况 下 ， 默 认 值 是 ltr， 显示 从 左 到 右 的 文 
本 。 如 果 显 示 从 右 到 左 的 文本 ， 应 使 用 值 rtl。 


CSS 文本 实例 : 


设置 文本 颜色 
设置 文本 的 背景 颜色 
规定 字符 间距 

使 用 百分比 设置 行 间距 
使 用 像素 值 设置 行 间距 
使 用 数值 来 设置 行 间距 
对 齐 文 本 


—L Lh dy 
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控制 文本 中 的 字母 
在 元 素 中 茶 止 文本 折 行 
增加 单词 间距 


CSS 文本 属性 


属性 描述 
color 设置 文本 颜色 
direction 设置 文本 方向 。 
line-height 设置 行 高 。 
letter- : 

ES 1 p. 

spacing 设置 字符 间 距 。 
text-align 对 齐 元 素 中 的 文本 。 
text- Nx A» 
decoration 向 文本 添加 修 饰 o 
text-indent 缩 进 元 素 中 文本 的 首 行 。 


text-shadow 
text- 
transform 
unicode-bidi 


white-space 


word-spacing 


CSS 文本 


置 文本 阴影 。CSS2 包含 该 属性 ， 但 是 CSS2.1 没有 保留 该 
属性 。 


控制 元 素 中 的 字母 。 


O) 
Co 
CO 


CSS 字体 


CSS 字体 属性 定义 文本 的 字体 系列 、 大 小 、 加 粗 、 风 格 〈 如 斜体 ) 和 变形 (如 小 型 
大 写字 母 ) 。 


CSS 字体 系列 


在 CSS 中 ， 有 两 种 不 同类 型 的 字体 系列 名 称 : 


e 通用 字体 系列 - 拥有 相似 外 观 的 字体 系统 组 合 〈 比 如 "Serif" 或 "Monospace") 
e 特定 字体 系列 - 具体 的 字体 系列 (EA "Times" g "Courier") 


除了 各 种 特定 的 字体 系列 外 ，CSS 定义 了 5 种 通用 字体 系列 : 


e Serif 字体 

e Sans-serif 字体 
e Monospace 字体 
e Cursive 字体 

e Fantasy 字体 


如 果 需 要 了 解 更 多 有 关 字 体系 列 的 知识 ， 请 阅读 CSS 字体 系列 。 


目下 字体 系列 
使 用 font-family 属性 定义 文本 的 字体 系列 。 


使 用 通用 字体 系列 
如 果 你 希望 文档 使 用 一 种 sans-serif 字体 ， 但 是 你 并 不 关心 是 哪 一 种 字体 ， 以 下 就 


是 一 个 合适 的 声明 : 


body (font-family: sans-serif;j 


这 样 用 户 代理 就 会 从 sans-serif 字体 系列 中 选择 一 个 字体 (如 Helvetica) ， 并 将 其 
应 用 到 body 元 素 。 因 为 有 继承 ， 这 种 字体 选择 还 将 应 用 到 body 元 素 中 包含 的 所 
有 元 素 ， 除 非 有 一 种 更 特定 的 选择 器 将 其 覆盖 。 

指定 字体 系列 

除了 使 用 通用 的 字体 系列 ， 您 还 可 以 通过 font-family 属性 设置 更 具体 的 字体 。 

下 面 的 例子 为 所 有 h1 元 素 设 置 了 Georgia 字体 : 


hi (font-family: Georgia; } 


这 样 的 规则 同时 会 产生 另外 一 个 问题 ， 如 果 用 户 代理 上 没有 安装 Georgia 字体 ， 就 
只 能 使 用 用 户 代理 的 默认 字体 来 显示 h1 元 素 。 


我 们 可 以 通过 结合 特定 字体 名 和 通用 字体 系列 来 解决 这 个 问题 : 


hi (font-family: Georgia, serif; } 


如 果 读 者 没有 安装 Georgia， 但 安装 了 Times 字体 (serif 字体 系列 中 的 一 种 字 
体 ) ， 用 户 代理 就 可 能 对 h1 元 素 使 用 Times。 尽 管 Times 与 Georgia 并 不 完全 匹 
配 ， 但 至 少 足够 接近 。 


因此 ， 我 们 建议 在 所 有 font-family 规则 中 都 提供 一 个 通用 字体 系列 。 这 样 就 提供 了 
一 条 后 路 ， 在 用 户 代理 无 法 提供 与 规则 匹配 的 特定 字体 时 ， 就 可 以 选择 一 个 候选 字 
体 


o 


如 果 您 对 字体 非常 熟悉 ， 也 可 以 为 给 定 的 元 素 指定 一 系列 类 似 的 字体 。 要 做 到 这 一 
点 ， 需 要 把 这 些 字体 按照 优先 顺序 排列 ， 然 后 用 逗号 进行 连接 : 


p {font-family: Times, TimesNR, 'New Century Schoolbook', 
Georgia, 'New York', serif;} 


根据 这 个 列表 ， 用 户 代理 会 按 所 列 的 顺序 查找 这 些 字体 。 如 果 列 出 的 所 有 字体 都 不 
可 用 ， 就 会 简单 地 选择 一 种 可 用 的 serif 字体 。 


使 用 引号 


您 也 许 已 经 注意 到 了 ， 上 面 的 例子 中 使 用 了 单 引 号 。 只 有 当 字 体 名 中 有 一 个 或 多 个 
空格 (比如 New York) ， 或 者 如 果 字 体 名 包括 # 或 $ 之 类 的 符号 ， 才 需要 在 font- 
family 声明 中 加 引号 。 


单 引 号 或 双 引 号 都 可 以 接受 。 但 是 ， 如 果 把 一 个 font-family 属性 放 在 HTML 的 
style 属性 中 ， 则 需要 使 用 该 属性 本 身 未 使 用 的 那 种 引号 : 


<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Gt 
"New York', serif;">...</p> 


字体 风格 


font-style 属性 最 常用 于 规定 斜体 文本 。 
该 属性 有 三 个 值 : 





e normal - 文本 正常 显示 
e italic - 文本 斜体 显示 
e oblique - 文本 倾斜 显示 


实例 


p.normal {font-style:normal; } 
p.italic {font-style:italic;} 
p.oblique {font-style:oblique; } 


italic 和 oblique 的 区 别 


font-style 非常 简单 : 用 于 在 normal 文本 、italic 文本 和 oblique 文本 之 间 选 择 。 唯 
一 有 点 复杂 的 是 明确 italic 文本 和 oblique 文本 之 间 的 差别 。 


斜体 (italic) 是 一 种 简单 的 字体 风格 ， 对 每 个 字母 的 结构 有 一 些小 改动 ， 来 反映 变 
化 的 外 观 。 与 此 不 同 ， 倾 斜 (oblique) 文本 则 是 正常 坚 直 文本 的 一 个 倾斜 版 本 。 


通常 情况 下 ，italic 和 oblique 文本 在 web 浏览 器 中 看 上 去 完全 一 样 。 


字体 变形 

font-variant 属性 可 以 设 定 小 型 大 写字 母 。 

小 型 大 写字 母 不 是 一 般 的 大 写字 母 ， 也 不 是 小 写字 母 ， 这 种 字母 采用 不 同 大 小 的 大 
写字 母 。 


实例 


p {font-variant:small-caps; } 


字体 加 粗 


font-weight 属性 设置 文本 的 粗细 。 
使 用 bold 关键 字 可 以 将 文本 设置 为 粗 体 。 


关键 字 100 ~ 900 为 字体 指定 了 9 级 加 粗 度 。 如 果 一 个 字体 内 置 了 这 些 加 粗 级 别 ， 
那么 这 些 数字 就 直接 映射 到 预定 义 的 级 别 ，100 对 应 最 细 的 字体 变形 ，900 对 应 最 
粗 的 字体 变形 。 数 字 400 等 价 于 normal， 而 700 等 价 于 bold。 


如 果 将 元 素 的 加 粗 设置 为 bolder， 浏 览 器 会 设置 比 所 继承 值 更 粗 的 一 个 字体 加 粗 。 
与 此 相反 ， 关 键 词 lighter 会 导致 浏览 器 将 加 粗 度 下 移 而 不 是 上 移 。 


实例 


p.normal (font-weight:normal;) 
p.thick {font-weight:bold;} 
p.thicker {font-weight :900; } 


字体 大 小 


font-size 属性 设置 文本 的 大 小 。 


有 能 力 管理 文本 的 大 小 在 web 设计 领域 很 重要 。 但 是 ， 您 不 应 当 通 过 调整 文本 大 小 
使 段落 看 上 去 像 标题 ， 或 者 使 标题 看 上 去 像 段落 。 


请 始终 使 用 正确 的 HTML 标题 ， 比 如 使 用 <h1> - <h6> 来 标记 标题 ， 使 用 <p> 来 
标记 段落 。 


font-size 值 可 以 是 绝对 或 相对 值 。 

绝对 值 : 
e. 将 文本 设置 为 指定 的 大 小 
e 不 允许 用 户 在 所 有 浏览 器 中 改变 文本 大 小 (不 利于 可 用 性 ) 
e 绝对 大 小 在 确定 了 输出 的 物理 尺寸 时 很 有 用 

相对 大 小 : 


e。 相 对 于 周围 的 元 素来 设置 大 小 
e 人 多 许 用 户 在 浏览 器 改变 文本 大 小 


注意 : 如 果 您 没有 规定 字体 大 小 ， 普 通 文本 〈 比 如 段落 ) 的 默认 大 小 是 16 像素 
(16px=1em), 


使 用 像素 来 设置 字体 大 小 
通过 像素 设置 文本 大 小 ， 可 以 对 文本 大 小 进行 完全 控制 : 
实例 


hi {font-size:60px; } 
h2 {font-size:40px; } 
p {font-size:14px;} 


在 Firefox, Chrome, and Safari 中 ， 可 以 重新 调整 以 上 例子 的 文本 大 小 ， 但 是 在 
Internet Explorer 中 不 行 。 


虽然 可 以 通过 浏览 器 的 缩放 工具 调整 文本 大 小 ， 但 是 这 实际 上 是 对 整个 页 面 的 调 
整 ， 而 不 仅 限 于 文本 。 
使 用 em 来 设置 字体 大 小 


如 果 要 避免 在 Internet Explorer 中 无 法 调整 文本 的 问题 ， 许 多 开发 者 使 用 em 单位 
代替 pixels. 


W3C 推荐 使 用 em 尺寸 单位 。 


1em 等 于 当前 的 字体 尺寸 。 如 果 一 个 元 素 的 font-size 为 16 像素 ， 那 么 对 于 该 元 
素 ，1em 就 等 于 16 像素 。 在 设置 字体 大 小 时 ，em 的 值 会 相对 于 父 元 素 的 字体 大 
小 改变 。 


浏览 器 中 默认 的 文本 大 小 是 16 像素 。 因 此 1em 的 默认 尺寸 是 16 像素 。 
可 以 使 用 下 面 这 个 公式 将 像素 转换 为 em : pixels/16=em 
GE : 16 等 于 父 元 素 的 默认 字体 大 小 ， 假 设 父 元 素 的 font-size 为 20px， 那 么 公式 
需 改 为 : pixels/20=em) 
实例 


hi (font-size:3.75em;) /* 60px/16-3.75em */ 
h2 (font-size:2.5em;) /* 40px/16-2.5em */ 
p {font-size:0.875em;} /* 14px/16-0.875em */ 


在 上 面 的 例子 中 ， 以 em 为 单位 的 文本 大 小 与 前 一 个 例子 中 以 像素 计 的 文本 是 相同 
的 。 不 过 ， 如 果 使 用 em 单位 ， 则 可 以 在 所 有 浏览 器 中 调整 文本 大 小 。 
不 幸 的 是 ， 在 IE 中 仍 存在 问题 。 在 重 设 文本 大 小 时 ， 会 比 正常 的 尺寸 更 大 或 更 


小 。 


结合 使 用 百分比 和 EM 


在 所 有 浏览 器 中 均 有 效 的 方案 是 为 body TR 〈 父 元 素 ) 以 百分比 设置 默认 的 font- 
size 值 : 


实例 


body {font-size:100%; } 
hi {font-size:3.75em; } 
h2 {font-size:2.5em; } 
p {font-size:0.875em; } 


我 们 的 代码 非常 有 效 。 在 所 有 浏览 器 中 ， 可 以 显示 相同 的 文本 大 小 ， 并 人 允许 所 有 浏 
览 器 缩放 文本 的 大 小 。 


CSS 字体 实例 : 
设置 文本 的 字体 


体 的 粗细 
所 有 字体 属性 在 一 个 声明 之 内 


CSS 字体 属性 


属性 描述 
font 简写 属性 。 作 用 是 把 所 有 针对 字体 的 属性 设置 在 一 个 声明 中 。 
font-family 设置 字体 系列 。 
font-size 设置 字体 的 尺寸 。 
E 


font-size- 当 首 选 字体 不 可 用 时 ， 对 替换 字体 进行 智能 缩放 。 (CSS2.1 已 
adjust 删除 该 属性 。) 


font-stretch ”对 字体 进行 水 平 拉 伸 。 (CSS2.1 已 删除 该 属性 。) 
font-style 设置 字体 风格 。 

font-variant ”以 小 型 大 写字 体 或 者 正常 字体 显示 文本 。 
font-weight ”设置 字体 的 粗细 。 


CSS 链接 


我 们 能 够 以 不 同 的 方法 为 链接 设置 样式 。 


设置 链接 的 样式 

能 够 设置 链接 样式 的 CSS 属性 有 很 多 种 (例如 color, font-family, background 等 
T) o 

链接 的 特殊 性 在 于 能 够 根据 它们 所 处 的 状态 来 设置 它们 的 样式 。 

链接 的 四 种 状态 : 

e a:link - 普通 的 、 未 被 访问 的 链接 

e a:visited - 用 户 已 访问 的 链接 


e a:hover - 鼠标 指针 位 于 链接 的 上 方 
e a:active - 链接 被 点 击 的 时 刻 


实例 


a:link {color:#FF0000;} /* 未 被 访问 的 链接 */ 
a:visited {color:#00FFOO;} /* 已 被 访问 的 链接 */ 
a:hover {color:#FFOOFF;} /* 鼠标 指针 移动 到 链接 上 */ 
a:active (color:40000FF;) /* 正在 被 点 击 的 链接 */ 


当 为 链接 的 不 同 状态 设置 样式 时 ， 请 按照 以 下 次 序 规则 : 


e a:hover 必须 位 于 a:link 和 a:visited 之 后 
e a:active 必须 位 于 a:hover 之 后 


常见 的 链接 样式 
在 上 面 的 例子 中 ， 链 接 根据 其 状态 改变 颜色 。 
让 我 们 看 看 其 他 几 种 常见 的 设置 链接 样式 的 方法 : 


文本 修饰 
text-decoration 属性 大 多 用 于 去 掉 链 接 中 的 下 划 线 : 


实例 


a:link [text-decoration:none;) 
a:visited {text-decoration:none; } 
a:hover {text-decoration: underline; } 
a:active {text-decoration: underline; } 


ab E 
AR 


background-color 属性 规定 链接 的 背景 
实例 
头 


a:link {background-color :#B2FF99; } 
a:visited {background-color :#FFFF85; } 
a:hover {background-color :#FF704D; } 
a:active {background-color :#FF704D; } 


更 多 实例 
向 链接 添加 不 同 的 祥 式 
高 级 - 创建 链接 框 


CSS 列表 


CSS 列表 属 BIERKE, 改变 列表 项 标志 ， 或 者 将 图 像 作 为 列表 项 标志 。 


CSS 列表 
从 某 种 意义 上 讲 ， 不 是 描述 性 的 文本 的 任何 内 容 都 可 以 认为 是 列表 。 人 口 普查 、 太 
阳 系 、 家 谱 、 参 观 菜单 ， 甚 至 你 的 所 有 朋友 都 可 以 表示 为 一 个 列表 或 者 是 列表 的 列 


o 


p. em 这 使 得 列表 相当 重要 ， 所 以 说 ，CSS 中 列表 样式 不 太 丰 富 确实 
AKIR 


列表 类 型 
影响 列表 的 样式 ， 最 简单 (同时 支持 最 充分 ) 的 办 法 就 是 改变 其 标志 类 型 。 


例如 ， 在 一 个 无 序列 表 中 ， 列 表 项 的 标志 (marker) 是 出 现在 各 列表 项 旁边 的 圆 点 。 
在 有 序列 表 中 ， 标 志 可 能 是 字母 、 数 字 或 另外 某 种 计数 体系 中 的 一 个 符号 。 


要 修改 用 于 列表 项 的 标志 类 型 ， 可 以 使 用 属性 list-style-type : 


ul {list-style-type : square} 


上 面 的 声明 把 无 序列 表 中 的 列表 项 标志 设置 为 方块 。 


列表 项 图 像 


有 时 ， Lm 你 可 能 想 对 各 标志 使 用 一 个 图 像 ， 这 可 以 利用 list- 
style-image 属性 做 到 


ul li (list-style-image : url(xxx.gif)} 


只 需要 简单 地 使 用 一 个 url() 值 ， 就 可 以 使 用 图 像 作为 标志 。 


列表 标 志 位 置 


CSS2.1 可 以 确定 标志 出 现在 列表 项 内 容 之 外 还 是 内 容 内 部 。 这 是 利用 list-style- 
position 完成 的 。 


简写 列表 样式 


为 简单 起 见 ， 可 以 将 以 上 3 个 列表 样式 属性 合并 为 一 个 方便 的 属性 : list-style， 就 
像 这 样 : 


li {list-style : url(example.gif) square inside} 


list-style 的 值 可 以 按 任何 顺序 列 出 ， 而 且 这 些 值 都 可 以 忽略 。 只 要 提供 了 一 个 值 ， 
其 它 的 就 会 填 入 其 默认 值 。 


CSS 列表 实例 : 


在 无 序列 表 中 的 不 同类 型 的 列表 标记 
在 有 序列 表 中 不 同类 型 的 列表 项 标记 
所 有 的 列表 样式 类 型 

将 图 像 作为 列表 项 标记 

放置 列表 标记 

在 一 个 声明 中 定义 所 有 的 列表 属性 


CSS 列表 属性 (list) 
属性 描述 
list-style 简写 属性 。 用 于 把 所 有 用 于 列表 的 属性 设置 于 一 个 声明 中 。 
list-style-image “， 将 图 象 设置 为 列表 项 标志 。 
stelle 设置 列表 中 列表 项 标志 的 位 置 。 
position 
list-style-type 设置 列表 项 标志 的 类 型 。 


marker-offset 


CSS 表格 


CSS 表格 属性 可 以 帮助 您 极 大 地 改善 表格 的 外 观 。 


表格 边框 

如 需 在 CSS 中 设置 表格 边框 ， 请 使 用 border 属性 。 

下 面 的 例子 为 table. th 以 及 设置 了 蓝 色 边框 : 
table, th, td 


{ 
border: 1px solid blue; 
j 


请 注意 ， 上 例 中 的 表格 具有 双 线 条 边框 。 这 是 由 于 table. th 以 及 td 元 素 都 有 独立 
的 边框 。 


如 果 需 要 把 表格 显示 为 单线 条 边框 ， 请 使 用 border-collapse 属性 。 


折 受 边框 
border-collapse 属性 设置 是 否 将 表格 边框 折 受 为 单一 边框 : 


table 


border-collapse:collapse; 


b 
table,th, td 


border: 1px solid black; 


表格 宽度 和 高 度 


通过 width 和 height 属性 定义 表格 的 宽度 和 高 度 。 
下 面 的 例子 将 表格 宽度 设置 为 100%， 同 时 将 th 元 素 的 高 度 设置 为 50px : 


table 


{ 
width:100%; 


th 


{ 
height :50px; 
j 


表格 文本 对 齐 


text-align 和 vertical-align 属性 设置 表格 中 文本 的 对 齐 方式 。 
text-align 属性 设置 水 平 对 齐 方式 ， 比 如 左 对 齐 、 右 对 齐 或 者 居中 : 


td 


text-align:right; 


vertical-align 属性 设置 垂直 对 齐 方式 ， 比 如 顶部 对 齐 、 底 部 对 齐 或 居中 对 齐 : 


td 


{ 
height :50px; 
vertical-align: bottom; 


表格 内 边 距 
如 需 控 制 表格 中 内 容 与 边框 的 距离 ， 请 为 td 和 th 元 素 设 置 padding 属性 : 


td 


{ 
padding:15px; 


表格 颜色 


下 面 的 例子 设置 边框 的 颜色 ， 以 及 th 元 素 的 文本 和 背景 颜色 : 


table, td, th 


border:1px solid green; 


th 


background-color :green; 
color:white; 


} 
CSS Table 属性 

属性 描述 
border-collapse 设置 是 否 把 表格 边框 合并 为 单一 的 边框 。 
border-spacing 设置 分 隔 单 元 格 边 框 的 距离 。 
caption-side 设置 表格 标题 的 位 置 。 
empty-cells 设置 是 否 显示 表格 中 的 空 单元 格 。 
table-layout 设置 显示 单元 、 行 和 列 的 算法 。 


亲 目 试 一 试 - 更 多 实例 


制作 一 个 漂亮 的 表格 
显示 表格 中 的 空 单元 
设置 表格 边框 之 间 的 空白 
设置 表格 标题 的 位 置 


CSS #58 


2s (outline) 是 绘制 于 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 
素 的 作用 。 


CSS outline 属性 规定 元 素 轮廓 的 样式 、 颜 色 和 宽度 。 


ER (Outline) 实例 : 
在 元 素 周围 画 线 


&lt; !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p 


border:red solid thin; 
outline:#00ff00 dotted thick; 


} 
&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt;&lt;b&gt;itst: &lt;/b&gt; RAMET !DOCTYPE Hj, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 


doo 网 


设置 轮廓 的 颜色 





&lt; DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p 

t 


border:red solid thin; 
outline-style:dotted; 
outline-color:#00ff00; 
} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt;&lt;b&gt;iEst: &lt;/b&gt; RAET !DOCTYPE 8j, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 


li s J 
设置 轮廓 的 样式 





&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p 

{ 

border: red solid thin; 

} 

p.dotted {outline-style: dotted} 
p.dashed {outline-style: dashed} 
p.solid {outline-style: solid} 
p.double {outline-style: double} 
p.groove {outline-style: groove} 
p.ridge {outline-style: ridge} 
p.inset {outline-style: inset} 
p.outset {outline-style: outset} 
&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&lt;p class="dotted"&gt;A dotted outline&lt;/p&gt; 
&lt;p class-"dashed"&gt;A dashed outline&lt;/p&gt; 
&lt;p class-"solid"&gt;A solid outline&lt;/p&gt; 
&lt;p class-"double"&gt;A double outline&lt;/p&gt; 
&lt;p class="groove"&gt;A groove outline&lt;/p&gt; 
&lt;p class="ridge"&gt;A ridge outline&lt;/p&gt; 
&lt;p class="inset"&gt;An inset outline&lt;/p&gt; 
&lt;p class="outset"&gt;An outset outline&lt;/p&gt; 


&lt;p&gt;&lt;b&gt;itst: &1lt;/b&gt; 只 有 在 规定 了 !DOCTYPE 8j, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 





&lt; !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p.one 

{ 

border:red solid thin; 
outline-style:solid; 
outline-width: thin; 

} 

p.two 


border:red solid thin; 
outline-style:dotted; 
outline-width: 3px; 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;p class="one"&gt;This is some text in a paragraph.&lt;/p&gt; 
&lt;p class-"two"&gt;This is some text in a paragraph.&lt;/p&gt; 


&lt;p&gt;&lt;b&gt; 注 释 :&lLt;/b&gt; 只 有 在 规定 了 !DOCTYPE 8j, Internet E 
&lt;/body&gt; 
&lt;/html&gt; 





CSS 边框 属性 


"CSS" 列 中 的 数字 指示 哪个 CSS 版 本 定义 了 该 属性 。 


属性 描述 CSS 
outline 在 一 个 声明 中 设置 所 有 的 轮廓 属性 。 2 
outline-color 设置 轮廓 的 颜色 。 2 
outline-style 设置 轮廓 的 样式 。 2 
outline-width 设置 轮廓 的 宽度 。 2 


CSS 框 模型 


CSS 框 模型 概述 


CSS 框 模型 (Box Model) 规定 了 元 素 框 人 处 理 元 素 内 容 、 内 边 距 、 边 框 和 外 边 距 
的 方式 。 


CSS 框 模型 概述 


border GHE) 


margin ONHE) 


padding (内 边 距 ) 


element 
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元 素 框 的 最 内 部 分 是 实际 的 内 容 ， 直 接 包围 内 容 的 是 内 边 距 。 内 边 距 呈 现 了 元 素 的 
衣 景 。 内 边 距 的 边缘 是 边框 。 边 框 以 外 是 外 边 距 ， 外 边 距 默认 是 透明 的 ， 因 此 不 会 
遮挡 其 后 的 任何 元 素 。 


提示 : 背景 应 用 于 由 内 容 和 内 边 距 、 边 框 组 成 的 区 域 。 
内 边 距 、 边 框 和 外 边 距 都 是 可 选 的， 默认 值 是 需 。 但 是 ， 许 多 元 素 将 由 用 户 代理 样 


式 表 设置 外 边 距 和 内 边 距 。 可 以 通过 将 元 素 的 margin 和 padding 设置 为 需 来 覆盖 
这 些 浏览 器 样式 。 这 可 以 分 别 进行 ， 也 可 以 使 用 通用 选择 器 对 所 有 元 素 进 行 设置 : 


SeN 
margin: 0; 
padding: 0; 


在 CSS rh, width 和 height 指 的 是 内 容 区 域 的 宽度 和 高 度 。 增 加 内 边 距 、 边 框 和 
外 边 距 不 会 影响 内 容 区 域 的 尺寸 ， 但 是 会 增加 元 素 框 的 总 尺寸 。 


假设 框 的 每 个 边 上 有 10 个 像素 的 外 边 距 和 5 个 像素 的 内 边 距 。 如 果 希 望 这 个 元 素 
框 达到 100 个 像素 ， 就 需要 将 内 容 的 宽度 设置 为 70 像素 ， 请 看 下 图 : 








10px 5px 7Opx Spx 10px 

OO 
ee ae OR CR eS -s : 
| | 
| margin: 10px | 
| | 
| | 
| | padding:5px | 
| | | 
| | | 
| | 
| 

| width: 70px | 
| | 
| | | 
| | | 
| | | 
| | | 
| | | 
| | 
| | 
| | 
et Ph A [ 

100px 
#box { 


width: 70px; 
margin: 10px; 
padding: 5px; 


提示 : 内 边 距 、 边 框 和 外 边 距 可 以 应 用 于 一 个 元 素 的 所 有 边 ， 也 可 以 应 用 于 单独 的 
边 。 


提示 : 外 边 距 可 以 是 负 值 ， 而 且 在 很 多 情况 下 都 要 使 用 负 值 的 外 边 距 。 


浏览 器 兼容 性 


一 旦 为 页 面 设置 了 恰当 的 DTD， 大 多 数 浏览 器 都 会 按照 上 面 的 图 示 来 呈现 内 容 。 然 
而 IE5 和 6 的 呈现 却 是 不 正确 的 。 根 据 W3C 的 规范 ， 元 素 内 容 占据 的 空间 是 由 
width 属性 设置 的 ， 而 内 容 周 围 的 padding 和 border 值 是 另外 计算 的 。 不 幸 的 是 ， 
IE5.X 和 6 在 怪异 模式 中 使 用 自己 的 非 标准 模型 。 这 些 浏览 器 的 width 属性 不 是 内 
容 的 宽度 ， 而 是 内 容 、 内 边 距 和 边框 的 宽度 的 总 和 。 


虽然 有 方法 解决 这 个 问题 。 但 是 目前 最 好 的 解决 方案 是 回避 这 个 问题 。 也 就 是 ， 不 
要 给 元 素 添加 有 具有 指定 宽度 的 内 边 距 ， 而 是 尝试 将 内 边 距 或 外 边 距 添加 到 元 素 的 父 
元 素 和 子 元 素 。 


术语 翻译 


element : 元 素 。 

padding : 内 边 距 ， 也 有 资料 将 其 翻译 为 填充 。 
border : 边框 。 

margin : 外 边 距 ， 也 有 资料 将 其 翻译 为 空白 或 空白 边 。 


在 w3school， 我 们 把 padding 和 margin 统一 地 称 为 内 边 距 和 外 边 距 。 边 框 内 的 空 
白 是 内 边 距 ， 边 框 外 的 空白 是 外 边 距 ， 很 容易 记 吧 : ) 


CSS 内 边 距 


元 素 的 内 边 距 在 边框 和 内 容 区 之 间 。 控 制 该 区 域 最 简单 的 属性 是 padding 属性 。 
CSS padding 属性 定义 元 素 边 框 与 元 素 内 容 之 间 的 空白 区 域 。 


CSS padding 属性 

CSS padding 属性 定义 元 素 的 内 边 距 。padding 属性 接受 长 度 值 或 百分比 值 ， 但 不 
允许 使 用 负 值 。 

例如 ， 如 果 您 希望 所 有 h1 元 素 的 各 边 都 有 10 像素 的 内 边 距 ， 只 需要 这 样 : 


hi (padding: 10px;} 


您 还 可 以 按照 上 、 右 、 下 、 左 的 顺序 分 别 设置 各 边 的 内 边 距 ， 各 边 均 可 以 使 用 不 同 
的 单位 或 百分比 值 : 


hi (padding: 10px 0.25em 2ex 20%;} 


单 边 内 边 距 属性 
也 通过 使 用 下 面 四 个 单独 的 属性 ， 分 别 设置 上 、 右 、 下 、 左 内 边 距 : 


e padding-top 

e padding-right 

e padding-bottom 
e padding-left 


您 也 许 已 经 想到 了 ， 下 面 的 规则 实现 的 效果 与 上 面 的 简写 规则 是 完全 相同 的 : 


h1 { 
padding-top: 10px; 
padding-right: 0.25em; 
padding-bottom: 2ex; 
padding-left: 20%; 
} 


内 边 距 的 百分比 数值 


前 面 提 到 过 ， 可 以 为 元 素 的 内 边 距 设置 百分数 值 。 百 分 数值 是 相对 于 其 父 元 素 的 
width 计算 的 ， 这 一 点 与 外 边 距 一 样 。 所 以 ， 如 果 父 元 素 的 width 改变 ， 它 们 也 会 
改变 。 


下 面 这 条 规则 把 段落 的 内 边 距 设 置 为 父 元 素 width 的 10% : 


p {padding: 10%;} 


例如 : 如 果 一 个 段落 的 父 元 素 是 div 元 素 ， 那 么 它 的 内 边 距 要 根据 div 的 width i+ 


o 


«div style="width: 200px;"> 
<p>This paragragh is contained within a DIV that has a width of 20( 
</div> 


o M 


注意 : 上 下 内 边 距 和 与 左右 内 边 中 一 致 ; 即 上 下 内 边 距 的 百分数 会 相对 于 父 元 素 宽 度 
设置 ， 而 不 是 相对 于 高 度 。 





CSS 内 边 距 实例 : 


所 有 内 边 距 属性 在 一 个 声明 中 
设置 下 内 边 距 1 


CSS 内 边 距 属性 
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属性 描述 
padding 简写 属性 。 作 用 是 在 一 个 声明 中 设置 元 素 的 所 内 边 距 属性 。 
padding-bottom ”设置 元 素 的 下 内 边 距 。 
padding-left 设置 元 素 的 左 内 边 距 。 
padding-right 设置 元 素 的 右 内 边 距 。 
padding-top 设置 元 素 的 上 内 边 距 。 
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CSS 边框 


元 素 的 边框 (border) 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 
CSS border 属性 允许 你 规定 元 素 边 框 的 样式 、 宽 度 和 颜色 。 


CSS 边框 


在 HTML 中 ， 我 们 使 用 表格 来 创建 文本 周围 的 边框 ， 但 是 通过 使 用 CSS 边框 属 
性 ， 我 们 可 以 创建 出 效果 出 色 的 边框 ， 并 且 可 以 应 用 于 任何 元 素 。 


元 素 外 边 距 内 就 是 元 素 的 的 边框 (border)。 元 素 的 边框 就 是 围绕 元 素 内 容 和 内 边 据 
的 一 条 或 多 条 线 


每 个 边框 有 3 个 方面 : 宽度 、 样 式 ， 以 及 颜色 。 在 下 面 的 篇 幅 ， 我 们 会 为 您 详细 讲 
解 这 三 个 方面 。 
边框 与 背景 


CSS 规范 指出 ， 边 框 绘 制 在 "元素 的 背景 之 上 "。 这 很 重要 ， 因 为 有 些 边 框 是 “间断 
的 ”( 例 如 ， 点 线 边 框 或 虚线 框 )， 元 素 的 背景 应 当 出 现在 边框 的 可 见 部 分 之 间 。 


CSS2 指出 背景 只 延伸 到 内 边 距 ， 而 不 是 边框 。 后 来 CSS2.1 进行 了 更 正 : 元 素 的 
背景 是 内 容 、 ee 大 多 数 浏览 器 都 遵循 CSS2.1 定义 ， 不 过 一 
些 较 老 的 浏览 器 可 能 会 有 不 同 的 表现 。 


边框 的 样式 


样式 是 边框 最 重要 的 一 个 方面 ， 这 不 是 因为 样式 控制 着 边框 的 显示 (当然 ， 样 式 确 
实 控制 着 边框 的 显示 ) ， 而 是 因为 如 果 没 有 样式 ， 将 根本 没有 边框 。 


CSS 的 border-style 属性 定义 了 10 个 不 同 的 非 inherit 样式 ， 包 括 none。 
例如 ， 您 可 以 为 把 一 幅 图 片 的 边框 定义 为 outset， 使 之 看 上 去 像 是 “ 凸 起 按钮 ”: 


a:link img {border-style: outset;} 
定义 多 种 样式 
您 可 以 为 一 个 边框 定义 多 个 样式 ， 例 如 : 


p.aside {border-style: solid dotted dashed double; } 


上 面 这 条 规则 为 类 名 为 aside 的 段落 定义 了 四 种 边框 样式 : 实 线 上 边框 、 点 线 右边 
WE, ERFA 1E- "XX Ic 3 44E. 


BNA T BHARA 了 top-right-bottom-left 的 顺序 ， 讨 论 用 多 个 值 设置 不 同 
内 边 距 时 也 见 过 这 个 顺序 。 

定义 单 边 样式 

如 果 您 希望 为 元 素 框 的 某 一 个 边 设 置 边框 样式 ， 而 不 是 设置 所 有 4 SNE 
式 ， 可 以 使 用 下 面 的 单 边 边框 样式 属性 : 


e border-top-style 

e border-right-style 
e border-bottom-style 
e border-left-style 


因此 这 两 种 方法 是 等 价 的 : 


p (border-style: solid solid solid none; } 
p {border-style: solid; border-left-style: none; } 


E 如 果 要 使 用 第 二 种 方法 ， 必 须 把 单 边 属性 放 在 简写 属性 之 后 。 因 为 如 果 把 单 
属性 放 在 border-style 之 前 ， 简 罕 属 性 的 值 就 会 覆盖 单 边 值 none, 


边框 的 宽度 


您 可 以 通过 border-width 属性 为 边框 指定 宽度 


为 边框 指定 宽度 有 两 种 方法 : 可 以 指定 长 度 值 ， 比 如 2px 或 0.1em ; 或 者 使 用 3 个 
关键 字 之 一 ， 它 们 分 别 是 thin 、medium (默认 值 ) 和 thick. 


注释 : CSS 没有 定义 3 个 关键 字 的 具体 宽度 ， 所 以 一 个 用 户 代 理 可 能 把 thin 、 
medium 和 thick 分 别 设置 为 等 于 5px、3px 和 2px， 而 另 一 个 用 户 代 理 则 分 别 设置 
为 3px、2px 和 1px. 


所 以 ， 我 们 可 以 这 样 设置 边框 的 宽度 : 
p {border-style: solid; border-width: 5px; } 
或 者 : 


p {border-style: solid; border-width: thick; } 


EL * UTE 


您 可 以 按照 top-right-bottom-left 的 顺序 设置 元 素 的 各 边 边框 


p {border-style: solid; border-width: 15px 5px 15px 5px;} 


上 面 的 例子 也 可 以 简写 为 (这 样 写法 称 为 值 复制 ) 


p {border-style: solid; border-width: 15px 5px;} 


您 也 可 以 通过 下 列 属性 分 别 设置 边框 各 边 上 


border-top-width 
border-right-width 
border-bottom-width 
border-left-width 


因此 ， 下 面 的 规则 与 上 面 的 例子 是 等 价 的 : 


度 : 


e 
e 


pt 
border-style: solid; 
border-top-width: 15px; 
border-right-width: 5px; 
border-bottom-width: 15px; 
border-left-width: 5px; 
} 


入 有 边框 


在 前 面 的 例子 中 ， 您 已 经 看 到 ， 如 果 希 望 显 示 某 种 边框 ， 就 必须 设置 边框 样式 ， 比 
如 solid 或 outset。 


那么 如 果 把 border-style 设置 为 none 会 出 现 什 么 情况 


p {border-style: none; border-width: 50px;} 


尽管 边框 的 宽度 是 50px， 但 是 边框 样式 设置 为 none。 在 这 种 情况 下 ， 不 仅 边框 的 
样式 没有 了 ， 其 宽度 也 会 变 成 0。 边 框 消 失 了 ， 为 什么 呢 ? 


这 是 因为 如 果 边 框 样式 为 none， 即 边框 根本 不 存在 ， 那 么 边框 就 不 可 能 有 宽度 ， 
因此 边框 宽度 自动 设置 为 0， 而 不 论 您 原先 定义 的 是 什么 。 


记 住 这 一 点 非常 重要 。 事 实 上 ， ee 根据 以 下 规 
则 ， 所 有 h1 元 素 都 不 会 有 任何 边框 ， 更 不 用 说 20 像素 宽 


hi {border-width: 20px;} 


由 于 border-style 的 默认 值 是 none， 如 果 没 有 声明 样式 ， 就 相当 于 border-style: 
none。 因 此 ， 如 果 您 希望 边框 出 现 ， 就 必须 声明 一 个 边框 样式 。 


边框 的 颜色 


设置 边框 颜色 非常 简单 。CSS 使 用 一 个 简单 的 border-color 属性 ， 它 一 次 可 以 接受 
最 多 4 个 颜色 值 。 


可 以 使 用 任何 类 型 的 颜色 值 ， 例 如 可 以 是 命名 颜色 ， 也 可 以 是 十 六 进 制 和 RGB 
fà: 


pt 
border-style: solid; 
border-color: blue rgb(2596,3596,4596) #909090 red; 


j 


如 果 颜 色 值 小 于 4 个 ， 值 复制 就 会 起 作用 。 例 如 下 面 的 规则 声明 了 段落 的 上 下 边框 
是 蓝 色 ， 左 右边 框 是 红色 : 


pt 
border-style: solid; 
border-color: blue red; 


j 


注释 : 默认 的 边框 颜色 是 元 素 本 身 的 前 景色 。 如 果 没 有 为 边框 声明 颜色 ， 它 将 与 元 
素 的 文本 颜色 相同 。 另 一 方面 ， 如 果 元 素 没 有 任何 文本 ， 假 设 它 是 一 个 表格 ， 其 中 
只 包含 图 像 ， 那 么 该 表 的 边框 颜色 就 是 其 父 元 素 的 文本 颜色 (AH color 可 以 继 
承 ) 。 这 个 父 元 素 很 可 能 是 body、div 或 另 一 个 table。 


定义 单 边 颜色 


还 有 一 些 单 边 边框 颜色 属性 。 它 们 的 原理 和 与 单 边 样式 和 宽度 属性 相同 : 


border-top-color 
border-right-color 
border-bottom-color 
border-left-color 


要 为 h1 元 素 指定 实 线 黑色 边框 ， 而 右边 框 为 实 线 红色 ， 可 以 这 样 指定 : 


h1 { 
border-style: solid; 
border-color: black; 
border-right-color: red; 


} 


透明 边框 


2 dt 思 框 没有 样式 ， 就 没有 宽度 。 不 过 有 些 情况 下 您 可 能 希望 创建 
一 个 不 可 见 的 边框 。 


CSS2 引入 了 边框 颜色 值 transparent。 这 个 值 用 于 创建 有 宽度 的 不 可 见 边 框 。 请 看 
下 面 的 例子 : 


<a href="#">AAA</a> 
<a href="#">BBB</a> 
<a href="#">CCC</a> 


我 们 为 上 面 的 链接 定义 了 如 下 样式 : 


a:link, a:visited { 
border-style: solid; 
border-width: 5px; 
border-color: transparent; 


a:hover {border-color: gray; } 


如 需 查 看 以 上 样式 的 效果 ， 请 点 击 : 


从 某 种 意义 上 说 ， 利 用 transparent， 使 用 边框 就 像 是 额外 的 内 边 距 一 样 ; 此 外 还 有 
一 个 好 义 ， d Ec mam LEAFA, AAT 
素 的 背景 会 延伸 到 边框 区 域 (如 果 有 可 见 背景 的 话 ) 。 


重要 事项 : 在 IE7 Za, IE/WIN 没有 提供 对 transparent 的 支持 。 在 以 前 的 版 本 ， 
IE 会 根据 元 素 的 color 值 来 设置 边框 颜色 。 


CSS 边框 实例 : 


所 有 边框 属性 在 一 个 声明 之 中 

设置 四 边框 样式 

设置 每 一 边 的 不 同 边框 

所 有 边框 宽度 属性 在 一 个 声明 之 中 
置 四 个 边框 的 颜色 

所 有 下 边框 属性 在 一 个 声明 中 

设置 下 边框 的 颜色 

设置 下 边框 的 样式 

设置 下 边框 的 宽度 
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所 有 左边 框 属性 在 一 个 声明 之 中 
设置 左边 框 的 颜色 
设置 左边 框 的 样式 
设置 左边 框 的 宽度 
所 有 右边 框 属性 在 一 个 声明 之 中 
设置 右边 框 的 颜色 
设置 右边 框 的 样式 
设置 右边 框 的 宽度 
所 有 上 边框 属性 在 一 个 声明 之 中 
设置 上 边框 的 颜色 
设置 上 边框 的 样式 
设置 上 边框 的 宽度 


CSS 边框 属性 


属性 描述 
border 简写 属性 ， 用 于 把 针对 四 个 边 的 属性 设置 在 一 个 声明 。 
border-style ca 受 置 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 设置 边框 


m CSR, AFATRAMANERE TE, RH Motos 
border-width 各 边 边 框 设 置 宽度 。 


简写 属性 ， 设 置 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 ， 或 为 4 
个 边 分 别 设置 颜色 。 


border-bottom ， 简写 属性 ， 用 于 把 下 按 框 的 所 有 属性 设置 到 一 个 声明 中 。 


border-color 


qucm 设置 元 素 的 下 边框 的 颜色 。 
设置 元 素 的 下 边框 的 样式 。 
bottom-width 。， 设置 元 素 的 下 边框 的 宽度 。 
border-left 简写 属性 ， 用 于 把 左边 框 的 所 有 属性 设置 到 一 个 声明 中 。 
bordele ”设置 元 素 的 左边 杠 的 颜色 。 


CSS 边框 


718 
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border-left- 
style 


border-left- 
width 


border-right 


border-right- 
color 


border-right- 
style 


border-right- 
width 


border-top 


border-top- 
color 


border-top- 
style 


border-top- 
width 


CSS 边框 


设置 元 素 的 左边 框 的 样式 。 


置 元 素 的 左边 框 的 宽度 。 


wa 


简写 属性 ， 用 于 把 右边 框 的 所 有 属性 设置 到 一 个 声明 中 。 


`~ 


设置 元 素 的 右边 框 的 颜色 。 


s 


设置 元 素 的 右边 框 的 样式 。 


设置 元 素 的 右边 框 的 宽度 。 


简写 属性 ， 用 于 把 上 边框 的 所 有 属性 设置 到 一 个 声明 中 。 


上 边框 的 颜色 。 


设置 元 素 的 上 边框 的 样式 。 


边框 的 宽度 。 


设置 元 素 的 上 
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CSS 外 边 距 


围绕 在 元 素 边 框 的 空白 区 域 是 外 边 距 。 设 置 外 边 距 会 在 元 素 外 创建 额外 的 “空白 ”。 


设置 外 边 距 的 最 简单 的 方法 就 是 使 用 margin 属性 ， 这 个 属性 接受 任何 长 度 单 位 、 
百分数 值 甚至 负 值 。 


CSS margin 属性 


设置 外 边 距 的 最 简单 的 方法 就 是 使 用 margin 属性 。 
margin 属性 接受 任何 长 度 单位 ， 可 以 是 像素 、 英 寸 、 毫 米 或 em. 


margin 可 以 设置 为 auto。 更 常见 的 做 法 是 为 外 边 距 设置 长 度 值 。 下 面 的 声明 在 h1 
元 素 的 各 个 边 上 设置 了 1/4 英寸 宽 的 空白 : 


hi (margin : 0.25in;} 


RUM h1 元 素 的 四 个 边 分 别 定 义 了 不 同 的 外 边 距 ， 所 使 用 的 长 度 单位 是 像 
3R (px) : 


hi (margin : 10px Opx 15px 5px;} 


与 内 边 距 的 设置 相同 ， 这 些 值 的 顺序 是 从 上 和 外边 距 (top) 开始 围 着 元 素 顺 时 针 旋 转 
的 : 


margin: top right bottom left 


另外 ， 还 可 以 为 margin 设置 一 个 百分比 数值 : 


p {margin : 10%;} 


百分数 是 相对 于 父 元 素 的 width 计算 的 。 上 面 这 个 例子 为 p 元 素 设 置 的 外 边 距 是 
父 元 素 的 width 的 10%。 


margin 的 默认 值 是 0， 所 以 如 果 没 有 为 margin 声明 一 个 值 ， 就 不 会 出 现 外 边 距 。 
但 是 ， 在 实际 中 ， 浏 览 器 对 许多 元 素 已 经 提供 了 预定 的 样式 ， 外 边 距 也 不 例外 。 例 
如 ， 在 支持 CSS 的 浏览 器 中 ， ea r el I 
因此 ， 如 果 没 有 为 p 元 素 声 明 外 边 距 ， 浏览 器 可 能 会 自己 应 用 一 个 外 边 距 。 当 然 ， 
只 要 你 特别 作 了 声明 ， 就 会 覆盖 默认 样式 。 


值 复制 


还 记得 吗 ?我 们 鲁 经 在 前 两 节 中 提 到 过 值 复制 。 下 面 我 们 为 您 讲解 如 何 使 用 值 复 
制 


o 


有 时 ， 我 们 会 输入 一 些 重复 的 值 : 


p (margin: 0.5em 1em 0.5em tem; } 


通过 值 复制 ， 您 可 以 不 必 重 复 地 键 人 这 对 数字 。 上 面 的 规则 与 下 面 的 规则 是 等 价 
BY : 


p (margin: 0.5em 1em; } 


这 两 个 值 可 以 取代 前 面 4 个 值 。 这 是 如 何 做 到 的 呢 ? CSS 定义 了 一 些 规 则 ， 人 允许 
为 外 边 距 指定 少 于 4 个 值 。 规 则 如 下 : 
e 如 果 缺 少 左 外 边 距 的 值 ， 则 使 用 右 外 边 距 的 值 。 


e 如 果 缺 少 下 外 边 距 的 值 ， 则 使 用 上 和 外边 距 的 值 。 
e 如 果 缺 少 右 外 边 距 的 值 ， 则 使 用 上 和 外边 距 的 值 。 


下 图 提供 了 更 直观 的 方法 来 了 解 这 一 点 : 





o 
中 


top right bottom 


换 句 话说 ， 如 果 为 外 边 距 指定 了 3 个 值 ， 则 第 4 Ma MEAE) 会 从 第 2 Ma 

( 右 外 边 距 ) 复制 得 到 。 如 果 给 定 了 两 个 值 ， 第 4 个 值 会 从 第 2 个 值 复制 得 到 ， 第 
3 “Ma (FARE) 会 从 第 1 个 值 (上 外边 距 ) 复制 得 到 。 最 后 一 个 情况 ， 如 果 只 
给 定 一 个 值 ， 那 么 其 他 3 个 外 边 距 都 由 这 个 值 (上 外 边 距 ) 复制 得 到 。 


利用 这 个 简单 的 机 制 ， 您 只 需 指定 必要 的 值 ， 而 不 必 全 部 都 应 用 4 个 值 ， 例 如 : 
hi (margin: 0.25em 1em 0.5em;} /* 等 价 于 0.25em 1em 0.5em 1em */ 


h2 (margin: 0.5em 1em;} /* 等 价 于 0.5em 1em 0.5em 1em */ 
p (margin: 1px;) /* 等 价 于 1px 1px 1px 1px */ 


LEN 1" Ll 
这 种 办 法 有 一 个 小 缺点 ， 您 最 后 肯定 会 遇 到 这 个 问题 。 假 设 希 望 把 p 元 素 的 上 外 边 


距 和 左 外 边 距 设置 为 20 像素 ， 下 外 边 距 和 右 外 边 距 设置 为 30 像素 。 在 这 种 情况 
下 ， 必 须 写作 : 


p {margin: 20px 30px 30px 20px;} 


这 样 才 能 得 到 您 想 要 的 结果 。 遗 憾 的 是 ， 在 这 种 情况 下 ， 所 需 值 的 个 数 没有 办 法 更 


再 来 看 另外 一 个 例子 。 如 果 希 望 除了 左 外 边 距 以 外 所 有 其 他 外 边 距 都 是 auto ( 左 外 
边 距 是 20px) : 


p {margin: auto auto auto 20px;} 


[S] EB, BE T 问题 在 于 ， 键 和 这些 auto 有 些 麻 烦 。 如 果 
您 只 是 希望 控制 元 素 单 边 上 的 外 边 距 ， 请 使 用 单 边 外 边 距 属性 。 


单 边 外 边 距 属性 


您 可 以 使 用 单 边 外 边 距 属性 为 元 素 单 边 上 的 外 边 距 设置 值 。 假 设 您 希望 把 p 元 素 的 
左 外 边 距 设置 为 20px。 不 必 使 用 margin (需要 键入 很 多 auto) ， 而 是 可 以 采用 以 
下 方法 : 


p (margin-left: 20px;} 


您 可 以 使 用 下 列 任何 一 个 属性 来 只 设置 相应 上 的 外 边 距 ， 而 不 会 直接 影响 所 有 其 他 
外 边 距 : 

margin-top 

margin-right 

margin-bottom 

margin-left 


一 个 规则 中 可 以 使 用 多 个 这 种 单 边 属性 ， 例 如 


h2 { 
margin-top: 20px; 
margin-right: 30px; 
margin-bottom: 30px; 
margin-left: 20px; 


当然 ， 对 于 这 种 情况 ， 使 用 margin 可 能 更 容易 一 些 : 


p {margin: 20px 30px 30px 20px;} 


不 论 使 用 单 边 属性 还 是 使 用 margin， 得 到 的 结果 都 一 样 。 一 般 来 说 ， 如 果 希 望 为 多 
个 边 设 置 外 边 距 ， 使 用 margin 会 更 容易 一 些 。 不 过 ， 从 文档 显示 的 角度 看 ， 实 际 
上 使 用 哪 种 方法 都 不 重要 ， 所 以 应 该 选择 对 自己 来 说 更 容易 的 一 种 方法 。 


提示 和 注释 


提示 : Netscape #1 IE 对 body 标签 定义 的 默认 边 距 (margin) 值 是 8px。 而 

Opera 不 是 这 样 。 相 反 地 ，Opera 将 内 部 填充 (padding) 的 默认 值 定义 为 8px, 
因此 如 果 希 望 对 整个 网 站 的 边缘 部 分 进行 调整 ， 并 将 之 正确 显示 于 Opera 中 ， 那 么 
必须 对 body 的 padding 进行 自 定义 。 


CSS 外 边 距 实例 : 


设置 文本 的 左 外 边 距 
设置 文本 的 右 外 边 距 
设置 文本 的 上 外 边 距 
设置 文本 的 下 外 边 距 
所 有 的 外 边 距 属性 在 一 个 声明 中 。 


CSS 外 边 距 属性 
属性 描述 
margin 简写 属性 。 在 一 个 声明 中 设置 所 有 外 边 距 属 性 。 
margin-bottom 设置 元 素 的 下 外 边 距 。 
margin-left 设置 元 素 的 左 外 边 距 。 
margin-right 设置 元 素 的 右 外 边 距 。 
margin-top 设置 元 素 的 上 外 边 距 。 


CSS 外 边 距 合并 


外 边 距 合并 指 的 是 ， 当 两 个 垂直 外 边 距 相遇 时 ， 它 们 将 形成 一 个 外 边 距 。 
合并 后 的 外 边 距 的 高 度 等 于 两 个 发 生 合并 的 外 边 距 的 高 度 中 的 较 大 者 。 


外 边 距 合并 
外 边 距 合并 (县 加 ) 是 一 个 相当 简单 的 概念 。 但 是 ， 在 实践 中 对 网 页 进行 布局 时 ， 
它 会 造成 许多 混淆 。 


2: 外 边 距 合 并 指 的 是 ， 当 两 个 垂直 外 边 距 相 遇 时 ， 它 们 将 形成 一 个 外 边 
ER. 后 的 外 边 距 的 高 度 等 于 两 个 发 生 合 并 的 外 边 距 的 高 度 中 的 较 大 者 。 


一 个 元 素 出 现在 另 一 个 元 素 上 面 时 ， 第 一 个 元 素 的 下 外 边 距 与 第 二 个 元 素 的 上 外 
边 距 会 发 生 合并 。 请 看 下 图 : 














合并 之 前 合并 之 后 
| 
| 
| 
| 
内 容 区 域 内 容 区 域 | 
| 
| 
| 
margin-bottom : 20px margin-bottom : 20px | 
bide SF | 
margin-top: 10px FER TP tB | 
内 容 区 域 | 
| 
内 容 区 域 | 
| 











一 个 元 素 包 含 在 另 一 个 元 素 中 时 (假设 没有 内 边 距 或 边框 把 外 边 距 分 隔 开 ) ， 它 
ih ERUS EAR 距 也 会 发 生 合并 。 请 看 下 图 : 


合并 之 前 合并 之 后 








margin-top: 20px margin-top: 20px 
nep 外 边 距 合并 ues eae 
PEE 1 FER T-P tB B e zl 
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假设 有 一 个 空 元 素 ， 它 有 外 边 距 ， 但 是 没有 边框 或 
与 下 外 边 距 就 磁 到 了 一 起 ， 它 们 会 发 生 合 并 : 


在 这 种 情况 下 ， 上 外 边 距 


填充 。 


合并 之 前 合并 之 后 





i | 
margin-top: 20px | 


| 





| 
| IHARES | 
| 形成 一 个 外 边 距 7 ' 





如 果 这 个 外 边 距 遇 到 另 一 个 元 素 的 外 边 距 ， 它 还 会 发 生 合并 : 
合并 之 后 


合并 之 前 





| 
margin-top: 20px | 


] 


| 


| 

| 所 有 外 边 距 合并 ， 

| EMNE “上 
| 
| 








margin-top: 20px 





margin-top: 20px 


这 就 是 一 系列 的 段落 元 素 占用 空间 非常 小 的 原因 ， 因 为 它们 的 所 有 外 边 距 都 合并 
它 是 有 意义 的 。 以 由 几 个 段落 组 


一 起 ， 形 成 了 一 个 小 的 外 边 距 。 


| 


外 边 距 合并 初 看 上 去 可 能 有 点 奇怪 ， 但 是 实际 上 ， 

成 的 典型 文本 页 面 为 例 。 第 一 个 段落 上 面 的 空间 等 于 段落 的 上 外 边 距 。 如 果 没 有 外 
边 距 合 并 ， 后 续 所 有 段落 之 间 的 外 边 距 都 将 是 相 邻 上 外 边 距 和 下 外 边 距 的 和 。 这 意 
味 着 段落 之 间 的 空间 是 页 面 顶部 的 两 倍 。 如 果 发 生 外 边 距 合并 ， 段 落 之 间 的 上 外 边 


距 和 下 外 边 距 就 合并 在 一 起 ， 这 样 各 处 的 距离 就 一 致 了 。 
设 有 外 边 距 合并 有 外 边 距 合并 
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段落 之 间 的 外 边 距 与 上 外 边 距 相同 
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注释 : 只 有 普通 文档 流 中 块 框 的 垂直 外 边 距 才 会 发 生 外 边 距 合并 。 行 内 框 


或 绝对 定位 之 间 的 外 边 距 不 会 合并 。 


、 浮 动 框 


CSS 定位 


CSS 定位 (Positioning) 


CSS 定位 (Positioning) 属性 允许 你 对 元 素 进 行 定 位 。 


CSS 定位 和 浮动 


CSS 为 定位 和 浮动 提供 了 一 些 属 性 ， 利 用 这 些 属性 ， 可 以 建立 列 式 布局 ， 将 布局 的 
一 部 分 与 另 一 部 分 重合 ， 还 可 以 完成 多 年 来 通常 需要 使 用 多 个 表格 才能 完成 的 任 
务 。 


定位 的 基本 思想 很 简单 ， 它 允许 你 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现 的 位 置 ， 
或 者 相对 于 父 元 素 、 另 一 个 元 素 甚至 浏览 器 窗口 本 身 的 位 置 。 显 然 ， 这 个 功能 非常 
强大 ， 也 很 让 人 吃惊 。 要 知道 ， 用 户 代理 对 CSS2 中 定位 的 支持 远 胜 于 对 其 它 方面 
的 支持 ， 对 此 不 应 感到 奇怪 。 


另 一 方面 ，CSS1 中 首次 提出 了 浮动 ， 它 以 Netscape 在 Web 发 展 初期 增加 的 一 个 
功能 为 基础 。 浮 动 不 完全 是 定位 ， 不 过 ， 它 当然 也 不 是 正常 流 布局 。 我 们 会 在 后 面 
的 章节 中 明确 浮动 的 含义 。 


一 切 音 为 杠 


div, h1 或 p 元 素 常 常 被 称 为 块 级 元 素 。 这 意味 着 这 些 元 素 显示 为 一 块 内 容 ， 即 “ 块 
框 ?。 与 之 相反 ，span 和 strong 等 元 素 称 为 “行内 元 素 ”， 这 是 因为 它们 的 内 容 显 示 
在 行 中 ， 即 “行内 框 ”。 


您 可 以 使 用 display 属性 改变 生成 的 框 的 类 型 。 这 意味 着 ， 通 过 将 display 属性 设置 
为 block， 可 以 让 行内 元 素 (比如 «a» WR) 表现 得 像 块 级 元 素 一 样 。 还 可 以 通过 
把 display 设置 为 none， 让 生成 的 元 素 根本 没有 框 。 这 样 的 话 ， 该 框 及 其 所 有 内 容 
就 不 再 显示 ， 不 占用 文档 中 的 空间 。 


但 是 在 一 种 情况 下 ， 即 使 没有 进行 显 式 定义 ， 也 会 创建 块 级 元 素 。 这 种 情况 发 生 在 
把 一 些 文 本 添加 到 一 个 块 级 元 素 (比如 div) 的 开头 。 即 使 没有 把 这 些 文本 定义 为 
入 沙 ， 它 也 会 被 当 作 上 段落 对 待 : 


<div> 

some text 

<p>Some more text.</p> 
</div> 


在 这 种 情况 下 ， 这 个 框 称 为 无 名 块 框 ， 因 为 它 不 与 专门 定义 的 元 素 相 关联 。 


块 级 元 素 的 文本 行 也 会 发 生 类 似 的 情况 。 假 设 有 一 个 包含 三 行文 本 的 段落 。 每 行文 
本 形成 一 个 无 名 框 。 无 法 直接 对 无 名 块 或 行 框 应 用 样式 ， 因 为 没有 可 以 应 用 样式 的 
地 方 (注意 ， 行 框 和 行内 框 是 两 个 概念 ) 。 但 是 ， 这 有 助 于 理解 在 屏幕 上 看 到 的 所 


有 东西 都 形成 某 种 框 。 


CSS 定位 机 制 


CSS 有 三 种 基本 的 定位 机 制 : 普通 流 、 浮 动 和 绝对 定位 。 


除非 专门 指定 ， 否 则 所 有 框 都 在 普通 流 中 定位 。 也 就 是 说 ， 普 通 流 中 的 元 素 的 位 置 
由 元 素 在 (X)HTML 中 的 位 置 决定 。 


块 级 框 从 上 到 下 一 个 接 一 个 地 排列 ， 框 之 间 的 垂直 距离 是 由 框 的 垂直 外 边 距 计算 出 


o 


行内 框 在 一 行 中 水 平 布置 。 可 以 使 用 水 平 内 边 距 、 边 框 和 外 边 距 调整 它们 的 间距 。 
但 是 ， 垂 站内 边 距 、 边 框 和 外 边 距 不 影响 行内 框 的 高 度 。 由 一 行 形成 的 水 平 框 称 为 
行 框 (Line Box) ， 行 框 的 高 度 总 是 足以 容纳 它 包含 的 所 有 行内 框 。 不 过 ， 设 置 行 
高 可 以 增加 这 个 框 的 高 度 。 


在 下 面 的 章节 ， 我 们 会 为 您 详细 讲解 相对 定位 、 绝 对 定位 和 浮动 。 


CSS position 属性 

通过 使 用 position 属性 ， 我 们 可 以 选择 4 种 不 同类 型 的 定位 ， 这 会 影响 元 素 框 生成 
的 方式 。 

position 属性 值 的 含义 : 

static 

relative 

absolute 

fixed 


提示 : 相对 定位 实际 上 被 看 作 普通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 相 对 于 它 
在 普通 流 中 的 位 置 。 


实例 
定位 : 相对 定位 
定位 : 绝对 定位 
定位 : 定位 
使 用 固定 值 设 
使 用 百分比 设 


图 像 的 上 边缘 


ia 
置 图 像 的 上 边缘 
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使 用 像素 值 设置 图 像 的 底部 边缘 


使 用 百分比 设 
使 用 固定 值 设 
使 用 百分比 设 


iB 
iB 
iB 
使 用 固定 值 设 置 


图 像 的 底部 边缘 
图 像 的 左边 缘 
图 像 的 左边 缘 
图 像 的 右边 缘 


使 用 百分比 设置 图 像 的 右边 缘 

如 何 使 用 滚动 条 来 显示 元 素 内 浴 出 的 内 容 
如 何 降 藏 浴 出 元 素 中 浴 出 的 内 容 

如 何 设置 浏览 器 来 自动 地 处 理 浴 


设置 元 素 的 形状 
垂直 排列 图 象 
Z-index 


Z-index 


CSS 定位 属性 


CSS 定位 属性 允许 你 对 元 素 进 行 定位 。 


属性 


position 
top 


right 
bottom 
left 
overflow 
clip 


vertical- 
align 


z-index 


描述 


把 元 素 放 置 到 一 个 静态 的 、 相 对 的 、 绝 对 的 、 或 固定 的 位 置 中 。 


定义 了 一 个 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 之 间 的 偏 


定义 了 定位 元 素 右 外 边 距 边界 与 其 包含 块 右边 界 之 间 的 偏 移 。 
定义 了 定位 元 素 下 外 边 距 边界 与 其 包含 块 下 边界 之 间 的 偏 移 。 
定义 了 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 移 。 
当 元 素 的 内 容 洽 出 其 区 域 时 发 生 的 事情 。 


~ 


设 


元 素 的 垂直 对 齐 方式 。 
设置 元 素 的 堆 厨 顺序 。 


CSS 定位 (Positioning) 


iB 
设置 元 素 的 形状 。 元 素 被 剪 人 这 个 形状 之 中 ， 然 后 显示 出 来 。 
iB 
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CSS 相对 定位 


= a i 元 素 仍 然 保持 其 未 定位 前 的 形状 ， 它 原 
本 所 占 的 空 间 仍 保留 


CSS 相对 定位 


相对 定位 是 一 个 非常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进 行 相对 定位 ， 它 将 出 现在 
它 所 在 的 位 置 上 。 然 后 ， 可 以 通过 设置 垂直 或 水 平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 
起 点 进行 移动 。 


如 果 将 top 设置 为 20px， 那 么 框 将 在 原 位 置顶 部 下 面 20 像素 的 地 方 。 如 果 left ix 
BA 30 像素 ， 那 么 会 在 元 素 左 边 创建 30 像素 的 空间 ， 也 就 是 将 元 素 向 右 移 动 。 


#box_relative { 
position: relative; 





left: 30px; 
top: 20px; 
如 下 图 所 示 : 
— —— — —— ce ce — ce ee < ae oe ^1 gt mm 一 一 一 一 一 一 一 一 一 一 一 一 | 
| E | | 
| | ; top:20px; | | | 
] E | 
| L[————— —L-— A E N 
| 框 1 | | left:30px | | 框 3 | | 
— — n E | 一 一 | 
| 
| | | 
框 2 | | 
包含 元素 | | 


注意 ， 在 使 用 相对 定位 时 ， 无 论 是 否 进 行 移动 ， 元 素 仍 然 占据 原来 的 空间 。 因 此 ， 
移动 元 素 会 导致 它 履 盖 其 它 框 。 


CSS 相对 定位 实例 


定位 : 相对 定位 


CSS 绝对 定位 


设置 为 绝对 定位 的 元 素 框 从 文档 流 完 全 删除 ， 并 相对 于 其 包含 块 定位 ， 包 含 块 可 能 
是 文档 中 的 另 一 个 元 素 或 者 是 初始 包含 天。 元 素 原先 在 正常 文档 流 中 所 占 的 空 间 会 
关闭 ， 就 好 像 该 元 素 原 来 不 存在 一 样 。 元 素 定 位 后 生成 一 个 块 级 框 ， 而 不 论 原来 它 
在 正 常 流 中 生成 何 种 类 类 型 的 框 。 


CSS 绝对 定位 


绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 ， 因 此 不 占据 空间 。 这 一 点 与 相对 定位 不 同 ， 
相对 定位 实际 上 被 看 作 普 通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 相对 于 它 在 普通 
流 中 的 位 置 。 


普通 流 中 其 它 元 素 的 布局 就 像 绝 对 定位 的 元 素 不 存在 一 


#box_relative { 
position: absolute; 
left: 30px; 
top: 20px; 


如 下 图 所 示 : 


| pásma r r ae] A m pucumwEPIE npn ur m mp pannum 
| et | 
| top:20px | | | 
| | 

| left: 30px |! | 
: | 

| | 
| | 


| 
| 
| 
| 
| 
| 
| 
| 
ge rene ell | SES | 
| 
| 
| 
| 
| 
| 
| 





绝对 定位 的 元 素 的 位 置 相 对 于 最 近 的 已 定位 祖先 元 素 ， 如 果 元 素 没 有 已 定位 的 祖先 
元 素 ， 那 么 它 的 位 置 相对 于 最 初 的 包含 块 。 

对 于 定位 的 主要 问题 是 要 记 住 每 种 定位 的 意义 。 所 以 ， 现 在 让 我 们 复习 一 下 学 过 的 
知识 吧 : 相对 定位 是 “相对 于 ”元 素 在 文档 中 的 初始 位 置 ， 而 绝对 定位 是 “相对 于 "最近 
的 已 定位 祖先 元 素 ， 如 果 不 存 在 已 定位 的 祖先 元 素 ， 那 么 “相对 于 "最初 的 包含 块 。 
注释 : 根据 用 户 代理 的 不 同 ， 最 初 的 包含 块 可 能 是 画布 或 HTML 元 素 。 


提示 : 因为 绝对 定位 的 框 与 文档 流 无 关 ， 所 以 它们 可 以 覆盖 页 面 上 的 其 它 元 素 。 可 
以 通过 设置 z-index 属性 来 控制 这 些 框 的 堆放 次 序 。 


CSS 绝对 定位 实例 


定位 : 绝对 定位 


CSS 浮动 


浮动 的 框 可 以 向 左 或 向 右 移 动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 另 一 个 浮动 框 的 边框 
为 止 。 

由 于 浮动 框 不 在 文档 的 普通 流 中 ， 所 以 文档 的 普通 流 中 的 块 框 表现 得 就 像 浮动 框 不 
存在 一 祥 。 


CSS 浮动 


请 看 下 图 ， 当 把 框 1 向 右 浮动 时 ， 它 脱离 文档 流 并 且 向 右 移动 ， 直 到 它 的 右边 缘 碰 
到 包含 框 的 右边 缘 : 





APP ah ANE CET S 
1 1 
pow || m | 
| 
| | | | i> | 
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toes | 








再 请 看 下 图 ， 当 框 1 向 左 浮 动 时 ， 它 脱离 文档 流 并 且 向 左 移动 ， 直 到 它 的 左边 缘 碰 
到 包含 框 的 左边 缘 。 因 为 它 不 再 处 于 文档 流 中 ， 所 以 它 不 占据 空间 ， 实 际 上 覆盖 住 
了 框 2， 使 框 2 从 视图 中 消失 。 


如 果 把 所 有 三 个 框 都 向 左 移动 ， 那 么 框 1 向 左 浮动 直到 碰 到 包含 框 ， 另 外 两 个 框 向 
左 浮动 直到 磁 到 前 一 个 浮动 框 。 





E AERA a= MERE 
M cu E AREE 1 下 面 ES d Pree 
= ieee! 
| i 1 | | €i iE 2 || 框 3 | 


a 一 a ce ce ee ee - cee ee ee ee cee — — ed 








如 下 图 所 示 ， 如 果 包 含 框 太宗 ， 无 法 容纳 水 平 排列 的 三 个 浮动 元 素 ， 那 么 其 它 浮动 
块 向 下 移动 ， 直 到 有 足够 的 空间 。 如 果 浮动 元 素 的 高 度 不 同 ， 那 么 当 它们 向 下 移动 
时 可 能 被 其 它 浮动 元 素 " 卡 住 " 
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CSS float 属性 


在 CSS 中， 我 们 通过 float 属性 实现 元 素 的 浮动 。 
如 需 更 多 有 关 float 属性 的 知识 ， 请 访问 参考 手册 : CSS float 属性 。 
行 框 和 清理 


浮动 框 旁边 的 行 框 被 缩短 ， 从 而 给 浮动 框 留 出 空间 ， 行 框 围绕 浮动 框 。 
因此 ， 创 建 浮动 框 可 以 使 文本 围绕 图 像 : 


APE Ele EIE PIS 
N 

图 像 图 像 ` 
€. 


x 
行 框 被 缩短 ， 给 浮动 图 像 留 出 空间 


要 想 阻 止 行 框图 绕 浮动 框 ， 需 要 对 该 框 应 用 clear 属性 。clear 属性 的 值 可 以 是 
left, right, both 或 none， 它 表示 框 的 哪些 边 不 应 该 挨 着 浮动 框 。 


为 了 实现 这 种 效果 ， 在 被 清理 的 元 素 的 上 外 边 距 上 添加 足够 的 空间 ， 使 元 素 的 项 边 
缘 垂 直下 降 到 浮动 框 下 面 : 


清理 第 二 个 段落 清理 第 二 个 段落 


图 像 图 像 


Bn Ee ,为 浮动 框 留 出 空间 


这 是 一 个 有 用 的 工具 ， 它 让 周围 的 元 素 为 浮动 元 素 留 出 空间 。 


让 我 们 更 详细 地 看 看 浮动 和 清理 。 假 设 希望 让 一 个 图 片 浮动 到 文本 块 的 左边 ， 并 且 
希望 这 幅 图 片 和 文本 包含 在 另 一 个 县 有 背景 产 色 和 边框 的 元 素 中 。 您 可 能 编写 下 面 
的 代码 : 


.news { 
background-color: gray; 
border: solid 1px black; 
} 


.hews img { 
float: left; 
} 


.hews p { 
float: right; 
} 


«div class="news"> 

<img src="news-pic.jpg" /> 
<p>some text</p> 

</div> 


这 种 情况 下 ， 出 现 了 一 个 问题 。 因 为 浮动 元 素 脱离 了 文档 流 ， 所 以 包围 图 片 和 文本 
的 div 不 占据 空间 。 


如 何 让 包围 元 素 在 视觉 上 包围 浮动 元 素 呢 ?需要 在 这 个 元 素 中 的 某 个 地 方 应 用 
clear : 


浮动 元 素 不 占据 空间 进行 清理 的 宝 div 


不 幸 的 是 出 现 了 一 个 新 的 问题 ， 由 于 没有 现 有 的 元 素 可 以 应 用 清 


添加 一 个 空 元 素 并 且 清 理 它 。 


.news { 
background-color: gray; 
border: solid 1px black; 


} 


.hews img { 
float: left; 


} 


.hews p { 
float: right; 
} 


.Clear { 
clear: both; 


} 


<div class="news"> 

<img src="news-pic.jpg" /> 
<p>some text</p> 

<div class="clear"></div> 
</div> 


理 ， 


所 以 我 们 只 能 


这 样 可 以 实现 我 们 希望 的 效果 ， 但 是 需要 添加 多 余 的 代码 。 常 常 有 元 素 可 以 应 用 


clear， 但 是 有 时 候 不 得 不 为 了 进行 布局 而 添加 无 意义 的 标记 。 
不 过 我 们 还 有 另 一 种 办 法 ， 那 就 是 对 容器 div 进行 浮动 : 


.news { 
background-color: gray; 
border: solid 1px black; 
float: left; 
} 


.hews img { 
float: left; 
} 


.news p { 
float: right; 
} 
<div class="news"> 
<img src="news-pic.jpg" /> 
<p>some text</p> 
</div> 


这 样 会 得 到 我 们 希望 的 效果 。 不 幸 的 是 ， 下 一 个 元 素 会 受到 这 个 浮动 元 素 的 影响 。 
为 了 解决 这 个 问题 ， 有 些 人 选择 对 布局 中 的 所 有 东西 进行 浮动 ， 然 后 使 用 适当 的 有 
意义 的 元 素 (常常 是 站 点 的 页 脚 ) 对 这 些 浮动 进行 清理 。 这 有 助 于 减少 或 消除 不 必 
要 的 标记 。 

事实 上 ，W3School 站 点 上 的 所 有 页 面 都 采用 了 这 种 技术 ， 如 果 您 打开 我 们 使 用 

CSS 文件 ， 您 会 看 到 我 们 对 页 脚 的 div 进行 了 清理 ， 而 页 脚 上 面 的 三 个 div 都 向 左 
浮动 。 


CSS clear 属性 


我 们 刚才 详细 讨论 了 CSS 清理 的 工作 原理 和 clear 属性 应 用 方法 。 如 果 您 希望 学 习 
更 多 有 关 clear 属性 的 知识 ， 请 访问 参考 手册 : CSS clear 属性 。 


浮动 和 清理 实例 

float 属性 的 简单 应 用 

将 带 有 边框 和 边界 的 图 像 浮动 于 段落 的 右 例 
带 标题 的 图 像 浮动 于 右 侧 

使 段落 的 首 字 母 浮动 于 左 便 

创建 水 平 菜单 

创建 无 表格 的 首页 

清除 元 素 的 侧面 
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CSS 选择 页 


CSS TRAIA 


CSS 元 素 选 择 器 
见 的 CSS 选择 器 是 元 素 选 择 器 。 换 句 话 说 ， 文 档 的 元 素 就 是 最 基本 的 选择 


a 


o 


如 果 设 置 HTML 的 样式 ， 选 择 器 通常 将 是 某 个 HTML 元 素 ， 比 如 p. h1, em a, 
甚至 可 以 是 html AS: 


html {color:black; } 
hi {color:blue; } 
h2 {color:silver;} 


可 以 将 某 个 样式 从 一 个 元 素 切 换 到 另 一 个 元 素 。 


ore ee (而 不 是 h1 元 素 ) 设置 为 屎 色 。 只 需要 把 h1 选择 器 
改 为 p 


html {color:black;} 


p {color:gray;} 
h2 (color:silver;) 


类 型 选择 器 


在 W3C 标准 中 ， 元 素 选 择 器 又 称 为 类 型 选择 器 (type selector) 。 

“类 型 选择 器 匹配 文档 语言 元 素 类 型 的 名 称 。 类 型 选择 器 匹配 文档 树 中 该 元 素 类 型 的 
每 一 个 实例 。， 

下 面 的 规则 匹配 文档 树 中 所 有 h1 元 素 : 


hi (font-family: sans-serif; } 


因此 ， 我 们 也 可 以 为 XML 文档 中 的 元 素 设 置 样式 : 


XML 文档 : 


<?xml version="1.0" encoding="IS0-8859-1"?> 
<?xml-stylesheet type="text/css" href="note.css"?> 
<note> 

<to>George</to> 

<from>John</from> 

<heading>Reminder</heading> 

<body>Don't forget the meeting!</body> 

</note> 


CSS 文档 : 


note 


{ 


font-family:Verdana, Arial; 
margin-left:30px; 
} 


to 
{ 


font-size:28px; 
display: block; 
} 


from 


{ 
font-size:28px; 
display: block; 
} 


heading 


{ 


color: red; 
font-size:60px; 
display: block; 
} 


body 


color: blue; 
font-size:35px; 
display: block; 
} 


查看 效果 


通过 上 面 的 例子 ， 您 可 以 看 到 ，CSS 元 素 选择 器 (类 型 选择 器 ) 可 以 设置 XML x 
档 中 元 素 的 样式 。 


如 果 您 需要 更 多 关于 为 XML 文档 添加 样式 的 知识 ， 请 访问 w3school 的 XML AL 


程 。 


CSS 分 组 


选择 磊 分 组 


假设 希望 h2 元 素 和 段落 都 有 灰色 。 为 达到 这 个 目的 ， 最 容易 的 做 法 是 使 用 以 下 声 
明 : 


h2, p {color:gray;} 


将 h2 和 p 选择 器 放 在 规则 左边 ， 然 后 用 逗号 分 隔 ， 就 定义 了 一 个 规则 。 其 右边 的 
样式 (color:gray;) 将 应 用 到 这 两 个 选择 器 所 引用 的 元 素 。 逗 号 告诉 浏览 器 ， 规 则 
中 包含 两 个 不 同 的 选择 器 。 如 果 没 有 这 个 逗号 ， 那 么 规则 的 含义 将 完全 不 同 。 参 见 
后 代 选 择 器 。 


可 以 将 任意 多 个 选择 器 分 组 在 一 起 ， 对 此 没有 任何 限制 。 
例如 ， 如 果 您 想 把 很 多 元 素 显 示 为 色色 ， 可 以 使 用 类 似 如 下 的 规则 : 


body, h2, p, table, th, td, pre, strong, em {color:gray;} 


提示 : 通过 分 组 ， 创 作者 可 以 将 某 些 类 型 的 样式 "压缩 "在 一 起 ， 这 样 就 可 以 得 到 更 
简洁 的 样式 表 。 


以 下 的 两 组 规则 能 得 到 同样 的 结果 ， 不 过 可 以 很 清楚 地 看 出 哪 一 个 写 起 来 更 容易 : 


/* no grouping */ 
hi {color:blue; } 
h2 {color:blue; } 
h3 {color:blue; } 
h4 {color:blue; } 
h5 {color:blue; } 
h6 {color:blue; } 


/* grouping */ 
hi, h2, h3, h4, h5, h6 {color:blue;} 


分 组 提供 了 一 些 有 意思 的 选择 。 例 如 ， 下 例 中 的 所 有 规则 分 组 都 是 等 价 的 ， 每 个 组 
只 是 展示 了 对 选择 器 和 声明 分 组 的 不 同方 法 : 


/* group 1 */ 

h1 {color:silver; background:white;} 
h2 {color:silver; background:gray;} 
h3 {color:white; background:gray;} 
h4 {color:silver; background:white;} 
b {color:gray; background:white; } 


/* group 2 */ 

hi, h2, h4 {color:silver; } 

h2, h3 {background: gray; } 

h1, h4, b {background:white; } 

h3 (color:white;) 

b {color:gray;} 

/* group 3 */ 

h1, h4 {color:silver; background:white; } 
h2 (color:silver;) 

h3 (color:white;) 

h2, h3 (background:gray;) 

b (color:gray; background:white; } 


亲自 试 一 试 


e group 1 
e group 2 
e group 3 


请 注意 ，group 3 中 使 用 了 “声明 分 组 "。 稍 后 我 们 会 介绍 “声明 分 组 ”。 


通 配 从 选择 器 


CSS2 引入 了 一 种 新 的 简单 选择 器 - 通 配 选 择 器 (universal selector) ， 显 示 为 一 
DES (*) 。 该 选择 器 可 以 与 任何 元 素 匹 配 ， 就 像 是 一 个 通配符 。 


例如 ， 下 面 的 规则 可 以 使 文档 中 的 每 个 元 素 都 为 红色 : 


* {color:red; } 


这 个 声明 等 价 于 列 出 了 文档 中 所 有 元 素 的 一 个 分 组 选择 器 。 利 用 通 配 选 择 器 ， 只 需 
敲 一 次 键 ( 仅 一 个 星 号 ) 就 能 使 文档 中 所 有 元 素 的 color 属性 值 指 定 为 red. 


声明 分 组 


我 们 既 可 以 对 选择 器 进行 分 组 ， 也 可 以 对 声明 分 组 。 


假设 您 希望 所 有 h1 元 素 都 有 红色 背景 ， 并 使 用 28 像素 高 的 Verdana 字体 显示 为 
蓝 色 文 本 ， 可 以 写 以 下 样式 : 


hi {font: 28px Verdana; } 
hi (color: blue;} 
hi (background: red;j 


但 是 上 面 这 种 做 法 的 效率 并 不 高 。 尤 其 是 当 我 们 为 一 个 有 多 个 样式 的 元 素 创 建 这 样 
一 个 列表 时 会 很 有 麻烦。 相反， 我 们 可 以 将 声明 分 组 在 一 起 : 


hi (font: 28px Verdana; color: white; background: black;) 


这 和 与 前 面 的 3 行 样 式 表 的 效果 完全 相同 。 


注意 ， 对 声明 分 组 ， 一 定 要 在 各 个 声明 的 最 后 使 用 分 号 ， 这 很 重要 。 浏 览 器 会 忽略 
样式 表 中 的 空白 符 。 只 要 加 了 分 号 ， 就 可 以 之 无 顾忌 地 采用 以 下 格式 建立 样式 : 


h1 { 
font: 28px Verdana; 
color: blue; 
background: red; 


} 


怎么 样 ， 上 面 这 种 写法 的 可 读 性 是 不 是 更 强 。 
不 过 ， 如 果 和 忽略 了 第 二 个 分 号 ， 用 户 代 理 就 会 把 这 个 样式 表 解 释 如 下 : 


h1 { 
font: 28px Verdana; 
color: blue background: red; 


} 


因为 background 对 color 来 说 不 是 一 个 合法 值 ， 而 且 由 于 只 能 为 color 指定 一 个 关 
键 字 ， 所 以 用 户 代理 会 完全 忽略 这 个 color 声明 (包括 background: black 部 分 ) 。 
这 样 h1 标题 只 会 显示 为 蓝 色 ， 而 没有 红色 背景 ， 不 过 更 有 可 能 根本 得 不 到 蓝 色 的 
h1。 相 反 ， 这 些 标题 只 会 显示 为 默认 颜色 (通常 是 黑色 ) ， 而 且 根本 没有 背景 色 。 
font: 28px Verdana 声明 仍 能 正常 发 挥 作用 ， 因 为 它 确实 正确 地 以 一 个 分 号 结尾 。 


与 选择 器 分 组 一 样 ， 声 明 分 组 也 是 一 种 便利 的 方法 ， 可 以 缩短 样式 表 ， 使 之 更 清 
晰 ， 也 更 易 维护 。 


提示 : 在 规则 的 最 后 一 个 声明 后 也 加 上 分 号 是 一 个 好 习惯 。 在 向 规则 增加 另 一 个 声 
明 时 ， 就 不 必 担 心 忘记 再 插入 一 个 分 号 。 


结合 选择 器 和 声明 的 分 组 


我 们 可 以 在 一 个 规则 中 结合 选择 器 分 组 和 声明 分 组 ， 就 可 以 使 用 很 少 的 语句 定义 相 
对 复 灯 的 样式 。 


下 面 的 规则 为 所 有 标题 指定 了 一 种 复杂 的 样式 : 


h1, h2, h3, h4, h5, h6 { 
color:gray; 
background: white; 
padding: 10px; 
border: 1px solid black; 
font-family: Verdana; 


} 


上 面 这 条 规则 将 所 有 标题 的 样式 定义 为 带 有 白色 背景 的 灰色 文本 ， 其 内 边 距 是 10 
像素 ， 并 带 有 1 像素 的 实心 边框 ， 文 本 字体 是 Verdana。 


CSS 类 选择 器 详解 
类 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 


CSS 类 选择 器 
类 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 
该 选择 器 可 以 单独 使 用 ， 也 可 以 与 其 他 元 素 结合 使 用 。 


提示 : 只 有 适当 地 标记 文档 后 ， 才 能 使 用 这 些 选择 器 ， 所 以 使 用 这 两 种 选择 器 通常 
需要 先 做 一 些 构想 和 计划 。 


要 应 用 样式 而 不 考虑 具体 设计 的 元 素 ， 最 常用 的 方法 就 是 使 用 类 选择 器 。 
修改 HTML 代码 


在 使 用 类 选择 器 之 前 ， 需 要 修改 具体 的 文档 标记 ， 以 便 类 选择 器 正常 工作 。 


为 了 将 类 选择 器 的 样式 与 元 素 关联 ， 必 须 将 cass 指定 为 一 个 适当 的 值 。 请 看 下 面 
的 HTML 代码 : 


<hi class="important"> 
This heading is very important. 
«/hi» 


«p class="important"> 


This paragraph is very important. 
</p> 


在 上 面 的 代码 中 ， 两 个 元 素 的 class 都 指定 为 important : 第 一 个 标题 ( h1 元 
素 ) ， 第 二 个 段落 (p 元 素 ) 。 


语法 


然后 我 们 使 用 以 下 语法 向 这 些 刀 类 的 元 素 应 用 样式 ， 即 类 名 前 有 一 个 点 号 〈.) ， 然 
后 结合 通 配 选择 器 : 


*.important {color:red; } 


如 果 您 只 想 选择 所 有 类 名 相同 的 元 素 ， 可 以 在 类 选择 器 中 忽略 通 配 选 择 器 ， 这 没有 
任何 不 好 的 影响 : 


. Important {color:red; } 


A 
A 
例如 ， 您 可 能 希望 只 有 段落 显示 为 红色 文本 : 


p.important (color:red;j 


选择 器 现在 会 匹配 class 属性 包含 important 的 所 有 p 元 素 ， 但 是 其 他 任何 类 型 的 
元 素 都 不 匹配 ， 不 论 是否 有 此 class 属性 。 选 择 器 p.important 解释 为 : "E class 
属性 值 为 important 的 所 有 段落 "。 因为 h1 元 素 不 是 段落 ， 这 个 规则 的 选择 器 与 之 
不 匹配 ， 因 此 h1 元 素 不 会 变 成 红色 文本 。 


如 果 你 确实 希望 为 h1 元 素 指定 不 同 的 样式 ， 可 以 使 用 选择 器 h1.important : 


p.important (color:red;j 
hi.important {color: blue; } 


CSS 多 类 选择 器 


在 上 一 节 中 ， 我 们 处 理 了 class 值 中 包含 一 个 词 的 情况 。 在 HTML 中 ， 一 个 class 
值 中 可 能 包含 一 个 词 列 表 ， 各 个 词 之 间 用 空格 分 隔 。 人 例如， 如果 希 望 将 一 个 特定 的 
元 素 同 时 标记 为 重要 (important) 和 和 警告 (warning) ， 就 可 以 写作 : 


<p class="important warning"> 
This paragraph is a very important warning. 
</p> 


这 两 个 词 的 顺序 无 关 紧 要 ， 写 成 warning important 也 可 以 。 


我 们 假设 class 为 important 的 所 有 元 素 都 是 粗 体 ， 而 class 为 warning 的 所 有 元 
RAPHE, class 中 同时 包含 important 和 warning 的 所 有 元 素 还 有 一 个 银色 的 背景 
。 就 可 以 写作 : 


,. Important {font-weight:bold; } 
.warning {font-style:italic;} 
.important.warning {background:silver; } 


通过 把 两 个 类 选择 器 链接 在 一 起 ， 仅 可 以 选择 同时 包含 这 些 类 名 的 元 素 (类 名 的 顺 
FEBR) 。 


如 果 一 个 多 类 选择 器 包含 类 名 列表 中 没有 的 一 个 类 名 ， 匹 配 就 会 失败 。 请 看 下 面 的 
规则 : 


.important.urgent (background:silver;) 


不 出 所 料 ， 这 个 选择 器 将 只 匹配 class 属性 中 包含 词 important 和 urgent 的 p 元 
素 。 因 此 ， 如 果 一 个 p 元 素 的 class 属性 中 只 有 词 important 和 warning， 将 不 能 
匹配 。 不 过 ， 它 能 匹配 以 下 元 素 : 


<p class="important urgent warning"> 
This paragraph is a very important and urgent warning. 
</p> 


重要 事项 : 在 IE7 之 前 的 版 本 中 ， 不 同 平台 的 Internet Explorer 都 不 能 正确 地 人 处理 
多 类 选择 器 。 


CSS ID 选择 器 详解 


ID 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 


在 某 些 方面 ，ID 选择 器 类 似 于 类 选择 器 ， 不 过 也 有 一 些 重要 差别 。 


语法 
首先 ，ID 选择 器 前 面 有 一 个 # 号 - 也 称 为 棋盘 号 或 井 号 。 
请 看 下 面 的 规则 : 


*#intro {font-weight : bold; } 


与 类 选择 器 一 样 ，ID 选择 器 中 可 以 忽略 通 配 选 择 器 。 前 面 的 例子 也 可 以 写作 : 
#intro {font-weight:bold; } 


这 个 选择 器 的 效果 将 是 一 样 的 。 


第 二 个 区 别 是 ID 选择 器 不 引用 class BHM, Se, CIA id 属性 中 的 
值 。 


以 下 是 一 个 实际 ID 选择 器 的 例子 


<p id="intro">This is a paragraph of introduction.</p> 


类 选择 器 还 是 ID 选择 器 ? 


在 类 选择 器 这 一 章 中 我 们 鲁 讲 解 过 ， 可 以 为 任意 多 个 元 素 指 定 类 。 前 一 章 中 类 名 
important 被 应 用 到 p 和 h1 元 素 ， 而 且 它 还 可 以 应 用 到 更 多 元 素 。 


区 别 1 : 只 能 在 文档 中 使 用 一 次 
与 类 不 同 ， 在 一 个 HTML x fir, ID 选择 器 会 使 用 一 次 ， 而 且 仅 一 次 。 


区 别 2 : 不 能 使 用 ID 词 列 表 


不 同 于 类 选择 器 ，ID 选择 器 不 能 结合 使 用 ， 因 为 ID 属性 不 允许 有 以 空格 分 隔 的 词 
列表 。 

区 别 3 : ID 能 包含 更 多 含义 

类 似 于 类 ， 可 以 独立 于 元 素来 选择 ID。 有 些 情况 下 ， 您 知道 文档 中 会 出 现 某 个 特定 
ID 值 ， 但 是 并 不 知道 它 会 出 现在 哪个 元 素 上 ， 所 以 您 想 声 明 独 立 的 ID 选择 器 。 例 
如 ， 您 可 能 知道 在 一 个 给 定 的 文档 中 会 有 一 个 ID 值 为 mostlmportant 的 元 素 。 您 

不 知道 这 个 最 重要 的 东西 是 一 个 段落 、 一 个 短语 、 一 个 列表 项 还 是 一 个 小 节 标 题 。 


您 只 知道 每 个 文档 都 会 有 这 么 一 个 最 重要 的 内 容 ， 它 可 能 在 任何 元 素 中 ， 而 且 只 能 
出 现 一 个 。 在 这 种 情况 下 ， 可 以 编写 如 下 规则 : 


#mostImportant {color:red; background: yellow; } 


这 个 规则 会 与 以 下 各 个 元 素 匹 配 (这 些 元 素 不 能 在 同一 个 文档 中 同时 出 现 ， 因 为 它 
们 都 有 相同 的 ID 值 ) : 


«hi id="mostImportant">This is important!</h1> 
«em id="mostImportant">This is important !</em> 
<ul id="mostImportant">This is important!</ul> 


亲自 试 一 试 : 
e 为 id 为 mostlmportant 的 h1 元 素 设 定 样式 


e 为 id 为 mostlmportant 的 em 元 素 设 定 祥 式 
e 为 id 为 mostlmportant 的 ul 元 素 设 定 样式 


区 分 大 小 写 
请 注意 ， 类 选择 器 和 [D 选择 器 可 能 是 区 分 大 小 写 的 。 这 取决 于 文档 的 语言 。HTML 


和 XHTML 将 类 和 ID 值 定义 为 区 分 大 小 写 ， 所 以 类 和 ID 值 的 大 小 写 必 须 与 文档 中 
的 相应 值 匹 配 。 


因此 ， 对 于 以 下 的 CSS 和 HTML， 元 素 不 会 变 成 粗 体 : 


#intro {font-weight:bold; } 


<p id="Intro">This is a paragraph of introduction.</p> 


由 于 字母 i 的 大 小 写 不 同 ， 所 以 选择 器 不 会 匹配 上 面 的 元 素 。 


CSS 属性 选择 器 详解 

CSS 2 引入 了 属性 选择 器 。 

属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 
简单 属性 选择 


如 果 希 望 选择 有 某 个 属性 的 元 素 ， 而 不 论 属性 值 是 什么 ， 可 以 使 用 简单 属性 选择 
Zire 


例子 1 
如 果 您 希望 把 包含 标题 (title) 的 所 有 元 素 变 为 红色 ， 可 以 写作 : 


*[title] {color:red;} 


例子 2 
与 上 面 类 似 ， 可 以 只 对 有 href 属性 的 锚 (a 元 素 ) 应 用 样式 : 


a[href] {color:red;} 


例子 3 
还 可 以 根据 多 个 属性 进行 选择 ， 只 需 将 属性 选择 器 链接 在 一 起 即 可 。 


例如 ， 为 了 将 同时 有 href 和 title 属性 的 HTML 超 链 接 的 文本 设置 为 红色 ， 可 以 这 
Hm: 


a[href][title] {color:red;} 


例子 4 
可 以 采用 一 些 创造 性 的 方法 使 用 这 个 特性 。 
例如 ， 可 以 对 所 有 带 有 alt 属性 的 图 像 应 用 样式 ， 从 而 突出 显示 这 些 有 效 的 图 像 : 


img[alt] {border: 5px solid red;) 


提示 : 上 面 这 个 特例 更 适合 用 来 诊断 而 不 是 设计 ， 即 用 来 确定 图 像 是 否 确实 有 效 。 


例子 5 : 为 XML 文档 使 用 属性 选择 器 


属性 选择 器 在 XML 文档 中 相当 有 用 ， 因 为 XML 语言 主张 要 针对 元 素 和 属性 的 用 途 
指定 元 素 名 和 属性 名 。 


假设 我 们 为 描述 太阳 系 行星 设计 了 一 个 XML 文档 。 如 果 我 们 想 选 择 有 moons 属性 
的 所 有 planet 元 素 ， 使 之 显示 为 红色 ， 以 便 能 更 关注 有 moons 的 行星 ， 就 可 以 这 
HE: 


planet[moons] {color:red; } 


这 会 让 以 下 标记 片段 中 的 第 二 个 和 第 三 个 元 素 的 文本 显示 为 红色 ， 但 第 一 个 元 素 的 
文本 不 是 红色 : 


<planet>Venus</planet> 
«planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


根据 具体 属性 值 选择 


除了 选择 拥有 某 些 属性 的 元 素 ， 还 可 以 进一步 缩小 选择 范围 ， 只 选择 有 特定 属性 值 
的 元 素 。 
例子 1 


例如 ， 假 设 希 望 将 指向 Web 服务 器 上 某 个 指定 文档 的 超 链 接 变 成 红色 ， 可 以 这 样 
写 : 


a[hrefz"http://www.w3school.com.cn/about us.asp"] (color: red; } 


例子 2 

与 简单 属性 选择 器 类 似 ， 可 以 把 多 个 属性 - 值 选 择 器 链接 在 一 起 来 选择 一 个 文档 。 
a[hrefz"http://www.w3school.com.cn/"][title-"w3School"] (color: rec 
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这 会 把 以 下 标记 中 的 第 一 个 超 链接 的 文本 变 为 红色 ， 但 是 第 二 个 或 第 三 个 链接 不 受 


影响 : 


«a href="http://www.w3school.com.cn/" title="W3School">w3School</a: 
«a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a> 
«a hrefz'http://www.w3school.com.cn/html/" title="HTML">HTML</a> 





‘ 
例子 3 


同样 地 ，XML 语言 也 可 以 利用 这 种 方法 来 设置 样式 。 


下 面 我 们 再 回 到 行星 那个 例子 中 。 假 设 只 希望 选择 moons 属性 值 为 1 的 那些 
planet 元 素 : 





planet[moons="1"] {color: red;} 


上 面 的 代码 会 把 以 下 标记 中 的 第 二 个 元 素 变 成 红色 ， 但 第 一 个 和 第 三 个 元 素 不 受 影 
"f : 


<planet>Venus</planet> 
<planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


属性 与 属性 值 必须 完全 匹配 
请 注意 ， 这 种 格式 要 求 必 须 与 属性 值 完全 匹配 。 
如 果 属 性 值 包含 用 空格 分 隔 的 值 列表 ， 匹 配 就 可 能 出 问题 。 
请 考虑 一 下 的 标记 片段 : 
<p class="important warning"»This paragraph is a very important wai 
1 M 
如 果 写 成 p[class="important"]， 那 么 这 个 规则 不 能 匹配 示例 标记 。 
要 根据 具体 属性 值 来 选择 该 元 素 ， 必 须 这 样 写 : 





p[class="important warning"] {color: red;} 


根据 部 分 属性 值 选 择 

如 果 需 要 根据 属性 值 中 的 词 列表 的 某 个 词 进行 选择 ， 则 需要 使 用 波浪 号 (~) 。 

假设 您 想 选 择 class 属性 中 包含 important 的 元 素 ， 可 以 用 下 面 这 个 选择 器 做 到 这 
= 


p[class~="important"] {color: red;} 


如 果 忽 略 了 波浪 号 ， 则 说 明 需 要 完成 完全 值 匹 配 。 


部 分 值 属性 选择 器 与 点 号 类 名 记 法 的 区 别 
该 选择 器 等 价 于 我 们 在 类 选择 器 中 讨论 过 的 点 号 记 法 。 
也 就 是 说 ，p.important 和 p[class="important"] 应 用 到 HTML 文档 时 是 等 价 的 。 


那么 ， 为 什么 还 要 有 "~=" 属性 选择 器 呢 ? 因为 它 能 用 于 任何 属性 ， 而 不 只 是 
class。 


例如 ， 可 以 有 一 个 包含 大 量 图 像 的 文档 ， 其 中 


中 只 有 一 部 分 是 图 片 。 对 此 ， 可 以 使 用 
一 个 基于 title 文档 的 部 分 属性 选择 器 ， 只 选择 这 些 


只 
择 这 些 图 片 
img[title--"Figure"] (border: 1px solid gray;} 


这 个 规则 会 选择 title 文本 包含 "Figure" 的 所 有 图 像 。 没 有 title 属性 或 者 title 属性 
中 不 包含 "Figure" 的 图 像 都 不 会 匹配 。 


子 串 匹 配属 性 选择 器 


下 面 为 您 介绍 一 个 更 高 级 的 选择 器 模块 ， 它 是 CSS2 完成 之 后 发 布 的 ， 其 中 包含 了 
更 多 的 部 分 值 属性 选择 器 。 按 照 规范 的 说 法 ， 应 该 称 之 为 " 子 串 匹配 属性 选择 器 "。 


很 多 现代 浏览 器 都 支持 这 些 选 择 器 ， 包 括 ET. 
下 表 是 对 这 些 选择 器 的 简单 总 结 : 


类 型 描述 
[abc^="def"] 选择 abc 属性 值 以 "def" 开头 的 所 有 元 素 
[abc$="def"] 选择 abc 属性 值 以 "def" 结尾 的 所 有 元 素 
[abc*="def"] 选择 abc 属性 值 中 包含 子 串 "def" 的 所 有 元 素 


可 以 想到 ， 这 些 选择 有 很 多 用 途 。 


举例 来 说 ， 如 果 希 望 对 指向 W3School 的 所 有 链接 应 用 样式 ， 不 必 为 所 有 这 些 链接 
指定 class， 再 根据 这 个 类 编写 样式 ， 而 只 需 编写 以 下 规则 : 


a[href*="w3school.com.cn"] {color: red;} 
提示 : 任何 属性 都 可 以 使 用 这 些 选 择 器 。 

特定 属性 选择 类 型 

最 后 为 您 介绍 特定 属性 选择 器 。 请 看 下 面 的 例子 


*[lang|="en"] (color: red;) 


上 面 这 个 规则 会 选择 lang 属性 等 于 en 或 以 en- 开头 的 所 有 元 素 。 因 此 ， 以 下 示例 
标记 中 的 前 三 个 元 素 将 被 选中 ， 而 不 会 选择 后 两 个 元 素 : 


<p lang="en">Hello!</p> 

<p lang="en-us">Greetings!</p> 
<p lang="en-au">G'day!</p> 

<p lang="fr">Bonjour!</p> 

<p lang="cy-en">Jrooana! </p> 


一 般 来 说 ，[att|="val"] 可 以 用 于 任何 属性 及 其 值 。 

假设 一 个 HTML 文档 中 有 一 系列 图 片 ， 其 中 每 个 图 片 的 文件 名 都 形 如 figure-1.jpg 

和 figure-2.jpg。 就 可 以 使 用 以 下 选择 器 匹配 所 有 这 些 图 像 : 
img[src|="figure"] (border: 1px solid gray;} 


当然 ， 这 种 属性 选择 器 最 常见 的 用 途 还 是 匹配 语言 值 。 
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b 1x38 
[attribute] 
[attribute-value] 


[attribute-- value] 
[attribute|-value] 


[attribute^-value] 
[attribute$=value] 


[attribute*-value] 
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At 


描述 
用 于 选取 带 有 指定 属性 的 元 素 。 
用 于 选取 带 有 指定 属性 和 值 的 元 素 。 
用 于 选取 属性 值 中 包含 指定 词汇 的 元 素 。 
用 于 选取 带 有 以 指定 值 开 头 的 属性 值 的 元 素 ， 该 值 必须 是 


整个 单词 。 

匹配 属性 值 以 指定 值 开头 的 每 个 元 素 。 
匹配 属性 值 以 指定 值 结尾 的 每 个 元 素 。 
匹配 属性 值 中 包含 指定 值 的 每 个 元 素 。 


CSS 后 代 选 择 锅 


后 代 选 择 器 (descendant selector) 又 称 为 包含 选择 器 。 
后 代 选 择 器 可 以 选择 作为 某 元 素 后 代 的 元 素 。 


根据 上 下 文选 择 元 素 


我 们 可 以 定义 后 代 选 择 器 来 创建 一 些 规则 ， 使 这 些 规则 在 某 些 文档 结构 中 起 作用 ， 
而 在 另外 一 些 结构 中 不 起 作用 。 


举例 来 涪 ， 如 果 您 希望 只 对 h1 元 素 中 的 em 元 素 应 用 样式 ， 可 以 这 样 写 : 


hi em {color:red; } 


上 面 这 个 规则 会 把 作为 h1 元 素 后 代 的 em 元 素 的 文本 变 为 红色 。 其 他 em MA 
(如 段落 或 块 引 用 中 的 em) 则 不 会 被 这 个 规则 选中 : 


<hi>This is a <em>important</em> heading</h1> 
<p>This is a <em>important</em> paragraph.</p> 


当然 ， 您 也 可 以 在 h1 中 找到 的 每 个 em 元 素 上 放 一 个 class 属性 ， 但 是 显然 ， 后 
代 选 择 器 的 效率 更 高 。 


语法 解释 

在 后 代 选 择 器 中 ， 规 则 左边 的 选择 器 一 端 包括 两 个 或 多 个 用 空格 分 隔 的 选择 器 。 选 
择 器 之 间 的 空格 是 一 种 结合 符 (combinator) 。 每 个 空格 结合 符 可 以 解释 为 “.…. 在 
… 找到 ”“.… 作为 … 的 一 部 分 ul 作为 … IIR’, 但 是 要 求 必须 从 右 向 左 读 选 
择 器 。 

因此 ，h1 em 选择 器 可 以 解释 为 “作为 h1 元 素 后 代 的 任何 em 元 素 ”。 如 果 要 从 左 
向 右 读 选择 器 ， 可 以 换 成 以 下 说 法 :“ 包 含 em 的 所 有 hi 会 把 以 下 样式 应 用 到 该 
em", 


具体 应 用 


后 代 选 择 器 的 功能 极其 强大 。 有 了 它 ， 可 以 使 HTML 中 不 可 能 实现 的 任务 成 为 可 
Lat, 


Abo 


假设 有 一 个 文档 ， 其 中 有 一 个 边栏 ， 还 有 一 个 主 区 。 边 栏 的 背景 为 蓝 色 ， 主 区 的 背 
景 为 白色 ， 这 两 个 区 都 包含 链接 列表 。 不 能 把 所 有 链接 都 设置 为 蓝 色 ， 因 为 这 样 一 
来 边栏 中 的 蓝 色 链接 都 无 法 看 到 。 


解决 方法 是 使 用 后 代 选 择 器 。 在 这 种 情况 下 ， 可 以 为 包含 边栏 的 div 指定 值 为 
sidebar 的 class 属性 ， 并 把 主 区 的 class 属性 值 设置 为 maincontent。 然 后 编写 以 
TEX: 


div.sidebar ([background:blue;) 
div.maincontent {background:white; } 
div.sidebar a:link {color:white; } 
div.maincontent a:link (color:blue;) 


有 关 后 代 选 择 器 有 一 个 易 被 忽视 的 方面 ， 即 两 个 元 素 之 间 的 层次 间隔 可 以 是 无 限 
的 。 


例如 ， 如 果 写 作 ul em， 这 个 语法 就 会 选择 从 ul 元 素 继承 的 所 有 em 元 素 ， 而 不 论 
em BRE Z RB Ro 
会 


因此 ，ul em 将 会 选择 以 下 标记 中 的 所 有 em 7538 : 


<ul> 
«li»List item 1 
«ol» 
<li>List item 1-1«/li» 
<li>List item 1-2«/li» 
«li»List item 1-3 
«ol» 
<li>List item 1-3-1«/li» 
<li>List item «em»1-3-2«/em»«/li» 
<li>List item 1-3-3«/li» 
«/ol» 
</li> 
<li>List item 1-4</li> 
</ol> 
</li> 


<li>List item 2</li> 
<li>List item 3</li> 
</ul> 


CSS 属性 选择 器 详解 

CSS 2 引入 了 属性 选择 器 。 

属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 
简单 属性 选择 


如 果 希 望 选择 有 某 个 属性 的 元 素 ， 而 不 论 属性 值 是 什么 ， 可 以 使 用 简单 属性 选择 
Zire 


例子 1 
如 果 您 希望 把 包含 标题 (title) 的 所 有 元 素 变 为 红色 ， 可 以 写作 : 


*[title] {color:red;} 


例子 2 
与 上 面 类 似 ， 可 以 只 对 有 href 属性 的 锚 (a 元 素 ) 应 用 样式 : 


a[href] {color:red;} 


例子 3 
还 可 以 根据 多 个 属性 进行 选择 ， 只 需 将 属性 选择 器 链接 在 一 起 即 可 。 


例如 ， 为 了 将 同时 有 href 和 title 属性 的 HTML 超 链 接 的 文本 设置 为 红色 ， 可 以 这 
Hm: 


a[href][title] {color:red;} 


例子 4 
可 以 采用 一 些 创造 性 的 方法 使 用 这 个 特性 。 
例如 ， 可 以 对 所 有 带 有 alt 属性 的 图 像 应 用 样式 ， 从 而 突出 显示 这 些 有 效 的 图 像 : 


img[alt] {border: 5px solid red;) 


提示 : 上 面 这 个 特例 更 适合 用 来 诊断 而 不 是 设计 ， 即 用 来 确定 图 像 是 否 确实 有 效 。 


例子 5 : 为 XML 文档 使 用 属性 选择 器 


属性 选择 器 在 XML 文档 中 相当 有 用 ， 因 为 XML 语言 主张 要 针对 元 素 和 属性 的 用 途 
指定 元 素 名 和 属性 名 。 


假设 我 们 为 描述 太阳 系 行星 设计 了 一 个 XML 文档 。 如 果 我 们 想 选 择 有 moons 属性 
的 所 有 planet 元 素 ， 使 之 显示 为 红色 ， 以 便 能 更 关注 有 moons 的 行星 ， 就 可 以 这 
HE: 


planet[moons] {color:red; } 


这 会 让 以 下 标记 片段 中 的 第 二 个 和 第 三 个 元 素 的 文本 显示 为 红色 ， 但 第 一 个 元 素 的 
文本 不 是 红色 : 


<planet>Venus</planet> 
«planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


根据 具体 属性 值 选择 


除了 选择 拥有 某 些 属性 的 元 素 ， 还 可 以 进一步 缩小 选择 范围 ， 只 选择 有 特定 属性 值 
的 元 素 。 
例子 1 


例如 ， 假 设 希 望 将 指向 Web 服务 器 上 某 个 指定 文档 的 超 链 接 变 成 红色 ， 可 以 这 样 
写 : 


a[hrefz"http://www.w3school.com.cn/about us.asp"] (color: red; } 


例子 2 

与 简单 属性 选择 器 类 似 ， 可 以 把 多 个 属性 - 值 选 择 器 链接 在 一 起 来 选择 一 个 文档 。 
a[hrefz"http://www.w3school.com.cn/"][title-"w3School"] (color: rec 

E = 


m 











这 会 把 以 下 标记 中 的 第 一 个 超 链接 的 文本 变 为 红色 ， 但 是 第 二 个 或 第 三 个 链接 不 受 


影响 : 


«a href="http://www.w3school.com.cn/" title="W3School">w3School</a: 
«a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a> 
«a hrefz'http://www.w3school.com.cn/html/" title="HTML">HTML</a> 





‘ 
例子 3 


同样 地 ，XML 语言 也 可 以 利用 这 种 方法 来 设置 样式 。 


下 面 我 们 再 回 到 行星 那个 例子 中 。 假 设 只 希望 选择 moons 属性 值 为 1 的 那些 
planet 元 素 : 





planet[moons="1"] {color: red;} 


上 面 的 代码 会 把 以 下 标记 中 的 第 二 个 元 素 变 成 红色 ， 但 第 一 个 和 第 三 个 元 素 不 受 影 
"f : 


<planet>Venus</planet> 
<planet moons="1">Earth</planet> 
<planet moons="2">Mars</planet> 


查看 效果 


属性 与 属性 值 必须 完全 匹配 
请 注意 ， 这 种 格式 要 求 必 须 与 属性 值 完全 匹配 。 
如 果 属 性 值 包含 用 空格 分 隔 的 值 列表 ， 匹 配 就 可 能 出 问题 。 
请 考虑 一 下 的 标记 片段 : 
<p class="important warning"»This paragraph is a very important wai 
1 M 
如 果 写 成 p[class="important"]， 那 么 这 个 规则 不 能 匹配 示例 标记 。 
要 根据 具体 属性 值 来 选择 该 元 素 ， 必 须 这 样 写 : 





p[class="important warning"] {color: red;} 


根据 部 分 属性 值 选 择 

如 果 需 要 根据 属性 值 中 的 词 列表 的 某 个 词 进行 选择 ， 则 需要 使 用 波浪 号 (~) 。 

假设 您 想 选 择 class 属性 中 包含 important 的 元 素 ， 可 以 用 下 面 这 个 选择 器 做 到 这 
= 


p[class~="important"] {color: red;} 


如 果 忽 略 了 波浪 号 ， 则 说 明 需 要 完成 完全 值 匹 配 。 


部 分 值 属性 选择 器 与 点 号 类 名 记 法 的 区 别 
该 选择 器 等 价 于 我 们 在 类 选择 器 中 讨论 过 的 点 号 记 法 。 
也 就 是 说 ，p.important 和 p[class="important"] 应 用 到 HTML 文档 时 是 等 价 的 。 


那么 ， 为 什么 还 要 有 "~=" 属性 选择 器 呢 ? 因为 它 能 用 于 任何 属性 ， 而 不 只 是 
class。 


例如 ， 可 以 有 一 个 包含 大 量 图 像 的 文档 ， 其 中 


中 只 有 一 部 分 是 图 片 。 对 此 ， 可 以 使 用 
一 个 基于 title 文档 的 部 分 属性 选择 器 ， 只 选择 这 些 


只 
择 这 些 图 片 
img[title--"Figure"] (border: 1px solid gray;} 


这 个 规则 会 选择 title 文本 包含 "Figure" 的 所 有 图 像 。 没 有 title 属性 或 者 title 属性 
中 不 包含 "Figure" 的 图 像 都 不 会 匹配 。 


子 串 匹 配属 性 选择 器 


下 面 为 您 介绍 一 个 更 高 级 的 选择 器 模块 ， 它 是 CSS2 完成 之 后 发 布 的 ， 其 中 包含 了 
更 多 的 部 分 值 属性 选择 器 。 按 照 规范 的 说 法 ， 应 该 称 之 为 " 子 串 匹配 属性 选择 器 "。 


很 多 现代 浏览 器 都 支持 这 些 选 择 器 ， 包 括 ET. 
下 表 是 对 这 些 选择 器 的 简单 总 结 : 


类 型 描述 
[abc^="def"] 选择 abc 属性 值 以 "def" 开头 的 所 有 元 素 
[abc$="def"] 选择 abc 属性 值 以 "def" 结尾 的 所 有 元 素 
[abc*="def"] 选择 abc 属性 值 中 包含 子 串 "def" 的 所 有 元 素 


可 以 想到 ， 这 些 选择 有 很 多 用 途 。 


举例 来 说 ， 如 果 希 望 对 指向 W3School 的 所 有 链接 应 用 样式 ， 不 必 为 所 有 这 些 链接 
指定 class， 再 根据 这 个 类 编写 样式 ， 而 只 需 编写 以 下 规则 : 


a[href*="w3school.com.cn"] {color: red;} 
提示 : 任何 属性 都 可 以 使 用 这 些 选 择 器 。 

特定 属性 选择 类 型 

最 后 为 您 介绍 特定 属性 选择 器 。 请 看 下 面 的 例子 


*[lang|="en"] (color: red;) 


上 面 这 个 规则 会 选择 lang 属性 等 于 en 或 以 en- 开头 的 所 有 元 素 。 因 此 ， 以 下 示例 
标记 中 的 前 三 个 元 素 将 被 选中 ， 而 不 会 选择 后 两 个 元 素 : 


<p lang="en">Hello!</p> 

<p lang="en-us">Greetings!</p> 
<p lang="en-au">G'day!</p> 

<p lang="fr">Bonjour!</p> 

<p lang="cy-en">Jrooana! </p> 


一 般 来 说 ，[att|="val"] 可 以 用 于 任何 属性 及 其 值 。 

假设 一 个 HTML 文档 中 有 一 系列 图 片 ， 其 中 每 个 图 片 的 文件 名 都 形 如 figure-1.jpg 

和 figure-2.jpg。 就 可 以 使 用 以 下 选择 器 匹配 所 有 这 些 图 像 : 
img[src|="figure"] (border: 1px solid gray;} 


当然 ， 这 种 属性 选择 器 最 常见 的 用 途 还 是 匹配 语言 值 。 


CSS 选择 器 参考 手册 
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b 1x38 
[attribute] 
[attribute-value] 


[attribute-- value] 
[attribute|-value] 


[attribute^-value] 
[attribute$=value] 


[attribute*-value] 
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At 


描述 
用 于 选取 带 有 指定 属性 的 元 素 。 
用 于 选取 带 有 指定 属性 和 值 的 元 素 。 
用 于 选取 属性 值 中 包含 指定 词汇 的 元 素 。 
用 于 选取 带 有 以 指定 值 开 头 的 属性 值 的 元 素 ， 该 值 必须 是 


整个 单词 。 

匹配 属性 值 以 指定 值 开头 的 每 个 元 素 。 
匹配 属性 值 以 指定 值 结尾 的 每 个 元 素 。 
匹配 属性 值 中 包含 指定 值 的 每 个 元 素 。 


CSS 后 代 选 择 锅 


后 代 选 择 器 (descendant selector) 又 称 为 包含 选择 器 。 
后 代 选 择 器 可 以 选择 作为 某 元 素 后 代 的 元 素 。 


根据 上 下 文选 择 元 素 


我 们 可 以 定义 后 代 选 择 器 来 创建 一 些 规则 ， 使 这 些 规则 在 某 些 文档 结构 中 起 作用 ， 
而 在 另外 一 些 结构 中 不 起 作用 。 


举例 来 涪 ， 如 果 您 希望 只 对 h1 元 素 中 的 em 元 素 应 用 样式 ， 可 以 这 样 写 : 


hi em {color:red; } 


上 面 这 个 规则 会 把 作为 h1 元 素 后 代 的 em 元 素 的 文本 变 为 红色 。 其 他 em MA 
(如 段落 或 块 引 用 中 的 em) 则 不 会 被 这 个 规则 选中 : 


<hi>This is a <em>important</em> heading</h1> 
<p>This is a <em>important</em> paragraph.</p> 


当然 ， 您 也 可 以 在 h1 中 找到 的 每 个 em 元 素 上 放 一 个 class 属性 ， 但 是 显然 ， 后 
代 选 择 器 的 效率 更 高 。 


语法 解释 

在 后 代 选 择 器 中 ， 规 则 左边 的 选择 器 一 端 包括 两 个 或 多 个 用 空格 分 隔 的 选择 器 。 选 
择 器 之 间 的 空格 是 一 种 结合 符 (combinator) 。 每 个 空格 结合 符 可 以 解释 为 “... 在 
… 找到 ”“.… 作为 … 的 一 部 分 ul 作为 … 的 后 代 ”， 但 是 要 求 必须 从 右 向 左 读 选 
择 器 。 

因此 ，h1 em 选择 器 可 以 解释 为 “作为 h1 元 素 后 代 的 任何 em 元 素 ”。 如 果 要 从 左 
向 右 读 选择 器 ， 可 以 换 成 以 下 说 法 :“ 包 含 em 的 所 有 hi 会 把 以 下 样式 应 用 到 该 
em", 


具体 应 用 


后 代 选 择 器 的 功能 极其 强大 。 有 了 它 ， 可 以 使 HTML 中 不 可 能 实现 的 任务 成 为 可 
Lat, 


Abo 


假设 有 一 个 文档 ， 其 中 有 一 个 边栏 ， 还 有 一 个 主 区 。 边 栏 的 背景 为 蓝 色 ， 主 区 的 背 
景 为 白色 ， 这 两 个 区 都 包含 链接 列表 。 不 能 把 所 有 链接 都 设置 为 蓝 色 ， 因 为 这 样 一 
来 边栏 中 的 蓝 色 链接 都 无 法 看 到 。 


解决 方法 是 使 用 后 代 选 择 器 。 在 这 种 情况 下 ， 可 以 为 包含 边栏 的 div 指定 值 为 
sidebar 的 class 属性 ， 并 把 主 区 的 class 属性 值 设置 为 maincontent。 然 后 编写 以 
TEX: 


div.sidebar ([background:blue;) 
div.maincontent {background:white; } 
div.sidebar a:link {color:white; } 
div.maincontent a:link (color:blue;) 


有 关 后 代 选 择 器 有 一 个 易 被 忽视 的 方面 ， 即 两 个 元 素 之 间 的 层次 间隔 可 以 是 无 限 
的 。 


例如 ， 如 果 写 作 ul em， 这 个 语法 就 会 选择 从 ul 元 素 继承 的 所 有 em 元 素 ， 而 不 论 
em BRE Z RB Ro 
会 


因此 ，ul em 将 会 选择 以 下 标记 中 的 所 有 em 7538 : 


<ul> 
«li»List item 1 
«ol» 
<li>List item 1-1«/li» 
<li>List item 1-2«/li» 
«li»List item 1-3 
«ol» 
<li>List item 1-3-1«/li» 
<li>List item «em»1-3-2«/em»«/li» 
<li>List item 1-3-3«/li» 
«/ol» 
</li> 
<li>List item 1-4</li> 
</ol> 
</li> 


<li>List item 2</li> 
<li>List item 3</li> 
</ul> 


CSS 子 元 素 选 择 器 


与 后 代 选 择 器 相 比 ， 子 元 素 选 择 器 (Child selectors) 只 能 选择 作为 某 元 素 子 元 素 
的 元 素 。 
选择 子 元 素 


如 果 您 不 希望 选择 任意 的 后 代 元 素 ， 而 是 希望 缩小 范围 ， 只 选择 某 个 元 素 的 子 元 
素 ， 请 使 用 子 元 素 选 择 器 (Child selector) 。 


例如 ， 如 果 您 希望 选择 只 作为 h1 元 素 子 元 素 的 strong 元 素 ， 可 以 这 样 写 : 


h1 > strong {color:red;} 
n ^ h1 下 面 的 两 个 strong 元 素 变 为 红色 ， 但 是 第 二 个 h1 中 的 


eda 不 受 影响 


<hi>This is <strong>very</strong> <strong>very</strong> important.- 
<hi>This is <em>really <strong>very</strong></em> important .</h1i> 





吾 法 解释 


您 应 该 已 经 注意 到 了 ， 子 选择 器 使 用 了 大 于 号 ( 子 结合 符 ) 。 


合 符 两 边 可 以 有 空白 符 ， 可 选 的 。 因 此 ， 以 下 写法 都 没有 问题 : 
hi > strong 
hi» strong 
h1 >strong 
hi>strong 


如 果 从 右 向 左 读 ， 选 择 器 h1 > strong 可 以 解释 为 “选择 作为 h1 元 素 子 元 素 的 所 有 
strong 元 素 ”。 


结合 后 代 选 择 左 和 子 选择 赴 


table.company td > p 


上 面 的 选择 器 会 选择 作为 td 元 素 子 元 素 的 所 有 p 元 素 ， 这 个 td TRAM table 
元 素 继承 ， 该 table 元 素 有 一 个 包含 company 的 class 属性 。 


CSS 相 令 兄弟 选择 器 


相 邻 兄弟 选择 器 (Adjacent sibling selector) 可 选择 紧 接 在 另 一 元 素 后 的 元 素 ， 
且 二 者 有 相同 父 元 素 。 


xt A THAT 5028 


如 果 需 要 选择 紧 接 在 另 一 个 元 素 后 的 元 素 ， 而 且 二 者 有 相同 的 父 元 素 ， 可 以 使 用 相 
邻 兄弟 选择 器 (Adjacent sibling selector) 。 


例如 ， 如 果 要 增加 紧 接 在 h1 元 素 后 出 现 的 段落 的 上 边 距 ， 可 以 这 样 写 : 


hi + p {margin-top:50px; } 


ete 紧 接 在 h1 元 素 后 出 现 的 段落 ，h1 和 p 元 素 拥有 共同 的 父 
7L3R o 


相 邻 兄弟 选择 器 使 用 了 加 号 (+) ， 即 相 邻 兄弟 结合 符 (Adjacent sibling 
combinator) 。 


注释 : 与 子 结合 符 一 样 ， 相 邻 兄 弟 结合 符 旁 边 可 以 有 空白 符 。 
请 看 下 面 这 个 文档 树 片段 : 


<div> 
<ul> 
<li>List item 1</1i> 
<li>List item 2</1i> 
<li>List item 3«/li» 
«/ul» 
«ol» 
<li>List item 1«/1li» 
<li>List item 2«/1li» 
<li>List item 3«/li» 
«/ol» 
«/div» 


在 上 面 的 片段 中 ，div 元 素 中 包含 两 个 列表 : 一 个 无 序列 表 ， 一 个 有 序列 表 ， 每 个 
列表 都 包含 三 个 列表 项 。 这 两 个 列表 是 相 邻 兄弟 ， 列 表 项 本 身 也 是 相 邻 兄弟 。 不 

过 ， 第 一 个 列表 中 的 列表 项 与 第 二 个 列表 中 的 列表 项 不 是 相 邻 兄弟 ， 因 为 这 两 组 列 
表 项 不 属于 同一 父 元 素 (最 多 只 能 算 堂 兄弟 ) 。 


请 记 住 ， 用 一 个 结合 符 只 能 选择 两 个 相 邻 兄弟 中 的 第 二 个 元 素 。 请 看 下 面 的 选择 
器 : 
li + li {font-weight:bold; } 


上 面 这 个 选择 器 只 会 把 列表 中 的 第 二 个 和 第 三 个 列表 项 变 为 粗 体 。 第 一 个 列表 项 不 


受 影 响 。 
结合 其 他 选择 器 


相 邻 兄弟 结合 符 还 可 以 结合 其 他 结合 符 : 


html > body table + ul {margin-top:20px; } 


这 个 选择 器 解释 为 : 选择 紧 接 在 table 元 素 后 出 现 的 所 有 兄弟 ul 元 素 ， 该 table 元 
素 包 含 在 一 个 body 元 素 中 ，body 元 素 本 身 是 html 元 素 的 子 元 素 。 


CSS 44 #® (Pseudo-classes) 


CSS 伪 类 用 于 向 某 些 选 择 器 添加 特殊 的 效果 。 


CSS 伪 类 (Pseudo-classes) 实 例 : 
超 链 接 

&lt;html&gt; 

&lt;head&gt; 


&lt;style type="text/css"&gt; 
a:link (color: #FF0000} 
a:visited (color: #00FF00} 
a:hover (color: £ZFFOOFF) 
a:active (color: #0000FF} 
&lt;/style&gt; 


&lt;/head&gt; 
&lt;body&gt; 
&lt;p&gt;&lt;b&gt;&lt;a href="/index.html" target-" blank"&dt; 这 是 一 
&lt;pagt;&lt; bagt ; SE :&lt;/b&gt; Æ CSS 定义 中 ，a:hover 必须 位 于 a:lir 
&lt;pagt;&lt; bagt ; SE : &1lt;/b&gt;7E CSS HLH, a:active 必须 位 于 a:hc 


&lt;/body&gt; 
&lt;/html&gt; 


El — — RE 
超 链 接 2 





&lt;html&gt; 
&lt;head&gt; 


&lt;style type="text/css"&gt; 
a.one:link (color: #ff0000} 
a.one:visited (color: 4Z0000ff) 
a.one:hover (color: #ffcc00} 


a.two:link (color: #ff0000} 
a.two:visited (color: 4Z0000ff) 


a.two:hover (font-size: 


150%} 


a.three:link (color: #ff0000} 
a.three:visited (color: 40000ff) 
a.three:hover (background: #66ff66} 


a.four:link (color: #ff0000} 
a.four:visited (color: #0000ff} 
a.four:hover (font-family: monospace} 


a.five:link (color: #ff0000; text-decoration: none} 
a.five:visited (color: 40000ff; text-decoration: none} 
a.five:hover {text-decoration: underline} 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt,; 请 把 鼠标 移动 到 这 些 链接 上 ， 以 查看 效果 : &Lt;/p&gt 


&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;p&gt;&lt;b&gt;&lt;a 
&lt;/body&gt; 


&lt;/html&gt; 


E 


超 链 接 - focus 的 使 用 


class="one" href="/index.html" target-" bl: 
class="two" href="/index.html" target="_blé 
class="three" hrefz"/index.html" target-" I 
class="four" hrefz"/index.html" target-" b. 
class="five" hrefz"/index.html" target-z" b. 





&lt; DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

input:focus 

t 


background-color:yellow; 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;form action-"form action.asp" method="get"&gt; 

First name: &lt;input type="text" name="fname" /&gt;&lt;br /&gt; 
Last name: &lt;input type="text" name-"lname" /&gt;&lt;br /&gt; 
&lt;input type="submit" value="Submit" /&gt; 

&lt;/form&gt; 


&lt;p&gt;&lt;b&gt'; 注 释 :&lt;/b&gt; 如 果 已 规定 !DOCTYPE， 那 么 Internet E 


&lt;/body&gt; 
&lt;/html&gt; 


gcc ccr] 
:first-child ( 首 个 子 对 象 ) 





&lt; DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ' 
&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

p:first-child {font-weight: bold;) 

li:first-child {text-transform:uppercase; } 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;div&gt; 

&lt;p&gt;These are the necessary steps:&lt;/p&gt; 

&lt;ul&gt; 

&lt;li&gt;Intert Key&lt;/li&gt; 

&lt;li&gt;Turn key &lt;strong&gt;clockwise&lt;/strong&gt;&lt;/li&g! 
&lt;li&gt;Push accelerator&lt;/li&gt; 

&lt;/ul&gt; 

&lt;p&gt;Do &lt;em&gt;not&lt;/em&gt; push the brake at the same tir 
&lt;/div&gt; 


&lt;p&gt;&lt;b&dgt'; 注 释 :&lt;/b&gt; 必 须 声 明 DOCTYPE, 3f :first-child 
&lt;/body&gt; 


&lt;/html&gt; 





lang G&8) 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
q:lang(no) 

1 

quotes: "mn n m" 

} 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt;:lang 伪 类 人 允许 您 为 不 同 的 语言 定义 特殊 的 规则 。 在 下 面 的 例子 中 ， 在 下 面 的 


&1t;p&gt; 一 些 文本 &lt;q lang="no"&gt ;上 段落 中 的 引用 &1lt;/gq&gt; 一 些 文本 。&: 
&lt;/body&gt; 


&lt;/html&gt; 
EE | 





语法 


伪 类 的 语法 : 


selector : pseudo-class {property: value} 


CSS 类 也 可 与 伪 类 搭配 使 用 。 


selector.class : pseudo-class {property: value} 


锚 伪 类 


在 支持 CSS 的 浏览 器 中 ， ease GA ope er 这 些 状 态 包 
括 : 活动 状态 已 被 访问 状态 ， 未 被 访问 状态 。 和 妃 标 基 停 状态 


a:link (color: #FF0000} /* 未 访问 的 链接 */ 
a:visited (color: #00FF00} /* 已 访问 的 链接 */ 

a:hover (color: #FF00FF} /* 鼠标 移动 到 链接 上 */ 
a:active (color: #0000FF} /* 选 定 的 链接 */ 


提示 : 在 CSS 定义 中 ，a:hover 必须 被 置 于 a:link 和 a:visited 之 后 ， 才 是 有 效 的 。 
tem : 在 CSS ELA, a:active 必须 被 置 于 a:hover 之 后 ， 才 是 有 效 的 。 
提示 : 伪 类 名 称 对 大 小 写 不 敏感 。 
伪 类 与 CSS 类 
伪 类 可 以 与 CSS 类 配合 使 用 : 
a.red : visited (color: #FF0000} 
<a class-"red" href="css_syntax.asp">CSS Syntax</a> 


假如 上 面 的 例子 中 的 链接 被 访问 过 ， 那 么 它 将 显示 为 红色 。 


CSS2 - :first-child 44 # 


您 可 以 使 用 :first-child 伪 类 来 选择 元 素 的 第 一 个 子 元 素 。 这 个 特定 伪 类 很 容易 遭 到 
误解 ， 所 以 有 必要 举例 来 说 明 。 考虑 以 下 标记 : 


<div> 

<p>These are the necessary steps:</p> 

<ul> 

<li>Intert Key</1li> 

<li>Turn key <strong>clockwise</strong></1i> 

<li>Push accelerator</1li> 

</ul> 

<p>Do <em>not</em> push the brake at the same time as the accelerat 
</div> 








在 上 面 的 例子 中 ， 作 为 第 一 个 元 素 的 元 素 包 括 第 一 个 p、 第 一 个 站 和 strong 和 em 
元 素 。 


给 定 以 下 规则 : 


p:first-child {font-weight: bold; } 
li:first-child {text-transform:uppercase; } 


第 一 个 规则 将 作为 某 元 素 第 一 个 子 元 素 的 所 有 p 元 素 设 置 为 粗 体 。 第 二 个 规则 将 作 
为 某 个 元 素 (在 HTML 中 ， 这 肯定 是 ol Mul wR) 第 一 个 子 元 素 的 所 有 li 元 素 变 
成 大 写 。 

请 访问 该 链接 ， 来 查看 这 个 :first-child 实例 的 效果 。 


提示 : 最 常见 的 错误 是 认为 p:first-child 之 类 的 选择 器 会 选择 p 元 素 的 第 一 个 子 元 


注释 : 必须 声明 <IDOCTYPE>， 这 样 :first-child 才能 在 IE 中 生效 。 

为 了 使 您 更 透彻 地 理解 :first-child 伪 类 ， 我 们 另外 提供 了 3 个 例子 : 
例子 1 - 匹配 第 一 个 <p> TR 

在 下 面 的 例子 中 ， 选 择 器 匹配 作为 任何 元 素 的 第 一 个 子 元 素 的 p 元 素 : 


«html» 
«head» 
«style type="text/css"> 
p:first-child ( 
color: red; 


</style> 
</head> 


<body> 
<p>some text</p> 
<p>some text</p> 
</body> 
</html> 


例子 2 - 匹配 所 有 <p> 元 素 中 的 第 一 个 <i> 元 素 
在 下 面 的 例子 中 ， 选 择 器 匹配 所 有 <p> 元 素 中 的 第 一 个 <i> TH: 


<html> 

<head> 

<style type="text/css"> 

p > i:first-child { 
font-weight:bold; 


} 
</style> 
</head> 


<body> 
<p>some <i>text</i>. some <i>text</i>.</p> 
<p>some <i>text</i>. some <i>text</i>.</p> 
</body> 
</html> 


例子 3 - 匹配 所 有 作为 第 一 个 子 元 素 的 <p> 元 素 中 的 所 有 <i> 元 
素 


ea CM een G 
<i> JUS: 


«html» 

«head» 

«style type="text/css"> 

p:first-child i ( 
color:blue; 


</style> 
</head> 


<body> 
<p>some <i>text</i>. some <i>text</i>.</p> 
<p>some <i>text</i>. some <i>text</i>.</p> 


</body> 
</html> 


CSS2 - :lang 44 # 


‘lang 伪 类 使 你 有 能 力 为 不 同 的 语言 定义 特殊 的 规则 。 在 下 面 的 例子 中 ，:lang 类 为 
属性 值 为 no 的 q 元 素 定 义 引 号 的 类 型 : 


<html> 
<head> 


<style type="text/css"> 
q:lang(no) 
{ 


quotes: "-" "~" 
</style> 
</head> 
<body> 


<p> 文 字 <q lang="no"> 段 落 中 的 引用 的 文字 </q> 文 字 </p> 
«/body»«/html» 


W3C : "W3C" 列 指示 出 该 属性 在 哪个 CSS 版 本 中 定义 (CSS1 还 是 CSS2) 。 


W2School Brera a 
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属性 
:active 
:focus 
:hover 
:link 
‘visited 
‘first-child 


‘lang 


描述 
向 被 激活 的 元 素 添 加 样式 。 
向 拥有 键盘 输入 焦点 的 元 素 添加 样式 。 
当 饥 标 蚌 浮 在 元 素 上 方 时 ， 向 元 素 添加 样式 。 
向 未 被 访问 的 链接 添加 样式 。 
向 已 被 访问 的 链接 添加 样式 。 
向 元 素 的 第 一 个 子 元 素 添 加 样式 。 
向 带 有 指定 lang 属性 的 元 素 添加 样式 。 


(CC PL SE (Deainn_riacanc\ 
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CSS 


CSS (430s (Pseudo-elements) 


CSS 伪 元 素 用 于 向 某 些 选择 器 设置 特殊 效果 。 


语法 
伪 元 素 的 语法 : 


selector:pseudo-element {property:value;} 


CSS 类 也 可 以 与 伪 元 素 配 合 使 用 : 


selector.class:pseudo-element 1[property:value;) 


‘first-line 伪 元 素 


"first-line" 伪 元 素 用 于 向 文本 的 首 行 设置 特殊 样式 。 


在 下 面 的 例子 中 ， 浏 览 器 会 根据 "first-line" 伪 元 素 中 的 样式 对 p 元 素 的 第 一 行文 本 
进行 格式 化 : 


实例 


p:first-line 


{ 
color: #ff0000; 
font-variant:small-caps; 


} 


注释 : "first-line" 伪 元 素 只 能 用 于 块 级 元 素 。 
注释 : 下 面 的 属性 可 应 用 于 "first-line" 伪 元 素 : 


font 

color 
background 
word-spacing 
letter-spacing 
text-decoration 
vertical-align 
text-transform 


e line-height 
e clear 


‘first-letter 伪 元 素 
"first-letter" 伪 元 素 用 于 向 文本 的 首 字 母 设置 特殊 样式 : 


p:first-letter 


{ 
color:£Zff0000; 
font-size:xx-large; 


j 


注释 : "first-letter" 伪 元 素 只 能 用 于 块 级 元 素 。 
注释 : 下 面 的 属性 可 应 用 于 "first-letter" 伪 元 素 : 


font 

color 
background 
margin 
padding 
border 
text-decoration 
vertical-align ( 仅 当 float 为 none 时 ) 
text-transform 
line-height 
float 

clear 


伪 元 素 和 CSS X 
伪 元 素 可 以 与 CSS 类 配合 使 用 : 


p.article:first-letter 


{ 
color: #FF0000; 
} 


«p class="article">This is a paragraph in an article, </p> 


上 面 的 例子 会 使 所 有 class 为 article 的 段落 的 首 字 母 变 为 红色 。 


多 重 伪 元 到 


可 以 结合 多 个 伪 元 素来 使 用 。 

在 下 面 的 例子 中 ， 段 落 的 第 一 个 字母 将 显示 为 红色 ， 其 字体 大 小 为 xx-large。 第 一 
行 中 的 其 余 文 本 将 为 蓝 色 ， 并 以 小 型 大 写字 母 显 示 。 段 落 中 的 其 余 文 本 将 以 默认 字 
体 大 小 和 颜色 来 显示 : 


p:first-letter 


{ 
color :#ff0000; 
font-size:xx-large; 


p:first-line 


{ 
color :#0000ff; 
font-variant:small-caps; 


CSS2 - :before 伪 元 素 


"before" 伪 元 素 可 以 在 元 素 的 内 容 前 面 插入 新 内 容 。 
下 面 的 例子 在 每 个 <h1> 元 素 前 面 插 入 一 幅 图 片 : 


hi:before 


{ 
content:url(logo.gif); 


CSS2 - :after 伪 元 素 


"after" 伪 元 素 可 以 在 元 素 的 内 容 之 后 插入 新 内 容 。 
下 面 的 例子 在 每 个 <h1> 元 素 后 面 插 入 一 幅 图 片 : 


hi:after 


content:url(logo.gif); 
} 


伪 元 素 


W3C : "W3C" 列 指示 出 该 属性 在 哪个 CSS 版 本 中 定义 (CSS1 还 是 CSS2) 。 


W3School 前 端 教程 合集 


属性 描述 CSS 
:first-letter 向 文本 的 第 一 个 字母 添加 特殊 祥 式 。 1 
‘first-line 向 文本 的 首 行 添 加 特殊 样式 。 1 
:before 在 元 素 之 前 添加 内 容 。 2 
:after 在 元 素 之 后 添加 内 容 。 2 
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CSS 高 级 


CSS 水 平 对 齐 


在 CSS 中 ， 可 以 使 用 多 种 属性 来 水 平 对 齐 元 素 。 


对 齐 块 元 素 


块 元 素 指 的 是 占据 全 部 可 用 宽度 的 元 素 ， 并 且 在 其 前 后 都 会 换行 。 
块 元 素 的 例子 


<hi> 
<p> 
<div> 


对 于 文本 对 齐 ， 请 参见 CSS 文本 一 章 。 
在 本 教程 中 ， 我 们 将 向 您 展示 出 于 布局 目的 如 何 水 平 对 齐 块 级 元 素 。 


使 用 margin 属性 来 水 平 对 齐 


可 通过 将 左 和 右 外 边 距 设置 为 "auto"， 来 对 齐 块 元 素 。 


注释 : 除非 已 经 声明 了 IDOCTYPE， 否 则 使 用 margin:auto 在 IE8 以 及 更 早 的 版 本 
中 是 无 效 的 。 


把 左 和 右 外 边 距 设置 为 auto， 规 定 的 是 均等 地 分 配 可 用 的 外 边 距 。 结 果 就 是 居中 的 


元 素 : 
实例 


.Center 


margin-left:auto; 
margin-right:auto; 

width: 70%; 
background-color :#b0e0e6; 
} 


提示 : 如 果 宽 度 是 100%， 则 对 齐 没 有 效果 。 


注释 : 在 IE5 中 ， 对 于 块 元 素 存在 一 个 外 边 距 处 理 方面 的 BUG。 如 需 使 上 面 的 例 
CE IE5 中 有 效 ， 请 添加 一 些 额外 的 代码 。。 


使 用 position 属性 进行 左 和 右 对 齐 
对 齐 元 素 的 方法 之 一 是 使 用 绝对 定位 : 


实例 


.right 

{ 

position:absolute; 

right :0px; 

width: 300px; 
background-color :#b0e0e6; 
} 


注释 : 绝对 定位 元 素 会 被 从 正常 流 中 删除 ， 并 且 能 够 交 得 元 素 。 


跨 浏 览 器 兼容 性 问题 


当 像 这 样 对 齐 元 素 时 ， 对 <body> 元 素 的 外 边 距 和 内 边 距 进 行 预 定义 是 一 个 好 主 
意 。 这 样 可 以 避免 在 不 同 的 浏览 器 中 出 现 可 见 的 差异 


当 使 用 position 属性 时 ，IE8 以 及 更 时 的 版 本 存在 一 个 问题 。 如 果 容 器 元 素 (在 我 
们 的 案例 中 是 <div class="container">) 设置 了 指定 的 宽度 ， 并 且 省 略 了 
IDOCTYPE 声明 ， 那 么 IE8 以 及 更 早 的 版 本 会 在 右 便 增加 17px 的 外 边 距 。 这 似乎 
是 为 滚动 条 预 留 的 空间 。 当 使 用 position 属性 时 ， 请 始终 设置 !DOCTYPE 声明 : 


实例 


body 

{ 

margin:0; 
padding:0; 

} 

.Container 

{ 
position:relative; 
width:100%; 


.right 

{ 

position:absolute; 

right :0px; 

width: 300px; 
background-color :#b0e0e6; 
} 


使 用 float 属性 来 进行 左 和 右 对 齐 
对 齐 元 素 的 另 一 种 方法 是 使 用 float 属性 : 


实例 


.right 


{ 

float:right; 

width:300px; 
background-color :#b0e0e6; 
} 


跨 浏 览 器 兼容 性 问题 
当 像 这 样 对 齐 元 素 时 ， 对 <body> 元 素 的 外 边 距 和 内 边 距 进 行 预 定义 是 一 个 好 主 
意 。 这 样 可 以 避免 在 不 同 的 浏览 器 中 出 现 可 见 的 差异 。 


当 使 用 float 属性 时 ，IE8 以 及 更 早 的 版 本 存在 一 个 问题 。 如 果 省 略 DOCTYPE 声 
明 ， 那 么 IE8 以 及 更 里 的 版 本 会 在 右 侧 增加 17px 的 外 边 距 。 这 似乎 是 为 滚动 条 预 
留 的 空间 。 当 使 用 float 属性 时 ， 请 始终 设置 IDOCTYPE 声明 : 


实例 
body 
{ 
margin:0; 
padding:0; 
j 
.right 


float:right; 
width:300px; 
background-color :#b0e0e6; 


CSS 尺寸 (Dimension) 


CSS 尺 十 (Dimension) 属性 允许 你 控制 元 素 的 高 度 和 宽度 。 同 样 ， 它 允许 你 增加 
行 间距 。 


CSS 尺寸 实例 : 
使 用 像素 值 设置 图 像 的 高 度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img.normal 


height: auto 
j 


img.big 


{ 
height: 160px 
j 


img.small 
{ 
height: 30px 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;img class-"normal" srcz"/i/eg smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"big" src="/i/eg_smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"small" src="/i/eg_smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 设置 图 像 的 高 度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img.normal 

1 

height: auto 


j 


img.big 

{ 

height: 50% 
j 


img.small 

{ 

height: 10% 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;img class-"normal" srcz"/i/eg smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"big" src="/i/eg_smile.gif" /&gt; 
&lt;br /&gt; 

&lt;img class-"small" src="/i/eg_smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 来 设置 元 素 的 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

width: 300px 


&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 

&lt;img srcz"/i/eg smile.gif" /&gt; 
&lt;/body&gt; 

&lt;/html&gt; 


使 用 百分比 来 设置 元 素 的 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

width: 50% 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&lt;img srcz"/i/eg smile.gif" /&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


度 
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[ii 


元 素 的 最 大 高 


To} 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

{ 

max-height: 10px 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&lt; p&gt ;这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 ole Hr 0 

这 是 


一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。&1Lt;/p&gt， 
&lt;img src="/i/eg_smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


- 


使 用 像素 值 来 设置 元 素 的 最 大 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

1 

max-width: 300px 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t ; p&gt; 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t; /p&gt; 


a 


M " n 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 来 设置 元 素 的 最 大 宽度 


e 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

{ 

max-width: 50% 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t;p&gt; 这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1l1t;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 来 设置 元 素 的 最 小 高 度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 

1 

min-height: 100px 

} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&lt; p&gt ;这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
这 是 一 些 广 本。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t;/p&gt; 


L i 


&lt;img srcz"/i/eg smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 来 设置 元 素 的 最 小 宽度 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p 


{ 
min-width: 1000px 


&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;p&gt;XXim — fF, REEMA, Hg EX AS, 
这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
REEMA, REEMA, REEMA. 
这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t;/p&gt; 


&lt;img src="/i/eg_smile.gif" /&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 来 设置 元 素 的 最 小 宽度 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 


p 

{ 

min-width: 200% 
} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt; p&gt ;这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
这 是 一 些 广 本。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。&1t;/p&gt; 


L i 


&lt;img srcz"/i/eg smile.gif" /&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 百分比 设置 行 间距 


&lt;html&gt; 


&lt;head&gt; 

&lt;style type="text/css"&gt; 
p.small {line-height: 90%} 
p.big {line-height: 200%} 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 

这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏览 器 中 默认 行 高 大 约 是 110% 到 120%。 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

&lt;/p&gt; 


&lt;p class="small"&gt; 
这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 
&lt;/p&gt; 


&lt;p class="big"&gt; 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 像素 值 设置 行 间距 


&lt;html&gt; 


&lt;head&gt; 
&lt;style type="text/css"&gt; 
p.small 
{ 
line-height: 10px 
} 
p.big 
line-height: 30px 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 

这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏览 器 中 默认 行 高 大 约 是 20px。 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

&lt;/p&gt; 


&lt;p class="small"&gt; 
这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 
&lt;/p&gt; 


&lt;p class="big"&gt; 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


使 用 数值 来 设置 行 间距 


&lt;html&gt; 


&lt;head&gt; 

&lt;style type="text/css"&gt; 
p.small 

{ 

line-height: 0.5 

} 

p.big 

{ 

line-height: 2 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;p&gt; 

这 是 拥有 标准 行 高 的 段落 。 
默认 行 高 大 约 是 1. 

这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
&lt;/p&gt; 





&lt;p class="small"&gt; 
这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 
&lt;/p&gt; 





&lt;p class="big"&gt; 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
&lt;/p&gt; 





&lt;/body&gt; 
&lt;/html&gt; 


CSS 尺寸 属性 


度 和 宽度 。 同 样 ， 还 允许 你 增加 行 间距 。 


局 


CSS 尺寸 属性 允许 你 控制 元 素 的 


属性 


height 


line-height 


max-height 


max-width 


高 度 。 


设置 元 素 的 最 小 
设置 元 素 的 最 小 


min-height 


宽度 。 


min-width 
width 


CSS 分 类 (Classification) 


CSS 分 类 属性 允许 你 规定 如 何以 及 在 何 处 显示 元 素 。 


CSS 分 类 (Classification) 实 例 : 
如 何 把 元 素 显示 为 内 联 元 素 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
p (display: inline} 

div (display: none} 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 
&lt;p&gt; 本 例 中 的 样式 表 把 段落 元 素 设置 为 内 联 元 素 。 &lt;/p&gt; 


&lt;p&gt;m] div 元 素 不 会 显示 出 来 1&lLt;/p&gt 


&lt;div&gt;div 元 素 的 内 容 不 会 显示 出 来 &1lt;/divagt; 
&lt;/body&gt; 
&lt;/html&gt; 


如 何 把 元 素 显 示 为 块 级 元 素 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
span 

{ 

display: block 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&1t ; span&gt ; 本 例 中 的 样式 表 把 span 元 素 设置 为 块 级 元 素 。&1t;/span&gt; 
&lt ;span&gt ;两 个 span 元 素 之 间 产 生 了 一 个 换行 行为 。&1t;/span&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


float 属性 的 简单 应 用 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

float:right 

} 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&1t ; p&gt ;在 下 面 的 段落 中 ， 我 们 添加 了 一 个 样式 为 &lt;b&gt;float:right&lt;/bt 
&lt;p&gt; 

&lt;img src="/i/eg_cute.gif" /&gt; 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 

&lt;/body&gt; 


&lt;/html&gt; 
图 E 
将 带 有 边框 和 边界 的 图 像 浮 动 于 段落 的 右 例 





&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
img 

{ 

float:right; 

border:1px dotted black; 
margin:Opx Opx 15px 20px; 
} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&1t ; p&gt ;在 下 面 的 段落 中 ， 图 像 会 浮动 到 右 侧 ， 并 且 添 加 了 点 状 的 边框 。 我 们 还 为 图 像 
&lt;p&gt; 

&lt;img src="/i/eg_cute.gif" /&gt; 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 

&lt;/body&gt; 


&lt;/html&gt; 
-| RB 
带 标题 的 图 像 浮动 于 右 侧 





&lt;html&gt; 
&lt;head&gt; 

&lt;style type="text/css"&gt; 
div 

{ 

float:right; 
width:120px; 

margin:0 0 15px 20px; 
padding:15px; 
border:1px solid black; 
text-align:center; 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;div&gt; 

&lt;img src="/i/eg_cute.gif" /&gt;&lt;br /&gt; 

CSS is fun! 

&lt;/div&gt; 

&lt;p&gt; 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 


&lt;p&gt; 
在 上 面 的 段落 中 ，div 元 素 的 宽度 是 120 像素 ， 它 其 中 包含 图 像 。div 元 素 浮动 到 右 侧 
&lt;/p&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
H E 





使 段落 的 首 字母 浮动 于 左 例 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
span 

{ 

float:left; 

width:0.7em; 

font-size:4009; 
font-family:algerian,courier; 
line-height : 80%; 

} 

&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;p&gt; 

&lt;span&gt;T&lt;/span&gt;his is some text. 

This is some text. This is some text. 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
&lt;/p&gt; 


&lt;p&gt; 
在 上 面 的 段落 中 ， 文 本 的 第 一 个 字母 包含 在 一 个 span 元 素 中 。 这 个 span 元 素 的 宽度 是 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


|| LLL 
创建 水 平 菜单 





&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
ul 

{ 

float:left; 

width:100%; 

padding:0; 

margin:0; 
list-style-type:none; 

} 

a 

{ 

float:left; 

width:7em; 
text-decoration:none; 
color:white; 

background-color :purple; 
padding:0.2em 0.6em; 
border-right:1px solid white; 
} 

a:hover {background-color :#ff3300} 
li {display:inline} 
&lt;/style&gt; 

&lt;/head&gt; 


&lt;body&gt; 

&lt;ul&gt; 

&lt;li&gt;&lt;a href="#"&gt;Link one&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"&gt;Link two&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"&gt;Link three&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"&gt;Link four&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 


&lt;p&gt; 
在 上 面 的 例子 中 ， 我 们 把 ul 元 素 和 a 元 素 浮 向 左 浮动 。11 元 素 显 示 为 行内 元 素 (元 素 
&lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


ge — án] 
创建 无 表格 的 首页 





&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 
div.container 

{ 

width:100%; 

margin: 0px; 


border:1px solid gray; 
line-height : 150%; 
} 


div.header, div. footer 


padding:0.5em; 
color:white; 
background-color: gray; 
clear:left; 


} 
hi.header 


{ 
padding:0; 
margin:0; 
} 
div.left 


float:left; 
width:160px; 
margin:0; 
padding:iem; 

} 

div.content 

{ 
margin-left:190px; 
border-left:i1px solid gray; 
padding:iem; 

} 

&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;div class="container"&gt; 

&lt;div class="header"&gt;&lt;h1 class-"header'&gt;W3School.com.cné 
&lt;div class-"left'"&gt;&lt;p&gt;" Never increase, beyond what is ne 
&lt;div class="content"&gt; 

&lt;h2&gt;Free Web Building Tutorials&lt;/h2&gt; 

&lt;p&gt;At W3School.com.cn you will find all the Web-building tutt: 


from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP 
&lt;p&gt;W3School.com.cn - The Largest Web Developers Site On The ! 


&lt;div class="footer"&gt;Copyright 2008 by YingKe Investment.&lt;, 
&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


«| - 











定位 : 相对 定位 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
h2.pos left 

{ 
position:relative; 
left: -20px 

} 

h2.pos_right 

t 
position:relative; 
left:20px 

} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;h2&gt ;这 是 位 于 正常 位 置 的 标题 &Lt;V/h2&dgt ; 

&lt;h2 class="pos_left"&gt; 这 个 标题 相对 于 其 正常 位 置 向 左 移动 &lLt;/h2&dgt; 
&lt;h2 class="pos_right"&gt; 这 个 标题 相对 于 其 正常 位 置 向 右 移动 &Lt; /h2&gt ; 
&lt;p&gt; 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进 行 移动 。&1Lt;/p&gt 
&lt;p&gt; 3X "left:-20px" 从 元 素 的 原始 左 侧 位 置 减 去 20 RR &lt;/p&gt; 
&lt;p&gt; Ex "left:20px" 向 元 素 的 原始 左 侧 位 置 增加 20 RR &lt;/p&gt; 
&lt;/body&gt; 


&lt;/html&gt; 
D — 13 


定位 : 绝对 定位 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
h2.pos abs 

{ 
position:absolute; 
left :100px; 

top: 150px 

} 

&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 

&lt;h2 class="pos_abs"&gt; 这 是 带 有 绝对 定位 的 标题 &1t;/h2&gt， 

Slt; p&gt ;通过 绝对 定位 ， 元 素 可 以 放置 到 页 面 上 的 任何 位 置 。 下 面 的 标题 距离 页 面 左 侧 
&lt;/body&gt; 


&lt;/html&gt; 








&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
p.one 

t 
position:fixed; 
left : 5px; 

top: 5px, 

j 

p.two 

{ 
position:fixed; 
top:30px; 
right:5px; 


&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;p class-z"one"&gt; —E x, &lt;/p&gt; 
&lt;p class="two"&gt; EZINE. &lt;/p&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


如 何 使 元 素 不 可 见 


&lt;html&gt; 

&lt;head&gt; 

&lt;style type="text/css"&gt; 

hi.visible {visibility:visible} 

hi.invisible {visibility:hidden} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 

&lt;h1 class="visible"&gt; 这 是 可 见 的 标题 &lt;/hi&gt，; 
&lt;h1 class="invisible"&gt; 这 是 不 可 见 的 标题 &1t;/h1i&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


把 表格 元 素 设置 为 collapse (请 在 非 IE 的 浏览 器 中 查看 ) 


&lt;html&gt; 
&lt;head&gt; 
&lt;style type="text/css"&gt; 
tr.coll 
{ 
visibility:collapse 
} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 


&lt;table border="1"&gt; 
&lt;tr&gt; 
&lt;td&gt;Adams&lt;/td&gt; 
&lt;td&gt;John&lt;/td&gt; 
&lt;/tr&gt; 

&lt;tr class="coll"&gt; 
&lt;td&gt;Bush&lt;/td&gt; 
&lt;td&gt;George&lt;/td&gt; 
&lt;/tr&gt; 

&lt;/table&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


改变 光标 


&lt;html&gt; 


&lt;body&gt; 

&1t ; p&gt ;请 把 鼠标 移动 到 单词 上 ， 可 以 看 到 鼠标 指针 发 生变 化 : &1t; / p&gt; 
&lt;span style="cursor:auto"&gt; 
Auto&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:crosshair"&gt; 
Crosshair&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:default"&gt; 
Default&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor :pointer"&gt; 
Pointer&lt;/span&gt;&lt;br /&gt; 

&lt; span style="cursor :move"&dgt 
Move&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'"cursor:e-resize"&gt; 
e-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Cursor:ne-resize"&gt; 
ne-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Ccursor:nw-resize"&gt; 
nw-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'cursor:n-resize"&gt; 
n-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Ccursor:se-resize"&gt; 
se-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Cursor:sw-resize"&gt; 
Sw-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'"cursor:s-resize"&gt; 
s-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style-'cursor:w-resize"&gt; 
w-resize&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:text"&gt; 
text&lt;/span&gt;&lt;br /&gt; 
&lt;span style="Ccursor:wait"&gt; 
wait&lt;/span&gt;&lt;br /&gt; 
&lt;span style="cursor:help"&gt; 
help&lt;/span&gt; 

&lt;/body&gt; 


&lt;/html&gt; 


清除 元 素 的 侧面 


&lt;html&gt; 


&lt;head&gt; 
&lt;style type="text/css"&gt; 
img 


{ 
float:left; 
clear:both; 


} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;img src="/i/eg_smile.gif" /&gt; 
&lt;img src="/i/eg_smile.gif" /&gt; 
&lt;/body&gt; 


&lt;/html&gt; 


CSS 分 类 属性 (Classification) 


CSS 分 类 属性 允许 你 控制 如 何 显示 元 素 ， 设 置 图 像 显示 于 另 一 元 素 中 的 何 处， 相对 
于 其 正常 位 置 来 定位 元 素 ， 使 用 绝对 值 来 定位 元 素 ， 以 及 元 素 的 可 见 度 。 


属性 描述 
clear 设置 一 个 元 素 的 侧面 是 否 允 许 其 他 的 浮动 元 素 。 


cursor 规 mU UPC ee Tey 

display ”设置 是 否 及 如 何 显示 元 素 。 

float 定义 元 素 在 哪个 方向 浮动 

position ”把 元 素 放 置 到 一 个 静态 的 、 相 对 的 、 绝 对 的 、 或 固定 的 位 置 中 。 
visibility ”设置 元 素 是 否 可 见 或 不 可 见 


CSS 导航 条 


演示 : 导航 栏 


Home 
News 
Articles 
Forum 
Contact 
About 


导航 栏 


拥有 易 用 的 导航 条 对 于 任何 网 站 都 很 重要 。 
通过 CSS， 您 能 够 把 乏味 的 HTML 菜单 转换 为 漂亮 的 导航 栏 。 


导航 栏 = 链接 列表 


导航 栏 需要 标准 的 HTML 作为 基础 。 
在 我 们 的 例子 中 ， 将 用 标准 的 HTML 列表 来 构建 导航 栏 。 
导航 栏 基本 上 是 一 个 链接 列表 ， 因 此 使 用 <ul> 和 <li> 元 素 是 非常 合适 的 : 


实例 


<ul> 

<li><a href="default.asp">Home</a></1i> 
<li><a href="news.asp">News</a></11i> 
<li><a href="contact.asp">Contact</a></1li> 
<li><a href="about.asp">About</a></1i> 
</ul> 


现在 ， 让 我 们 从 列表 中 去 掉 圆 点 和 外 边 距 : 


实例 


ul 
list-style-type:none; 


margin:0; 
padding:0; 
} 


例子 解释 : 


e list-style-type:none - 删除 圆 点 。 导航 栏 不 需要 列表 项 标记 。 
e 把 外 边 距 和 内 边 距 设置 为 0 可 以 去 除 浏览 器 的 默认 设 定 。 


以 上 例子 中 的 代码 是 用 在 垂直 、 水 平 导 航 栏 中 的 标准 代码 。 


垂直 导航 栏 


如 需 构建 垂直 导航 栏 ， 我 们 只 需要 定义 «a» 元 素 的 样式 ， 除 了 上 面 的 代码 之 外 : 
实例 


a 


{ 
display:block; 
width:60px; 


例子 解释 : 

e display:block - 把 链接 显示 为 块 元 素 可 使 整个 链接 区 域 可 点 击 (不 仅仅 是 文 
A) ， 同 时 也 人 允许 我 们 规定 宽度 。 

e width:60px - 块 元 素 默 认 占 用 全 部 可 用 宽度 。 我 们 需要 规定 60 像素 的 宽度 。 

提示 : 请 同时 看 一 看 我 们 完整 样式 的 导航 栏 实例 。 


注释 : 请 始终 规定 垂直 导航 栏 中 <a> 元 素 的 宽度 。 如 果 省 略 宽度 ，IE6 会 产生 意 想 
不 到 的 结果 。 


水 平 导航 栏 


有 两 种 创建 水 平 导 航 栏 的 方法 。 使 用 行内 或 浮动 列表 项 。 
两 种 方法 都 不 错 ， 但 是 如 果 您 希望 链接 拥有 相同 的 尺寸 ， 就 必须 使 用 浮动 方法 。 


行内 列表 项 
除了 上 面 的 "标准 "代码 ， 构 建 水 平 导航 栏 的 方法 之 一 是 将 <li> 元 素 规定 为 行内 元 


7IN * 


实例 


li 


display:inline; 


例子 解释 : 


display:inline; - AA 3b, «li» 元 素 是 块 元 素 。 在 这 里 ， 我 们 去 除了 每 个 列表 项 前 后 
的 换行 ， 以 便 让 它们 在 一 行 中 显示 。 


提示 : 请 看 一 下 我 们 完整 祥 式 的 水 平 导航 栏 实 例 。 


对 列表 项 进行 浮动 
在 上 面 的 例子 中 ， 链 接 的 宽度 是 不 同 的 。 
为 了 让 所 有 链接 拥有 相等 的 宽度 ， 浮 动 <li> 元 素 并 规定 <a> 元 素 的 宽度 : 


实例 


li 


{ 
float:left; 
} 


a 


{ 
display:block; 
width:60px; 


例子 解释 : 


e float:left - 使 用 float 来 把 块 元 素 滑 向 彼此 。 

e display:block - 把 链接 显示 为 块 元 素 可 使 整个 链接 区 域 可 点 击 (不 仅仅 是 文 
A) ， 同 时 也 人 允许 我 们 规定 宽度 。 

e width:60px - 由 于 块 元 素 默 认 占 用 全 部 可 用 宽度 ， 链 接 无 法 滑动 至 彼此 相 邻 。 
我 们 需要 规定 60 像素 的 宽度 。 
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CSS 图 片 库 


CSS 可 用 来 创建 图 片 库 。 


Jn BR: CSS 图 图 片 库 


Bt 
wc 
CY 
a 
E 
r3 
A 
In: 
AR 
TEE 
cT 
HB 
id 





像 的 描述 ND tb s X e og RN m 
添加 对 图 像 的 描述 
图 片 库 


下 面 的 图 片 库 是 由 CSS 创建 的 : 
实例 


<!doctype html> 

«html» 

«head» 

«style» 

div.img 
1 H 
margin:3px; 
border:1px solid #bebebe; 
height:auto; 
width:auto; 
float:left; 
text-align:center; 
} 


div.img img 


1 
display:inline; 
margin:3px; 
border:1px solid #bebebe; 
} 

div.img a:hover img 
{ 
border:1px solid #333333; 
} 

div.desc 
{ 
text-align:center; 
font-weight :normal; 
width:150px; 
font-size:12px; 
margin:10px 5px 10px 5px; 


</style> 
</head> 
<body> 


<div class="img"> 
<a target="_blank" hrefz"/i/tulip ballade.jpg'» 
<img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" heigl 
</a> 
<div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


<div class="img"> 
<a target="_blank" href="/i/tulip_flaming_club.jpg"> 
<img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" 
</a> 
«div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


<div class="img"> 
<a target="_blank" href="/i/tulip_fringed_family.jpg"> 
<img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="16( 
</a> 
«div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


<div class="img"> 
<a target="_blank" href="/i/tulip_peach_blossom.jpg"> 
<img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160' 
</a> 
<div class="desc"> 在 此 处 添加 对 图 像 的 描述 </div> 
</div> 


</body> 
</html> 
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CSS ARERR 


通过 CSS 创建 透明 图 像 是 很 容易 的 。 
注释 : CSS opacity 属性 是 W3C CSS 推荐 标准 的 一 部 分 。 


亲自 试 一 试 - 实例 
创建 透明 图 像 - Hover 效果 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;style&gt; 

img 

( . 

opacity:0.4; 

filter:alpha(opacity-40); /* For IE8 and earlier */ 
} 

img:hover 

{ 

opacity:1.0; 

filter:alpha(opacity-100); /* For IE8 and earlier */ 
} 

&lt;/style&gt; 

&lt;/head&gt; 

&lt;body&gt; 


&1t ;h1&gt ;图 像 透 明度 &Lt;/h1&gt ; 
&lt;img src="/i/tulip_peach_blossom_w_s.jpg" alt="Peach Blossom" /é 
&lt;p&gt;&lt;bagt; FH : &lt;/b&gt;ft IE 中 ， 必 须 添加 &1t; !DOCTYPE&gt;, 


&lt;/body&gt; 
&lt;/html&gt; 


创建 文本 在 背景 图 像 上 的 透明 框 





&lt; IDOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;style&gt; 
div.background 


{ 
width: 400px; 


height: 266px; 
margin:15px; 
background: url('/i/tulip_peach_blossom_w.jpg') no-repeat; 
border: 1px solid black; 
j 


div.transbox 

{ 
width: 338px; 
height: 204px; 
margin: 30px; 
padding:0; 
background-color: #fffffFf; 
border: 1px solid black; 
"icone! cH sua 
filter:alpha(opacity-60); 
/* CSS3 standard */ 
opacity:0.6; 

j 


div.transbox p 
{ 
margin: 30px 40px; 
color: #000000; 
font:bold 12px Verdana, Geneva, sans-serif; 
line-height :1.5; 


&lt;/style&gt; 
&lt;/head&gt; 


&lt;body&gt; 


&lt;div class="background"&gt; 

&lt;div class="transbox"&gt; 

&lt;p&gt; 

This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
&lt;/p&gt; 

&lt;/div&gt; 

&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


M 


实例 1 - 创建 透明 图 像 


定义 透明 效果 的 CSS3 属性 是 opacity。 


首先 ， 我 们 将 展示 如 何 通 过 CSS 来 创建 透明 图 像 。 
常规 图 像 : 








请 看 下 面 的 CSS: 
img 


opacity:0.4; 
filter:alpha(opacity=40); /* 针对 IE8 以 及 更 早 的 版 本 */ 
} 


IE9, Firefox, Chrome, Opera 和 Safari 使 用 属性 opacity 3 3X ESHA. opacity 属 
性 能 够 设置 的 值 从 0.0 到 1.0。 值 越 小 ， 越 透明 。 


IES 以 及 更 早 的 版 本 使 用 滤 镜 filter:alpha(opacity-x), x 能 够 取 的 值 从 0 到 100。 
值 越 小 ， 越 透明 。 


实例 2 - 图 像 透明 度 - Hover 效果 


请 把 鼠标 指针 移动 到 图 像 上 : 





CSS 是 这 样 的 : 


img 

{ 

Opacity:0.4; 

filter:alpha(opacity-40); /* 针对 IE8 以 及 更 早 的 版 本 */ 
ee 

{ 


opacity: 1:20; 
filter:alpha(opacity=100); /* 针对 IES 以 及 更 时 的 版 本 */ 
} 


第 一 个 CSS 代码 块 类 似 实例 1 中 的 人 代码。 此外， 我 们 已 经 设置 了 当 妃 标 指针 位 于 
图 像 上 时 的 样式 。 在 这 个 例子 中 ， 当 指针 移动 到 图 像 上 时 ， 我 们 希望 图 像 是 不 透明 
的 。 


对 应 的 CSS 是 : opacity=1, 
IE8 以 及 更 早 的 浏览 器 filter:alpha(opacity=100). 
当 妃 标 指针 移出 图 像 后 ， 图 像 会 再 次 透明 。 


实例 3 - 透明 框 中 的 文本 


This is some text that is placed in the transparent box. This is some text that is 
placed in the transparent box. This is some text that is placed in the transparent 
box. This is some text that is placed in the transparent box. This is some text that 
is placed in the transparent box. 


源 代 码 是 这 样 的 : 


«IDOCTYPE html» 

«html» 

«head» 

«style» 

div.background 

{ 
width: 400px; 
height: 266px; 
background: url('/i/tulip peach blossom w.jpg') no-repeat; 
border: 1px solid black; 

} 


div.transbox 

{ 
width: 338px; 
height: 204px; 
margin: 30px; 
background-color: Zffffff; 
border: 1px solid black; 
22 Oe Les a7 
filter:alpha(opacity-60); 
/* CSS3 standard */ 
opacity:0.6; 

} 


div.transbox p 
{ 
margin: 30px 40px; 
j 
</style> 
</head> 


<body> 


<div class="background"> 

<div class="transbox"> 

<p> 

This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
This is some text that is placed in the transparent box. 
</p> 

</div> 

</div> 


</body> 
</html> 


首先 ， 我 们 创建 一 个 div 元 素 (class="background")， 它 有 固定 的 高 度 和 宽度 、 背 
景 图 像 ， 以 及 边框 。 然 后 我 们 在 第 一 个 div AEDH div 
(class="transbox")。"transbox" div 有 固定 的 宽度 、 背 景色 和 边框 - 并 且 它 是 透明 
的 。 在 透明 div 内 部 ， 我 们 在 p 元 素 中 加 入 了 一 些 文本 。 


相关 页 面 


CSS 参考 手册 : CSS3 opacity 属性 


CSS2 媒介 类 型 


媒介 类 型 (Media Types) 人 允许 你 定义 以 何 种 媒介 来 提交 文档 。 文 档 可 以 被 显示 在 显 
示 器 、 纸 媒介 或 者 听觉 浏览 器 等 等 。 


媒介 类 型 


XE CSS 属性 仅仅 被 设计 为 针对 某 些 媒 介 。 上 比方 说 "voice-family" 属性 被 设计 为 针 
对 听觉 用 户 终端 。 其 他 的 属性 可 被 用 于 不 同 的 媒介 。 例 如 ，"font-size" 属性 可 被 用 
于 显示 器 以 及 印刷 媒介 ， 但 是 也 许 会 带 有 不 同 的 值 。 显 示 器 上 面 的 显示 的 文档 通常 
会 需要 比 纸 媒介 文档 更 大 的 字号 ， 同 时 ， 在 显示 器 上 ，sSans-serif 字体 更 易 阅 读 ， 
而 在 纸 媒介 上 ，serif 字体 更 易 阅读 。 


@media 规 则 
(media 规则 使 你 有 能 力 在 相同 的 样式 表 中 ， 使 用 不 同 的 样式 规则 来 针对 不 同 的 媒 


介 。 


下 面 这 个 例子 中 的 样式 告知 浏览 器 在 显示 器 上 显示 14 像素 的 Verdana 字体 。 但 是 
假如 页 面 需要 被 打印 ， 将 使 用 10 个 像素 的 Times 字体 。 注 意 : font-weight 被 设置 
为 粗 体 ， 不 论 显示 器 还 是 纸 媒介 : 


<html> 
<head> 


<style> 
@media screen 


p.test {font-family: verdana, sans-serif; font-size:14px} 


j 
Qmedia print 


p.test {font-family:times,serif; font-size:10px} 


j 

@media screen,print 
rone {font-weight:bold} 
yore 

</head> 


<body>....</body> 


</html> 


不 同 的 媒介 类 型 


注释 : 媒介 类 型 名 称 对 大 小 写 不 敏感 。 


媒介 类 型 描述 
all 用 于 所 有 的 媒介 设备 。 
aural 用 于 语音 和 音频 合成 器 。 
braille 用 于 盲人 用 点 字 法 触觉 回馈 设备 。 


embossed ”用 于 分 页 的 盲人 用 点 字 法 打印 机 。 
handheld 用 于 小 的 手持 的 设备 。 


print 用 于 打印 机 。 

projection 用 于 方案 展示 ， 比 如 幻灯 片 。 

screen 用 于 电脑 显示 器 。 

tty 用 于 使 用 固定 密度 字母 栅 格 的 媒介 ， 上 比如 电 传 打字 机 和 终端 。 


tv 用 于 电视 机 类 型 的 设备 。 
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CSS 注意 事项 


本 节 列 出 了 在 使 用 CSS 时 尽量 避免 使 用 的 技术 。 


Internet Explorer Behaviors 


_ 它 是 什么 ?_Internet Explorer 5 引入 了 行为 (behaviors), behaviors 是 一 种 通过 
使 用 CSS 向 HTML 元 素 添 加 行为 的 方法 。 


为 什么 要 避免 它 ? 只 有 Internet Explorer 支持 behavior 属性 。 
用 什么 代替 ? 请 使 用 JavaScript 和 HTML DOM 取而代之 。 


例子 1 - Mouseover Highlight 
下 面 的 HTML 文件 中 有 一 个 <style> 元 素 ， 它 为 <h1> 元 素 定义 了 一 个 行为 : 


«html» 

«head» 

«style type="text/css"> 

hi ( behavior: url(behave.htc) } 
</style> 

</head> 


<body> 
<hi>Mouse over me! !!</h1> 
</body> 
</html> 


下 面 是 XML 文档 "behave.htc'" : 


«attach for="element" event="onmouseover" handler="hig_lite" /> 
«attach for="element" event="onmouseout" handler="low_lite" /> 


<script type="text/javascript"> 
function hig_lite() 


element.style.color='red'; 


} 


function low_lite() 


element.style.color='blue'; 


} 


</script> 


behavior 文件 包含 了 针对 元 素 的 JavaScript 和 事件 句柄 。 
如 果 您 使 用 Internet Explorer， 可 以 亲自 试 一 下 (把 鼠标 放 在 例子 中 的 文本 上 ) 。 


例子 2 - Typewriter Simulation 


下 面 的 HTML 文件 中 有 一 个 «style» TR, CH id 7j "typing" 的 元 素 定 义 了 一 个 行 
为 : 


«html» 
«head» 
«style type="text/css"> 
#typing 


behavior :url(behave_typing.htc); 
font-family: 'courier new'; 


} 
</style> 
</head> 


<body> 

<span id="typing" speed="100">IE5 introduced DHTML behaviors. 
Behaviors are a way to add DHTML functionality to HTML elements 
with the ease of CSS.<br /><br />How do behaviors work?<br /> 
By using XML we can link behaviors to any element in a web page 
and manipulate that element.</p> 

</span> 

</body> 

</html> 


下 面 是 XML 文档 "behave.htc'" : 


«attach for="window" event="onload" handler="beginTyping" /> 
<method name="type" /> 


<script type="text/javascript"> 
var i,texti, text2, textLength,t; 


function beginTyping( ) 

t 

1-0; 

texti=element.innerText; 

textLength-text1.length; 

element.innerText=""; 

text2=""; 
t=window.setInterval(element.id+".type()",speed); 


} 


function type() 


{ 
text2=text2+text1.substring(i,i+1); 


element.innerText=text2; 
I= ide 
if (i==textLength) 

{ 


clearInterval(t); 
} 
} 


</script> 


如 果 您 使 用 Internet Explorer， 可 以 亲自 试 一 下 。 


CSS 高 级 


CSS3 简介 


CSS3 完全 向 后 兼容 ， 因 此 您 不 必 改 变现 有 的 设计 。 浏 览 器 通常 支持 CSS2。 


CSS3 模块 


CSS3 被 划分 为 模块 。 
其 中 最 重要 的 CSS3 模块 包括 : 


选择 名 

框 模 型 
背景 和 边框 
文本 效果 
2D/3D 转换 
动画 

多 列 布局 
用 户 界 面 


CSS3 标准 


W3C 仍然 在 对 CSS3 规范 进行 开发 。 
不 过 ， 现 代 浏 览 器 已 经 实现 了 相当 多 的 CSS3 属性 。 


CSS3 边框 


CSS3 边框 

通过 CSS3， 您 能 够 创建 圆 角 边框 ， 向 矩形 添加 阴影 ， 使 用 图 片 来 绘制 边框 - 并 且 
不 需 使 用 设计 软件 ， 比 如 PhotoShop。 

在 本 章 中 ， 您 籽 学 到 以 下 边框 属性 : 


e border-radius 
e box-shadow 
e border-image 


浏览 器 文 持 


属性 浏览 器 支持 
border-radius 
box-shadow 
border-image 
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性 。 
Firefox、Chrome 以 及 Safari 支持 所 有 新 的 边框 属性 。 
注释 : 对 于 border-image，Safari 5 以 及 更 老 的 版 本 需要 前 级 -webkit-。 
Opera 支持 border-radius 和 box-shadow 属性 ， 但 是 对 于 border-image 需要 前 级 


ides 
CSS3 圆 角 边框 


在 CSS2 中 添加 圆 角 算 形 需 要 技巧 。 我 们 必须 为 每 个 圆 角 使 用 不 同 的 图 片 。 
在 CSS3 中 ， 创 建 圆 角 是 非常 容易 的 。 

在 CSS3 中 ，border-radius 属性 用 于 创建 圆 角 : 

这 个 和 矩形 有 圆 角 哦 ! 


实例 
向 div TRAA 圆 角 : 


div 


border:2px solid; 
border-radius:25px; 
-moz-border-radius:25px; /* Old Firefox */ 


CSS3 边框 阴影 
在 CSS3 中 ，box-shadow 用 于 向 方 框 添加 阴影 : 
实例 
向 div 元 素 添加 方 框 阴影 : 
div 


{ 
box-shadow: 10px 10px 5px #888888; 
} 


CSS3 边框 图 片 
通过 CSS3 的 border-image 属性 ， 您 可 以 使 用 图 片 来 创建 边框 : 
border-image 属性 允许 您 规定 用 于 边框 的 图 片 ! 
用 于 创建 上 面 的 边框 的 原始 图 片 : 





* 


实例 


使 用 图 片 创建 围绕 div 元 素 的 边框 : 


div 

1 

border-image:url(border.png) 30 30 round; 
-moz-border-image:url(border.png) 30 30 round; /* #@& Firefox */ 
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrc 
-o-border-image:url(border.png) 30 30 round; /* Opera */ 

} 








也 = 
新 的 边框 属性 
属性 描述 CSS 
border-image 设置 所 有 border-image-* 属性 的 简写 属性 。 3 
border-radius 设置 所 有 四 个 border-*-radius 属性 的 简写 属性 。 3 


box-shadow 向 方 框 添加 一 个 或 多 个 阴影 Ho 3 


CSS3 背景 


CSS3 背景 
CSS3 包含 多 个 新 的 背景 属性 ， 它 们 提供 了 对 背景 更 强大 的 控制 。 
在 本 章 ， 您 将 学 到 以 下 背景 属性 : 


e background-size 
e background-origin 


您 也 将 学 到 如 何 使 用 多 重 背 景 图 片 。 
浏览 器 支持 


属性 浏览 器 支持 
background-size 


background-origin 


Internet Explorer 9+, Firefox, Chrome, Safari 以 及 Opera 支持 新 的 背景 属性 。 


CSS3 background-size 属性 


background-size 属性 规定 背景 图 片 的 尺寸 。 


在 CSS3 之 前 ， 背 景 图 片 的 尺寸 是 由 图 片 的 实际 尺寸 决定 的 。 在 CSS3 中 ， 可 以 规 
定 背 景 图 片 的 尺寸 ， 这 就 允许 我 们 在 不 同 的 环境 中 重复 使 用 背景 图 片 。 


您 能 够 以 像素 或 百分比 规定 尺寸 。 如 果 以 百分比 规定 尺寸 ， 那 么 尺寸 相对 于 父 元 素 
的 宽度 和 高 度 。 


例子 1 
调整 背景 图 片 的 大 小 : 


div 


1 

background:url(bg flower.gif); 
-moz-background-size:63px 100px; /* 老 版 本 的 Firefox */ 
background-size:63px 100px; 
background-repeat:no-repeat; 


} 
例子 2 
对 背景 图 片 进 行 拉 伸 ， 使 其 完成 填充 内 容 区 域 : 
div 
{ 


background:url(bg flower.gif); 
-moz-background-size:40% 100%; /* 老 版 本 的 Firefox */ 
background-size:40% 100%; 
background-repeat:no-repeat; 


j 


CSS3 background-origin 属性 


background-origin 属性 规定 背景 图 片 的 定位 区 域 。 
背景 图 片 可 以 放置 于 content-box、padding-box 或 border-box 区 域 。 





border-box 





实例 


在 content-box 中 定位 背景 图 片 : 


div 

{ 

background: url(bg_flower.gif); 
background-repeat:no-repeat; 
background-size:100% 100%; 


-webkit -background-origin:content-box; /* Safari */ 
background-origin: content - box; 


} 


CSS3 多 重 育 景 图 片 

CSS3 允许 您 为 元 素 使 用 多 个 背景 图 像 。 
实例 

为 body 元 素 设 置 两 幅 背 景 图 片 : 


body 


X 
background-image:url(bg flower.gif),url(bg flower 2.gif); 
} 


新 的 背景 属性 


属性 描述 CSS 
background-clip 规定 背景 的 绘制 区 域 。 3 
background-origin 规定 背景 图 片 的 定位 区 域 。 3 
background-size 规定 背景 图 片 的 尺寸 。 3 


CSS3 文本 效果 
CSS3 文本 效果 


CSS3 包含 多 个 新 的 文本 特性 。 
在 本 章 中 ， 您 将 学 到 如 下 文本 属性 : 


e text-shadow 
e word-wrap 


浏览 器 文 持 


属性 浏览 器 支持 
text-shadow 


word-wrap 


Internet Explorer 10, Firefox, Chrome, Safari 以 及 Opera 支持 text-shadow 属 


l 
o 


所 有 主流 浏览 器 都 支持 word-wrap 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 ， 不 支持 text-shadow 属性 。 


CSS3 文本 阴影 

在 CSS3 中 ，text-shadow 可 向 文本 应 用 阴影 。 
MAAS ! 

您 能 够 规定 水 平 阴影 、 垂 直 了 阴影、 模糊 距离 ， 以 及 阴影 的 颜色 : 
实例 

向 可 标 是 题 添 aN JD 阴影 


hi 


{ 
text-shadow: 5px 5px 5px #FF0000; 
} 


CSS3 目 动 换行 
单词 太 长 的 话 就 可 能 无 法 超出 某 个 区 域 : 


This paragraph contains a very long word: 
thisisaveryveryveryveryveryverylongword. The long word will break and wrap to 
the next line. 


在 CSS3 中 ，word-wrap 属性 允许 您 允许 文本 强制 文本 进行 换行 - 即使 这 意味 着 会 
对 单词 进行 拆 分 : 
This paragraph contains a very long word: 


thisisaveryveryveryveryveryverylongword. The long word will break and wrap to 
the next line. 


下 面 是 CSS 代码 : 


实例 
允许 对 长 单词 进行 拆 分 ， 并 换行 到 下 一 行 : 


p (word-wrap:break-word; } 


新 的 文本 属性 


LL 4 
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属性 


hanging- 
punctuation 


punctuation-trim 


text-align-last 


text-emphasis 


text-justify 


text-outline 
text-overflow 
text-shadow 
text-wrap 


word-break 


word-wrap 
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W3School 前 端 教程 合集 


描述 
规定 标点 字符 是 否 位 于 线 框 之 外 。 


规定 是 否 对 标点 字符 进行 修剪 。 

设置 如 何 对 齐 最 后 一 行 或 紧 挨 着 强制 换行 符 之 前 
的 行 。 

向 元 素 的 文本 应 用 重点 标记 以 及 重点 标记 的 前 景 
色 


o 


规定 当 text-align 设置 为 justify" 时 所 使 用 的 对 齐 
方法 。 


规定 文本 的 轮廓 。 

规定 当 文 本 渝 出 包含 元 素 时 发 生 的 事情 。 
向 文本 添加 阴影 。 

规定 文本 的 换行 规则 。 

规定 非 中 日 韩文 本 的 换行 规则 。 


允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换行 到 下 
=iTe 


CSS 
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CSS3 字体 
通过 CSS3, Web 设计 师 再 也 不 必 被 迫使 用 “web-safe” 字 体 了 。 


CSS3 @font-face 规则 


在 CSS3 之 前 ，web 设计 渍 必须 使 用 已 在 用 户 计算 机 上 安装 好 的 字体 。 
通过 CSS3，web 设计 羡 可 以 使 用 他 们 喜欢 的 任意 字体 。 


当 您 您 找到 或 购买 到 希望 使 用 的 字体 时 ， 可 将 该 字体 文件 存放 到 web 服务 器 上 ， 它 
会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 


您 “自己 的 "的 字体 是 在 CSS3 @font-face 规则 中 定义 的 。 


浏览 器 文 持 


属性 浏览 器 支持 
@font-face 


Firefox, Chrome, Safari 以 及 Opera 支持 .ttf (True Type Fonts) 和 .otf 
(OpenType Fonts) 类 型 的 字体 。 


Internet Explorer 9+ 支持 新 的 @font-face 规则 ， 但 是 仅 支持 .eot 类 型 的 字体 
(Embedded OpenType)。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 新 的 @font-face 规则 。 


使 用 您 需要 的 字体 


在 新 的 @font-face 规则 中 ， 您 必须 首先 定义 字体 的 名 称 (比如 myFirstFont) ， 然 
后 指向 该 字体 文件 。 


如 需 为 HTML 元 素 使 用 字体 ， 过 font-family 属性 来 引用 字体 的 名 称 
(myFirstFont) : 


实例 


<style> 
Qfont-face 


{ 

font-family: myFirstFont; 

src: Url(' Sansation Light.ttf')， 
url('Sansation Light.eot'); /* IE9+ */ 

j 


div 
font-family:myFirstFont; 


j 
</style> 


使 用 粗 体 字 体 


您 必须 为 粗 体 文本 添加 另 一 个 包含 描述 符 的 @font-face : 
实例 


Qfont-face 


{ 

font-family: myFirstFont; 

src: url('Sansation Bold.ttf'), 
url('Sansation Bold.eot'); /* IE9+ */ 

font-weight:bold; 


j 


Xt "Sansation Bold.ttf" 是 另 一 个 字体 文件 ， 它 包含 了 Sansation 字体 的 粗 体 字 


‘So 


RZ font-family 7; "myFirstFont" 的 文本 需要 显示 为 粗 体 ， 浏 览 器 就 会 使 用 该 字 
体 。 


通过 这 种 方式 ， 我 们 可 以 为 相同 的 字体 设置 许多 @font-face 规则 。 


CSS3 F(A fan FT 


下 面 的 表格 列 出 了 能 够 在 @font-face 规则 中 定义 的 所 有 字体 描述 符 : 


font- 
stretch 


font- 
style 


font- 
weight 


unicode- 
range 


值 
name 


URL 


normal condensed ultra-condensed 
extra-condensed semi-condensed 
expanded semi-expanded extra- 
expanded ultra-expanded 


ormal italic oblique 


normal bold 100 200 300 400 500 600 
700 800 900 


unicode-range 


必需 。 定 义 字体 文件 
的 URL。 


可 选 。 定 义 如 何 拉 伸 
字体 。 默 认 是 
"normal"。 


Pito FEN RA EE 
式 。 默 认 是 
"normal". 

可 选 。 定 义 字 体 的 粗 
细 。 默 认 是 
"normal", 


可 选 。 定 义 字 体 支 持 
的 UNICODE 字符 范 
围 。 默 认 是 "U+0- 
10FFFF"。 


CSS3 2D 转换 


CSS3 转换 
通过 CSS3 转换 ， 我 们 能 够 对 元 素 进 行 移 动 、 缩 放 、 转 动 、 拉 长 或 拉 伸 。 
它 如 何 工 作 ? 


转换 是 使 元 素 改变 形状 、 尺 寸 和 位 置 的 一 种 效果 。 
您 可 以 使 用 2D 或 3D 转换 来 转换 您 的 元 素 。 


浏览 器 文 持 


属性 浏览 器 支持 
transform 
Internet Explorer 10、Firefox 以 及 Opera 支持 transform 属性 。 
Chrome 和 Safari 需要 前 级 -webkit-。 


注释 : Internet Explorer 9 需要 前 级 -ms-。 


2D 转换 
在 本 章 中 ， 您 将 学 到 如 下 2D 转换 方法 : 


e translate() 
e rotate() 
e scale() 
e skew() 
e matrix() 


您 将 在 下 一 章 学 习 3D 转换 。 


实例 


div 


{ 

transform: rotate(30deg); 

-ms-transform: rotate(30deg); JT SEO SA 
-webkit-transform: rotate(30deg); /* Safari and Chrome */ 
-o-transform: rotate(30deg); /* Opera */ 
-moz-transform: rotate(30deg); /* Firefox */ 

} 


translate() 方法 


通过 translate() 方法 ， 元 素 从 其 当前 位 置 移动 ， 根 据 给 定 的 left (x 坐标 ) 和 
top (y 坐标 ) 位 置 参数 : 


实例 
div 
{ 
transform: translate(50px,100px); 
-ms-transform: translate(50px,100px); ZT IE 0 *4 
-webkit-transform: translate(50px,100px); /* Safari and Chrome : 
-o-transform: translate(50px,100px); /* Opera */ 
-moz-transform: translate(50px,100px); /* Firefox */ 
} 





值 translate(50px, 100px) 把 元 素 从 左 侧 移动 50 像素 ， 从 顶端 移动 100 像素 。 


rotate() 方法 
通过 rotate() 方法 ， 元 素 顺 时 针 旋转 给 定 的 角度 。 人 允许 负 值 ， 元 素 将 逆 时 针 旋 转 。 


实例 


div 

{ 

transform: rotate(30deg); 

-ms-transform: rotate(30deg); fe TESg 5 
-webkit-transform: rotate(30deg); /* Safari and Chrome */ 
-o-transform: rotate(30deg); /* Opera */ 
-moz-transform: rotate(30deg); /* Firefox */ 


j 


值 rotate(30deg) 把 元 素 顺 时 针 旋 转 30 RE, 


scale() 方法 


通过 scale() 方法 ， 元 素 的 尺寸 会 增加 或 减少 ， 根 据 给 定 的 宽度 (X 轴 ) 和 高 度 (Y 
i) BR: 


实例 
div 
{ 
transform: scale(2,4); 
-ms-transform: scale(2,4); VARTER 
-webkit-transform: scale(2,4); /* Safari 和 Chrome */ 
-o-transform: scale(2,4); /* Opera */ 
-moz-transform: scale(2,4); /* Firefox */ 
} 


值 scale(2,4) 把 宽度 转换 为 原始 尺寸 的 2 倍 ， 把 高 度 转换 为 原始 高 度 的 4 倍 。 


skew() 方法 


通过 skew() 方法 ， 元 素 翻 转 给 定 的 角度 ， 根 据 给 定 的 水 平 线 (X 轴 ) MEER (Y 
tn) 参数 : 


实例 


div 

{ 

transform: skew(30deg, 20deg); 

-ms-transform: skew(30deg, 20deg); TEROR 


-webkit-transform: skew(30deg, 20deg); /* Safari and Chrome */ 
-o-transform: skew(30deg, 20deg); /* Opera */ 

-moz-transform: skew(30deg,20deg); /* Firefox */ 

} 


值 skew(30deg,20deg) 围绕 X 轴 把 元 素 翻转 30 度 ， 围 绕 Y 轴 翻 转 20 度 。 


matrix() 方法 


matrix() 方法 把 所 有 2D 转换 方法 组 合 在 一 起 。 


matrix() 方法 需要 六 个 参数 ， 包 含 数学 函数 ， 人 允许 您 : 旋转 、 缩 放 、 移 动 以 及 倾斜 
元 素 。 


实例 


如 何 使 用 matrix 方法 将 div 元 素 旋转 30 度 : 


div 

{ 

transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); o TETOR: 


-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ 
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari al 
-o-transform:matrix(0.866,0.5, -0.5,0.866,0,0); /* Opera */ 
} 


Eo 


新 的 转换 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 





属性 描述 CSS 
transform 向 元 素 应 用 2D 或 3D 转换 。 3 
transform-origin 允许 你 改变 被 转换 元 素 的 位 置 。 3 


2D Transform 方法 


matrix(n,n,n,n,n,n) 定义 2D 转换 ， 使 用 六 个 值 的 矩阵 。 
translate(x,y) 定义 2D 转换 ， 治 着 X ALY 轴 移 动 元 素 。 
translateX(n) 定义 2D 转换 ， 治 着 X 轴 移 动 元 素 。 
translateY(n) 定义 2D 转换 ， 治 着 Y 轴 移 动 元 素 。 
scale(x,y) 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 和 高 度 。 
scaleX(n) 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 。 
scaleY(n) 定义 2D 缩放 转换 ， 改 变 元 素 的 高 度 。 
rotate(angle) 定义 2D 旋转 ， 在 参数 中 规定 角度 。 
skew(x-angle,y-angle) 定义 2D 倾斜 转换 ， 治 着 X AY $o 
skewX(angle) 定义 2D 倾斜 转换 ， 治 着 X 轴 。 


skewY(angle) 定义 2D 倾斜 转换 ， 治 着 Y $o 


CSS3 3D 转换 


3D 转换 
CSS3 人 允许 您 使 用 3D 转换 来 对 元 素 进行 格式 化 。 
在 本 章 中 ， 您 将 学 到 其 中 的 一 些 3D 转换 方法 : 


e rotateX() 
e rotateY() 


点 击 下 面 的 元 素 ， 来 查看 2D 转换 与 3D 转换 之 间 的 不 同 之 处 : 
2D 旋转 
3D 旋转 


它 如 何 工 作 ? 

转换 是 使 元 素 改 变形 状 、 尺 寸 和 位 置 的 一 种 效果 。 
您 可 以 使 用 2D 或 3D 转换 来 转换 您 的 元 素 。 
浏览 器 支持 


属性 浏览 器 支持 


transform 


Internet Explorer 10 和 Firefox 支持 3D 转换 。 
Chrome 和 Safari 需要 前 级 -webkit-。 


Opera 仍然 不 支持 3D 转换 ( 它 只 支持 D 转换 ) 。 
rotateX() 方法 
通过 rotateX() 方法 ， 元 素 围 绕 其 X 轴 以 给 定 的 度数 进行 旋转 。 


实例 


div 
1 
transform: rotateX(120deg); 


-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ 


-moz-transform: rotateX(120deg); /* Firefox */ 


} 


rotateY() 旋转 
通过 rotateY() 方法 ， 元 素 围 绕 其 Y 轴 以 给 定 的 度数 进行 旋转 。 


实例 


div 
{ 
transform: rotateY(130deg); 


-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */ 


-moz-transform: rotateY(130deg); /* Firefox */ 


j 


转换 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 


属性 描述 
transform 向 元 素 应 用 2D 或 3D 转换 。 
transform-origin 允许 你 改变 被 转换 元 素 的 位 置 
transform-style 规定 被 启 套 元 素 如 何在 3D 空间 中 显示 。 
perspective 规定 3D 元 素 的 透视 效果 。 
perspective-origin 规定 3D 元 素 的 底部 位 置 


backface-visibility 定义 元 素 在 不 面 对 屏 幕 时 是 否 可 见 。 


2D Transform 方法 


CSS 


C CO wo Ww WwW C 


EE 


matrix3d(n,n,n,n,n,n, 
n,n,n,n,n,n,n,n,n,n) 


translate3d(x,y,Z) 
translateX(x) 
translateY(y) 
translateZ(z) 


scale3d(x,y,Z) 


scaleX(x) 
scaleY(y) 


scaleZ(z) 


rotate3d(x,y,z,angle) 
rotateX(angle) 
rotateY (angle) 
rotateZ(angle) 
) 


perspective(n 


描述 
定义 3D 转换 ， 使 用 16 个 值 的 4x4 JB 
阵 。 
定义 3D 转化 。 
定义 3D 转化 ， 仅 使 用 用 于 X 轴 的 值 。 
定义 3D 转化 ， 仅 使 用 用 于 Y 轴 的 值 。 
定义 3D 转化 ， 仅 使 用 用 于 Z 轴 的 值 。 
定义 3D 缩放 转换 。 


定义 3D 缩放 转换 ， 通 过 给 定 一 个 X dh 
的 值 。 


定义 3D 缩放 转换 ， 通 过 给 定 一 个 Y 轴 
的 值 。 


定义 3D 缩放 转换 ， 通 过 给 定 一 个 Z ín 
的 值 。 


定义 3D 旋转 。 

定义 治 X 轴 的 3D 旋转 。 
定义 治 Y 轴 的 3D 旋转 。 
定义 治 Z 轴 的 3D 旋转 。 

定义 3D 转换 元 素 的 透视 视图 。 


CSS3 过 小 


CSS3 过 渡 


通过 CSS3， 我 们 可 以 在 不 使 用 Flash 动画 或 JavaScript 的 情况 下 ， 当 元 素 从 一 种 
样式 变换 为 A 种 样式 时 为 元 素 添加 效果 。 


请 把 鼠标 移动 到 下 面 的 元 素 上 : 
CSS3 过 渡 


浏览 器 支持 


属性 浏览 器 支持 
transition 
Internet Explorer 10、Firefox、Chrome 以 及 Opera 支持 transition 属性 。 
Safari 需要 前 级 -webkit-。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 ， 不 支持 transition 属性 。 
注释 : Chrome 25 以 及 更 早 的 版 本 ， 需 要 前 级 -webkit-。 


它 如 何 工 作 ? 
CSS3 过 渡 是 元 素 从 一 种 祥 式 逐渐 改变 为 另 一 种 的 效果 。 


要 实现 这 一 点 ， 必 须 规 定 两 项 内 容 : 


e 规定 您 系 希 望 把 效果 添加 到 哪个 CSS 属性 上 
e 规定 效果 的 时 长 


实例 
应 用 于 宽度 属性 的 过 渡 效 果 ， 时 长 为 2 秒 : 


div 


1 

transition: width 2s; 

-moz-transition: width 2s; /* Firefox 4 */ 
-webkit-transition: width 2s; /* Safari 和 Chrome */ 
-o-transition: width 2s; /* Opera */ 

} 


注释 : 如 果 时 长 未 规定 ， 则 不 会 有 过 渡 效 果 ， 因 为 默认 值 是 0。 


效果 开始 于 指定 的 CSS 属性 改变 值 时 。CSS 属性 改变 的 典型 时 间 是 鼠标 指针 位 于 
元 素 上 时 : 


实例 
SUES Sante BEF <div> TREN : 


div: hover 


{ 
width:300px; 
j 


注释 : 当 指 针 移 出 元 素 时 ， 它 会 逐渐 变 回 原来 的 样式 。 


多 项 改变 

如 需 向 多 个 样式 添加 过 渡 效 果 ， 请 添加 多 个 属性 ， 由 逗号 隔 开 : 

实例 

头 

向 宽度 、 高 度 和 转换 添加 过 渡 效 果 : 
div 
{ 
transition: width 2s, height 2s, transform 2s; 
-moz-transition: width 2s, height 2s, -moz-transform 2s; 
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; 


-o-transition: width 2s, height 2s,-o-transform 2s; 


j 


过 渡 属 性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 


属性 描述 


transition 


transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 。 
transition-duration 定义 过 渡 效 果 花 费 的 时 间 。 默 认 是 0。 
transition-timing- mins BEA E > Bh En 
function 规定 过 渡 效 果 的 时 间 曲线 。 默认 是 ease" o 
transition-delay 规定 过 渡 效 果 何 时 开始 。 默 认 是 0。 


下 面 的 两 个 例子 设置 所 有 过 渡 属 性 : 


实例 
在 一 个 例子 中 使 用 所 有 过 渡 属 性 : 


div 

{ 

transition-property: width; 
transition-duration: 1s; 
transition-timing-function: linear; 
transition-delay: 2s; 

/* Firefox 4 */ 
-moz-transition-property:width; 
-moz-transition-duration:1s; 
-moz-transition-timing-function: linear; 
-moz-transition-delay:2s; 

/* Safari 和 Chrome */ 
-webkit-transition-property:width; 
-webkit-transition-duration:1s; 
-webkit-transition-timing-function:linear; 
-webkit-transition-delay:2s; 

/* Opera */ 
-o-transition-property:width; 
-o-transition-duration:1s; 
-o-transition-timing-function: linear; 
-o-transition-delay:2s; 


} 


实例 
与 上 面 的 例子 相同 的 过 渡 效 果 ， 但 是 使 用 了 简写 的 transition 属性 : 


div 

{ 

transition: width 1s linear 2s; 

/* Firefox 4 */ 

-moz-transition:width 1s linear 2s; 

/* Safari and Chrome */ 
-webkit-transition:width 1s linear 2s; 
/* Opera */ 

-o-transition:width 1s linear 2s; 


} 


CSS3 È] 


CSS3 动 转 

通过 CSS3， 我 们 能 够 创建 动画 ， 这 可 以 在 许多 网 页 中 取代 动画 图 片 、Flash 动画 
以 及 JavaScript。 

CSS3 动力 


CSS3 @keyframes 规则 


如 需 在 CSS3 中 创建 动画 ， 您 需要 学 习 Gkeyframes 规则 。 


@keyframes 规则 用 于 创建 动画 。 在 @keyframes 中 规定 某 项 CSS 样式 ， 就 能 创 
建 由 当前 样式 逐 淅 改 为 新 样式 的 动画 效果 。 


浏览 器 支持 


属性 浏览 器 支持 
@keyframes 


animation 


Internet Explorer 10, Firefox 以 及 Opera 支持 @keyframes 规则 和 animation & 


l 
o 


Chrome 和 Safari 需要 前 级 -webkit-。 


注释 : Internet Explorer 9， 以 及 更 早 的 版 本 ， 不 支持 @keyframe 规则 或 
animation 属性 。 


实例 


@keyframes myfirst 

{ 

from {background: red;} 
to {background: yellow;} 
} 


@-moz-keyframes myfirst /* Firefox */ 


{ 

from {background: red;} 

to {background: yellow;} 

} 

@-webkit-keyframes myfirst /* Safari 和 Chrome */ 
{ 

from (background: red; } 

to (background: yellow; } 

} 

@-o-keyframes myfirst /* Opera */ 


d 

from (background: red;j 
to (background: yellow; } 
} 


CSS3 动 转 


当 您 在 @keyframes 中 创建 动画 时 ， 请 把 它 捆 绑 到 某 个 选择 器 ， 否 则 不 会 产生 动画 
效果 。 


至 少 以 下 两 项 CSS3 动画 属性 ， 即 可 将 动画 绑 定 到 选择 器 : 
动 


实例 


把 "myfirst" 动画 捆绑 到 div 元 素 ， 时 长 :5 秒 : 


div 

{ 

animation: myfirst 5s; 

-moz-animation: myfirst 5s; /* Firefox */ 
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */ 
-o-animation: myfirst 5s; /* Opera */ 


} 


注释 : 您 必须 定义 动画 的 名 称 和 时 长 。 如 果 忽 略 时 长 ， 则 动画 不 会 允许 ， 因 为 默认 
值 是 0。 


什么 是 CSS3 中 的 动画 ? 
动画 是 使 元 素 从 一 种 样式 逐渐 变化 为 另 一 种 样式 的 效果 。 


您 可 以 改变 任意 多 的 样式 任意 多 的 次 数 。 


请 用 百分比 来 规定 变化 发 生 的 时 间 ， 或 用 关键 词 "from" 和 "to"， 等 同 于 0% 和 
100%. 


0% 是 动画 的 开始 ，100% 是 动画 的 完成 。 
为 了 得 到 最 佳 的 浏览 器 支持 ， 您 应 该 始终 定义 0% 和 100% 选择 器 。 
实例 


当 动 画 为 25% 及 50% 时 改变 背景 色 ， 然 后 当 动 画 100% 完成 时 再 次 改变 : 


@keyframes myfirst 

{ 

0% (background: red;} 
25% (background: yellow; } 
50% (background: blue; } 
100% (background: green; } 
} 


@-moz-keyframes myfirst /* Firefox */ 
{ 

0% (background: red;} 

25% (background: yellow;) 

50% (background: blue;j 

100% (background: green; } 

j 


Q-webkit-keyframes myfirst /* Safari 和 Chrome */ 
{ 

0% (background: red; } 

25% (background: yellow; } 

50% (background: blue; } 

100% (background: green; } 

j 


Q-o-keyframes myfirst /* Opera */ 
{ 

0% (background: red; } 

25% (background: yellow; } 

50% (background: blue; } 

100% (background: green; } 

} 


实例 


改变 背景 色 和 位 置 : 


@keyframes myfirst 


{ 

0% 
25% 
50% 
75% 
100% 
} 


{background: 
{background: 
{background: 
{background: 
{background: 


red; left:Opx; top:0px;} 
yellow; left:200px; top:0px;} 
blue; left:200px; top:200px; } 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


@-moz-keyframes myfirst /* Firefox */ 


{ 

0% 
25% 
50% 
75% 
100% 
j 


(background: 
(background: 
(background: 
(background: 
(background: 


red; left:Opx; top:0px;) 
yellow; left:200px; top:0px;) 
blue; left:200px; top:200px; } 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


Q-webkit-keyframes myfirst /* Safari 和 Chrome */ 


d 

0% 
25% 
50% 
75% 
100% 
} 


{background: 
{background: 
{background: 
{background: 
(background: 


red; left:Opx; top:Opx;) 
yellow; left:200px; top:0px;) 
blue; left:200px; top:200px;) 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


Q-o-keyframes myfirst /* Opera */ 


{ 

0% 
25% 
50% 
75% 
100% 
} 


CSS3 动画 属性 


{background: 
{background: 
{background: 
{background: 
{background: 


red; left:Opx; top:0px;} 
yellow; left:200px; top:0px;) 
blue; left:200px; top:200px;) 
green; left:Opx; top:200px; } 
red; left:Opx; top:0px;) 


下 面 的 表格 列 出 了 @keyframes 规则 和 所 有 动画 属性 : 


VA/ OC AR AARI BAL h n Aa E 
IM ~ ONAOC | UTR ZEN 不 一 -一 Se 
IVIOUI ioo! BU Vm t= AR 


属性 描述 CSS 
@keyframes 规定 动画 3 
T 所 有 动画 属性 的 简写 属性 ， 除 了 animation- 3 

play-state 属性 。 
animation-name 规定 @keyframes 动画 的 名 称 。 3 
NE ‘= IS 
animation-duration Fin 元 成 一 个 周期 所 花费 的 秒 或 圣 秒 。 上 默认“ g 
animation-timing- "T bs > pp En 
a 规定 动画 的 速度 曲线 。 默 认 是 "ease", 3 
animation-delay 规定 动画 何 时 开始 。 黑 认 是 0。 3 
animalon-teration- 规定 动画 被 播放 的 次 数 。 默 认 是 1。 3 
CE 二 AS — FEE S b.) E 
人 规定 动画 是 否 在 下 周期 逆向 地 播放 。 默 认 是 3 
normal", 

animation-play- 规定 动画 是 否 正 在 运行 或 暂停。 默认 是 3 
state "running". 
animation-fill-mode ”规定 对 象 动画 时 间 之 外 的 状态 。 3 

下 面 的 两 个 例子 设置 了 所 有 动画 属性 : 

实例 

头 


运行 名 为 myfirst 的 动画 ， 其 中 设置 了 所 有 动画 属性 : 


div 

{ 

animation-name: myfirst; 
animation-duration: 5s; 
animation-timing-function: linear; 
animation-delay: 2s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-play-state: running; 
Z^cREYCOfOXS 07 

-moz-animation-name: myfirst; 
-moz-animation-duration: 5s; 
-moz-animation-timing-function: linear; 
-moz-animation-delay: 2s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-direction: alternate; 
-moz-animation-play-state: running; 

/* Safari 和 Chrome: */ 
-webkit-animation-name: myfirst; 
-webkit-animation-duration: 5s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-play-state: running; 
/* Opera: */ 

-O-animation-name: myfirst; 
-O-animation-duration: 5s; 
-O-animation-timing-function: linear; 
-O-animation-delay: 2s; 
-O-animation-iteration-count: infinite; 
-O-animation-direction: alternate; 
-O-animation-play-state: running; 


} 


实例 
与 上 面 的 动画 相同 ， 但 是 使 用 了 简写 的 动画 animation 属性 : 


div 

{ 

animation: myfirst 5s linear 2s infinite alternate; 

/* Firefox: */ 

-moz-animation: myfirst 5s linear 2s infinite alternate; 

/* Safari 和 Chrome: */ 

-webkit-animation: myfirst 5s linear 2s infinite alternate; 
/* Opera: */ 

-o-animation: myfirst 5s linear 2s infinite alternate; 


} 
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CSS3 多 列 


CSS3 多 列 


通过 CSS3， 您 能 够 创建 多 个 列 来 对 文本 进行 布局 - 就 像 报纸 那样 ! 
在 本 章 中 ， 您 将 学 习 如 下 多 列 属性 : 


e column-count 
e column-gap 
e column-rule 


浏览 器 文 持 


属性 浏览 器 支持 
column-count 
column-gap 


column-rule 
Internet Explorer 10 和 Opera 支持 多 列 属性 。 
Firefox 需要 前 级 -moz-。 
Chrome 和 Safari 需要 前 级 -webkit-。 


注释 : Internet Explorer 9 以 及 更 时 的 版 本 不 支持 多 列 属性 。 


CSS3 创建 多 列 
column-count 属性 规定 元 素 应 该 被 分 隔 的 列 数 : 


实例 
把 div 元 素 中 的 文本 分 隔 为 三 列 : 


div 

{ 

-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari 和 Chrome */ 
column-count:3; 


} 


CSS3 规定 列 之 间 的 间隔 
column-gap 属性 规定 列 之 间 的 间隔 : 


实例 


规定 列 之 间 40 像素 的 间隔 : 


div 

{ 

-moz-column-gap:40px; /* Firefox */ 
-webkit-column-gap:40px; /* Safari 和 Chrome */ 
column-gap:40px; 

} 


CSS3 FIRM 
column-rule 属性 设置 列 之 间 的 宽度 、 样 式 和 颜色 规则 。 


实例 


规定 列 之 间 的 宽度 、 样 式 和 颜色 规则 : 


div 

{ 

-moz-column-rule:3px outset #ff0000; /* Firefox */ 
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ 
column-rule:3px outset #ff0000; 

} 


症 二 了 ss 到 


新 的 多 列 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 
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属性 
column-count 
column-fill 
column-gap 
column-rule 


column-rule- 
color 


column-rule- 
style 


column-rule- 
width 


column-span 


column-width 


columns 


CSS3 多 列 


A 
A 





x 
描述 

规定 元 素 应 该 被 分 隔 的 列 数 。 

规定 如 何 填充 列 。 


规定 列 之 间 的 间隔 。 
设置 所 有 column-rule-* 属性 的 简写 属性 。 


规定 列 之 间 规则 的 颜色 。 


规定 列 之 间 规则 的 样式 。 


规定 列 之 间 规 则 的 宽度 。 


规定 元 素 应 该 横 跨 的 列 数 。 
规定 列 的 宽度 。 


规定 设置 column-width 和 column-count 的 简写 属 


性 。 


O 


CSS3 H Pm 


CSS3 Hr FH 


在 CSS3 中 ， 新 的 用 户 界面 特性 包括 重 设 元 素 尺 寸 、 盒 尺寸 以 及 轮 请 等 。 
在 本 章 中 ， 您 将 学 到 以 下 用 户 界 面 属 性 : 
e resize 


e box-sizing 
e outline-offset 


浏览 器 文 持 


属性 浏览 器 支持 
resize 
box-sizing 
outline-offset 
Firefox、Chrome 以 及 Safari 支持 resize 属性 。 


Internet Explorer、Chrome、Safari 以 及 Opera 支持 box-sizing 属性 。Firefox 需 
要 前 级 -moz-。 


所 有 主流 浏览 器 都 支持 outline-offset 属性 ， 除 了 Internet Explorer。 
CSS3 Resizing 


在 CSS3，resize 属性 规定 是 否 可 由 用 户 调整 元 素 尺 寸 。 

这 个 div 元 素 可 由 用 户 调整 尺寸 (在 Firefox 4+、Chrome 以 及 Safari 中 ) 。 
CSS 代码 如 下 : 

实例 

规定 div 元 素 可 由 用 户 调整 大 小 : 


div 


resize:both; 
overflow: auto; 


} 


CSS3 Box Sizing 


box-sizing 属性 允许 您 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 


实例 


规定 两 个 并 排 的 带 边框 方 框 : 


div 

{ 

box-sizing: border -box; 

-moz -box-sizing: border -box; /* Firefox */ 
-webkit-box-sizing:border-box; /* Safari */ 


width:50%; 
float:left; 


CSS3 Outline Offset 


outline-offset RTE x146 Bp st 119 2, HEEE E 2 HE 3h 2 BAI E 2 80 £6 ER 
轮廓 与 边框 有 两 点 不 同 : 


。 轮廓 不 占用 空间 
。 轮廓 可 能 是 非 矩 形 


这 个 div 在 边框 之 外 15 像素 处 有 一 个 轮廓 。 
CSS 代码 如 下 : 
实例 


规定 边框 边缘 之 外 15 像素 处 的 轮廓 : 


div 


border:2px solid black; 
outline:2px solid red; 
outline-offset:15px; 


新 的 用 户 界面 属性 
下 面 的 表格 列 出 了 所 有 的 转换 属性 : 


属性 
appearance 


box-sizing 
icon 


nav-down 
nav-index 
nav-left 
nav-right 
nav-up 


outline- 
offset 


resize 


描述 
允许 您 将 元 素 设置 为 标准 用 户 界 面 元 素 的 外 观 
允许 您 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 
2 TBESESE UII eet E 
规定 在 使 用 arrow-down 导航 键 时 向 何 处 导航 。 
设置 元 素 的 tab 键 控 制 次 序 。 
规定 在 使 用 arrow-left 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-right 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-up 导航 键 时 向 何 处 导航 。 


对 轮廓 进行 偏 移 ， 并 在 超出 边框 边缘 的 位 置 绘制 轮廓 。 


规定 是 否 可 由 用 户 对 元 素 的 尺寸 进行 调整 。 


CSS 
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CSS3 动画 属性 (Animation) 


属性 
@keyframes 


animation 


animation-name 
animation-duration 


animation-timing- 
function 


animation-delay 


animation-iteration- 
count 


animation-direction 


animation-play- 
state 


animation-fill-mode 


Ti 
规定 动画 


所 有 动画 属性 的 简写 属性 ， 除 了 animation- 
play-state 属性 。 


规定 @keyframes 动画 的 名 称 。 
规定 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 。 


规定 动画 的 速度 曲线 。 


是 否 在 下 一 周期 逆向 地 播放 。 
规定 动画 是 否 正 在 运行 或 暂停 。 


规定 对 象 动画 时 间 之 外 的 状态 。 


CSS 


CSS3 @keyframes 规则 


实例 
使 div 元 素 匀速 向 下 移动 : 


@keyframes mymove 


{ 

from {top:0px; } 

to {top:200px; } 

j 

Q-moz-keyframes mymove /* Firefox */ 
{ 

from {top:0px; } 

to {top:200px; } 


@-webkit-keyframes mymove /* Safari 和 Chrome */ 


{ 

from {top:0px; } 

to {top:200px;} 

@-o-keyframes mymove /* Opera */ 
{ 

from {top:0px; } 


to {top:200px; } 
j 


页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


目前 浏览 器 都 不 支持 @keyframes 规则 。 

Firefox 支持 替代 的 @-moz-keyframes 规则 。 

Opera 支持 替代 的 @-o-keyframes 规则 。 

Safari 和 Chrome 支持 替代 的 @-webkit-keyframes 规则 。 


定义 和 用 法 

通过 @keyframes 规则 ， 您 能 够 创建 动画 。 

创建 动画 的 原理 是 ， 将 一 套 CSS 样式 逐渐 变化 为 另 一 套 样 式 。 
在 动画 过 程 中 ， 您 能 够 多 次 改变 这 套 CSS 样式 。 


以 百分比 来 规定 改变 发 生 的 时 间 ， 或 者 通过 关键 词 "from" 和 "to", AF 0% 和 
100%, 


096 是 动画 的 开始 时 间 ，100% 动画 的 结束 时 间 。 
为 了 获得 最 佳 的 浏览 器 支持 ， 您 应 该 始终 定义 0% 和 100% 选择 器 。 
注释 : 请 使 用 动画 属性 来 控制 动画 的 外 观 ， 同 时 将 动画 与 选择 器 绑 定 。 


语法 


@keyframes _animationname_ {_keyframes-selector_ {_css-styles_;}} 


值 描述 
animationname VASE. EL 动画 的 名 称 。 


keyframes-selector 
必需 。 动 男 时 长 的 百分比 。 
合法 的 值 : 

e 0-100% 

e from (与 0% 相同 ) 

e to (与 100% 相同 ) 


| | css-styles | 必需 。 一 个 或 多 个 合法 的 CSS 样式 属性 。 | 


亲自 试 一 实例 
实例 1 


在 一 个 动画 中 添加 多 个 keyframe 选择 器 : 


@keyframes mymove 
{ 

0% {top:Opx;} 
25% (top:200px; } 
50% {top:100px; } 
75% (top:200px;) 
100% {top:Opx;} 


@-moz-keyframes mymove /* Firefox */ 
{ 

0% {top:Opx;} 

25% (top:200px; } 

50% {top:100px; } 

75% {top:200px;} 

100% {top:Opx; } 

j 


Q-webkit-keyframes mymove /* Safari 和 Chrome */ 
{ 

0% {top:Opx;} 

25% (top:200px; } 

50% {top:100px; } 

75% {top:200px;} 

100% {top:Opx; } 

j 


Q-o-keyframes mymove /* Opera */ 
{ 

0% {top:Opx;} 

25% (top:200px; } 

50% {top:100px; } 

75% {top:200px;} 

100% {top:Opx; } 


实例 2 
在 一 个 动画 中 改变 多 个 CSS 样式 : 


@keyframes mymove 


{ 

0% {top:0px; background:red; width:100px; } 
100% {top:200px; background: yellow; width: 300px; } 
j 


Q-moz-keyframes mymove /* Firefox */ 


{ 

0% {top:0px; background:red; width:100px; } 

100% {top:200px; background: yellow; width: 300px; } 
} 


@-webkit-keyframes mymove /* Safari 和 Chrome */ 


{ 

0% (top:Opx; background:red; width:100px; } 

100% {top:200px; background:yellow; width: 300px; } 
j 


Q-o-keyframes mymove /* Opera */ 

{ 

0% (top:Opx; background:red; width:100px; } 
100% {top:200px; background:yellow; width: 300px; } 
j 


实例 3 


带 有 多 个 CSS HANS keyframe 选择 器 : 


@keyframes mymove 

Y 

0% {top:Opx; left:Opx; background: red; } 

25% {top:Opx; left:100px; background:blue; } 

50% {top:100px; left:100px; background: yellow; } 
75% {top:100px; left:Opx; background: green; } 
100% (top:Opx; left:0px; background: red; } 

} 


@-moz-keyframes mymove /* Firefox */ 

{ 

0% {top:Opx; left:Opx; background: red; } 

25% (top:Opx; left:100px; background:blue; } 

50% {top:100px; left:100px; background: yellow; } 
75% {top:100px; left:Opx; background: green; } 
100% (top:Opx; left:Opx; background: red; } 

} 


@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 

0% {top:Opx; left:Opx; background: red; } 

25% {top:Opx; left:100px; background: blue; } 

50% {top:100px; left:100px; background: yellow; } 
75% {top:100px; left:0Opx; background: green; } 
100% (top:Opx; left:Opx; background: red; } 

} 


@-o-keyframes mymove /* Opera */ 

1 

0% (top:Opx; left:Opx; background: red; } 

25% (top:Opx; left:100px; background: blue; } 

50% {top:100px; left:100px; background: yellow; } 
75% {top:100px; left:Opx; background: green; } 
100% (top:Opx; left:Opx; background: red; } 

} 
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CSS3 animation 属性 


实例 
使 用 简写 属性 ， 将 动画 与 div 元 素 绑 定 : 


div 

{ 

animation:mymove 5s infinite; 

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ 


} 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10、Firefox 以 及 Opera 支持 animation 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation 属性 。 


定义 和 用 法 
animation 属性 是 一 个 简写 属性 ， 用 于 设置 六 个 动画 属性 : 


animation-name 
animation-duration 
animation-timing-function 
animation-delay 
animation-iteration-count 
animation-direction 


注释 : 请 始终 规定 animation-duration 属性 ， 否 则 时 长 为 0， 就 不 会 播放 动画 


JavaScript 语法 : 


none 0 ease 0 1 normal 


object.style.animation="mymove 5s infinite" 


animation: name duration  timing-function _delay_ _iteration-« 


El 0 ER 


值 
animation-name 
animation-duration 
animation-timing-function 
animation-delay 
animation-iteration-count 


animation-direction 
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描述 


2s 


JE 
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25 
Pt 


动画 开始 之 前 的 延迟 。 
应 该 


ar 


CSS3 animation-name 属性 


实例 
为 @keyframes 动画 规定 一 个 名 称 : 


div 

{ 

animation:mymove 5s infinite; 

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-name 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-name 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-name 属性 。 


mh 、 : 
animation-name 属性 为 @keyframes 动画 规定 名 称 。 
注释 : 请 始终 规定 animation-duration 属性 ， 否 则 时 长 为 0， 就 不 会 播放 动画 了 。 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.animationName="mymove 


语法 


animation-name:  keyframename |none; 


值 描述 
keyframename 规定 需要 绑 定 到 选择 器 的 keyframe 的 名 称 。 
none 规定 无 动画 效果 (可 用 于 覆盖 来 自 级 联 的 动画 ) 。 
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CSS3 animation-duration 属性 


实例 
为 @keyframes 动画 规定 一 个 名 称 : 


div 

{ 

animation-duration:2s; 

-webkit-animation-duration:2s; /* Safari 和 Chrome */ 


} 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10、Firefox 以 及 Opera 支持 animation-duration 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-duration 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-duration 属性 。 


定义 和 用 法 
animation-duration 属性 定义 动画 完成 一 个 周期 所 需要 的 时 间 ， 以 秒 或 毫秒 计 。 
默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationDuration="3s" 


语法 


animation-duration: _time_; 


值 描述 
time ”规定 完成 动画 所 花费 的 时 间 。 默 认 值 是 0， 意 味 着 没有 动画 效果 。 
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CSS3 animation-timing-function 属性 


实例 

从 开头 到 结尾 以 相同 的 速度 来 播放 动画 : 
div 
{ 
animation-timing-function:2s; 


-webkit-animation-timing-function:2s; /* Safari 和 Chrome */ 


} 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10、Firefox 以 及 Opera 支持 animation-timing-function 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-timing-function 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-timing-function 属性 。 


定义 和 用 法 
animation-timing-function 规定 动画 的 速度 曲线 。 
速度 曲线 定义 动画 从 一 套 CSS 样式 变 为 另 一 套 所 用 的 时 间 。 
速度 曲线 用 于 使 变化 更 为 平滑 。 
默认 值 : ease 
继承 性 : no 


JavaScript 语法 : object.style.animationTimingFunction="linear" 


` * 
语法 
animation-timing-function: _value_; 


animation-timing-function 使 用 名 为 三 次 贝 塞 尔 (Cubic Bezier) WHANWAFRR, 
来 生成 速度 曲线 。 您 能 够 在 该 酚 数 中 使 用 自己 的 值 ， 也 可 以 预定 义 的 值 : 


fä 描述 ^ 

TA, 

linear 动画 从 头 到 尾 的 速度 是 相同 的 。 
ease 默认 。 动 画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 n 
ease-in 动画 以 低速 开始 。 T 
ease-out 动画 以 低速 结束 。 ^ 
ease-in-out 动画 以 低速 开始 和 结束 。 


cubic- 在 cubic-bezier 函数 中 自己 的 值 。 可 能 的 值 是 从 0 到 
bezier(n,n,n,n) 1 的 数值 。 


提示 : 请 试 着 在 下 面 的 “亲自 试 一 斌 ?功能 中 使 用 不 同 的 值 。 
亲 目 试 一 试 - 实例 


实例 1 


为 了 更 好 地 理解 不 同 的 定时 画 数值 ， 这 里 提供 了 设置 五 个 不 同 值 的 五 个 不 同 的 div 
元 素 : 


/* W3C 和 Opera: */ 


#divi {animation-timing-function: 
#div2 {animation-timing-function: 
#div3 {animation-timing-function: 
#div4 {animation-timing-function: 
#div5 {animation-timing-function: 


/* Firefox: */ 


#divi {-moz-animation-timing-function: 
#div2 {-moz-animation-timing-function: 
#div3 {-moz-animation-timing-function: 
#div4 {-moz-animation-timing-function: 
#div5 {-moz-animation-timing-function: 


/* Safari 和 Chrome: */ 


#divi {-webkit-animation-timing-function: 
#div2 {-webkit-animation-timing-function: 
#div3 {-webkit-animation-timing-function: 
#div4 {-webkit-animation-timing-function: 
#div5 {-webkit-animation-timing-function: 


实例 2 


linear; } 
ease; } 
ease-in;) 
ease-out;) 
ease-in-out;) 


linear;) 
ease;) 
ease-in;) 
ease-out;) 
ease-in-out; } 


linear; } 
ease; } 
ease-in;) 
ease-out;) 
ease-in-out;) 


与 上 例 相 同 ， 但 是 通过 cubic-bezier HARE 313 EE ABZ : 


/* W3C 和 Opera: */ 


#divi {animation-timing-function: 
#div2 {animation-timing-function: 
#div3 {animation-timing-function: 
#div4 {animation-timing-function: 
#div5 {animation-timing-function: 


/* Firefox: */ 


#divi {-moz-animation-timing-function: 


cubic-bezier(0,0,1,1);) 
cubic-bezier(0.25,0.1,0.25,1);) 
cubic-bezier(0.42,0,1,1);) 
cubic-bezier(0,0,0.58,1);) 
cubic-bezier(0.42,0,0.58,1);) 


cubic-bezier(0,0,1,1);} 


#div2 
#div3 
#div4 
#div5 


{-moz-animation-timing-function: 
{-moz-animation-timing-function: 
{-moz-animation-timing-function: 
{-moz-animation-timing-function: 


/* Safari 和 Chrome: */ 


#divi {-webkit-animation-timing-function: 
{-webkit-animation-timing-function: 
{-webkit-animation-timing-function: 
{-webkit-animation-timing-function: 
{-webkit-animation-timing-function: 


#div2 
#div3 
#div4 
#div5 


E) 
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cubic-bezier(0.25,0.1,0.25,: 
cubic-bezier(0.42,0,1,1);) 
cubic-bezier(0,0,0.58,1);) 
cubic-bezier(0.42,0,0.58,1), 


cubic-bezier(0,0,1,1);) 

cubic-bezier(0.25,0.1,0.: 
cubic-bezier(0.42,0,1,1), 
cubic-bezier(0,0,0.58,1), 
cubic-bezier(0.42,0,0.58, 





CSS3 animation-delay 属性 


实例 
等 待 两 秒 ， 然 后 开始 动画 : 


div 

{ 

animation-delay:2s; 

-webkit-animation-delay:2s; /* Safari 和 Chrome */ 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-delay 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-delay 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-delay 属性 。 


定义 和 用 法 
animation-delay 属性 定义 动画 何 时 开始 。 
animation-delay LAM MEP it. 
提示 : 允许 负 值 ，-2s 使 动画 马上 开始 ， 但 跳 过 2 秒 进 入 动画 。 
默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.animationDelay="2s" 


语法 
animation-delay: _time_; 


值 fih 试 


可 选 。 定 义 动画 开始 前 等 待 的 时 间 ， 以 秒 或 毫秒 计 。 默 认 值 是 测 


animation-delay: -2s /* W3C 和 Opera */ 
-moz-animation-delay: -2s /* Firefox */ 
-webkit-animation-delay: -2s /* Safari 和 Chrome */ 
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CSS3 animation-iteration-count 属性 


实例 

播放 动画 三 次 : 
div 
{ 


animation-iteration-count:3; 
-webkit-animation-iteration-count:3; /* Safari 和 Chrome */ 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-iteration-count 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-iteration-count 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-iteration-count 属性 。 


ris i 
animation-iteration-count 属性 定义 动画 的 播放 次 数 。 
默认 值 : 1 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationlterationCount=3 


语法 


animation-iteration-count: _n_|infinite; 


值 描述 测试 
n 定义 动画 播放 次 数 的 数值 。 测试 
infinite 规定 动画 应 该 无 限 次 播放 。 测试 
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CSS3 animation-direction 属性 


实例 
暂停 动画 : 


div 

{ 

animation-direction:alternate; 
-webkit-animation-direction:alternate; /* Safari 和 Chrome */ 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-direction 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-direction 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-direction 属性 。 


rm. N 
animation-direction 属性 定义 是 否 应 该 轮流 反 向 播放 动画 。 


如 果 animation-direction 值 是 "alternate"， 则 动画 会 在 奇数 次 数 (1、3、5 SS) 
正常 播放 ， 而 在 偶数 次 数 (2、4、6 等 等 ) 向 后 播放 。 


注释 : 如 果 把 动画 设置 为 只 播放 一 次 ， 则 该 属性 没有 效果 。 
默认 值 : normal 
继承 性 : no 


JavaScript 语法 : object.style.animationDirection-"alternate" 


语法 


animation-direction: normal|alternate; 


值 描述 
normal 默认 值 。 动 男 应 该 正常 播放 。 
alternate 动画 应 该 轮流 反 向 播放 。 
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测试 
测试 


测试 


CSS3 animation-play-state 属性 


实例 
暂停 动画 : 
div 
{ 


animation-play-state: paused; 
-webkit-animation-play-state:paused; /* Safari 和 Chrome */ 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-play-state 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-play-state 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-play-state 属性 。 


定义 和 用 法 
animation-play-state 属性 规定 动画 正在 运行 还 是 暂停 。 
注释 : 您 可 以 在 JavaScript 中 使 用 该 属性 ， 这 样 就 能 在 播放 过 程 中 暂停 动画 。 
默认 值 : running 
继承 性 : no 


JavaScript 语法 : object.style.animationPlayState="paused" 


语法 


animation-play-state: paused|running; 


值 描述 
paused 规 


running 规 
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测试 
测试 


测试 


CSS3 animation-fill-mode 属性 


实例 
为 h1 元 素 规定 填充 模式 : 


hi 
i 


animation-fill-mode: forwards; 


j 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-fill-mode 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-fill-mode 属性 。 
注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-fill-mode 属性 。 


定义 和 用 法 
animation-fill-mode 属性 规定 动画 在 播放 之 前 或 之 后 ， 其 动画 效果 是 否 可 见 。 
注释 : 其 属性 值 是 由 过 号 分 隔 的 一 个 或 多 个 填充 模式 关键 词 。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationFillMode=none 


语法 


animation-fill-mode : none | forwards | backwards | both; 


值 描述 
none 不 改变 默认 行为 。 
Faas ea 保持 最 后 一 个 属性 值 〈 在 最 后 一 个 关键 帧 中 定 


ak 


在 animation-delay 所 指定 的 一 段 时 间 内 ， 在 动画 显示 之 前 ， 应 


backwards ”用 开始 属性 值 (在 第 一 个 关键 帧 中 定义 ) 。 
both 向 前 和 向 后 填充 模式 都 被 应 用。 
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属性 
background 


background- 
attachment 


background-color 
background-image 
background-position 
background-repeat 
background-clip 
background-origin 


background-size 


I= AN AL -一 全 


(Background) 


描述 
在 一 个 声明 中 设置 所 有 的 背景 属性 。 


设置 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 
分 滚动 。 


元 素 的 背景 颜色 。 

元 素 的 背景 图 像 。 
背景 图 像 的 开始 位 置 。 
是 否 及 如 何 重复 背景 图 像 。 
背景 的 绘制 区 域 。 
背景 图 片 的 定位 区 域 。 
背景 图 片 的 尺寸 。 


St 


CSS 


C Wo WwW 


CSS background 属性 


实例 
如 何在 一 个 声明 中 设置 所 有 背景 属性 : 


body 


{ 
background: #00FF00 url(bgimage.gif) no-repeat fixed top; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background 属性 。 
注释 : IE8 以 及 更 里 的 浏览 器 不 支持 一 个 元 素 多 个 背景 图 像 。 


注释 : IE7 以 及 更 早 的 浏览 器 不 支持 "inherit"。1IE8 需要 IDOCTYPE, IE9 支持 
"inherit". 


定义 和 用 法 
background 简写 属性 在 一 个 声明 中 设置 所 有 的 背景 属性 。 
可 以 设置 如 下 属性 : 


background-color 
background-position 
background-size 
background-repeat 
background-origin 
background-clip 
background-attachment 
background-image 


如 果 不 设置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 background:#f0000 
url('smiley.gif); 也 是 允许 的 。 


通常 建议 使 用 这 个 属性 ， 而 不 是 分 别 使 用 单个 属性 ， 因 为 这 个 属性 在 较 老 的 浏览 器 
中 能 够 得 到 更 好 的 支持 ， 而 且 需 要 键入 的 字母 也 更 少 。 


JavaScript 语法 : 


可 能 的 值 


background-color 
background-position 
background-size 
background-repeat 
background-origin 


background-clip 


fü 


background- 
attachment 


background-image 


inherit 


亲 目 试 一 


所 有 


背景 属性 在 一 个 


not specified 


no 


CSS1 + CSS3 


object.style.background="white url(paper.gif) repeat-y" 


Ha 
规定 要 使 用 的 背景 颜色 。 
规定 背景 图 像 的 位 置 
规 
规定 如 何 重 复 背 景 图 像 。 
规定 背景 图 片 的 定位 区 域 。 
规定 背景 的 绘制 区 域 。 
规定 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 


iE 


规定 要 使 用 的 背景 图 像 。 


规定 应 该 从 父 元 素 继承 background 属性 的 设 
iB. 


实例 
声明 之 中 


本 例 演示 如 何 使 用 简写 属性 来 将 所 有 背景 属性 设置 在 一 个 声明 之 中 。 


CSS 


«html» 

«head» 

«style type="text/css"> 
body 


background: #ff0000 url(/i/eg bg 03.gif) no-repeat fixed center; 


} 
</style> 
</head> 


<body> 

<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
</body> 


</html> 
BC 
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HTML DOM 参考 手册 : background 属性 


CSS background-attachment 属性 


实例 
如 何 设置 固定 的 背景 图 像 : 


body 
{ 


background-image: url(bgimage.gif); 
background-attachment: fixed; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-attachment 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 


background-attachment 属性 设置 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚 
动 。 


默认 值 : scroll 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.backgroundAttachment="fixed" 


可 能 的 值 


值 描述 
scroll 默认 值 。 背 景 图 像 会 随 着 页 面 其 余部 分 的 滚动 而 移动 。 
fixed 当 页 面 的 其 余部 分 滚动 时 ， 背 景 图 像 不 会 移动 。 
inherit ”规定 应 该 从 父 元 素 继 承 background-attachment 属性 的 设置 。 


TIY 实例 


如 何 设置 固定 的 背景 图 像 
本 例 演示 如 何 设置 固定 的 背景 图 像 。 图 像 不 会 随 着 页 面 的 其 他 部 分 滚动 。 


«html» 

«head» 

«style type="text/css"> 
body 


{ 
background-image:url(/i/eg bg 02.gif); 
background-repeat:no-repeat; 
background-attachment : fixed 


} 
</style> 
</head> 


<body> 

<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 背景 
HTML DOM 参考 手册 : backgroundAttachment 属性 


CSS background-color 属性 


实例 


body 
{ 
background-color:yellow; 
h1 


background-color :#00ff00; 


background-color:rgb(255,0, 255); 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-color 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


re. : 
background-color 属性 设置 元 素 的 背景 颜色 。 


TURE RAE I] 


background-color 属性 为 元 素 设 置 一 种 纯色 。 这 种 颜色 会 填充 元 素 的 内 容 、 内 边 距 
和 边框 区 域 ， 扩 展 到 元 素 边 框 的 外 边界 (但 不 包括 外 边 距 ) 。 如 果 边 框 有 透明 部 分 
(如 虚线 边框) ， 会 透 过 这 些 透明 部 分 显示 出 背景 色 。 


transparent 值 


尽管 在 大 多 数 情况 下 ， 没 有 必要 使 用 transparent。 不 过 如 果 您 不 希望 某 元 素 拥有 背 
景色 ， 同 时 又 不 希望 用 户 对 浏览 器 的 颜色 设置 影响 到 您 的 设计 ， 那 么 设置 
transparent 值 还 是 有 必要 的 。 


JavaScript 语法 : 


可 能 的 值 


值 
color_name 
hex_number 
rgb_number 
transparent 


inherit 


TIY 实例 


Ab 
设置 背景 颜色 


transparent 


object.style.backgroundColor="#00F F00" 


描述 
规定 颜色 值 为 颜色 名 称 的 背景 颜色 (比如 red) 。 
规定 颜色 值 为 十 六 进 制 值 的 背景 颜色 〈 比 如 #0000) 。 


见 定 颜 色 值 为 rgb 代码 的 背景 颜色 (比如 rgb(255,0,0)) 。 
默认 。 背 景 闫 色 为 透明 。 
规定 应 该 从 父 元 素 继承 background-color 属性 的 设置 。 


本 例 演示 如 何 为 元 素 设置 背景 闫 色 。 


<html> 
<head> 


<style type="text/css"> 


body {background-color: yellow} 

hi {background-color: #00ff00} 

h2 {background-color: transparent} 

p (background-color: rgb(250,0,255)} 


p.no2 {background-color: gray; padding: 20px; } 
</style> 

</head> 

<body> 

<h1> 这 是 标题 1</h1> 

<h2> 这 是 标题 2</h2> 

<p> 这 是 段落 </p> 

<p class="no2"> 这 个 段落 设置 了 内 边 距 。</p> 


</body> 
</html> 


设置 文本 的 背景 颜色 
本 例 颜色 如 何 设置 部 分 文本 的 背景 颜色 。 


«html» 

«head» 

«style type="text/css"> 
span.highlight 


background-color:yellow 


} 
</style> 
</head> 


<body> 

<p> 

<span class="highlight"> 这 是 文本 。</span> 这 是 文本 。 这 是 文本 。 这 是 文本 。 
</p> 

</body> 

</html> 


‘| 


相关 页 面 
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CSS 教程 : CSS 背景 
HTML DOM 参考 手册 : backgroundColor 属性 


CSS background-color 属性 906 


CSS background-image 属性 


实例 


body 
{ 


background-image: url(bgimage.gif); 
background-color: #000000; 


J 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-image 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

background-image 属性 为 元 素 设 置 背 景 图 像 。 

元 素 的 背景 占据 了 元 素 的 全 部 尺寸 ， 包 括 内 边 距 和 边框 ， 但 不 包括 外 边 距 。 
默认 地 ， 背 景 图 像 位 于 元 素 的 左上 角 ， 并 在 水 平和 垂直 方向 上 重复 。 

提示 : 请 设置 一 种 可 用 的 背景 颜色 ， 这 样 的 话 ， 假 如 背景 图 像 不 可 用 ， 页 面 也 可 获 
得 良好 的 视觉 效果 。 

详细 说 明 

background-image 属性 会 在 元 素 的 背景 中 设置 一 个 图 像 。 


根据 background-repeat 属性 的 值 ， 图 像 可 以 无 限 平 铺 、 治 着 某 个 轴 (x 轴 或 y 
轴 ) 平 铺 ， 或 者 根本 不 平 铺 。 


初始 背景 图 像 (AAR) 根据 background-position 属性 的 值 放 置 。 


默认 值 : none 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.backgroundlmage-"url(stars.gif)" 


可 能 的 值 


值 描述 
url('URL') ”指向 图 像 的 路 径 。 
none 默认 值 。 不 显示 背景 图 像 。 
inherit 规定 应 该 从 父 元 素 继承 background-image 属性 的 设置 。 


TIY 实例 
将 图 像 设 置 为 背景 
本 例 演 示 如 何 将 图 像 设 置 为 背景 。 


<html> 
<head> 


<style type="text/css"> 

body (background-image:url(/i/eg bg 04.gif);} 
</style> 

</head> 


<body></body> 


</html> 
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CSS 教程 : CSS 背景 


W3School 前 端 教程 合集 


HTML DOM 参考 手册 : backgroundlmage 属性 


CSS background-image 属性 909 


CSS background-position 属性 


实例 

如 何 定位 背景 图 像 : 
body 
{ 


background-image:url('bgimage.gif'); 
background-repeat:no-repeat; 
background-attachment : fixed; 
background-position:center; 


j 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-position 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
background-position 属性 设置 背景 图 像 的 起 始 位 置 


个 属性 设置 背景 原 图 像 (由 background-image 定义 ) AAE, ER ARIRE 
as, 将 从 这 一 点 开始 。 


提示 : 您 需要 把 background-attachment 属性 设置 为 "fixed"， 才 能 保证 该 属性 在 
Firefox 和 Opera 中 正常 工作 。 


默认 值 : 0% 0% 


JavaScript 语法 : object.style.backgroundPosition="center" 


可 能 的 值 


iE 


fü Hi 


top left 

top center 
top right 
center left 
center center 
center right 
bottom left 
bottom center 
bottom right 


| 
如 果 您 仅 规定 了 一 个 关键 词 ， 那 么 第 二 个 值 将 是 "center"。 
默认 值 : 0% 0%。 
| |x% y% | 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 
左上 角 是 0% 0%。 右 下 角 是 10096 10096, 
如 果 您 仅 规定 了 一 个 值 ， 另 一 个 值 将 是 50%。 


| | xpos ypos | 

第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 

左上 角 是 0 0。 单 位 是 像素 (0px 0px) 或 任何 其 他 的 CSS 单位 。 
如 果 您 仅 规定 了 一 个 值 ， 另 一 个 值 将 是 50%。 

您 可 以 混合 使 用 % 和 position 值 。 


44 


TIY 实例 


如 何 放置 背景 图 像 
本 例 演示 如 何在 页 面 上 放置 背景 图 像 。 


<html> 

<head> 

<style type="text/css"> 

body 

{ 
background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-attachment : fixed; 
background-position:center; 

} 

</style> 

</head> 


<body> 
<body> 
<p><b> 提 示 : </b> 您 需要 把 background-attachment 属性 设置 为 "fixed"， 才 能 1 
</body> 
</body> 
</html> 





如 何 使 用 % 来 定位 背景 图 像 
本 例 演 示 如 何 使 用 百分比 来 在 页 面 上 定位 背景 图 像 。 


«html» 

«head» 

«style type="text/css"> 
body 


{ 

background-image: url('/i/eg bg 03.gif'); 
background-repeat: no-repeat; 
background-attachment : fixed; 
background-position: 30% 20%; 


</style> 
</head> 


<body> 
<p><b> 注 释 : </b> 为 了 在 Mozilla 中 实现 此 效果 ，background-attachment 属性 ， 
</body> 
</html> 
如 何 使 用 像素 来 定位 背景 图 像 
本 例 演 示 如 何 使 用 像素 来 在 页 面 上 定位 背景 图 像 。 





<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image: url('/i/eg bg 03.gif'); 
background-repeat: no-repeat; 
background-attachment : fixed; 
background-position: 50px 100px; 
} 

</style> 

</head> 


<body> 
<p><b> 注 释 : </b> 为 了 在 Mozilla 中 实现 此 效果 ，background-attachment 属性 , 
</body> 
</html> 


相 天 页 面 

CSS 教程 : CSS 背景 

CSS 参考 手册 : background-image 属性 

HTML DOM 参考 手册 : backgroundPosition 属性 





W3School 前 端 教 程 合 


CSS background-position 属性 914 


CSS background-repeat 属性 


实例 


body 
{ 


background-image: url(stars.gif); 
background-repeat: repeat-y; 


J 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-repeat 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

background-repeat 属性 设置 是 否 及 如 何 重 复 背 景 图 像 。 
默认 地 ， 背 景 图 像 在 水 平和 垂直 方向 上 重复 。 
详细 说 明 

background-repeat 属性 定义 了 图 像 的 平 铺 模 式 。 


从 原 图 像 开 始 重复 ， 原 图 像 由 background-image 定义 ， 并 根据 background- 
position 的 值 放 置 。 


默认 值 repeat 
继承 性 no 
版 本 CSS1 
JavaScript 语法 : object.style.backgroundRepeat="repeat-y" 
提示 和 注释 


提示 : 背景 图 像 的 位 置 是 根据 background-position 属性 设置 的 。 如 果 未 规定 


background-position 属性 ， 图 像 会 被 放置 在 元 素 的 左上 角 。 


可 能 的 值 


值 
repeat 
repeat-x 
repeat-y 
no-repeat 


inherit 


TIY 实例 


如 何 重复 背景 


描述 
默认 。 背 景 图 像 将 在 垂直 方向 和 水 平方 向 重复 。 


背景 图 像 特 在 水 平方 向 重复 。 

背景 图 像 将 在 垂直 方向 重复 。 

背景 图 像 特 仅 显 示 一 次 。 

规定 应 该 从 父 元 素 继承 background-repeat 属性 的 设置 。 


图 像 


本 例 演示 如 何 重复 背景 图 像 。 


<html> 
<head> 


<style type="text/css"> 
body 
{ 


background-image: 
url(/i/eg bg 03.gif); 
background-repeat: repeat 
</style> 

</head> 

<body> 


</body> 
</html> 


如 何在 垂直 方向 重复 背景 图 像 
本 例 演示 如 何 垂直 地 重复 背景 图 像 。 


<html> 
<head> 


<style type="text/css"> 
body 


background-image: 
url(/i/eg bg 03.gif); 
background-repeat: repeat-y 
} 

</style> 

</head> 

<body> 


</body> 
</html> 


如 何在 水 平方 向 重复 背景 图 像 
本 例 演示 如 何 水 平地 重复 背景 图 像 。 


«html» 
«head» 


«style type="text/css"> 
body 
{ 


background-image: 
url(/i/eg bg 03.gif); 
background-repeat: repeat-x 
</style> 

</head> 

<body> 


</body> 
</html> 


如 何 仅 显示 一 次 背景 图 像 
本 例 演示 如 何 仅 显示 一 次 背景 图 像 。 


<html> 
<head> 


<style type="text/css"> 
body 


—M— url('/i/eg bg 03.gif'); 
background-repeat: no-repeat 

ATR 

</head> 

<body> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 背景 
HTML DOM 参考 手册 : backgroundRepeat 属性 


CSS3 background-clip 属性 


规定 背景 的 绘制 区 域 : 


div 
{ 


background-color :yellow; 
background-clip:content-box; 


} 


浏览 器 支持 


IE Firefox Chrome 


Safari 


Opera 


IE9+、Firefox、Opera、Chrome 以 及 Safari 支持 background-clip 属性 。 
注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 background-clip 属性 。 


ch 、 S 
background-clip 属性 规定 背景 的 绘制 区 域 。 
默认 值 : border-box 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.backgroundClip="content-box 


语法 


background-clip: 


值 
border-box 
padding-box 


content-box 


相关 页 面 


CSS3 教程 : CSS3 


ab eS 
AR 


B 
cs 


ESSO Bl ER. 
ARAR EA X EHE, 
背景 被 裁 荔 到 内 容 框 。 


border -box|padding-box|content-box; 


测试 
测试 
测试 
测试 


CSS3 background-origin 属性 


实例 
相对 于 内 容 框 来 定位 背景 图 像 : 


div 

{ 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-position:left; 
background-origin:content-box; 


j 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
IE9+, Firefox 4+, Opera, Chrome 以 及 Safari 5+ 支持 background-origin 属性 。 
定义 和 用 法 
background-origin 属性 规定 background-position 属性 相对 于 什么 位 置 来 定位 。 


注释 : 如 果 背 景 图 像 的 background-attachment 属性 为 "fixed"， 则 该 属性 没有 效 
果 。 


默认 值 : padding-box 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.backgroundOrigin="content-box" 


background-origin: padding-box|border-box|content-box; 


值 
padding-box 
border-box 


content-box 


相关 页 面 


CSS3 教程 : CSS3 


描述 
ARBIRE YFA X EREN, 
EIE BUEBT mE SEED. 
背景 图 像 相对 于 内 容 框 来 定位 。 


ab eS 
AR 


测试 
测试 
测试 


测试 


CSS3 background-size 属性 


规定 背景 图 像 的 尺寸 : 
div 
{ 
background: url(img_flwr.gif); 


background-size:80px 60px; 
background-repeat:no-repeat; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


IE9+, Firefox 4+, Opera, Chrome LA Safari 5+ 支持 background-size 属性 。 


rm . N 
background-size 属性 规定 背景 图 像 的 尺寸 。 
默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.backgroundSize="60px 80px" 


background-size: _length_|_percentage_|cover|contain; 


Br 
EH 


值 
length 


设置 背景 图 像 的 高 度 和 宽度 。 
第 一 个 值 设置 宽度 ， 第 二 个 值 设置 高 度 。 
如 果 只 设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 "auto"。 
| 测试 | | percentage | 
以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 。 
第 一 个 值 设置 宽度 ， 第 二 个 值 设置 高 度 。 
如 果 只 设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 "auto"。 
| 测试 | | cover | 
把 背景 图 像 扩 展 至 足够 大 ， 以 使 背景 图 像 完 全 覆盖 背景 区 域 。 
背景 图 像 的 某 些 部 分 也 许 无 法 显示 在 背景 定位 区 域 中 。 


| 测试 | | contain | 把 图 像 图 像 扩 展 至 最 大 尺寸 ， 以 使 其 宽度 和 
域 。 | 测 JIR | 


亲 目 试 一 试 - 实例 


拉 伸 背景 图 像 
拉 伸 背景 图 像 来 完全 窗 盖 内 容 区 域 。 


测试 


<!DOCTYPE html» 

<html> 

<head> 

<style> 

div 

{ 

background: url(/i/bg_flower.gif); 
background-size:35% 100%; 
-moz-background-size:35% 100%; /* 老 版 本 的 Firefox */ 
background-repeat:no-repeat; 

} 

</style> 

</head> 

<body> 


<div> 

<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
</div> 


</body> 

</html> 

拉 伸 背景 图 像 ， 对 背景 图 像 水 平复 制 四 次 

对 背景 图 像 进行 拉 伸 ， 以 使 背景 图 像 恰好 水 平复 制 四 次 。 


<!DOCTYPE html> 


<html> 
<head> 
<style> 
div 


{ 


background: url(/i/bg_flower.gif); 
background-size: 25%; 
border:2px solid #92b901; 


} 
</style> 
</head> 
<body> 


<div> 

<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
</div> 


</body> 
</html> 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
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CSS 边框 属性 (Border 和 Outline) 


属性 
border 
border-bottom 


border-bottom- 
Color 


border-bottom- 
style 


border-bottom- 
width 


border-color 
border-left 
border-left-color 
border-left-style 
border-left-width 
border-right 
border-right-color 
border-right-style 
border-right-width 
border-style 
border-top 
border-top-color 
border-top-style 
border-top-width 
border-width 
outline 
outline-color 
outline-style 


outline-width 


QQ 3h NE: Ea 性 
um Pe’ 7] Nx ES 1+ 
WOO 27 TEE Ir IIT 


描述 
所 有 的 边框 属性 。 
所 有 的 下 边框 属性 。 


在 一 个 声明 中 设 
在 一 个 声明 中 设 


设置 下 边框 的 颜色 。 
设置 下 边框 的 样式 。 


设置 下 边框 的 宽度 。 


设置 四 条 边框 的 颜色 。 

在 一 个 声明 中 设置 所 有 的 左边 框 属性 。 
设置 左边 框 的 颜色 。 
设置 左边 框 的 样式 。 
设置 左边 框 的 宽度 。 

在 一 个 声明 中 设置 所 有 的 右边 框 属性 。 
设置 右边 框 的 颜色 。 
设置 右边 框 的 样式 。 
设置 右边 框 的 宽度 。 
设置 四 条 边框 的 样式 。 

在 一 个 声明 中 设置 所 有 的 上 边框 属性 。 
设置 上 边框 的 颜色 。 
设置 上 边框 的 样式 。 
设置 上 边框 的 宽度 。 
设置 四 条 边框 的 宽度 。 

在 一 个 声明 中 设置 所 有 的 轮廓 属性 。 
设置 轮廓 的 颜色 。 

设置 轮廓 的 样式 。 

设置 轮廓 的 宽度 。 


(Border 和 Outline) 


CSS 


W3School 前 端 教程 合集 


border-bottom-left- =, FIN 

Ea 定义 边框 左下 角 的 形状 。 3 
border-bottom- m» gs FIN 

i 定义 边框 右 下 角 的 形状 。 3 
border-image 简写 属性 ， 设 置 所 有 border-image-* 属性 。 3 
D a 规定 边框 图 像 区 域 超出 边框 的 量 。 3 
outset 

border-image- 图 像 边 框 是 否 应 平 铺 (repeated)、 铺 满 (rounded) 3 
repeat 或 拉 伸 (stretched)。 

border-image-slice ”规定 图 像 边框 的 向 内 偏 移 。 3 
border-image- 

ee 规定 用 作 边 框 的 图 片 。 3 
border-image- s e 

UE 规定 图 片 边 框 的 宽度 。 3 
border-radius 简写 属性 ， 设 置 所 有 四 个 border-*-radius 属性 。 3 
border-top-left- my 3 HZ: 

Roe 定义 边框 左上 角 的 形状 。 3 
border-top-right- psa HTS Je 

ae 定义 边框 右 下 角 的 形状 。 3 
box-decoration- 3 

break 

box-shadow 向 方 框 添加 一 个 或 多 个 阴影 。 3 
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CSS border 属性 


实例 
设置 4 个 边 杠 的 样式 : 


p 


border:5px solid red; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1IE8 需要 IDOCTYPE, IE9 
支持 "inherit"。 


定义 和 用 法 
border 简写 属性 在 一 个 声明 设置 所 有 的 边框 属性 。 
可 以 按 顺 序 设置 如 下 属性 : 


e border-width 
e border-style 
e border-color 


如 果 不 设置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border:solid #f0000; 也 是 允许 
的 。 


JavaScript 语法 : 


可 能 的 值 


值 
border-width 
border-style 
border-color 


inherit 


not specified 


object.style.border="3px solid blue" 


描述 
规定 边框 的 宽度 。 参 阅 : border-width 中 可 能 的 值 。 
规定 边框 的 样式 。 参 阅 : border-style 中 可 能 的 值 。 
规定 边框 的 颜色 。 参 阅 : border-color 中 可 能 的 值 。 
规定 应 该 从 父 元 素 继承 border 属性 的 设置 


TIY 实例 


所 有 边框 属性 在 一 个 声明 之 中 


本 例 演示 用 简 宇 属性 来 将 所 有 四 个 边框 属性 设置 于 同一 声明 中 。 
<html> 

<head> 

<style type="text/css"> 

p 


border: 
} 
</style> 
</head> 


medium double rgb(250, 0,255) 


<body> 
<p>Some text</p> 
</body> 


</html> 
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HTML DOM 参考 手册 : border 属性 


CSS border-bottom 属性 


实例 
设置 下 边框 的 样式 : 


p 


{ 
border-style:solid; 


border-bottom:thick dotted #ff0000; 
} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 IDOCTYPE, IE9 
支持 "inherit"。 


定义 和 用 法 
border-bottom 简写 属性 把 下 边框 的 所 有 属性 设置 到 一 个 声明 中 。 
可 以 按 顺 序 设置 如 下 属性 : 


e border-bottom-width 
e border-bottom-style 
e border-bottom-color 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-bottom:solid #ff0000; 也 是 
允许 的 。 


JavaScript 语法 : 


可 能 的 值 


值 


border-bottom- 
width 


border-bottom- 
style 


border-bottom- 
color 


inherit 


TIY 实例 


not specified 


object.style.borderBottom="3px solid blue" 


描述 
规定 下 边框 的 宽度 。 参 阅 : border-bottom-width 中 可 能 
的 值 。 


规定 下 边框 的 样式 。 参 阅 : border-bottom-style 中 可 能 的 
值 。 


规定 下 边框 的 颜色 。 参 阅 : border-bottom-color 中 可 能 的 
值 。 


规定 应 该 从 父 元 素 继 承 border-bottom 属性 的 设置 。 


所 有 下 边框 属性 在 一 个 声明 中 
本 例 演示 用 简写 属性 来 将 所 有 下 边框 属性 设置 在 同一 声明 中 。 


<html> 
<head> 
<style type="text/css"> 


p 


border-style:solid; 
border-bottom:thick dotted #ff0000; 


j 

</style> 

</head> 

<body> 

<p>This is some text in a paragraph.</p> 
</body> 


</html> 
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CSS border-bottom-color 属性 


实例 
下 边框 的 颜色 : 
p 
{ 


border-style:solid; 
border -bottom-color:#ff0000; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom-color 属性 。 
注释 : Internet Explorer6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent", 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 IDOCTYPE, IE9 
支持 "inherit"。 


定义 和 用 法 
border-bottom-color 设置 元 素 的 下 边框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 
出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必须 在 您 改 
变 其 颜色 之 前 获得 边框 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderBottomColor="blue" 
A| 
可 能 的 值 
值 描述 


颜色 值 为 颜色 名 称 的 边框 颜色 (ELA red) 。 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 〈 比 如 #0000) 。 
rgb number = 规定 颜色 值 为 rgb 代码 的 边框 颜色 (比如 rgb(255,0,0)) 。 
transparent 默认 值 。 边 框 颜色 为 透明 。 

inherit 规定 应 该 从 父 元 素 继 承 边 框 颜色 。 


color_name 规 


TIY 实例 


设置 下 边框 的 颜色 
本 例 演示 如 何 设置 下 边框 的 颜色 。 


<html> 
<head> 
<style type="text/css"> 


p 


border-style:solid; 
border-bottom-color:#ff0000; 


j 

</style> 

</head> 

<body> 

<p>This is some text in a paragraph.</p> 
</body> 


</html> 
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CSS 教程 : CSS 边框 
CSS 参考 手册 : border-bottom 属性 
HTML DOM 参考 手册 : borderBottomColor 属性 


CSS border-bottom-style 属性 


实例 
设置 下 边框 的 样式 : 


p 
{ 


border-style:solid; 
border-bottom-style:dotted; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom-style 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 
"hidden", 


定义 和 用 法 
border-bottom-style 设置 元 素 下 边框 的 样式 。 
只 有 当 这 个 值 不 是 none 时 边框 才 可 能 出 现 。 
在 CSS1 rh, HTML 用 户 代理 只 需 支 持 solid 和 none. 
默认 值 : not specified 
继承 性 : no 


JavaScript 语法 : object.style.borderBottomStyle="dotted" 


可 能 的 值 


值 Tfi 
none 定义 无 边框 。 


与 "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边 
框 冲突 。 


dotted ” 定义 点 状 边框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

solid 定义 实 线 。 

double ”定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove ”定义 3D 四 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 垄 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset — 3E3 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit ” 规定 应 该 从 父 元 素 继承 边框 样式 。 


学 


hidden 


TIY 实例 


置 下 边框 的 样式 
本 例 演示 如 何 设置 下 边框 的 样式 。 


<h 
<h 
<S 


Kool) 


</ 
</ 


<b 
<p 


</ 
</ 


tml» 

ead» 

tyle type="text/css"> 
(border-style:solid) 


.hone (border-bottom-style:none) 
.dotted {border-bottom-style:dotted} 
.dashed {border -bottom-style: dashed} 
.solid {border-bottom-style:solid} 
,double {border-bottom-style:double} 
.groove {border -bottom-style: groove} 
.ridge {border-bottom-style: ridge} 
.inset {border-bottom-style:inset} 
.outset {border-bottom-style: outset} 


style> 
head> 


ody> 

class="none">No bottom border.</p> 
class="dotted">A dotted bottom border .</p> 
class="dashed">A dashed bottom border.</p> 
class="solid">A solid bottom border .</p> 
class="double">A double bottom border .</p> 
class="groove">A groove bottom border.</p> 
class-"ridge"»A ridge bottom border.</p> 


class="inset">An inset bottom border.</p> 
class="outset">An outset bottom border .</p> 
body> 

html» 
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CSS 


教程 : CSS 边框 
参考 手册 : border-bottom 属性 


HTML DOM 参考 手册 : borderBottomStyle 属性 


CSS border-bottom-width 属性 


实例 
设置 下 边框 的 宽度 : 


p 


{ 
border-style:solid; 
border-bottom-width:15px; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom-width 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 IDOCTYPE, IE9 
支持 "inherit"。 


定义 和 用 法 
border-bottom-width 属性 设置 元 素 的 下 边框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 
SEY 0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-bottom-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 
获得 边 DED I. 才能 改变 其 边框 的 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderBottomWidth="thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 下 边框 。 
medium 默认 值 。 定 义 中 等 的 下 边框 。 
thick 定义 粗 的 下 边框 。 
length 允许 您 自 定义 下 边框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 宽度 。 


TIY 实例 


设置 下 边框 的 宽度 
本 例 演示 如 何 设 置 下 边框 的 宽度 。 


<html> 

<head> 

<style type="text/css"> 
p.one 

{ 

border-style: solid; 
border-bottom-width: 15px 
} 

p.two 

{ 

border-style: solid; 
border-bottom-width: thin 


} 
</style> 
</head> 
<body> 


«p class="one"><b> 注 释 : </b>"border-bottom-width" 属性 如 果 单 独 使 用 的 话 # 
<p class="two">Some text. Some more text.</p> 


</body> 
</html> 


| m S 
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CSS 参考 手册 : border-bottom 属性 
HTML DOM 参考 手册 : borderBottomWidth 属性 


CSS border-bottom-width 属性 943 


CSS border-color 属性 


实例 
设置 4 个 边 杠 的 颜色 : 


p 


border-style:solid; 
border-color:#ff0000 #0000ff; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-color 属性 。 
注释 : Internet Explorer 6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 
注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit" IE8 需要 IDOCTYPE, IE9 


支持 "inherit"。 

定义 和 用 法 

border-color 属性 设置 四 条 边框 的 颜色 。 此 属性 可 设置 1 到 4 种 颜色 。 
border-color 属性 是 一 个 简写 属性 ， 可 设置 一 个 元 素 的 所 有 边框 中 可 见 部 分 的 颜 
E, REA 4 个 边 分 别 设置 不 同 的 颜色 。 请 看 下 面 的 例子 : 

例子 1 


border-color:red green blue pink; 


上 边框 是 红色 
右边 框 是 绿色 
下 边框 是 蓝 色 
左边 框 是 粉色 


例子 2 


border-color:red green blue; 


e 上 边框 是 红色 
e 右边 框 和 左边 框 是 绿色 
e 下 边框 是 蓝 色 


例子 3 


border-color:dotted red green; 


e 上 边框 和 下 边框 是 红色 
。 右边 框 和 左边 框 是 绿色 


例子 4 


border-color:red; 


e 所 有 4 个 边框 都 是 红色 
要 记 住 ， 边 框 的 样式 不 能 为 none 或 hidden， 否 则 边框 不 会 出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必须 在 您 改 
变 其 颜色 之 前 获得 边框 。 


默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderColor-"ZFF0000 blue" 


可 能 的 值 


值 描述 

颜色 值 为 颜色 名 称 的 边框 颜色 (ELA red) 。 

hex number ”规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 (比如 #0000) 。 
rgb_number ”规定 颜色 值 为 rgb 代码 的 边框 颜色 (上 比如 rgb(255,0,0)) 。 
transparent 默认 值 。 边 框 颜色 为 透明 。 

inherit 规定 应 该 从 父 元 素 继 承 边 框 颜色 。 


color_name 规定 
定 


TIY 实例 


设置 四 个 边框 的 颜色 
本 例 演示 如 何 设置 四 个 边框 的 颜色 。 可 以 设置 一 到 四 种 颜色 。 


<html> 
<head> 


<style type="text/css"> 


p.one 


{ 


border-style: 
border-color: 


} 
p. two 


i 


border-style: 
border-color: 


p.three 
{ 


border-style: 
border-color: 


} 


p.four 


1 


border-style: 
border-color: 


} 
</style> 
</head> 


<body> 


solid; 
#0000ff 


solid; 
#ff0000 #0000ff 


solid; 
#ff0000 #00ff00 #0000ff 


solid; 
#ff0000 #00ff00 #0000ff rgb(250,0,255) 


<p class="one">0ne-colored border !</p> 


«p class="two">Two-colored border !</p> 


<p class="three">Three-colored border !</p> 


<p class="four">Four-colored border !</p> 


<p><b> 注 释 : </b>"border-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 


</body> 
</html> 


[ER 


相关 页 面 





CSS 教程 CSS 边框 
HTML DOM 参考 手册 : borderColor 属性 


CSS border-left 属性 


实例 
设置 左边 框 的 样式 : 


p 
{ 


border-style:solid; 
border-left:thick double #ff0000; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 IDOCTYPE. IE9 
支持 "inherit"。 


定义 和 用 法 
border-left 简 罕 属性 把 左 达 框 的 所 有 属性 设置 到 一 个 声明 中 。 
可 以 按 顺 序 设 置 如 下 属性 : 


e border-left-width 
e border-left-style 
e border-left-color 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-left:solid #0000; 也 是 允许 
的 。 


JavaScript 语法 : 


可 能 的 值 


值 
border-left-width 
border-left-style 
border-left-color 


inherit 


TIY 实例 


not specified 


object.style.borderLeft="3px solid blue" 


规定 左边 框 的 宽度 。 参 阅 : border-left-width 中 可 能 的 值 。 
规定 左边 框 的 样式 。 参 阅 : border-left-style 中 可 能 的 值 。 
规定 左边 框 的 颜色 。 参 阅 : border-left-color 中 可 能 的 值 。 
规定 应 该 从 父 元 素 继承 border-left 属性 的 设置 


所 有 左边 框 属性 在 一 个 声明 之 中 
所 有 左边 框 属性 在 一 个 声明 之 中 


<html> 
<head> 


<style type="text/css"> 


p 


border-style:solid; 
border-left:thick double #ff0000; 


} 
</style> 
</head> 


<body> 


<p>This is some text in a paragraph.</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 CSS 边框 
HTML DOM 参考 手册 : borderLeft 属性 


CSS border-left-color 属性 


实例 
左边 框 的 颜色 : 
p 
{ 


border-style:solid; 
border-left-color:#ff0000; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left-color 属性 。 
注释 : Internet Explorer 6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit", IEB 需要 IDOCTYPE, IE9 
支持 "inherit"。 


定义 和 用 法 
border-left-color 设置 元 素 的 左边 框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 
出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必须 在 您 改 
变 其 颜色 之 前 获得 边框 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderLeftColor="blue" 
A| 
可 能 的 值 
值 描述 


颜色 值 为 颜色 名 称 的 边框 颜色 (ELA red) 。 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 〈 比 如 #0000) 。 
rgb number = 规定 颜色 值 为 rgb 代码 的 边框 颜色 (比如 rgb(255,0,0)) 。 
transparent 默认 值 。 边 框 颜色 为 透明 。 

inherit 规定 应 该 从 父 元 素 继 承 边 框 颜色 。 


color_name 规 


TIY 实例 


设置 左边 框 的 颜色 
本 例 演示 如 何 设置 左边 框 的 颜色 。 


<html> 
<head> 
<style type="text/css"> 


p 


border-style: solid; 
border-left-color: #ff0000 


j 

</style> 

</head> 

<body> 

<p>Some text.</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 边框 
CSS 参考 手册 border-left 属性 
HTML DOM 参考 手册 : borderLeftColor 属性 


CSS border-left-style 属性 


实例 
设置 左边 框 的 样式 : 


p 
{ 


border-style:solid; 
border-left-style:dotted; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left-style 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 
"hidden", 


定义 和 用 法 
border-left-style 设置 元 素 左 边框 的 样式 。 
只 有 当 这 个 值 不 是 none 时 边框 才 可 能 出 现 。 
在 CSS1 rh, HTML 用 户 代理 只 需 支 持 solid 和 none. 
默认 值 : not specified 
继承 性 : no 


JavaScript 语法 : object.style.borderLeftStyle="dotted" 


可 能 的 值 


值 Tfi 
none 定义 无 边框 。 


与 "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边 
框 冲突 。 


dotted ” 定义 点 状 边框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

solid 定义 实 线 。 

double ”定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove ”定义 3D 四 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 垄 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset — 3E3 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit ” 规定 应 该 从 父 元 素 继承 边框 样式 。 


学 


hidden 


TIY 实例 


设置 左边 框 的 样式 
本 例 演示 如 何 设置 左边 杠 的 样式 。 


<html> 


<head> 

<style type="text/css"> 

p 

{ 

border-style:solid; 

} 

p.none {border-left-style:none} 
p.dotted {border-left-style:dotted} 
p.dashed {border-left-style:dashed} 
p.solid {border-left-style:solid} 
p.double {border-left-style:double} 
p.groove {border-left-style:groove} 
p.ridge {border-left-style:ridge} 
p.inset {border-left-style:inset} 
p.outset {border-left-style:outset} 
</style> 

</head> 

<body> 


<p class="none">No left border .</p> 

<p class="dotted">A dotted left border.</p> 
<p class="dashed">A dashed left border.</p> 
<p class="solid">A solid left border.</p> 
<p class="double">A double left border.</p> 
<p class="groove">A groove left border.</p> 
<p class="ridge">A ridge left border.</p> 
<p class="inset">An inset left border.</p> 
<p class="outset">An outset left border.</p> 
</body> 

</html> 


相关 页 面 


CSS 教程 : CSS 边框 
CSS 参考 手册 : border-left 属性 
HTML DOM 参考 手册 : borderLeftStyle 属性 


CSS border-left-width 属性 


实例 
设置 左边 框 的 宽度 : 


p 


{ 
border-style:solid; 
border -left-width:15px; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left-width 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 !IDOCTYPE。1IE9 
支持 "inherit"。 


定义 和 用 法 
border-left-width 属性 设置 元 素 的 左边 框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 
SEY 0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-left-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获 
得 边框 之 后 ， 才 能 改变 其 边框 的 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderLeftWidth="thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 左边 框 。 
medium 默认 值 。 定 义 中 等 的 左边 框 。 
thick 定义 粗 的 左边 框 。 
length 允许 您 自 定义 左边 框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 宽度 。 


TIY 实例 


设置 左边 框 的 宽度 
本 例 演示 如 何 设 置 左 边框 的 宽度 。 


<html> 

<head> 

<style type="text/css"> 
p.one 

{ 

border-style: solid; 
border-left-width: 15px 
E 

p.two 

{ 

border-style: solid; 
border-left-width: thin 


} 
</style> 
</head> 
<body> 


<p class="one"><b> 注 释 : </b>"border-left-width" 属性 如 果 单 独 使 用 的 话 是 夏 
<p class="two">Some text. Some more text.</p> 


</body> 
</html> 


TE] E 
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CSS 教程 : CSS 边框 





W3School 前 端 教程 合集 


CSS 参考 手册 : border-left 属性 
HTML DOM 参考 手册 : borderLeftWidth 属性 


CSS border-left-width 属性 


959 


CSS border-right 属性 


实例 
设置 右边 框 的 样式 : 


p 
{ 


border-style:solid; 
border-right:thick double #ff0000; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 IDOCTYPE. IE9 
支持 "inherit"。 


定义 和 用 法 
border-right 简写 属性 把 右边 框 的 所 有 属性 设置 到 一 个 声明 中 。 
可 以 按 顺序 设置 如 下 属性 : 


e border-right-width 
e border-right-style 
e border-right-color 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-right:solid #0000; 也 是 允 
许 的 。 


JavaScript 语法 : 
可 能 的 值 


值 


border-right- 
width 


border-right-style 
border-right-color 


inherit 


TIY 实例 


not specified 


object.style.borderRight="3px solid blue" 


描述 
规定 右边 框 的 宽度 。 参 阅 : border-right-width 中 可 能 的 
规定 右边 框 的 样式 。 参 阅 : border-right-style 中 可 能 的 
值 。 
规定 右边 框 的 颜色 。 参 阅 : border-right-color 中 可 能 的 


规定 应 该 从 父 元 素 继承 border-right 属性 的 设置 。 


所 有 右边 框 属性 在 一 个 声明 之 中 
本 例 演示 一 个 简写 属性 ， 用 于 把 所 有 右边 框 属性 设置 在 一 条 声明 中 。 


<html> 
<head> 
<style type="text/css"> 


p 


border-style:solid; 
border-right:thick double #ff0000; 


} 
</style> 
</head> 


<body> 
<p>This is some text in a paragraph.</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 边框 
HTML DOM 参考 手册 : borderRight 属性 


CSS border-right-color 属性 


实例 
右边 框 的 颜色 : 
p 
{ 


border-style:solid; 
border -right-color:#ff0000; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right-color 属性 。 
注释 : Internet Explorer6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit", IEB 需要 IDOCTYPE, IE9 
支持 "inherit"。 


定义 和 用 法 
border-right-color 设置 元 素 的 右边 框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 
出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必须 在 您 改 
变 其 颜色 之 前 获得 边框 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderRightColor="blue" 
A| 
可 能 的 值 
值 描述 


颜色 值 为 颜色 名 称 的 边框 颜色 (ELA red) 。 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 〈 比 如 #0000) 。 
rgb number = 规定 颜色 值 为 rgb 代码 的 边框 颜色 (比如 rgb(255,0,0)) 。 
transparent 默认 值 。 边 框 颜色 为 透明 。 

inherit 规定 应 该 从 父 元 素 继 承 边 框 颜色 。 


color_name 规 


TIY 实例 


设置 右边 框 的 颜色 
本 例 演示 如 何 设置 右边 框 的 颜色 。 


<html> 
<head> 
<style type="text/css"> 


p 


border-style: solid; 
border-right-color: #ff0000 


j 

</style> 

</head> 

<body> 

<p>Some text.</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 边框 
CSS 参考 手册 : border-right 属性 
HTML DOM 参考 手册 : borderRightColor 属性 


CSS border-right-style 属性 


实例 
设置 右边 框 的 样式 : 


p 


{ 
border-style:solid; 
border-right-style:dotted; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right-style 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 
"hidden", 


定义 和 用 法 
border-right-style 设置 元 素 右边 框 的 样式 。 
只 有 当 这 个 值 不 是 none 时 边框 才 可 能 出 现 。 
在 CSS1 中 ，HTML 用 户 代理 只 需 支 持 solid 和 none。 
默认 值 : not specified 
继承 性 : no 


JavaScript 语法 : object.style.borderRightStyle="dotted" 


可 能 的 值 


值 Tfi 
none 定义 无 边框 。 


与 "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边 
框 冲突 。 


dotted ” 定义 点 状 边框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 
dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

solid 定义 实 线 。 

double ”定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove ”定义 3D 四 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 垄 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset — 3E3 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit ” 规定 应 该 从 父 元 素 继承 边框 样式 。 


学 


hidden 


TIY 实例 


设置 右边 框 的 样式 
本 例 演示 如 何 设置 右边 框 的 样式 。 


<! 


<h 
<h 
<S 


TTT O OO TTD 


</ 
</ 


<b 
<p 


<p 
<p 
<p 
<p 
<p 
<p 
<p 


</ 
</ 


DOCTYPE html> 


tml» 
ead» 
tyle type="text/css"> 


.dotted {border-right-style: dotted} 
.dashed {border-right-style: dashed} 
.solid {border-right-style: solid) 
.double {border-right-style: double} 
.groove {border-right-style: groove} 
.ridge {border-right-style: ridge} 
.inset {border-right-style: inset} 
.outset {border-right-style: outset} 


style> 

head> 

ody> 

Cclass="dotted">A dotted border</p> 
Class="dashed">A dashed border</p> 
class="solid">A solid border</p> 
Class="double">A double border</p> 
Class="groove">A groove border</p> 
class="ridge">A ridge border</p> 
class="inset">An inset border</p> 
class="outset">An outset border</p> 
body> 

html» 


相关 页 面 


CSS 
CSS 


教程 : CSS 边框 
参考 手册 : border-right 属性 


HTML DOM 参考 手册 : borderRightStyle 属性 


CSS border-right-width 属性 


实例 
设置 右边 框 的 宽度 : 


p 


{ 
border-style:solid; 
border -right-width:15px; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right-width 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 !IDOCTYPE。1IE9 
支持 "inherit"。 


定义 和 用 法 
border-right-width 属性 设置 元 素 的 右边 框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 
SEY 0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-right-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获 
得 边框 之 后 ， 才 能 改变 其 边框 的 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderRightWidth="thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 右边 框 。 
medium 默认 值 。 定 义 中 等 的 右边 框 。 
thick 定义 粗 的 右边 框 。 
length 允许 您 自 定义 右边 框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 宽度 。 


TIY 实例 


设置 右边 框 的 宽度 
本 例 演示 如 何 设 置 右边 框 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
p.one 

{ 

border-style: solid; 
border-right-width: 15px 
} 

p.two 

{ 

border-style: solid; 
border-right-width: thin 


} 
</style> 
</head> 
<body> 


<p class="one"><b> 注 释 : </b>"border-right-width" 属性 如 果 单 独 使 用 的 话 是 
<p class="two">Some text. Some more text.</p> 


</body> 
</html> 
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CSS border-right-width 属性 


971 


CSS border-style 属性 


实例 
设置 4 个 边 杠 的 样式 : 


p 


border-style:solid; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-style 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 
"hidden". 

定义 和 用 法 


border-style 属性 用 于 设 转 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 设 置 边框 样 


a 


只 有 当 这 个 值 不 是 none 时 边框 地 可 能 出 现 。 
例子 1 


border-style:dotted solid double dashed; 


上 边框 是 点 状 
右边 框 是 实 线 
下 边框 是 双 线 
左边 框 是 虚线 


例子 2 


border-style:dotted solid double; 


e 上 边框 是 点 状 
e 右边 框 和 左边 框 是 实 线 
e 下 边框 是 双 线 


例子 3 


border-style:dotted solid; 


e 上 边框 和 下 边框 是 点 状 
。 右边 框 和 左边 框 是 实 线 


例子 4 


border-style:dotted; 


。 所 有 4 个 边框 都 是 点 状 


默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderStyle="dotted double" 


可 能 的 值 


值 描述 
none 定义 无 边框 。 
Pee = "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边 

框 冲突 。 

dotted ” 定义 点 状 边框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 
dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 
solid 定义 实 线 。 
double | 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 
groove ”定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 垄 状 边框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 


outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 


inherit 规定 应 该 从 父 元 素 继承 边框 样式 。 


摘 述 


最 不 可 预测 的 边框 样式 是 double。 它 定义 为 两 条 线 的 宽 ERR 线 之 间 的 空 


间 等 于 border-width 值 。 不 过 ，CSS 规范 并 没有 说 其 中 一 
者 两 条 线 是 否 应 该 是 一 样 的 粗 ， 也 没有 指出 线 之 间 的 空间 是 
些 都 上 有 用 户 代理 决定 ， 创 作 人 员 对 这 个 决定 没有 任何 影响 。 


TIY 实例 


置 四 边框 样式 
本 例 演示 如 何 设置 四 边框 样式 。 


否 比 另 一 条 粗 或 
am 4 比 线 粗 。 所 有 这 


<h 
<h 
<S 


TTT OO OOo 


</ 
</ 


<b 
sp 


«p 
«p 
«p 
«p 
«p 
«p 


<p 
</ 


</ 


设置 


tml» 
ead» 
tyle type="text/css"> 


.dotted {border-style: dotted} 
.dashed {border-style: dashed} 
.solid {border-style: solid) 
.double {border-style: double} 
.groove {border-style: groove} 
.ridge {border-style: ridge} 
.inset {border-style: inset} 
.outset {border-style: outset} 


style> 
head> 


ody> 
class="dotted">A dotted border</p> 


Cclass="dashed">A dashed border</p> 
class="solid">A solid border</p> 
Cclass="double">A double border</p> 
Cclass="groove">A groove border</p> 
class="ridge">A ridge border</p> 


Class="inset">An inset border</p> 


class="outset">An outset border</p> 
body> 
html» 
每 一 边 的 不 同 边框 


本 例 演示 如 何在 元 素 的 各 边 设 置 不 同 的 边框 。 


«html» 

«head» 

«style type="text/css"> 

p.soliddouble {border-style: solid double} 
p.doublesolid {border-style: double solid} 
p.groovedouble {border-style: groove double} 
p.three {border-style: solid double groove} 
</style> 

</head> 


<body> 
<p class="soliddouble">Some text</p> 


<p class="doublesolid">Some text</p> 
<p class="groovedouble">Some text</p> 


<p class="three">Some text</p> 
</body> 


</html> 
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CSS border-top 属性 


实例 
设置 上 边框 的 样式 : 


p 
{ 


border-style:solid; 
border-top:thick double #ff0000; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 !IDOCTYPE。1IE9 
支持 "inherit"。 


定义 和 用 法 
border-top 简写 属性 把 上 边框 的 所 有 属性 设置 到 一 个 声明 中 。 
可 以 按 顺 序 设 置 如 下 属性 : 


e border-top-width 
e border-top-style 
e border-top-color 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-top:solid #ff0000; 也 是 允许 
的 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderTop="3px solid blue" 
Ly 
可 能 的 值 
值 描述 


border-top-width | 规定 上 边框 的 宽度 。 参 阅 : border-top-width 中 可 能 的 值 。 
border-top-style 规定 上 边框 的 样式 。 参 阅 : border-top-style 中 可 能 的 值 。 
border-top-color ”规定 上 边框 的 颜色 。 人 参阅 : border-top-color 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继承 border-top 属性 的 设置 。 


TIY 实例 


所 有 上 边框 属性 在 一 个 声明 之 中 
本 例 演示 用 简写 属性 来 将 所 有 上 边框 属性 设置 于 同一 声明 之 中 。 


<html> 

<head> 

<style type="text/css"> 
p 


border-style:solid; 
border-top:thick double #ff0000; 


} 
</style> 
</head> 


<body> 
<p>This is some text in a paragraph.</p> 
</body> 


</html> 
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CSS border-top-color 属性 


实例 
上 边框 的 颜色 : 
p 
{ 


border-style:solid; 
border-top-color:Zff0000; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top-color 属性 。 
注释 : Internet Explorer6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent", 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit", IEB 需要 IDOCTYPE, IE9 
支持 "inherit"。 


定义 和 用 法 
border-top-color 设置 元 素 的 上 边框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 
出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必须 在 您 改 
变 其 颜色 之 前 获得 边框 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderTopColor="blue" 
A| 
可 能 的 值 
值 描述 


颜色 值 为 颜色 名 称 的 边框 颜色 (ELA red) 。 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 〈 比 如 #0000) 。 
rgb number = 规定 颜色 值 为 rgb 代码 的 边框 颜色 (比如 rgb(255,0,0)) 。 
transparent 默认 值 。 边 框 颜色 为 透明 。 

inherit 规定 应 该 从 父 元 素 继 承 边 框 颜色 。 


color_name 规 


TIY 实例 


设置 上 边框 的 颜色 
本 例 演示 如 何 设置 上 边框 的 颜色 。 


<html> 
<head> 
<style type="text/css"> 


p 


border-style: solid; 
border-top-color: #ff0000 


j 

</style> 

</head> 

<body> 

<p>Some text.</p> 
</body> 


</html> 
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CSS border-top-style 属性 


实例 
设置 上 边框 的 样式 : 


p 
{ 


border-style:solid; 
border-top-style:dotted; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top-style 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 
"hidden", 


定义 和 用 法 
border-top-style 设置 元 素 上 边框 的 样式 。 
只 有 当 这 个 值 不 是 none 时 边框 才 可 能 出 现 。 
在 CSS1 中 ，HTML 用 户 代理 只 需 支 持 solid 和 none。 
默认 值 : not specified 
继承 性 : no 


JavaScript 语法 : object.style.borderTopStyle="dotted" 


可 能 的 值 


值 Tfi 
none 定义 无 边框 。 


与 "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边 
框 冲突 。 


dotted ” 定义 点 状 边框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

solid 定义 实 线 。 

double ”定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove ”定义 3D 四 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 垄 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset — 3E3 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit ” 规定 应 该 从 父 元 素 继承 边框 样式 。 


学 


hidden 


TIY 实例 


设置 上 边框 的 样式 
本 例 演示 如 何 设置 上 边框 的 样式 。 


<h 
<h 
<S 


bo 


"'O 'O 'O O OO O O o wv 


</ 
</ 


<b 
<p 


</ 
</ 


tml» 
ead» 
tyle type="text/css"> 


rder-style:solid; 


.none {border-top-style:none} 
.dotted {border-top-style:dotted} 
.dashed {border -top-style: dashed} 
.solid {border-top-style:solid} 
.double {border-top-style:double} 
.groove {border -top-style:groove} 
.ridge {border-top-style: ridge} 
.inset {border-top-style:inset} 
.outset {border-top-style:outset} 


style> 
head> 


ody> 

class="none">No top border.</p> 
class="dotted">A dotted top border.</p> 
class="dashed">A dashed top border.</p> 
class="solid">A solid top border.</p> 
class="double">A double top border.</p> 
class="groove">A groove top border .</p> 
class="ridge">A ridge top border.</p> 


class="inset">An inset top border .</p> 
class="outset">An outset top border.</p> 
body> 

html» 
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CSS border-top-width 属性 


实例 
设置 上 边框 的 宽度 : 


p 


{ 
border-style:solid; 
border-top-width:15px; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top-width 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IE8 需要 IDOCTYPE. IE9 
支持 "inherit"。 


定义 和 用 法 
border-top-width 属性 设置 元 素 的 上 边框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 
SEY 0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-top-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获 
得 边框 之 后 ， 才 能 改变 其 边框 的 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderTopWidth="thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 上 边框 。 
medium 默认 值 。 定 义 中 等 的 上 边框 。 
thick 定义 粗 的 上 边框 。 
length 允许 您 自 定义 上 边框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 宽度 。 


TIY 实例 


设置 上 边框 的 宽度 
本 例 演示 如 何 设置 上 边框 的 宽度 。 


<html> 

<head> 

<style type="text/css"> 
p.one 

{ 

border-style: solid; 
border-top-width: 15px 
} 

p.two 

{ 

border-style: solid; 
border-top-width: thin 


} 
</style> 
</head> 


<body> 

<p class="one"><b> 注 释 : </b>"border-top-width" 属性 如 果 单 独 使 用 的 活 是 不 : 
<p class="two">Some text. Some more text.</p> 

</body> 

</html> 
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CSS border-width 属性 


实例 
设置 四 个 边框 的 宽度 : 


p 


border-style:solid; 
border -width:15px; 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-width 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
border-width 简写 属性 为 元 素 的 所 有 边框 设置 宽度 ， 或 者 单独 地 为 各 边 边框 设置 宽 


度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 
EE 0。 不 允许 指定 负 长 度 值 。 


例子 1 


border-width:thin medium thick 10px; 


上 边框 是 细 边 框 
右边 框 是 中 等 边框 

下 边框 是 粗 边 框 

左边 框 是 10px 宽 的 边框 


例子 2 


border-width:thin medium thick; 


e 上 边框 是 10px 
e 右边 框 和 左边 框 是 中 等 边框 
e 下 边框 是 粗 边框 


例子 3 


border-width:thin medium; 


e 上 边框 和 下 边框 是 细 边 框 
e 右边 框 和 左边 框 是 中 等 边框 


例子 4 


border-width: thin; 


e 所 有 4 个 边框 都 是 细 边 框 


默认 值 : medium 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderWidth="thin thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 边框 。 
medium 默认 。 定 义 中 等 的 边框 。 
thick 定义 粗 的 边框 。 
length 允许 您 自 定义 边框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 宽度 。 


TIY 实例 


所 有 边框 宽度 属性 在 一 个 声明 之 中 
本 例 演示 用 简写 属性 来 将 所 有 边框 宽度 属性 设置 于 同一 声明 中 。 


«html» 
«head» 
«style type="text/css"> 
p.one 


border-style: solid; 
border-width: 5px 


j 
p.two 


border-style: solid; 
border-width: thick 


j 
p.three 


border-style: solid; 
border-width: 5px 10px 


j 


p.four 


border-style: solid; 
border-width: 5px 10px 1px 
} 


p.five 


border-style: solid; 
border-width: 5px 10px 1px medium 


T 
</style> 
</head> 


<body> 

<p class="one">Some text</p> 
<p class="two">Some text</p> 
<p class="three">Some text</p> 
<p class="four">Some text</p> 
<p class="five">Some text</p> 


<p><b> 注 释 : </b>"border-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 
</body> 


</html> 
ee ee i] 
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CSS outline 属性 


实例 
设置 4 个 边 杠 的 样式 : 


p 


{ 
outline:#00FFOO dotted thick; 
} 


浏览 器 支持 
所 有 浏览 器 都 支持 outline 属性 。 
注释 : 如 果 规 定 了 !IDOCTYPE， 则 IES 支持 outline 属性 。 


定义 和 用 法 

outline (轮廓 ) 是 绘制 于 元 素 周 围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 
素 的 作用 。 

注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 矩形。 

outline 简写 属性 在 一 个 声明 中 设置 所 有 的 轮廓 属性 。 

可 以 按 顺 序 设 置 如 下 属性 : 


e outline-color 
e outline-style 
e outline-width 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 outline:solid #ff0000; 也 是 允许 
的 。 


默认 值 : invert none medium 


继承 性 no 
版 本 CSS2 
JavaScript 语法 : object.style.outline="#0000FF dotted thin" 


可 能 的 值 


值 描述 
outline-color 规定 边框 的 颜色 。 参 阅 : outline-color 中 可 能 的 值 。 
outline-style 规定 边框 的 样式 。 参 阅 : outline-style HA REN A. 
outline-width 规定 边框 的 宽度 。 参 阅 : outline-width 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继承 outline 属性 的 设置 
TIY 实例 
在 元 素 周 围 男 线 


本 例 演 示 使 用 outline 属性 在 元 素 周 围 画 一 条 线 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt 
<html> 

<head> 

<style type="text/css"> 


p 


border:red solid thin; 
outline: #00ff00 dotted thick; 
} 

</style> 

</head> 


<body> 
<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ，Internet Explorer 8 (以 及 更 高 
</body> 
</html> 


«j — 








相关 页 面 


CSS 教程 : CSS HER 
HTML DOM 参考 手册 : outline 属性 


CSS outline-color 属性 


实例 
设置 点 状 轮廓 的 颜色 : 


p 
{ 
outline-style:dotted; 
outline-color:#00ff00; 


} 


A] 333614 
所 有 浏览 器 都 支持 outline-color 属性 。 
注释 : 如 果 规 定 了 IDOCTYPE， 则 IE8 支持 outline 属性 。 


定义 和 用 法 
outline (4:88) 是 绘制 于 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 
素 的 作用 。outline 属性 可 设置 元 素 周围 的 轮廓 线 。 


注释 : 请 始终 在 outline-color 属性 之 前 声明 outline-style 属性 。 元 素 只 有 获得 轮廓 
以 后 才能 改变 其 轮廓 的 颜色 。 


注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 矩形。 


outline-color 属性 设置 一 个 元 素 整 个 轮廓 中 可 见 部 分 的 颜色 。 要 记 住 ， 轮 廓 的 样式 
不 能 是 none， 否 则 轮廓 不 会 出 现 。 


默认 值 : invert 
继承 性 : no 


JavaScript 语法 : object.style.outlineColor="#0000FF" 


可 能 的 值 


值 描述 
color name ”规定 颜色 值 为 颜色 名 称 的 轮廓 颜色 (上 比如 red) 。 
hex number 规定 颜色 值 为 十 六 进 制 值 的 轮廓 颜色 (上 比如 #ff0000) 。 
rgb number ”规定 颜色 值 为 rgb 代码 的 轮廓 颜色 (比如 rgb(255,0,0)) o 
上 默认。 执行 颜色 反 转 (逆向 的 颜色 ) 。 可 使 轮廓 在 不 同 的 背景 


定 
AE 


invert 


颜色 中 都 是 可 见 。 
inherit 规定 应 该 从 父 元 素 继承 轮廓 颜色 的 设置 。 


TIY 实例 


设置 轮廓 的 颜色 
本 例 演示 如 何 设置 轮廓 的 颜色 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt 
«html» 

«head» 

«style type="text/css"> 

p 

{ 


border:red solid thin; 
outline-style:dotted; 
outline-color:#00ff00; 


</style> 
</head> 


<body> 
<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE Bj, Internet Explorer 8 (以 及 更 高 
</body> 
</html> 


E ”做 
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CSS outline-style 属性 


实例 
设置 轮廓 的 样式 : 


p 


outline-style:dotted; 
j 


A] Was 36184 
所 有 浏览 器 都 支持 outline-style 属性 。 
注释 : 如 果 规 定 了 IDOCTYPE， 则 IE8 支持 outline BY. 


定义 和 用 法 
outline-style 属性 用 于 设置 元 素 的 整个 轮廓 的 样式 。 样 式 不 能 是 none， 否 则 轮廓 不 
会 出 现 。 


outline (46 ER) 是 绘制 于 元 素 周 围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 
RAH., outline 属性 设置 元 素 周 围 的 轮廓 线 。 


注释 : 请 始终 在 outline-color 属性 之 前 声明 outline-style 属性 。 元 素 只 有 获得 轮廓 
以 后 才能 改变 其 轮廓 的 颜色 。 


注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 和 矩形。 
默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.outlineStyle="dotted" 


可 能 的 值 


值 描述 
none BA. XE3LZGAG ER. 
dotted 定义 点 状 的 轮廓 。 
dashed 定义 虚线 轮廓 。 
solid 定义 实 线 轮廓 。 


double 定义 双 线 轮廓 。 双 线 的 宽度 等 同 于 outline-width 的 值 。 
groove 定义 3D 凹 槽 轮廓 。 此 效果 取决 于 outline-color 值 。 


ridge 定义 3D 凸 槽 轮廓 。 此 效果 取决 于 outline-color 值 。 
inset 定义 3D 凹 边 轮廓 。 此 效果 取决 于 outline-color 值 。 
outset 定义 3D 凸 边 轮廓 。 此 效果 取决 于 outline-color 值 。 
inherit 规定 应 该 从 父 元 素 继承 轮廓 样式 的 设置 。 


TIY 实例 


设置 轮廓 的 样式 
本 例 演示 如 何 设置 轮廓 的 样式 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt 
«html» 

«head» 

«style type="text/css"> 

p 

{ 


border: red solid thin; 


} 
p.dotted {outline-style: dotted} 
p.dashed {outline-style: dashed} 
p.solid {outline-style: solid} 
p.double {outline-style: double} 
p.groove {outline-style: groove} 
p.ridge {outline-style: ridge} 
p.inset {outline-style: inset} 
p.outset {outline-style: outset} 
</style> 

</head> 

<body> 


<p class="dotted">A dotted outline</p> 
<p class="dashed">A dashed outline</p> 
<p class="solid">A solid outline</p> 
<p class="double">A double outline</p> 
<p class="groove">A groove outline</p> 
<p class="ridge">A ridge outline</p> 
<p class="inset">An inset outline</p> 
<p class="outset">An outset outline</p> 


<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE mj, Internet Explorer 8 (以 及 更 高 
</body> 
</html> 


EE 
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CSS outline-width 属性 


实例 
置 点 状 轮廓 的 颜色 : 


p 
{ 
outline-style:dotted; 
outline-width: 5px; 
} 


浏览 器 支持 


所 有 浏览 器 都 支持 outline-width 属性 。 
注释 : 如 果 规 定 了 IDOCTYPE， 则 IE8 支持 outline BY. 


定义 和 用 法 


outline-width 属性 设置 元 素 整 个 轮廓 的 宽度 ， 只 有 当 轮 廓 样式 不 是 none 时 ， 这 个 
宽度 才 会 起 作用 。 如 果 样 式 为 none， 宽 度 实际 上 会 重 置 为 0。 不 允许 设置 负 长 度 
值 。 


outline (46 S8) 是 绘制 于 元 素 周 围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 
素 的 作用 。outline 属性 设置 元 素 周 围 的 轮廓 线 。 


注释 : 请 始终 在 outline-width 属性 之 前 声明 outline-style 属性 。 元 素 只 有 获得 轮廓 
以 后 才能 改变 其 + 轮廓 的 颜色 。 


注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 和 矩形。 
默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.outlineWidth="thin" 


可 能 的 值 


值 描述 
thin 规定 细 轮 廊 。 
medium 默认 。 规 定 中 等 的 轮廓 。 
thick 规定 粗 的 轮廓 。 
length 允许 您 规定 轮廓 粗细 的 值 。 
inherit 规定 应 该 从 父 元 素 继 承 轮廓 宽度 的 设置 。 
TIY 实例 
设置 轮廓 的 宽度 


本 例 演示 如 何 设置 轮廓 的 宽度 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht! 
«html» 

«head» 

«style type="text/css"> 
p.one 

1 

border:red solid thin; 
outline-style:solid; 
outline-width:thin; 

} 

p.two 

{ 

border:red solid thin; 
outline-style:dotted; 
outline-width:3px; 

} 

</style> 

</head> 

<body> 


<p class="one">This is some text in a paragraph.</p> 
<p class="two">This is some text in a paragraph.</p> 


<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE XH, Internet Explorer 8 (以 及 更 高 
</body> 
</html> 
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CSS 教程 : CSS 轮廓 
CSS 参考 手册 : outline 属性 
HTML DOM 参考 手册 : outlineWidth 属性 


CSS3 border-bottom-left-radius 属性 


实例 
向 div 元 素 的 左下 角 添 加 圆 角 边框 : 
div 


{ 


border:2px solid; 
border-bottom-left-radius:2em; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


IE9+, Firefox 4+, Chrome, Safari 5+ 以 及 Opera 支持 border-bottom-left-radius 
属性 。 


定义 和 用 法 
border-bottom-left-radius 属性 定义 左下 角 边 框 的 形状 。 
提示 : 该 属性 允许 您 向 元 素 添加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderBottomLeftRadius="5px" 


语法 


border-bottom-left-radius: _length_|_%_ [_length_|_%_]; 


注释 : border-bottom-left-radius 属性 的 长 度 值 和 百分比 值 定义 四 分 之 一 椭圆 (定义 
外 部 边框 边缘 的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半径 ， 第 二 个 值 是 垂 
直 半 径 。 如 果 省 略 第 二 个 值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 需 ， 则 边 角 为 方形 ， 而 
BE a 而 垂直 半径 的 百分比 值 参考 边 
E ` 高 度 。 


值 描述 测试 
length 定义 左下 角 的 形状 。 测试 
% 以 百分比 值 定 义 左 下 角 的 形状 。 测试 

相关 页 面 


CSS3 教程 : CSS3 边框 


CSS3 border-bottom-right-radius 属性 


实例 
向 div 元 素 的 右 下 角 添 加 圆 角 边框 : 
div 


{ 


border:2px solid; 
border-bottom-right-radius:2em; 


} 


浏览 器 支持 


IE Firefox Chrome Safari 


Opera 


IE9+、Firefox 4+、Chrome、Safari 5+ 以 及 Opera 支持 border-bottom-right- 


radius 属性 。 


ch 、 : 
border-bottom-right-radius 属性 定义 右 下 角 边 框 的 形状 。 
提示 : 该 属性 允许 您 向 元 素 添加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderBottomRightRadius="5px" 


语法 


border-bottom-right-radius: _length_|_%_ [_length_|_%_]; 


注释 : border-bottom-right-radius 属性 的 长 度 值 和 百分比 值 定 义 四 分 之 一 椭圆 CE 
义 外 部 边框 边缘 的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半径 ， 第 二 个 值 是 
垂直 半径 。 如 果 省 略 第 二 个 值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 需 ， 则 边 角 为 方形 ， 
ee SL 
i E E mE, 


值 描述 测试 
length 定义 右 下 和 角 的 形状 。 测试 
% 以 百分比 值 定义 右 下 角 的 形状 。 测试 

相关 页 面 


CSS3 教程 : CSS3 边框 


CSS3 border-image 属性 


实例 

将 图 片 规定 为 包围 div 元 素 的 边框 : 
div 
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ 
-o-border-image:url(border.png) 30 30 round; /* Opera */ 


border-image:url(border.png) 30 30 round; 
} 


页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 11, Firefox, Opera 15, Chrome 以 及 Safari 6 支持 border-image 
属性 。 


Safari 5 支持 替代 的 -webkit-border-image 属性 。 


定义 和 用 法 
border-image 属性 是 一 个 简写 属性 ， 用 于 设置 以 下 属性 : 


e border-image-source 
e border-image-slice 
e border-image-width 
e border-image-outset 
e border-image-repeat 


如 果 省 略 值 ， 会 设置 其 默认 值 。 
提示 : 请 使 用 border-image-* 属性 来 构造 漂亮 的 可 伸缩 按钮 ! 


JavaScript 语法 : 


可 能 的 值 


值 
border-image- 
source 


border-image- 
slice 


border-image- 
width 


border-image- 
outset 


border-image- 
repeat 


亲 目 试 一 试 - 


Border-image 按钮 


none 100% 1 0 stretch 


object.style.borderlmage="url(border.png) 30 30 round" 


测 


Hai 


iE 


用 在 边框 的 图 片 的 路 径 。 
片 边框 向 内 偏 移 。 
片 边框 的 宽度 。 


边框 图 像 区 域 超出 边框 的 量 。 


图 像 边 框 是 否 应 平 铺 (repeated)、 铺 满 (rounded) 或 拉 W 
伸 (stretched)。 x 


实例 


本 例 演示 如 何 通过 border-image 属性 来 创建 按钮 。 


<!DOCTYPE html» 

«html» 

«head» 

«style» 

div 

{ 

border:10px solid transparent; 

width: 40px; 

padding:5px 10px; 

-moz-border-image: url(/i/border image button.png) © 14 © 14 stret« 
-webkit-border-image: url(/i/border image button.png) © 14 0 14 st! 
-o-border-image: url(/i/border image button.png) © 14 © 14 stretch, 
border-image: url(/i/border image button.png) 0 14 0 14 stretch; 


} 

</style> 

</head> 

<body> 

<p><b> 注 释 : </b>Internet Explorer 不 支持 border-image 属性 。</p> 


<div>Search</div> 


<p> 这 是 我 们 使 用 的 图 片 : </p> 
<img src="/i/border_image_button.png"> 


</body> 
</html> 


E CUTE 
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CSS3 border-image-outset 属性 


实例 


设置 border-image-outset 属性 : 


div 


{ 


border-image-source: url(border.png); 
border-image-outset: 30 30; 


} 


浏览 器 支持 


IE Firefox 


Chrome Safari 


Opera 不 支持 border-image-outset 属性 。 


Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-outset 属性 。 


Safari 5 以 及 更 早 的 版 本 不 支持 border-image-outset 属性 。 


请 参阅 border-image 属性 。 


定义 和 用 法 


border-image-outset 属性 规定 边框 图 像 超过 边框 盒 的 量 。 


默认 值 : 
继承 性 : 


JavaScript 语法 : 


0 


object.style.borderlmageOutset="30 30" 


Opera 


可 能 的 值 
border-image-outset: length | number ; 


注释 : border-image-outset 属性 规定 边框 图 像 超出 边框 盒 的 量 。 在 上 、 右 、 下 、 左 
侧 。 如 果 忽 略 第 四 个 值 ， 则 与 第 二 个 值 相 同 。 如 果 省 略 第 三 个 值 ， 则 与 第 一 个 值 相 
同 。 如 果 省 略 第 二 个 值 ， 则 与 第 一 个 值 相同 。 不 允许 任何 负 值 作为 border-image- 
outset 值 。 


值 描述 
length 
number 代表 对 应 的 border-width 的 倍数 。 
相关 页 面 
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CSS3 border-image-repeat 属性 


实例 
规定 如 何 重复 图 像 边框 : 
div 
{ 
border-image-source: url(border.png); 


border-image-repeat: round; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Opera 不 支持 border-image-repeat 属性 。 

Internet Explorer 10 以 及 更 时 的 版 本 不 支持 border-image-repeat 属性 。 
Safari 5 以 及 更 早 的 版 本 不 支持 border-image-repeat 属性 。 

请 参阅 border-image 属性 。 


定义 和 用 法 


border-image-repeat 属性 规定 图 像 边框 是 否 应 该 被 重复 (repeated) 、 拉 伸 
(stretched) 或 铺 满 (rounded) 。 


默认 值 : stretch 
继承 性 : no 


JavaScript 语法 : object.style.borderlmageRepeat="round" 


可 能 的 值 

border-image-repeat: stretch|repeat|round; 
注释 : 该 属性 规定 如 何 延展 和 铺 排 边 框图 像 的 边缘 和 中 间 部 分 。 因 此 ， 您 可 以 规定 
两 个 值 。 如 果 省 略 第 二 个 值 ， 则 采取 与 第 一 个 值 相同 的 值 。 

值 描述 
stretch ” 拉 伸 图 像 来 填充 区 域 
repeat ” 平 铺 (重复 ) 图 像 来 填充 区 域 。 


iad 类 似 repeat 值 。 如 果 无 法 完整 平 铺 所 有 图 像 ， 则 对 图 像 进 行 缩放 以 
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CSS3 border-image-slice 属性 


实例 
规定 图 像 边 框 的 向 内 偏 移 : 


div 
{ 


border-image-source: url(border.png); 
border-image-slice: 50% 50%; 


} 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
Opera 不 支持 border-image-slice 属性 。 
Internet Explorer 10 以 及 更 时 的 版 本 不 支持 border-image-slice 属性 。 


Safari 5 以 及 更 早 的 版 本 不 支持 border-image-slice 属性 。 
请 参阅 border-image 属性 。 


定义 和 用 法 
border-image-slice 属性 规定 图 像 边 框 的 向 内 偏 移 。 
默认 值 : 100% 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.borderlmageSlice="50% 50%" 


语法 
border-image-slice: _number_|_%_|f1il1; 


注释 : 该 属性 规定 图 像 的 上 、 右 、 下 、 左 侧 边 缘 的 向 内 偏 移 ， 图 像 被 分 割 为 九 个 区 
EX: 四 个 角 、 四 条 边 以 及 一 个 中 间 区 域 。 除 非 使 用 了 关键 词 fil, dung B ARD 
分 会 被 丢弃 。 如 果 省 略 第 四 个 数值 /百分比 ， 则 与 第 二 个 值 相同 。 如 果 省 略 第 三 个 
值 ， 则 与 第 一 个 值 相同 。 如 果 省 略 第 二 个 值 ， 则 与 第 一 个 值 相同 。 


值 描述 
数字 值 ， 代 表 图 像 中 像素 (如 果 是 光栅 图 像 ) 或 矢量 坐标 (如 果 是 


number 矢量 图 像 ) 。 


相对 于 图 像 尺 寸 的 百分比 值 : 图 像 的 宽度 影响 水 平 偏 移 ， 高 度 影响 


& HERE. 
fill 保留 边框 图 像 的 中 间 部 分 。 
WK TH 
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CSS3 border-image-source 属性 


实例 
使 用 一 幅 图 像 作为 围绕 div 元 素 的 边框 : 


div 
{ 


border-image-source: url(border.png); 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Opera 不 支持 border-image-source 属性 。 
Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-source 属性 。 
Safari 5 以 及 更 早 的 版 本 不 支持 border-image-source 属性 。 


请 参阅 border-image 属性 。 


定义 和 用 法 
border-image-source BEES RAN AR, 1 border-style 属性 中 设置 的 边框 
样式 。 
提示 : 如 果 值 为 "none"， 或 者 如 果 图 像 无 法 显示 ， 则 使 用 边框 样式 。 
默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.borderlmageSource="url(border.png)" 


语法 


border-image-source: none|_image_; 


值 
none 不 使 用 图 像 。 
image 用 作 边 框 的 图 像 的 路 径 。 


相关 页 面 
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Bt 


学 


CSS3 border-image-width 属性 


po 
实例 
规定 图 像 边 框 的 宽度 : 
div 
{ 
border-image-source: url(border.png); 


border-image-width: 30 30; 
} 


浏览 器 支持 
IE Firefox Chrome 


Opera 不 支持 border-image-width 属性 。 


Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-width 属性 。 


Safari 


Safari 5 以 及 更 早 的 版 本 不 支持 border-image-width 属性 。 


请 参阅 border-image 属性 。 


定义 和 用 法 
border-image-width 属性 规定 图 像 边框 的 宽度 。 
默认 值 : 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.borderlmageWidth="30 30" 


none 


Opera 


语法 
border-image-width: _number | ?6 |auto; 


注释 : border-image-width 属性 的 四 个 之 规定 将 边框 图 像 分 割 为 九 个 部 分 的 偏 移 。 
它们 代表 了 从 区 域 的 上 、 右 、 下 、 左 侧 向 内 的 距离 。 如 果 忽 上 略 第 四 个 值 ， 则 与 第 二 
个 值 相同 。 如 果 省 略 第 三 个 值 ， 则 和 与 第 一 个 值 相同 。 如 果 省 略 第 二 个 值 ， 则 与 第 一 
个 值 相同 。 不 允许 任何 负 值 作为 border-image-width 值 。 
值 描述 
number ”代表 对 应 的 border-width 的 倍数 。 


参考 边框 图 像 区 域 的 尺寸 : 区 域 的 高 度 影响 水 平 偏 移 ， 宽 度 影响 垂 
直 偏 移 。 


auto 如 果 规 定 该 属性 ， 则 宽度 为 对 应 的 图 像 切片 的 固有 宽度 。 


% 


相关 页 面 
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CSS3 border-radius 属性 


实例 
向 div 元 素 添 加 圆 角 边框 


div 

{ 

border:2px solid; 
border-radius:25px; 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
IE9+、Firefox 4+, Chrome, Safari 5+ 以 及 Opera 支持 border-radius 属性 。 
定义 和 用 法 


border-radius 属性 是 一 个 简写 属性 ， 用 于 设置 四 个 border-*-radius 属性 。 
提示 : 该 属性 允许 您 为 元 素 添 加 圆 角 边 ATE | 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderRadius="5px" 


吾 法 


border-radius: _1-4 length | % / _1-4 length_|_%_; 


注释 : 按 此 顺序 设置 每 个 radii 的 四 个 值 。 如 果 省 略 bottom-left， 则 与 top-right 相 
同 。 如 果 省 略 bottom-right， 则 与 top-left 相同 。 如 果 省 略 top-right， 则 和 与 top-left 
相同 。 


值 描述 测试 
length 定义 圆 角 的 形状 。 测试 
% 以 百分比 定义 圆 角 的 形状 。 测试 

例子 1 


border-radius:2em; 


等 价 于 : 


border-top-left-radius:2em; 
border-top-right-radius:2em; 
border-bottom-right-radius:2em; 
border-bottom-left-radius:2em; 


例子 2 


border-radius: 2em 1em 4em / 0.5em 3em; 


等 价 于 : 


border-top-left-radius: 2em 0.5em; 
border-top-right-radius: 1em 3em; 
border-bottom-right-radius: 4em 0.5em; 
border-bottom-left-radius: 1em 3em; 


相关 页 面 
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CSS3 border-top-left-radius 属性 


实例 

向 div 元 素 的 左上 角 添 加 圆 角 边框 : 
div 
{ 
border:2px solid; 


border-top-left-radius:2em; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


IE9+, Firefox 4+, Chrome, Safari 5+ 以 及 Opera 支持 border-top-left-radius & 
性 。 


定义 和 用 法 
border-top-left-radius 属性 定义 左上 角 边 框 的 形状 。 
提示 : 该 属性 允许 您 向 元 素 添加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderTopLeftRadius="5px" 


语法 


border-bottom-right-radius: _length_|_%_ [_length_|_%_]; 


注释 : border-top-left-radius 属性 的 长 度 值 和 百分比 值 定义 四 分 之 一 椭圆 (定义 外 
部 边框 边缘 的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半径 ， 第 二 个 值 是 垂直 
半径 。 如 果 省 略 第 二 个 值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 需 ， 则 边 角 为 方形 ， 而 不 
是 圆 形 。 水 平 半 径 的 百分比 值 参考 边框 盒 的 宽度 ， 而 垂直 半径 的 百分比 值 参考 边框 


盒 的 高 度 。 


值 描述 测试 
length 定义 左下 角 的 形状 。 测试 
% 以 百分比 值 定 义 左 下 角 的 形状 。 测试 

相关 页 面 
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CSS3 border-top-right-radius 属性 


实例 

向 div 元 素 的 右上 角 添 加 圆 角 边框 : 
div 
{ 
border:2px solid; 


border-top-right-radius:2em; 


j 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


IE9+, Firefox 4+, Chrome, Safari 5+ LA Opera 支持 border-top-right-radius 属 
性 。 


定义 和 用 法 
border-top-right-radius 属性 定义 右 下 和 角 边 框 的 形状 。 
提示 : 该 属性 允许 您 向 元 素 添加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderTopRightRadius="5px" 


语法 


border-top-right-radius: _length_|_%_ [_length_|_%_]; 


注释 : border-top-right-radius 属性 的 长 度 值 和 百分比 值 定 义 四 分 之 一 椭圆 (定义 外 
部 边框 边缘 的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半径 ， 第 二 个 值 是 垂直 
半径 。 如 果 省 略 第 二 个 值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 需 ， 则 边 角 为 方形 ， 而 不 
是 圆 形 。 水 平 半 径 的 百分比 值 参考 边框 盒 的 宽度 ， 而 垂直 半径 的 百分比 值 参考 边框 


盒 的 高 度 。 


值 描述 测试 
length 定义 右上 角 的 形状 。 测试 
% 以 百分比 值 定义 右上 角 的 形状 。 测试 

相关 页 面 
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CSS3 box-shadow 属性 


实例 
向 div 元 素 添 加 box-shadow : 


div 
{ 
box-shadow: 10px 10px 5px #888888; 


} 
页 面 底 部 有 更 多 实例 。 
浏览 器 支持 


IE Firefox Chrome 


Safari 


Opera 


IE9+、Firefox 4、Chrome、Opera 以 及 Safari 5.1.1 支持 box-shadow 属性 。 


rm. i 
box-shadow 属性 向 框 添加 一 个 或 多 个 阴影 。 
提示 : 请 使 用 border-image-* 属性 来 构造 漂亮 的 可 伸缩 按钮 ! 
默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.boxShadow="10px 10px Spx #888888" 


box-shadow: _h-shadow_ _v-shadow_ _blur_ _spread_ _color_ inset; 


注释 : box-shadow 向 框 添 加 一 个 或 多 个 阴影 。 该 属性 是 由 过 号 分 隔 的 阴影 列表 ， 
每 个 阴影 由 2-4 个 长 度 值 、 可 选 的 颜色 值 以 及 可 选 的 inset 关键 词 来 规定 。 省 略 长 
度 的 值 是 0。 





值 描述 测试 
h-shadow 必需 。 水 平 阴 影 的 位 置 。 人 允许 负 值 。 测试 
v-shadow 必需 。 垂 直 阴 影 的 位 置 。 人 允许 负 值 。 测试 
blur 可 选 。 模 糊 距离 。 测试 
Spread 可 选 。 阴 影 的 尺寸 。 测试 
color 可 选 。 阴 影 的 颜色 。 请 参半 CSS 颜色 值 。 测试 
inset 可 选 。 将 外 部 阴影 (outset) 改 为 内 部 阴影 。 测试 





亲自 试 一 试 - 实例 
扔 到 桌子 上 面 的 图 片 
本 例 演 示 如 何 创建 宝丽来? 图片， 并 旋转 图 片 。 


<!DOCTYPE html» 

«html» 

«head» 

«style» 

body 

{ 

margin: 30px,; 
background-color :#E9E9E9; 
} 


div.polaroid 


{ 

width:294px; 

padding:10px 10px 20px 10px; 
border:1px solid #BFBFBF; 
background-color :white; 

/* Add box-shadow */ 
box-shadow:2px 2px 3px #aaaaaa; 


} 
div.rotate left 


t 
float:left; 
-ms-transform:rotate(7deg); /* IE 9 */ 


-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari and Chrome */ 
-o-transform:rotate(7deg); /* Opera */ 

transform: rotate(7deg); 


} 


div.rotate_right 

{ 

float:left; 

-ms-transform:rotate(-8deg); /* IE 9 */ 
-moz-transform:rotate(-8deg); /* Firefox */ 
-webkit-transform:rotate(-8deg); /* Safari and Chrome */ 
-o-transform:rotate(-8deg); /* Opera */ 
transform:rotate( -8deg); 

} 

</style> 

</head> 

<body> 


<div class="polaroid rotate left"> 

«img src="/i/ballade_dream.jpg" alt=" 郁 金 香 " width="284" height="21: 
<p class="caption"> 上 海鲜 花 港 的 郁金香 ， 花 名 : Ballade Dream, </p> 

</div> 

<div class="polaroid rotate right"> 

<img src="/i/china_pavilion.jpg" alt=" 世 博 中 国 馆 " width="284" height 
«p class="caption">2010 年 上 海 世 博 会 ， 中 国 馆 。</p> 

</div> 


</body> 
</html> 


ER 
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Box 属性 


Lm 描述 css 

re 如 果 内 容 浴 出 了 元 素 内 容 区 域 ， 是 否 对 内 容 的 左 /右边 缘 3 
进行 裁剪 。 

O 如 果 内 容 浴 出 了 元 素 扩容 区 域 ， 是 否 对 内 容 的 上 /下 边缘 3 
进行 裁剪 。 

m 规定 澄 出 元 素 的 首选 滚动 方法 。 3 

rotation 绕 由 rotation-point 属性 定义 的 点 对 元 素 进 行 旋 转 。 3 

rotatlon- 定义 距离 上 左边 框 边缘 的 偏 移 点 。 3 


point 


CSS3 overflow-x 属性 


实例 
55 div 元 素 中 内 容 的 左 /右边 缘 - 如 果 洽 出 元 素 的 内 容 区 域 的 话 : 
div 


{ 


overflow-x:hidden; 


j 


浏览 右 文 持 

所 有 主流 浏览 器 都 支持 overflow-x 属性 。 

注释 : overflow-x 属性 无 法 在 IE8 以 及 更 早 的 浏览 器 正确 地 工作 。 
定义 和 用 法 

overflow-x 属性 规定 是 否 对 内 容 的 左 / 右 边缘 进行 裁剪 - 如 果 浴 出 元 素 内 容 区 域 的 
话 。 

提示 : 使 用 overflow-y 属性 来 确定 对 上 /下 边缘 的 裁剪 。 


默认 值 : visible 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.overflowX="scroll" 


语法 


overflow-x: visible|hidden|scroll|auto|no-display|no-content; 


visible 
hidden 
scroll 
auto 
no-display 


no-content 


IT AA TL > Ó 


描述 
不 裁剪 内 容 ， 可 能 会 显示 在 内 容 框 之 外 。 
9x53 PUE - 不 提供 滚动 机 制 。 
裁剪 内 容 - 提供 滚动 机 制 。 
如 果 浴 出 框 ， 则 应 该 提供 滚动 机 制 。 
如 果 内 容 不 适合 内 容 框 ， 则 删除 整个 框 。 


如 果 内 容 不 适合 内 容 框 ， 则 隐藏 整个 内 容 。 


测试 
测试 
测试 
测试 
测试 
测试 


测试 
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CSS3 overflow-y 属性 


实例 
55 div 元 素 中 内 容 的 左 /右边 缘 - 如 果 洽 出 元 素 的 内 容 区 域 的 话 : 
div 


{ 


overflow-y:hidden; 


j 


浏览 右 文 持 

所 有 主流 浏览 器 都 支持 overflow-y 属性 。 

注释 : overflow-y 属性 无 法 在 IE8 以 及 更 早 的 浏览 器 正确 地 工作 。 
定义 和 用 法 

overflow-y 属性 规定 是 否 对 内 容 的 上 /下 边缘 进行 裁剪 - 如 果 浴 出 元 素 内 容 区 域 的 
话 。 

提示 : 使 用 overflow-x 属性 来 确定 对 左 /右边 缘 的 裁剪 。 


默认 值 : visible 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.overflowY="scroll" 


语法 


overflow-y: visible|hidden|scroll|auto|no-display|no-content; 


值 
visible 
hidden 
scroll 
auto 
no-display 


no-content 


描述 
不 裁剪 内 容 ， 可 能 会 显示 在 内 容 框 之 外 。 
9x53 PUE - 不 提供 滚动 机 制 。 
裁剪 内 容 - 提供 滚动 机 制 。 
如 果 浴 出 框 ， 则 应 该 提供 滚动 机 制 。 
如 果 内 容 不 适合 内 容 框 ， 则 删除 整个 框 。 


如 果 内 容 不 适合 内 容 框 ， 则 隐藏 整个 内 容 。 


测试 
测试 
测试 
测试 
测试 
测试 


测试 





CSS3 overflow-style 属性 


实例 
设置 浴 出 元 素 的 首选 滚动 方法 : 
div 


{ 


overflow: auto; 
overflow-style:marquee, panner; 


} 
浏览 器 支持 
目前 没有 浏览 器 支持 overflow-style 属性 。 


定义 和 用 法 


overflow-style 规定 渝 出 元 素 的 首选 滚动 方法 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.overflowStyle="scrollbar" 


语法 
overflow-style: auto|scrollbar | panner |move|marquee; 


注释 : 值 既 可 以 是 auto， 或 者 是 按照 优先 次 序 的 方法 列表 。 浏 览 器 应 该 使 用 列表 中 
其 支持 的 的 第 一 个 滚动 方法 。 


值 
auto 
scrollbar 
panner 
move 


marquee 


Br 
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为 浴 出 元 素 添 加 滚动 条 。 


用 户 能 够 直接 移动 元 素 的 内 容 。 通 常 ， 用 户 能 够 用 鼠标 拖 动 内 容 。 
内 容 自主 移动 ， 不 需 任何 用 户 代理 对 其 控制 。 


CSS3 rotation 属性 


实例 
将 h1 元 素 旋转 180 度 ( 从 上 向 下 ) 


hi 


{ 
rotation-point:50% 50%; 
rotation:180deg; 


浏览 器 支持 
目前 没有 浏览 器 支持 rotation 属性 。 
定义 和 用 法 


rotation 属性 围绕 由 rotation-point 属性 定义 的 指定 点 ， 对 块 级 元 素 进 行 逆 时 针 旋 
转 。 


提示 : 边框 、 内 边 距 、 内 容 以 及 背景 GRE) 也 会 被 旋转 ! 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.rotation="180deg" 


rotation: _angle_; 


W3School 前 端 教程 合 


值 描述 
angle 元 素 旋转 角度 。 可 能 的 值 : Odeg 到 360deg。 


CSS3 rotation 属性 1038 


CSS3 rotation-point 属性 


实例 
将 h1 元 素 旋转 180 度 ( 从 上 向 下 ) 


hi 


{ 

rotation-point:50% 50%; 
rotation:180deg; 

} 


浏览 器 支持 
目前 没有 浏览 器 支持 rotation-point 属性 。 
定义 和 用 法 


rotation-point 属性 是 一 对 值 ， 定 义 从 上 左边 框 边缘 进行 偏 移 的 点 。 
提示 : rotation-point 属性 需要 与 rotation 属性 结合 使 用 。 


默认 值 : 50% 50% 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.rotationPoint="25% 25%" 


语法 


rotation-point: _value_; 


值 


left top 

left center 

left bottom 
right top 

right center 
right bottom 
center top 
center center 
center bottom 


| 如 果 只 规定 一 个 关键 词 ， 则 第 二 个 值 将 
参考 边框 盒 宽 度 和 高 度 。 | 


Ew" 
AE 


center", 


|| x96 y% | 百分比 值 ， 


Color 属性 


属性 描述 css 
color-profile 允许 使 用 源 的 颜色 配置 文件 的 默认 以 外 的 规范 。 3 
opacity 规定 书签 的 级 别 。 3 
rendering- 人 允许 使 用 颜色 配置 文件 泻 # 意图 的 默认 以 外 的 规 3 


intent 3B. 


CSS3 opacity 属性 


实例 
设置 div 元 素 的 不 透明 级 别 : 
div 


{ 
opacity:0.5; 
} 


您 可 以 在 本 页 底部 找到 更 多 实例 。 


浏览 器 支持 
所 有 浏览 器 都 支持 opacity 属性 。 


注释 : IE8 以 及 更 早 的 版 本 支持 替代 的 filter 属性 。 例 如 : 
filter:Alpha(opacity=50)。 


= . i 
opacity 属性 设置 元 素 的 不 透明 级 别 。 
默认 值 : 1 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.opacity=0.5 


Opacity: _value_|inherit; 


值 描述 测试 
value ”规定 不 透明 度 。 从 0.0 “完全 透明 ) 到 1.0 (完全 不 透明 ) 。 测试 
inherit ”应 该 从 父 元 素 继 承 opacity 属性 的 值 。 


x 自 试 一 试 实例 
改变 元 素 的 不 透明 度 
本 例 演示 如 何 使 用 JavaScript 来 改变 元 素 的 不 透明 度 。 


<!DOCTYPE html> 

<html> 

<head> 

<script> 

function ChangeOpacity(x) 


{ 

// 返回 被 选 选项 的 文本 

var opacity-x.options[x.selectedIndex].text; 

var el-document.getElementById("p1"); 

if (el.style.opacity!--undefined) 
(el.style.opacity-opacity;) 

else 
{alert("Your browser doesn't support this example!");) 


«/script» 
«/head» 
«body» 


«p id="p1"> 请 从 下 面 的 例子 中 选择 一 个 值 ， 以 改变 此 元 素 的 不 透明 度 。</p> 
<select onchange="ChangeOpacity(this);" size="5"> 

<option />0 

<option />0.2 

<option />0.5 

<option />0.8 

<option selected-"selected" />1 
</select> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 图 像 透明 度 


Content for Paged Media 属性 


属性 
bookmark-label 
bookmark-level 


bookmark-target 
float-offset 


hyphenate-after 


hyphenate- 
before 


hyphenate- 
character 


hyphenate-lines 


hyphenate- 
resource 


hyphens 
image-resolution 
marks 


string-set 


描述 
规定 书签 的 标记 。 
规定 书签 的 级 别 。 
规定 书签 链接 的 目标 。 
Pad float 属性 通常 放置 的 位 置 的 相反 方 


规定 连 字 单词 中 连 字 符 之 后 的 最 小 字符 数 。 
规定 连 字 单词 中 连 字 符 之 前 的 最 小 字符 数 。 


规定 当 发 生 断 字 时 显示 的 字符 串 。 


指示 元 素 中 连续 断 字 连 线 的 最 大 数 。 


定 帮 助 浏览 器 确定 断 字 点 的 外 部 资 
的 列表 ) 


设置 如 何 对 单词 进行 拆 分 ， 以 改善 段落 的 布局 。 
规定 图 像 的 正确 分 辩 率 。 

向 文档 添加 裁 切 标 记 或 十 字 标 io 

3 


源 Gg 5 ahs 


CSS 


CSS 尺寸 属性 (Dimension) 


CSS 


45 


属性 


height 


max-height 


max-width 


高 度 。 


设置 元 素 的 最 小 
设置 元 素 的 最 小 


min-height 


宽度 。 


min-width 
width 


CSS height 属性 


实例 
设置 段落 的 高 度 和 宽度 : 


p 


{ 
height:100px; 
width:100px; 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 height 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
height 属性 设置 元 素 的 高 度 。 
说 明 
这 个 属性 定义 元 素 内 容 区 的 高 度 ， 在 内 容 区 外 面 可 以 增加 内 边 距 、 边 框 和 外 边 距 。 
行内 非 蔡 换 元 素 会 忽略 这 个 属性 。 


默认 值 : auto 
继承 性 : no 


JavaScript 语法 : object.style.height="50px" 


可 能 的 值 


值 描述 
auto 默认 。 浏 览 器 会 计算 出 实际 的 高 度 。 
length 使 用 px. cm 等 单位 定义 高 度 。 

% 基于 包含 它 的 块 级 对 象 的 百分比 高 度 。 
inherit 规定 应 该 从 父 元 素 继 承 height 属性 的 值 。 


TIY 实例 


使 用 像素 值 设置 图 像 的 高 度 


本 例 演示 如 何 使 用 像素 值 设置 元 素 的 高 度 。 
<html> 
<head> 


<style type="text/css"> 
img.normal 


height: auto 
j 


img.big 


{ 
height: 160px 
j 


img.small 
{ 
height: 30px 


y 
</style> 
</head> 
<body> 


<img class="normal" src="/i/eg_smile.gif" /> 
<br /> 

<img class="big" src="/i/eg_smile.gif" /> 
<br /> 

«img class-"small" src="/i/eg_smile.gif" /> 


</body> 
</html> 


使 用 百分比 设置 图 像 的 高 度 


本 例 演示 如 何 使 用 百分比 值 来 设置 元 素 的 高 度 。 


«html» 

«head» 

«style type="text/css"> 
img.normal 


height: auto 
} 


img.big 


{ 

height: 50% 

j 

img.small 

{ 

height: 10% 

j 

</style> 

</head> 

<body> 

<img class="normal" src="/i/eg_smile.gif" /> 
<br /> 

<img class="big" src="/i/eg_smile.gif" /> 
<br /> 

<img class="small" src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS Rt 

CSS 教程 : CSS 框 模型 概述 

CSS 参考 手册 : width 属性 

HTML DOM 参考 手册 : height 属性 


CSS max-height 属性 


实例 
设置 段落 的 最 大 高 度 : 


p 


{ 
max-height :100px; 
j 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 max-height 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
max-height 属性 设置 元 素 的 最 大 高 度 。 
说 明 
该 属性 值 会 对 元 素 的 高 度 设 置 一 个 最 高 限制 。 因 此 ， 元 素 可 以 比 指定 值 矮 ， 但 不 能 
比 其 高 。 不 允许 指定 负 值 。 
注释 : max-height 属性 不 包括 外 边 距 、 边 框 和 内 边 距 。 
默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.maxHeight="50px" 


可 能 的 值 


值 描述 
none 默认 。 定 义 对 元 素 被 允许 的 最 大 高 度 没 有 限制 。 
length 定义 元 素 的 最 大 高 度 值 。 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 大 高 度 。 
inherit 规定 应 该 从 父 元 素 继 承 max-height 属性 的 值 。 


TIY 实例 


设置 元 素 的 最 大 高 度 

本 例 演示 如 何 设置 一 个 元 素 的 最 大 高 度 。 
<html> 
<head> 


<style type="text/css"> 
p 


max-height: 10px 

} 

</style> 

</head> 

<body> 

<p> 这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。</p> 
<img src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 

CSS 教程 : CSS 尺寸 

CSS 教程 : min-height 属性 

HTML DOM 参考 手册 : maxHeight 属性 


CSS max-width 属性 


实例 


设置 段落 的 最 大 宽度 : 


max-width:100px; 
j 


浏览 器 文 持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 max-width 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
max-width 定义 元 素 的 最 大 宽度 。 
说 明 


该 属性 值 会 对 元 素 的 宽度 设置 一 个 最 高 限制 。 因 此 ， 元 素 可 以 比 指定 值 狂 ， 但 不 
比 其 宽 。 不 允许 指定 负 值 。 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.maxWidth="50px" 


可 能 的 值 


值 描述 
none 默认 。 定 义 对 元 素 的 最 大 宽度 没有 限制 。 
length 定义 元 素 的 最 大 宽度 值 。 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 大 宽度 。 
inherit 规定 应 该 从 父 元 素 继承 max-width 属性 的 值 。 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 最 大 宽度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 最 大 高 度 。 


<html> 

<head> 

<style type="text/css"> 
p 


max-width: 300px 
} 

</style> 

</head> 


<body> 


<p> 这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 


e 
S 
+ II 


= 这 是 这 是 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 
这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。</p> 
</body> 
</html> 


使 用 百分比 来 设置 元 素 的 最 大 宽度 
本 例 演示 如 何 使 用 百分比 值 来 设置 元 素 的 最 大 高 度 。 


<html> 

<head> 

<style type="text/css"> 
p 


max-width: 50% 
} 

</style> 
</head> 

<body> 


<p> 这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文 本 。 


这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 
i EN 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。</p> 
</body> 

</html> 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 参考 手册 : CSS min-width 属性 
HTML DOM 参考 手册 : maxWidth 属性 


CSS min-height 属性 


实例 


设置 段落 的 最 小 高 度 : 


{ 
min-height :100px; 
j 


浏览 器 文 持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 min-height 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
min-height 属性 设置 元 素 的 最 小 高 度 。 
说 明 


该 属性 值 会 对 元 素 的 高 度 设置 一 个 最 低 限 制 。 因 此 ， 元 素 可 以 比 指定 值 高 ， 但 不 能 
比 其 矮 。 不 允许 指定 负 值 。 


默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.minHeight="50px" 


可 能 的 值 


值 描述 
length 定义 元 素 的 最 小 高 度 。 上 默认 值 是 0。 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 小 高 度 。 
inherit 规定 应 该 从 父 元 素 继承 min-height 属性 的 值 。 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 最 小 高 度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 最 小 高 度 。 


<html> 

<head> 

<style type="text/css"> 
p 


min-height: 100px 
} 

</style> 

</head> 

<body> 


<p> 这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文 本 。 
这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。</p> 
«img src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 教程 : max-height 属性 
HTML DOM 参考 手册 : minHeight 属性 


CSS min-width 属性 


实例 
设置 段落 的 最 小 宽度 : 


p 


min-width:100px; 
j 


浏览 器 文 持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 min-width 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
min-width 属性 设置 元 素 的 最 小 宽度 。 
说 明 
该 属性 值 会 对 元 素 的 宽度 设置 一 个 最 小 限制 。 因 此 ， 元 素 可 以 比 指定 值 帘 ， 但 不 能 
LRR, AICHE A dh. 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.minWidth="50px" 


可 能 的 值 


值 描述 
length 定义 元 素 的 最 小 宽度 值 。 默 认 值 : 取决 于 浏览 器 。 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 小 宽度 。 


inherit 规定 应 该 从 父 元 素 继承 min-width 属性 的 值 。 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 最 小 宽度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 最 小 宽度 。 


<html> 

<head> 

<style type="text/css"> 
p 


{ 

min-width: 1000px 
} 

</style> 

</head> 

<body> 


<p> 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 
这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。</p> 
«img src="/i/eg_smile.gif" /> 


</body> 
</html> 


使 用 百分比 来 设置 元 素 的 最 小 宽度 
本 例 演 示 如 何 使 用 百分比 值 来 设置 元 素 的 最 小 宽度 。 


<html> 
<head> 
<style type="text/css"> 


p 

{ 

min-width: 200% 

} 

</style> 

</head> 

<body> 

<p> 这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文 本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。</p> 

«img src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 参考 手册 : CSS max-width 属性 
HTML DOM 参考 手册 : minWidth 属性 


CSS width 属性 


实例 
设置 段落 的 高 度 和 宽度 : 


p 


{ 
height:100px; 
width:100px; 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 width 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
width 属性 设置 元 素 的 宽度 。 
说 明 
这 个 属性 定义 元 素 内 容 区 的 宽度 ， 在 内 容 区 外 面 可 以 增加 内 边 距 、 边 框 和 外 边 距 。 
行内 非 蔡 换 元 素 会 忽略 这 个 属性 。 


默认 值 : auto 
继承 性 : no 


JavaScript 语法 : object.style.width="50px" 


可 能 的 值 


值 描述 
auto 默认 值 。 浏 览 器 可 计算 出 实际 的 宽度 。 
length 使 用 px, cm 等 单位 定义 宽度 。 
% 定义 基于 包含 块 〈 父 元 素 ) 宽度 的 百分比 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 width 属性 的 值 。 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 宽度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
img 

1 

width: 300px 

} 

</style> 

</head> 

<body> 

<img src="/i/eg_smile.gif" /> 


</body> 
</html> 


使 用 百分比 来 设置 元 素 的 宽度 
本 例 演示 如 何 使 用 百分比 值 来 设置 元 素 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
img 

1 

width: 5096 

} 

</style> 

</head> 

<body> 

<img src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 


CSS 教程 CSS RY 

CSS 教程 : CSS 框 模型 概述 

CSS 参考 手册 : height 属性 
HTML DOM 参考 手册 : width 属性 


可 伸缩 框 属 性 (Flexible Box) 


属性 
box-align 
box-direction 
box-flex 
box-flex-group 
box-lines 


box-ordinal- 
group 


box-orient 


box-pack 


描述 
规定 如 何 对齐 框 的 子 元 素 。 
规定 框 的 子 元 素 的 显示 方向 。 
规定 框 的 子 元 素 是 否 可 伸缩 。 
将 可 伸缩 元 素 分 配 到 柔性 分 组 。 
规定 当 超出 父 元 素 框 的 空间 时 ， 是 否 换行 显示 。 


规定 框 的 子 元 素 的 显示 次 序 。 


规定 框 的 子 元 素 是 否 应 水 平 或 垂直 排列 。 
规定 水 平 框 中 的 水 平 位 置 或 者 垂直 框 中 的 垂直 位 
[Elo 


n 


CSS3 box-align 属性 


"p 
实例 
通过 使 用 box-align and box-pack 属性 ， 居 中 div 框 的 子 元 素 : 
div 
{ 
width:350px; 
height:100px; 
border:1px solid black; 
/* Firefox */ 
display: -moz-box; 
-moz -box-pack:center; 
-moz-box-align:center; 
/* Safari. Opera 以 及 Chrome */ 
display: -webkit -box; 
-webkit -box-pack:center; 
-webkit-box-align:center; 
/* W3C */ 
display :box; 


box-pack:center; 
box-align:center; 


} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 

目前 没有 浏览 器 支持 box-align 属性 。 

Firefox 支持 替代 的 -moz-box-align 属性 。 

Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-align 属性 。 
定义 和 用 法 


box-align 属性 规定 如 何 对 齐 框 的 子 元 素 。 


默认 值 : stretch 


继承 性 no 

版 本 CSS3 

JavaScript 语法 : object.style.boxAlign="center" 
语法 


box-align: start|end|center|baseline|stretch; 


测试 


学 


值 Hai 


start 


对 于 正常 方向 的 框 ， 每 个 子 元 素 的 上 边缘 治 着 框 的 项 边 放 置 。 

对 于 反方 向 的 框 ， 每 个 子 元 素 的 下 边缘 治 着 框 的 底 边 放置 。 

| 测试 | | end | 

对 于 正常 方向 的 框 ， 每 个 子 元 素 的 下 边缘 治 着 框 的 底 边 放置 。 

对 于 反方 向 的 框 ， 每 个 子 元 素 的 上 边缘 治 着 框 的 项 边 放 置 。 

| 测试 || center | 均等 地 分 割 多余 的 空间 ， 一 半 位 于 子 元 素 之 上 ， 另 一 半 位 于 子 元 


素 之 下 。 | 测试 | | baseline | 如 果 box-orient 是 inline-axis 或 horizontal， 所 有 子 元 
素 均 与 其 基线 对 齐 。 | 测试 | | stretch | 拉 伸 子 元 素 以 填充 包含 块 | 


亲 目 试 一 试 - 实例 
改变 元 素 的 box-align 值 
该 例 演示 如 何 使 用 JavaScript 来 改变 元 素 的 box-align 值 。 


«IDOCTYPE html» 
«html» 

«head» 

«style» 

.box 


( 


display: -moz-box; 

display: -webkit-box; 

display:box; 

width: 200px; 

height :100px; 

border:2px solid red; 

} 

</style> 

<script> 

function ChangeBoxAlign(x) 

{ 

// Returns the selected option's text 
var boxAlign=x.options[x.selectedIndex].text; 
var div-document.getElementById("myDiv"); 
if (div.style.MozBoxAlign! ==undefined ) 


{ 
div.style.MozBoxAlign=boxAlign; 


else if (div.style.webkitBoxAlign!--undefined) 
{ 
div.style.webkitBoxAlign=boxAlign; 
j 


else 


{ 
alert("Your browser doesn't support this example!"); 
} 

} 

</script> 

</head> 

<body> 

<div class="box" id="myDiv"> 
<b> 第 一 个 子 元 素 </b> 
<i> 第 二 个 子 元 素 </i> 

</div> 


<select onchange="ChangeBoxAlign (this);" size="6"> 
<option selected="selected" />baseline 
<option />center 
<option />end 
<option />inherit 
<option />start 
<option />stretch 
</select> 


<p><b> 注 释 : </b> 本 例 在 Internet Explorer 和 Opera PEM. </p> 


</body> 
</html> 


CSS3 box-direction 属性 


Ry 
实例 
以 反方 向 显示 div 框 的 子 元 素 : 
div 
{ 
width:350px; 
height:100px; 
border:1px solid black; 
/* Firefox */ 
display: -moz-box; 
-moz-box-direction:reverse; 
/* Safari. Opera LAR Chrome */ 
display: -webkit -box; 
-webkit -box-direction:reverse; 
fF WSC SUE 
display:box; 


box-direction:reverse; 


} 


浏览 器 支持 

目前 没有 浏览 器 支持 box-direction 属性 。 

Firefox 支持 替代 的 -moz-box-direction 属性 。 

Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-direction 属性 。 
定义 和 用 法 

box-direction 属性 规定 框 元 素 的 子 元 素 以 什么 方向 来 排列 。 


默认 值 : normal 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.boxDirection="reverse" 
语法 


box-direction: normal|reverse|inherit; 


值 描述 测试 
normal 以 默认 方向 显示 子 元 素 。 测试 
reverse 以 反方 向 显示 子 元 素 。 测试 


inherit 应 该 从 子 元 素 继承 box-direction 属性 的 值 


CSS3 box-flex 属性 


实例 


定义 两 个 可 伸缩 的 p 元 素 。 如 果 父 元 素 的 总 宽度 是 300 RR, N) #p1 的 宽度 是 
100 像素 ， 而 #p2 的 宽度 是 200 像素 : 


#p1 


-moz-box-flex:1.0; /* Firefox */ 
-webkit-box-flex:1.0; /* Safari 和 Chrome */ 
box-flex:1.0; 

border:1px solid red; 


} 

#p2 

{ 

-moz-box-flex:2.0; /* Firefox */ 
-webkit-box-flex:2.0; /* Safari 和 Chrome */ 


box-flex:2.0; 
border:1px solid blue; 


j 


浏览 器 支持 


目前 没有 浏览 器 支持 box-flex 属性 。 
Firefox 支持 替代 的 -moz-box-flex 属性 。 
Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-flex 属性 。 


定义 和 用 法 


box-flex 属性 规定 框 的 子 元 素 是 否 可 伸缩 其 尺寸 。 


提示 : 可 伸缩 元 素 能 够 随 着 框 的 缩小 或 扩大 而 缩写 或 放大 。 只 要 框 中 有 多 余 的 空 
间 ， 可 伸缩 元 素 就 会 扩展 来 填充 这 些 空间 。 


JavaScript 语法 : 


box-flex: _value_; 


值 


Value box-flex 为 4 的 子 元 素 。 


0.0 (指示 该 元 素 不 可 伸缩 ) 


object.style.boxFlex=2.0 


描述 


元 素 的 可 伸缩 行 。 柔 性 是 相对 的 ， 例 如 box-flex 为 2 的 子 元 素 两 倍 于 


CSS3 box-flex-group 属性 
浏览 如 支持 

目前 没有 浏览 器 支持 box-flex-group 属性 。 
定义 和 用 法 


box-flex-group 属性 用 于 向 柔性 分 组 分 配 可 伸缩 元 素 。 
提示 : 可 伸缩 元 素 能 够 随 着 框 的 缩小 和 扩大 而 伸缩 。 


默认 值 : 1 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.boxFlexGroup=2 


box-flex-group: _integer_; 


学 


值 Hai 
integer ”一 个 整数 。 (第 一 个 柔性 分 组 是 1， 后 面 的 柔性 分 组 是 更 大 的 值 ) 。 


CSS3 box-lines 属性 


Ry 
实例 
规定 允许 div 扩展 为 多 行 : 
div 

{ 

display:box; 
box-orient:horizontal; 


box-lines:multiple; 
width: 200px; 


浏览 右 文 持 

目前 没有 浏览 器 支持 box-lines 属性 。 

定义 和 用 法 

box-lines 属性 规定 如 果 列 超出 了 父 框 中 的 空间 ， 是 否 要 换行 显示 。 


提示 : 默认 地 ， 水 平 框 会 在 单独 的 行 中 排列 其 子 元 素 ， 而 垂直 框 会 在 单独 的 列 中 排 
列 其 子 元 素 。 


默认 值 : single 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.boxLines-"multiple" 


box-lines: single|multiple; 


值 描述 


人 
Amd). 


multiple ”人 允许 框 扩展 为 多 行 ， 以 容纳 其 所 有 子 元 素 。 


single 


CSS3 box-ordinal-group 属性 


实例 
规定 框 中 子 元 素 的 显示 次 序 : 


. box 

{ 

display:-moz-box; /* Firefox */ 

display: -webkit-box; /* Safari 和 Chrome */ 
display:box; 

border:1px solid black; 

} 

.Ord1 

{ 

margin:5px; 

-moz-box-ordinal-group:1; /* Firefox */ 
-webkit-box-ordinal-group:1; /* Safari #1 Chrome */ 
box-ordinal-group:1; 

} 

.ord2 

{ 

margin:5px; 

-moz-box-ordinal-group:2; /* Firefox */ 
-webkit-box-ordinal-group:2; /* Safari 和 Chrome */ 
box-ordinal-group:2; 


j 


浏览 器 支持 

目前 没有 浏览 器 支持 box-ordinal-group 属性 。 

Firefox 支持 替代 的 -moz-box-ordinal-group 属性 。 

Safari 和 Chrome 支持 替代 的 -webkit-box-ordinal-group 属性 。 


定义 和 用 法 

box-ordinal-group 属性 规定 框 中 子 元 素 的 显示 次 序 。 

值 更 低 的 元 素 会 显示 在 值 更 高 的 元 素 前 面 显示 。 

注释 : 分 组 值 相 同 的 元 素 ， 它 们 的 显示 次 序 取决 于 其 源 次 序 。 


JavaScript 语法 : 


object.style.boxOrdinalGroup=2 


box-ordinal-group: integer ; 


fü 


描述 测试 


integer 一 个 整数 ， 指 示 子 元 素 的 显示 次 序 。 测试 


CSS3 box-orient 属性 


Ry 

实例 

水 平 排列 div 元 素 的 子 元 素 : 
div 
{ 
width:350px; 
height:100px; 
border:1px solid black; 
/* Firefox */ 
display: -moz-box; 
-moz-box-orient:horizontal; 
/* Safari. Opera LAR Chrome */ 
display: -webkit-box; 
-webkit-box-orient:horizontal; 
/* W3C */ 
display :box; 


box-orient:horizontal; 


} 


浏览 器 支持 

目前 没有 浏览 器 支持 box-orient 属性 。 

Firefox 支持 替代 的 -moz-box-orient 属性 。 

Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-orient 属性 。 


定义 和 用 法 


box-orient 属性 规定 框 的 子 元 素 应 该 被 水 平 或 垂直 排列 。 


提示 : 水 平 框 中 的 子 元 素 从 左 向 右 进 行 显示， 而 垂直 框 的 子 元 素 从 上 向 下 进行 显 
示 。 不 过 ，box-direction 和 box-ordinal-group 能 够 改变 这 种 顺序 。 


默认 值 : inline-axis 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.boxOrient="Vertical" 
语法 


box-orient: horizontal|vertical|inline-axis|block-axis|inherit; 


值 描述 
horizontal 在 水 平行 中 从 左 向 右 排 列子 元 素 。 
vertical 从 上 向 下 垂直 排列 子 元 素 。 


inline-axis 治 着 行内 轴 来 排列 子 元 素 (ARITA horizontal) 。 
block-axis 治 着 块 轴 来 排列 子 元 素 (映射 为 vertical) 。 
inherit 应 该 从 父 元 素 继 承 box-orient 属性 的 值 。 


测试 
测试 
测试 
测试 


测试 





CSS3 box-pack 属性 


实例 

通过 一 起 使 用 box-align 和 box-pack Blt, xt div 框 的 子 元 素 进行 居中 : 
div 
{ 
width:350px; 


height:100px; 
border:1px solid black; 


/* Firefox */ 

display: -moz-box; 

-moz -box-pack:center; 
-moz-box-align:center; 


/* Safari. Opera 以 及 Chrome */ 
display: -webkit -box; 

-webkit -box-pack:center; 
-webkit-box-align:center; 

/* W3C */ 

display :box; 

box-pack:center; 
box-align:center; 


} 


浏览 器 支持 

目前 没有 浏览 器 支持 box-pack 属性 。 

Firefox 支持 替代 的 -moz-box-pack 属性 。 

Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-pack 属性 。 


定义 和 用 法 
box-pack 属性 规定 当 框 大 于 子 元 素 的 尺寸 ， 在 何 处 放置 子 元 素 。 
该 属性 规定 水 平 框 中 的 水 平 位 置 ， 以 及 垂直 框 中 的 垂直 位 置 。 


默认 值 : start 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.boxPack="center" 
语法 


box-pack: start|end|center|justify; 


测试 


学 


值 fü 
start 

Due AST 首 个 子 元 素 的 左边 缘 被 放 在 左 侧 〈 最 后 的 子 元 素 后 是 所 有 剩余 
的 空间 
最 后 子 元素 的 右边 缘 被 放 在 右 侧 〈 首 个 子 元 素 前 是 所 有 剩余 的 
zE j8) 
| 测试 | | end | 
对 于 正常 方向 的 框 ， 最 后 子 元 素 的 右边 缘 被 放 在 右 侧 〈 首 个 子 元 素 前 是 所 有 剩余 的 


空间 ) 。 


对 于 相反 方向 的 框 ， 首 个 子 元 素 的 左边 缘 被 放 在 左 侧 (最 后 子 元 素 后 是 所 有 剩余 的 
空间 ) 。 | 测试 | | center | 均等 地 分 割 多 余 空间 ， 其 中 一 半空 间 被 置 于 首 个 子 元 素 
前 ， 另 一 半 被 置 于 最 后 一 个 子 元 素 后 | 测试 | | justify | 在 每 个 子 元 素 之 间 分 割 多 余 
的 空间 〈 首 个 子 元 素 前 和 最 后 一 个 子 元 素 后 没有 多 余 的 空间 ) 。 | 测试 | 


CSS 字体 属性 (Font) 


属性 
font 
font-family 
font-size 
font-size-adjust 
font-stretch 
font-style 
font-variant 


font-weight 


描述 
在 一 个 声明 中 设置 所 有 字体 属性 。 
规定 文本 的 字体 系列 。 
规定 文本 的 字体 尺寸 。 
为 元 素 规 定 aspect 值 。 
收缩 或 拉 伸 当前 的 字体 系列 。 
文本 的 字体 样式 。 
是 否 以 小 型 大 写字 母 的 字体 显示 文本 。 
字体 的 粗细 。 


CSS 


CSS font 属性 


实例 
在 一 个 声明 中 设置 所 有 字体 属性 : 


p.exi 


font:italic arial,sans-serif; 


j 
p.ex2 


font:italic bold 12px/20px arial,sans-serif; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 font 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit", 


定义 和 用 法 

font 简写 属性 在 一 个 声明 中 设置 所 有 字体 属性 。 

注释 : 此 属性 也 有 第 六 个 值 : "line-height"， 可 设置 行 间距 。 
说 明 


这 个 简写 属性 用 于 一 次 设置 元 素 字体 的 两 个 或 更 多 方面 。 使 用 icon 等 关键 字 可 以 适 
当地 设置 元 素 的 字体 ， 使 之 与 用 户 计算 机 环境 中 的 某 个 方面 一 致 。 注 意 ， 如 果 没 有 
使 用 这 些 关键 词 ， 至 少 要 指定 字体 大 小 和 字体 系列 。 


可 以 按 顺 序 设置 如 下 属性 : 


e font-style 

e font-variant 

e font-weight 

e font-size/line-height 


e font-family 


可 以 不 设置 其 中 的 某 个 值 ， 比 如 font:100% verdana; 也 是 允许 的 。 未 设置 的 属性 会 
使 用 其 默认 值 。 


默认 值 : not specified 
继承 性 : yes 
版 本 : CSS1 
JavaScript ;& object.style.font-"italic small-caps bold 12px arial,sans- 
法 : serif" 
可 能 的 值 
fü 描述 
font-style 规定 字体 样式 。 参 阅 : font-style 中 可 能 的 值 。 
font-variant 规定 字体 有 异体。 参阅 : font-variant 中 可 能 的 值 。 
font-weight 规定 字体 粗细 。 参 阅 : font-weight 中 可 能 的 值 。 
font-size/line- 规定 字体 尺寸 和 行 高 。 参 阅 : font-size 和 line-height 中 可 
height 能 的 值 。 
font-family 规定 字体 系列 。 参 阅 : font-family 中 可 能 的 值 。 
caption 定义 被 标题 控件 〈 比 如 按钮 、 下 拉 列 表 等 ) 使 用 的 字体 。 
icon 定义 被 图 标 标 记 使 用 的 字体 。 
menu 定义 被 下 拉 列 表 使 用 的 字体 。 
message-box 定义 被 对 话 框 使 用 的 字体 。 
small-caption caption 字体 的 小 型 版 本 。 
status-bar 定义 被 窗口 状态 栏 使 用 的 字体 。 


TIY 实例 


所 有 字体 属性 在 一 个 声明 之 内 
本 例 演示 如 何 使 用 简写 属性 将 字体 属性 设置 在 一 个 声明 之 内 。 


«html» 

«head» 

«style type="text/css"> 
p.exi 

1 

font:italic arial,sans-serif; 


j 


p.ex2 
{ 


font:italic bold 12px/30px arial, sans-serif; 


</style> 
</head> 


<body> 
<p class-"ex1"»This is a paragraph. This is a paragraph. This is a 
<p class="ex2">This is a paragraph. This is a paragraph. This is a 
</body> 
</html> 





设置 使 用 "caption" 值 的 段落 字体 
本 例 演 示 如 何 设 置 使 用 "caption" 值 的 段落 字体 。 


<html> 
<body> 


<p>This is a normal paragraph</p> 
<p style="font: caption">This is a paragraph with a "caption" fonts 


</body> 
</html> 





相关 页 面 


CSS 教程 : CSS 字体 
HTML DOM 参考 手册 : font 属性 


CSS font-family 属性 


实例 
为 段落 设置 字体 : 


p 


font-family:"Times New Roman", Georgia, Serif; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 font-family 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
font-family 规定 元 素 的 字体 系列 。 


font-family 可 以 把 多 个 字体 名 称 作为 一 个 “ 回 退 "系统 来 保存 。 如 果 浏 览 器 不 支持 第 
一 个 字体 ， 则 会 尝试 下 一 个 。 也 就 是 说 ，font-family 属性 的 值 是 用 于 某 个 元 素 的 字 
体 族 名 称 或 /及 类 族 名 称 的 一 个 优先 表 。 浏 览 器 会 使 用 它 可 识别 的 第 一 个 值 。 


有 两 种 类 型 的 字体 系列 名 称 : 


e 指定 的 系列 名 称 : 具体 字体 的 名 称 ， 比 如 : "times", "courier", "arial". 
e. 通常 字体 系列 名 称 : 比如 : "serif'、"sans- 
serif", "cursive", "fantasy", "monospace" 


提示 : 使 用 逗号 分 割 每 个 值 ， 并 始终 提供 一 个 类 族 名 称 作 为 最 后 的 选择 。 


注意 : 使 用 某 种 特定 的 字体 系列 (Geneva) 完全 取决 于 用 户 机 器 上 该 字体 系列 是 
2 ; 这 个 属性 没有 指示 任何 字体 下 载 。 因 此 ， 强 烈 推荐 使 用 一 个 通用 字体 系列 
作为 后 路 。 


默认 值 : not specified 


继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.fontFamily-"arial,sans-serif" 


可 能 的 值 


EF 


值 THX 
e family-name 
e generic-family 
| 
用 于 某 个 元 素 的 字体 族 名 称 或 /及 类 族 名 称 的 一 个 优先 表 。 


默认 值 : 取决 于 浏览 器 。 
| | inherit | 规定 应 该 从 父 元 素 继 承 字体 系列 。 | 


TIY 实例 


设置 文本 的 字体 
本 例 演示 如 何 设置 文本 字体 。 


«html» 

«head» 

«style type="text/css"> 

p.serif{font-family:"Times New Roman", Georgia, Serif} 
p.sansserif{font-family:Arial, Verdana, Sans-serif} 
</style> 

</head> 


<body> 

<hi>CSS font-family</h1> 

<p class="serif">This is a paragraph, shown in the Times New Roman 
«p class-"sansserif"»This is a paragraph, shown in the Arial font.- 


«/body» 
«/html» 


_— ————————— e eÁÓt 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 
HTML DOM 参考 手册 : font 属性 





CSS font-size 属性 


实例 
设置 不 同 的 HTML 元 素 的 尺寸 : 
hi {font-size:250%; } 


h2 {font-size:200%; } 
p {font-size:100%} 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 font-size 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
font-size 属性 可 设置 字体 的 尺寸 。 
说 明 


该 属性 设置 元 素 的 字体 大 小 。 注 意 ， 实 际 上 它 设置 的 是 字体 中 字符 框 的 高 度 ; 实际 
的 字符 字形 可 能 比 这 些 框 高 或 矮 (通常 会 矮 ) 。 


各 关键 字 对 应 的 字体 必须 比 一 个 最 小 关键 字 相 应 字体 要 高 ， 并 且 要 小 于 下 一 个 最 大 
关键 字 对 应 的 字体 。 


默认 值 : medium 
继承 性 : yes 


JavaScript 语法 : object.style.fontSize="larger 


可 能 的 值 
t 描述 


xx-small 
x-small 
small 
medium 
large 
x-large 
xx-large 


| 
把 字体 的 尺寸 设置 为 不 同 的 尺寸 ， 从 xx-small 到 xx-large. 
默认 值 : medium。 


| | smaller | 把 font-size 设置 为 比 父 元 素 更 小 的 尺寸 。 | | larger | 把 font-size 设置 

为 比 父 元 素 更 大 的 尺寸 。 | | length | 8 font-size 设置 为 一 个 固定 的 值 。 | | %| 把 

font-size 设置 为 基于 父 元 素 的 一 个 百分比 值 。 | | inherit | 规定 应 该 从 父 元 素 继 承 字 
体 尺 寸 。 | 


TIY 实例 


设置 字体 尺寸 
本 例 演 示 如 何 设置 字体 尺寸。 


<html> 

<head> 

<style type="text/css"> 
hi (font-size: 300%} 

h2 (font-size: 200%} 

p (font-size: 100%} 
</style> 

</head> 


<body> 
<hi>This is header 1</h1i> 
<h2>This is header 2</h2> 
<p>This is a paragraph</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 
HTML DOM 参考 手册 : fontSize 属性 


CSS font-size-adjust 属性 


实例 
设置 不 同 的 HTML 元 素 的 font-size-adjust 属性 : 


hi 


{ 
font-size-adjust:0.58; 


j 


font-size-adjust:0.60; 


浏览 器 支持 


Internet Explorer 不 支持 font-size-adjust 属性 。 


定义 和 用 法 


font-size-adjust 属性 为 某 个 元 素 规定 一 个 aspect 值 ， 这 样 就 可 以 保持 首选 字体 的 
x-height. 


说 明 


字体 的 小 写字 母 "x" BARS "font-size" 高 度 之 间 的 比率 被 称 为 一 个 字体 的 aspect 
值 。 当 字体 拥有 高 的 aspect 值 时 ， 那 么 当 此 字体 被 设置 为 很 小 的 尺寸 时 会 更 易 阅 
读 。 举 例 : Verdana 的 aspect 值 是 0.58 (意味 着 当 字体 尺寸 为 100px 时 ， 它 的 x- 
height 是 58px ) 。Times New Roman 的 aspect 值 是 0.46。 这 就 意味 着 Verdana 
在 小 尺寸 时 比 Times New Roman 更 易 阅 读 。 


默认 值 : none 


继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.fontSizeAdjust="0.70" 
可 能 的 值 
值 描述 
none 默认 。 如 果 此 字体 不 可 用 ， 则 不 保持 此 字体 的 x-height。 
number 


定义 字体 的 aspect 值 比率 。 


可 使 用 的 公式 : 


首选 字体 的 字体 尺寸 * (font-size-adjust 值 / 可 用 字体 的 aspect 值 ) = 可 应 用 到 可 
用 字体 的 字体 尺寸 


举例 : 


如 果 14px 的 Verdana (aspect 值 是 0.58) 不 可 用 ， 但 是 某 个 可 用 的 字体 的 aspect 
值 是 0.46， 那 么 替代 字体 的 尺寸 籽 是 14 * (0.58/0.46) = 17.65px。 


| 
TIY 实例 


使 用 font-size-adjust 设置 字体 尺寸 
本 例 演示 如 何 使 用 font-size-adjust 设置 字体 尺寸 。 


«html» 

«head» 

«style type="text/css"> 

h1 {font-size-adjust: 0.50} 
h2 {font-size-adjust: 0.40} 
p {font-size-adjust: 0.60} 
</style> 

</head> 

<body> 


<hi>This is header 1«/hi» 
<h2>This is header 2</h2> 
<p>This is a paragraph</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 
HTML DOM 参考 手册 : fontSizeAdjust 属性 


CSS font-stretch 属性 


实例 
设置 HTML 元 素 的 font-stretch 属性 : 


hi 
i 


font-stretch:ultra-condensed; 


j 


浏览 器 支持 
IE Firefox Chrome 


所 有 主流 浏览 器 都 不 支持 font-stretch 属性 。 


定义 和 用 法 


font-stretch 属性 可 对 当前 的 font-family 进行 伸 


默认 值 : normal 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.fontStretch="ultra-expanded" 


可 能 的 值 


Safari 


Opera 


值 描述 
normal 默认 值 。 把 缩放 比例 设置 为 标准 。 
wider 把 伸展 比例 设置 为 更 进一步 的 伸展 值 
narrower 把 收缩 比例 设置 为 更 进一步 的 收缩 值 


ultra-condensed 
extra-condensed 
condensed 
semi-condensed 
semi-expanded 
expanded 
extra-expanded 
ultra-expanded 


| 
设置 font-family 的 缩放 上 比例。 
"ultra-condensed" 是 最 宽 的 值 ， 而 "ultra-expanded" 是 最 窄 的 值 。 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 
HTML DOM 参考 手册 : fontStretch 属性 


CSS font-style 属性 


实例 
为 三 个 段落 设置 不 同 的 字体 样式 : 


p.normal {font-style:normal; } 
p.italic {font-style:italic;} 
p.oblique {font-style:oblique; } 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 font-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
font-style 属性 定义 字体 的 风格 。 
说 明 
该 属性 设置 使 用 斜体 、 倾 斜 或 正常 字体 。 斜 体 字体 通 常 定义 为 字体 系列 中 的 一 个 单 
独 的 字体 。 理 论 上 讲 ， 用 户 代 理 可 以 根据 正常 字体 计算 一 个 斜体 字体 。 


默认 值 : normal 
继承 性 : yes 


JavaScript 语法 : object.style.fontStyle="italic" 


可 能 的 值 


值 描述 
normal 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 。 
italic 浏览 器 会 显示 一 个 斜体 的 字体 样式 。 
oblique 浏览 器 会 显示 一 个 倾斜 的 字体 样式 。 
inherit 规定 应 该 从 父 元 素 继 承 字 体 样 式 。 


TIY 实例 


设置 字体 风格 
本 例 演示 如 何 设 置 字体 风格 。 


«html» 

«head» 

«style type="text/css"> 

p.normal {font-style:normal} 

p.italic {font-style:italic} 

p.oblique {font-style:oblique} 

</style> 

</head> 

<body> 

<p class="normal">This is a paragraph, normal.</p> 
<p class="italic">This is a paragraph, italic.</p> 
<p class="oblique">This is a paragraph, oblique.</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 
HTML DOM 参考 手册 : fontStyle 属性 


CSS font-variant 属性 


实例 


把 段落 设置 为 小 型 大 写字 母 字体 : 


p.small 
{ 
font-variant:small-caps; 
} 
m - OO 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 font-variant 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

font-variant 属性 设置 小 型 大 写字 母 的 字体 显示 文本 ， 这 意味 着 所 有 的 小 写字 母 均 会 


被 转换 为 大 写 ， 但 是 所 有 使 用 小 型 大 写字 体 的 字母 与 其 余 文 本 相 比 ， 其 字体 尺寸 更 


小 。 
说 明 


该 属性 主要 用 于 定义 小 型 大 写字 母 文 本 。 理 论 上 ， 用 户 代理 可 以 根据 正常 字体 计算 
出 小 型 大 写字 母 字体 。 


默认 值 : normal 


继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.fontVariant="small-caps" 


可 能 的 值 


值 描述 
normal 默认 值 。 浏 览 器 会 显示 一 个 标准 的 字体 。 
small-caps 浏览 器 会 显示 小 型 大 写字 母 的 字体 。 
inherit 规定 应 该 从 父 元 素 继承 font-variant 属性 的 值 。 
TIY 实例 
设置 字体 的 异体 


本 例 演示 如 何 设置 字体 的 异体 。 


<html> 

<head> 

<style type="text/css"> 

p.normal {font-variant: normal} 
p.small {font-variant: small-caps} 
</style> 

</head> 


<body> 
<p class="normal">This is a paragraph</p> 
<p class-"small"»This is a paragraph</p> 
</body> 


</html> 


相关 页 面 


W3School 前 端 教程 合集 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 
HTML DOM 参考 手册 : fontVariant 属性 


CSS font-variant 属性 1098 


CSS font-weight 属性 


实例 
设置 三 个 段落 的 字体 的 粗细 : 


p.normal {font-weight :normal; } 
p.thick {font-weight:bold;} 
p.thicker {font-weight :900; } 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 font-weight 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

font-weight 属性 设置 文本 的 粗细 。 

说 明 

该 属性 用 于 设置 显示 元 素 的 文本 中 所 用 的 字体 加 粗 。 数 字 值 400 相当 于 关键 字 
normal, 700 等 价 于 bold。 每 个 数字 值 对 应 的 字体 加 粗 必 须 至 少 与 下 一 个 最 小 数字 
一 样 细 ， 而 且 至 少 与 下 一 个 最 大 数字 一 样 粗 。 


默认 值 : normal 
继承 性 : yes 


JavaScript 语法 : object.style.fontWeight="900" 


可 能 的 值 


iE 


值 描 ; 
normal 默认 值 。 定 义 标 准 的 字符 。 
bold 定义 粗 体 字符 。 
bolder 定义 更 粗 的 字符 。 
lighter 定义 更 细 的 字符 。 


e 

一 
e 
eo 


200 
300 
400 
500 
600 
700 
800 
900 


| 定义 由 粗 到 细 的 字符 。400 等 同 于 normal, m 700 等 同 于 bold. | | inherit | 
规定 应 该 从 父 元 素 继承 字体 的 粗细 。 | 


TIY 实例 


设置 字体 的 粗细 
本 例 演示 如 何 设置 字体 的 粗细 。 


<html> 

<head> 

<style type="text/css"> 
p.normal {font-weight: normal} 
p.thick {font-weight: bold} 
p.thicker {font-weight: 900} 
</style> 

</head> 


<body> 
<p class="normal">This is a paragraph</p> 


<p class="thick">This is a paragraph</p> 


<p class="thicker">This is a paragraph</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 
HTML DOM 参考 手册 : fontWeight 属性 


内 容 生 成 (Generated Content) 


属性 描述 CSS 
以 及 :after 伪 元 素 配 合 使 用 ， 来 插入 生成 2 
容 。 

counter- dab ue ANB E ANLASS 
EE 递增 或 递减 一 个 或 多 个 计数 器 。 2 
counter-reset 创建 或 重 置 一 个 或 多 个 计数 器 。 2 
quotes 设置 柑 套 引用 的 引号 类 型 。 2 
m 允许 被 替换 元 素 仅 仅 是 对 象 的 矩形 区 域 ， 而 不 是 整个 

P 对 象 。 


从 流 中 删除 元 素 ， 然 后 在 文档 中 后 面 的 点 上 重新 插 


o 


: 定 元 素 页 + > i eee. EJ 
page-policy o 页 面 的 occurrence 应 用 于 计数 器 还 是 3 


move-to 


CSS content 属性 


实例 
下 面 的 例子 在 每 个 链接 后 插入 括 号 中 的 URL : 


a:after 


{ 
content: " (" attr(href) ")"; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 content 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 
content 属性 。 


定义 和 用 法 
content 属性 与 :before 及 :after 伪 元 素 配 合 使 用 ， 来 插入 生成 内 容 。 
说 明 


该 属性 用 于 定义 元 素 之 前 或 之 后 放置 的 生成 内 容 。 默 认 地 ， 这 往往 是 行内 内 容 ， 不 
过 该 内 容 创建 的 框 类 型 可 以 用 属性 display 控制 。 


D 


默认 值 : normal 
继承 性 : no 


JavaScript 语法 : object.style.content="url(beep.wav)" 


可 能 的 值 


值 描述 
none 
normal 
content specifications 
inherit 规定 应 该 从 父 元 素 继承 content 属性 的 值 。 
相 天 页 面 


CSS 参考 手册 : CSS :before 伪 元 素 
CSS 参考 手册 : CSS :after 伪 元 素 
HTML DOM 参考 手册 : content 属性 


CSS counter-increment 属性 


实例 
对 部 分 和 子 部 分 进行 编号 (上 比如 "Section 1". "1.1". "1.2") 的 方法 : 


body 
{ 


counter-reset:section; 


} 


h1 
{ 


counter -reset:subsection; 


} 
hi:before 

content:"Section " counter(section) ". "; 
counter-increment:section; 


j 


h2:before 
{ 


counter-increment:subsection; 
content:counter(section) "." counter(subsection) " "; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 counter-increment 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 
counter-increment 属性 。 


定义 和 用 法 


counter-increment 属性 设置 某 个 选取 器 每 次 出 现 的 计数 器 增 量 。 默 认 


mi 
fala 
alll 


说 明 


利用 这 个 属性 ， 计 数 器 可 以 递增 〈 或 递减 ) 某 个 值 ， 这 可 以 是 正 值 或 负 值 。 如 果 没 
有 提供 number 值 ， 则 默认 为 1。 

注释 : 如 果 使 用 了 "display: none"， 则 无 法 增加 计数 。 如 使 用 "visibility: hidden", 
则 可 增加 计数 。 


默认 值 : none 
继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.counterlncrement-"subsection" 
LA 
可 能 的 值 
值 描述 
none 默认 。 选 择 器 无 计数 器 增 量 。 
id number 


id 定义 将 增加 计数 的 选择 器 、id 或 class. 
number 定义 增 量 。number 可 以 是 正 数 、 需 或 者 负数 。 
| | inherit | 规定 应 该 从 父 元 素 继承 counter-increment 属性 的 值 。 | 


相关 页 面 


CSS 参考 手册 : CSS :before 伪 元 素 
CSS 参考 手册 : CSS :after 伪 元 素 
CSS 参考 手册 : content 属性 

CSS 参考 手册 : counter-reset 属性 


CSS counter-reset 属性 


实例 
对 部 分 和 子 部 分 进行 编号 〈 比 如 "Section 1". "1.1". "1.2") 的 方法 : 


body 
{ 


counter-reset:section; 


} 


h1 
{ 


counter -reset: subsection; 


} 
hi:before 

content:"Section " counter(section) ". "; 
counter-increment:section; 


} 
h2: before 
{ 


counter-increment:subsection; 
content:counter(section) "." counter(subsection) " "; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 counter-reset 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 
counter-reset 属性 。 


定义 和 用 法 
counter-reset 属性 设置 某 个 选择 器 出 现 次 数 的 计数 器 的 值 。 默 认为 0。 


利用 这 个 属性 ， 计 数 器 可 以 设置 或 重 置 为 任何 值 ， 可 以 是 正 值 或 负 值 。 如 果 没 有 提 
f& number， 则 默认 为 0。 


注释 : 如 果 使 用 "display: none"， 则 无 法 重 置 计数 器 。 如 果 使 用 visibility: 
hidden"， 则 可 以 重 置 计数 器 。 


默认 值 : none 
继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.counterReset-"subsection" 
LA 
可 能 的 值 
值 描述 
none 默认 。 不 能 对 选择 器 的 计数 器 进行 重 置 。 
id number 


id 定义 重 置 计数 器 的 选择 器 、id EX class. 
number 可 设置 此 选择 器 出 现 次 数 的 计数 器 的 值 。 可 以 是 正 数 、 雪 或 负数 。 
| | inherit | 规定 应 该 从 父 元 素 继承 counter-reset 属性 的 值 。 | 


相关 页 面 


CSS 参考 手册 : CSS :before 伪 元 素 
CSS 参考 手册 : CSS :after 伪 元 素 

CSS 参考 手册 : content 属性 

CSS 参考 手册 : counter-increment 属性 


CSS quotes 属性 


实例 


q:lang(en) 
{ 


quotes: rur gno naa Wn 


j 


HTML 代码 : 


«html lang="en"> 

«head» 

«/head» 

«body» 

<p><q>This is a <q>big</q> quote</q></p> 
</body> 

</html> 


输出 : 


"This is a 'big' quote" 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 quotes 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 
quotes 属性 。 


定义 和 用 法 


quotes 属性 设置 岩 套 引用 (embedded quotation) 的 引号 类 型 。 





默认 值 : not specified 


继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.quotes="none" 


可 能 的 值 
值 描述 


会 产生 任何 引号 。 


string string 
string string 


定义 要 使 用 的 引号 。 
前 两 个 值 规定 第 一 级 引用 斤 套 ， 后 两 个 值 规定 下 一 级 引号 庶 套 。 
| | inherit | 规定 应 该 从 父 元 素 继 承 quotes 属性 的 值 。 | 



































oes 

引号 字符 

Result Description Entity Number 

k double quote &#34; 
single quote &£39; 

< single, left angle quote &#8249; 

> single, right angle quote &#8250; 

« double, left angle quote &#171; 

» double, right angle quote &#187; 

: left quote (single high-6) &#8216; 

d right quote (single high-9) &28217; 

j left quote (double high-6) &#8220; 

5 right quote (double high-9) &#8221; 





E double quote (double low-9) &#8222; 


相关 页 面 


HTML DOM 参考 手册 : quotes 属性 





站 QC ~ rre Eh 
Loo q uotes B Tt 


规定 "content" 属性 的 "open-quote" 和 "close-quote" 的 值 
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Grid 属性 


属性 +85 
grid-columns 规定 网 格 中 每 个 列 的 宽度 。 3 
grid-rows 规定 网 格 中 每 个 列 的 高 度 。 3 


CSS 


iE 


el 


CSS3 grid-columns 属性 


实例 


在 div 元 素 中 部 添加 一 个 网 格 行 ， 距 右 侧 200 像素 处 添加 另 一 个 ， 在 余下 空间 的 中 
间 青 添加 一 个 : 


div 


grid-columns:50% * * 200px; 


浏览 器 支持 


目前 没有 浏览 器 支持 grid-columns。 


定义 和 用 法 
grid-columns 属性 网 格 中 每 列 的 宽度 。 


提示 : 使 用 网 格 系统 对 于 打印 设计 病 来 说 具有 巨大 的 价值 。 现 在 相同 的 改变 被 应 用 
到 在 线 内 容 上 。 网 格 属性 提供 了 在 可 伸缩 网 格 中 调整 标题 、 文 本 和 图 片 尺寸 和 位 置 
的 能 力 。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.gridColumns="50% 200px" 


grid-columns: _length_|_%_|none|inherit; 


W3School 前 端 教程 合 


值 描述 
length 参考 包含 块 的 网 格 。 
% 参考 包含 块 的 宽度 。 
none 
inherit 
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CSS3 grid-rows 属性 


实例 

定义 100 像素 的 标题 行 ， 并 按 需 添加 多 个 额外 的 行 ， 高 度 交 替 为 30 和 60 像素 : 
div 
i 


grid-rows:100px (30px 60px); 
} 


浏览 器 支持 


目前 没有 浏览 器 支持 grid-rows。 


定义 和 用 法 
grid-rows 属性 规定 网 格 中 每 行 的 高 度 。 


提示 : 使 用 网 格 系统 对 于 打印 设计 病 来 说 具有 巨大 的 价值 。 现 在 相同 的 改变 被 应 用 
到 在 线 内 容 上 。 网 格 属性 提供 了 在 可 伸缩 网 格 中 调整 标题 、 文 本 和 图 片 尺 十 和 位 置 
的 能 力 。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.gridRows="100px (30px 60px)" 


grid-rows: _length_|_%_|none|inherit; 


W3School 前 端 教 程 合 


值 描述 
length 参考 包含 块 的 网 格 。 
% 参考 包含 块 的 高 度 。 
none 
inherit 
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Hyperlink 属性 


属性 
target 


target- 
name 


target-new 


target- 
position 


Ef 


jay 
简写 属性 ， 设 置 target-name、targetr-new 以 及 target- 
position 属 性 。 


规定 在 何 处 打开 链接 〈 链 接 的 目标 ) o 


规定 目标 链接 在 新 窗口 还 是 在 已 有 窗口 的 新 标签 页 中 打 
开 。 


规定 在 何 处 放置 新 的 目标 链接 。 


CSS 


CSS3 target 属性 


实例 
在 新 窗口 中 打开 所 有 超 链接 ， 并 在 所 有 其 他 标签 页 /窗口 上 面 放置 新 窗 


a 


{ 


target:new front; 


} 


浏览 器 支持 


目前 没有 浏览 器 支持 target。 


定义 和 用 法 
target 属性 是 一 个 简写 属性 ， 用 于 设置 以 下 属性 : 


e target-name 
e target-new 
e target-position 


默认 值 : current window above 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.target="new front" 


语法 


target: _target-name_ _target-new_ _target-position_; 


值 描述 
target-name LEE RFT A RHE (target destination) 。 
target-new 规定 应 该 在 新 窗口 或 已 有 窗口 的 新 标签 页 中 打开 超 链 接 。 
target-position ”规定 在 何 处 放置 新 的 目的 地 链接 。 


注释 : target-new 和 target-position 值 只 有 在 target-name 值 创建 新 标签 页 或 新 窗 
口中 有 效 。 


CSS3 target-name 属性 


实例 
在 新 窗口 中 打开 所 有 超 链接 : 


a 


{ 


target-name: new, 


} 


浏览 器 支持 


目前 没有 浏览 器 支持 target-name。 


ii 3 
target-name 属性 规定 在 何 多 打开 超 链 接 (target destination), 
默认 值 : current 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.targetName="new" 


语法 


target-name: current|root|parent|new|modal| name ; 


值 
current 


root 
parent 


new 


modal 


name 


描述 
在 链接 所 在 的 框架 、 标 签 页 或 窗口 中 打开 超 链 接 。 
在 当前 标签 页 或 窗口 中 超 链 接 。 
在 父 框架 中 打开 超 链 接 。 如 果 当 前 框架 没有 父 框 架 ， 则 将 该 值 视 作 


root。 
创建 新 的 目的 地 (参阅 target-new) 。 
在 新 的 (暂时 创建 的 ) 模 态 窗口 中 打开 新 窗口 。 


在 已 有 框架 、 窗 口 或 标签 页 中 打开 链接 。 如 果 name 目的 地 不 存在 ， 
则 用 该 名 称 创建 新 的 目的 地 。 


CSS3 target-new 属性 


实例 
在 新 标签 页 而 不 是 新 窗口 中 打开 超 链接 : 


a 


{ 
target-name:new; 
target-new:tab; 


I 

浏览 器 文 持 

目前 没有 浏览 器 支持 target-new. 
定义 和 用 法 


target-new 属性 规定 在 新 窗口 还 是 新 标签 页 或 已 有 窗口 中 打开 新 的 目的 地 链接 。 
注释 : target-new 属性 只 有 在 target-name 属性 创建 新 标签 页 或 新 窗口 时 有 效 。 


默认 值 : window 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.targetNew="tab" 


语法 


target-new: window|tab|none; 


值 描述 
window 在 新 窗口 中 打开 超 链接 。 
tab 在 已 有 窗口 的 新 标签 页 中 打开 超 链接 。 


none 不 创建 新 的 目的 地 。 


CSS3 target-position 属性 


实例 
在 新 窗口 中 打开 超 链接 ， 并 在 所 有 其 他 标签 页 /窗口 之 前 放置 新 的 窗口 : 


a 


{ 


target-name: new; 
target-position: front; 


} 


浏览 器 文 持 

目前 没有 浏览 器 支持 target-position。 

定义 和 用 法 

target-position 属性 规定 在 何 处 放置 新 的 目的 地 链接 。 

注释 : target-position 属性 只 有 在 target-name 属性 创建 新 标签 页 或 新 窗口 时 有 


AXo 


默认 值 : above 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.targetPosition-"front" 


target-position: above|behind|front|back; 


值 
above 
behind 
front 


back 


在 当前 标签 页 /窗口 之 前 放置 新 的 目的 地 标签 页 /窗口 。 
在 当前 标签 页 /窗口 之 后 放置 新 的 目的 地 标签 页 /窗口 。 
在 所 有 其 他 标签 页 /窗口 之 前 放置 新 的 目的 地 标签 页 /窗口 。 
在 所 有 其 他 标签 页 /窗口 之 后 放置 新 的 目的 地 标签 页 /窗口 。 


CSS SIRE (List) 


属性 描述 CSS 
list-style 在 一 个 声明 中 设置 所 有 的 列表 属性 。 1 
list-style-image 将 图 象 设置 为 列表 项 标记 。 1 
list-style-position 设置 列表 项 标记 的 放置 位 置 。 1 
list-style-type 设置 列表 项 标记 的 类 型 。 1 


marker-offset 2 


CSS list-style 属性 


实例 


把 图 像 设 置 为 列表 中 的 列表 项 目标 记 : 


ul 
list-style:square inside url('/i/arrow.gif'); 
j 
\、 - OO 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 list-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
list-style 简写 属性 在 一 个 声明 中 设置 所 有 的 列表 属性 。 
说 明 


该 属性 是 一 个 简写 属性 ， 泗 瘟 了 所 有 其 他 列表 样式 属性 。 由 于 它 应 用 到 所 有 display 
为 list-item 的 元 素 ， 所 以 在 普通 的 HTML 和 XHTML 中 只 能 用 于 i 元 素 ， 不 过 实际 
上 它 可 以 应 用 到 任何 元 素 ， 并 由 list-item 元 素 继 承 。 


可 以 按 顺 序 设置 如 下 属性 : 


e list-style-type 
e list-style-position 
e list-style-image 


可 以 不 设置 其 中 的 某 个 值 ， 上 比如 "list-style:circle inside;" 也 是 允许 的 。 未 设置 的 属 
性 会 使 用 其 默认 值 。 


默认 值 : disc outside none 


继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.listStyle="decimal inside" 
A 
可 能 的 值 
fü 描述 
list-style-type ”设置 列表 项 标记 的 类 型 。 参 阅 : list-style-type 中 可 能 的 值 。 
list-style- 设置 在 何 处 放置 列表 项 标记 。 参 阅 : list-style-position 中 可 能 
position 的 值 。 
list-style- 使 用 图 像 来 替换 列表 项 的 标记 。 参 阅 : list-style-image 中 可 
image 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继 承 list-style 属性 的 值 。 


TIY 实例 


在 一 个 声明 中 定义 所 有 的 列表 属性 
本 例 演示 将 所 有 针对 列表 的 属性 设置 于 一 个 简写 属性 。 


<html> 

<head> 

<style type="text/css"> 
ul 


list-style: square inside url('/i/eg arrow.gif') 


} 
</style> 
</head> 


<body> 

<ul> 
<1i> 咖 啡 </1i> 
<]i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
</ul> 

</body> 


</html> 


相关 页 面 


CSS 教程 : CSS WH 
HTML DOM 参考 手册 listStyle 属性 


CSS list-style-image 属性 


实例 
把 图 像 设 置 为 列表 中 的 项 目标 记 : 


ul 


list-style-image:url("/i/arrow.gif"); 
list-style-type:square; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 list-style-image 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
list-style-image 属性 使 用 图 像 来 蔡 换 列表 项 的 标记 。 
说 明 


这 个 属性 指定 作为 一 个 有 序 或 无 序列 表 项 标志 的 图 像 。 图 像 相 对 于 列表 项 内 容 的 放 
置 位 置 通 常 使 用 list-style-position 属性 控制 。 


注释 : 请 始终 规定 一 个 "list-style-type" 属性 以 防 图 像 不 可 用 。 


默认 值 : none 


继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.listStylelmage="url('/images/blueball.gif')" 
LA 
可 能 的 值 
值 描述 
URL 图 像 的 路 径 。 
none 默认 。 无 图 形 被 显示 。 


inherit 规定 应 该 从 父 元 素 继承 list-style-image 属性 的 值 。 


TIY 实例 


将 图 像 作 为 列表 项 标记 
本 例 演示 如 何 将 图 像 作 为 列表 项 标记 。 


«html» 

«head» 

«style type="text/css"> 
ul 

{ 


list-style-image: url('/i/eg arrow.gif') 


</style> 
</head> 


<body> 

<ul> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 
<]1i> 可 口 可 乐 </1i> 
</ul> 

</body> 


</html> 


相关 页 面 


CSS 教程 CSS 列表 
CSS 参考 手册 : CSS list-style 属性 
HTML DOM 参考 手册 listStylelmage 属性 


CSS list-style-position 属性 


实例 
规定 列表 中 列表 项 目标 记 的 位 置 : 


ul 


list-style-position:inside; 


} 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 list-style-position 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
list-style-position 属性 设置 在 何 处 放置 列表 项 标记 。 
说 明 
该 属性 用 于 声明 列表 标志 相对 于 列表 项 内 容 的 位 置 。 外 部 (outside) 标志 会 放 在 离 
列表 项 边框 边界 一 定 距离 你， 不 过 这 距离 在 CSS 中 未 定义 。 内 部 (inside) 标志 处 
理 为 好 像 它 们 是 插入 在 列表 项 内 容 最 前 面 的 行内 元 素 一 样 。 


默认 值 : outside 
继承 性 : yes 


JavaScript 语法 : object.style.listStylePosition="inside" 


可 能 的 值 


值 描述 
inside 列表 项 目标 记 放 置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 。 


默认 值 。 保 持 标记 位 于 文本 的 左 侧 。 列 表 项 目标 记 放 置 在 文本 以 外 ， 
且 环 绕 文 本 不 根据 标记 对 齐 。 


inherit ” 规定 应 该 从 父 元 素 继承 list-style-position 属性 的 值 。 


outside 


TIY 实例 


放置 列表 标记 
本 例 演示 在 何 处 放置 列表 标记 。 


<html> 

<head> 

<style type="text/css"> 
ul.inside 

{ 

list-style-position: inside 


} 


ul.outside 


í 


list-style-position: outside 


</style> 
</head> 


<body> 

<p> 该 列表 的 list-style-position MW’ "inside": </p> 
<ul class="inside"> 

<li>Earl Grey Tea - 一 种 黑 颜色 的 茶 </1i> 


<li>Jasmine Tea - 一 种 神奇 的 “全 功能 ” 茶 </1i> 
<li>Honeybush Tea - 一 种 伟人 愉快 的 果 味 茶 </1i> 
</ul> 


<p> 该 列表 的 list-style-position JÆ "outside": </p> 
<ul class="outside"> 
<li>Earl Grey Tea - 一 种 黑 颜色 的 茶 </1i> 


<li>Jasmine Tea - 一 种 神奇 的 “全 功能 ”" 茶 </1i> 
<li>Honeybush Tea - 一 种 伟人 愉快 的 果 味 茶 </1i> 
</ul> 

</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 列表 
CSS 参考 手册 : CSS list-style 属性 
HTML DOM 参考 手册 : listStylePosition 属性 


CSS list-style-type 属性 


实例 
设置 不 同 的 列表 样式 : 


ul.circle {list-style-type:circle;} 
ul.square {list-style-type:square; } 
ol.upper-roman {list-style-type: upper -roman; } 
ol.lower-alpha {list-style-type: lower -alpha; } 


(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 list-style-type 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "decimal- 
leading-zero", "lower-greek", "lower-latin", "upper- 
latin", "armenian", "georgian" 或 "inherit"。 


= . 3 
list-style-type 属性 设置 列表 项 标记 的 类 型 。 
默认 值 : disc 
继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.listStyleType-"square" 


可 能 的 值 


CSS2 的 值 : 


值 描述 
none 无 标记 。 
disc 默认 。 标 记 是 实心 圆 。 
circle 标记 是 空心 圆 。 
square 标记 是 实心 方块 。 
decimal 标记 是 数字 。 


decimalleading- ”0 开头 的 数字 标记 。(01, 02, 03, 等 。) 


zero 
lower-roman 小 写 罗 马 数字 (i, ii, iii, iv, v, 等 。) 

upper-roman 大 写 罗 马 数字 (1, ll, ill, IV, V, 等 。) 

[ED marker is lower-alpha (a, b, c, d, e, 
a a ae marker is upper-alpha (A, B, C, D, E, 
lower-greek \\ 5 75 he (alpha, beta, gamma, 等 。) 

lower-latin 小 写 拉 丁字 母 (a, b, c, d, e, 等 。) 

upper-latin AST $A, B,C, D,E, & ) 

hebrew 传统 的 希 伯 来 编号 方式 

armenian 传统 的 亚美尼亚 编号 方式 

georgian 传统 的 乔治 亚 编号 方式 (an, ban, gan, 等 。) 
cjk-ideographic 简单 的 表意 数字 

hiragana 标记 是 : a,i,u,e,0,ka, ki, 等 。 (日 文 片 假名 ) 
katakana 标记 是 : A, 1, U, E, O, KA, Kl, 等 。 (日 文 片 假名 ) 
hiragana-iroha 标记 是 i, ro, ha, ni, ho, he, to, 等 。 (日 文 片 假名 ) 


katakana-iroha 2 : 1, RO, HA, NI, HO, HE, TO, 等 。 (日 文 片 假 


CSS2.1 的 值 : 


disc | circle | square | decimal | decimal-leading-zero | 
lower-roman | upper-roman | lower-greek | lower-latin | upper-latir 
armenian | georgian | none | inherit 


«| E 











TIY 实例 


在 无 序列 表 中 的 不 同类 型 的 列表 标记 
本 例 演示 在 CSS 中 不 同类 型 的 列表 项 标记 。 


«html» 

«head» 

«style type="text/css"> 

ul.disc (list-style-type: disc) 
ul.circle {list-style-type: circle} 
ul.square {list-style-type: square} 
ul.none {list-style-type: none} 
</style> 

</head> 


<body> 

<ul class="disc"> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
</ul> 


<ul class="circle"> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
</ul> 


«ul class="square"> 
<1i> 咖 啡 </1i> 
<li>#</1li> 

<li> H OA g </li> 
</ul> 


<ul class="none"> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
</ul> 

</body> 


</html> 


在 有 序列 表 中 不 同类 型 的 列表 项 标记 


本 例 演 示 在 CSS 中 不 同类 型 的 列表 项 
<html> 
<head> 


<style type="text/css"> 
ol.decimal {list-style-type: 
ol.lroman {list-style-type: 
ol.uroman {list-style-type: 
ol.lalpha {list-style-type: 
ol.ualpha {list-style-type: 
</style> 

</head> 


<body> 

<ol class="decimal"> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
</ol> 


«ol class-'"lroman"» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
</ol> 


<ol class="uroman"> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
</ol> 


<ol class="lalpha"> 
<1i> 咖 啡 </1i> 
<li>#</1i> 

<]1i> 可 口 可 乐 </1i> 
</ol> 


<ol class="ualpha"> 
<1i>iE</1i> 
<li>#</li> 

<1i> 可 口 可 乐 </1i> 
</ol> 

</body> 


</html> 


所 有 的 列表 样式 类 型 


标记 。 


decimal} 

lower - roman} 
upper - roman} 
lower -alpha} 
upper -alpha} 


本 例 演示 在 CSS 中 所 有 不 同类 型 的 列表 项 标记 。 


<html> 

<head> 

<style type="text/css"> 

ul.none {list-style-type: none} 

ul.disc {list-style-type: disc} 

ul.circle {list-style-type: circle} 

ul.square {list-style-type: square} 

ul.decimal {list-style-type: decimal} 
ul.decimal-leading-zero {list-style-type: decimal-leading-zero} 
ul.lower-roman {list-style-type: lower -roman} 
ul.upper-roman {list-style-type: upper-roman} 
ul.lower-alpha {list-style-type: lower-alpha} 
ul.upper-alpha {list-style-type: upper-alpha} 
ul.lower-greek {list-style-type: lower-greek} 
ul.lower-latin {list-style-type: lower-latin} 
ul.upper-latin {list-style-type: upper-latin} 
ul.hebrew {list-style-type: hebrew} 

ul.armenian {list-style-type: armenian} 

ul.georgian {list-style-type: georgian} 
ul.cjk-ideographic {list-style-type: cjk-ideographic} 
ul.hiragana {list-style-type: hiragana} 

ul.katakana {list-style-type: katakana} 
ul.hiragana-iroha {list-style-type: hiragana-iroha} 
ul.katakana-iroha {list-style-type: katakana-iroha} 
</style> 

</head> 


<body> 

<ul class="none"> 
<li>"none" 类 型 </1i> 
<li>#</1li> 

<li> H OA] «li» 
</ul> 


<ul class="disc"> 
«li»Disc 类 型 </]i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 
</ul> 


<ul class="circle"> 
«li»Circle 类 型 </1i> 
<li>#</1li> 

<li> H OA] «li» 
</ul> 


«ul class="Square"> 
<li>Square 类 型 </1i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 


</ul> 


<ul class="decimal"> 
«li»Decimal 类 型 </1i> 
<]i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 
</ul> 


<ul class="decimal-leading-zero"> 
<li>Decimal-leading-zero 类 型 </1i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="lower -roman"> 
<li>Lower-roman 类 型 </1i> 
<li>#</1li> 

<li> H OA] «li» 

</ul> 


<ul class="upper-roman"> 
<li>Upper-roman 类 型 </1i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="lower-alpha"> 
«li»Lower-alpha 类 型 </1i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="upper-alpha"> 
<li>Upper-alpha 类 型 </1i> 
<li>#</li> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


«ul class="lower-greek"> 
<li>Lower-greek 类 型 </1i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


«ul class="lower -latin"> 
<li>Lower-latin 类 型 </1i> 
<li>#</1li> 

<li> H OA] «li» 

</ul> 


«ul class="upper-latin"> 
<li>Upper-latin 类 型 </1i> 
<1i> 茶 </1i> 


<]1i> 可 口 可 乐 </1i> 
</ul> 


«ul class="hebrew"> 
<li>Hebrew 类 型 </1i> 
<]i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 
</ul> 


<ul class="armenian"> 
<li>Armenian 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="georgian"> 
<li>Georgian ##/</1li> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="cjk-ideographic"> 
<li>Cjk-ideographic ##/</li> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="hiragana"> 
<li>Hiragana ##</1li> 
<li>#</1li> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="katakana"> 
<li>Katakana 类 型 </1i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


<ul class="hiragana-iroha"> 
<li>Hiragana-iroha 类 型 </1i> 
<1i> 茶 </1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


«ul class="katakana-iroha"> 
<li>Katakana-iroha 类 型 </1i> 
<li>#</1i> 

<]1i> 可 口 可 乐 </1i> 

</ul> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 列表 
CSS 参考 手册 : CSS list-style 属性 
HTML DOM 参考 手册 : listStyleType 属性 


CSS 外 边 距 属性 (Margin) 


属性 描述 CSS 
margin 在 一 个 声明 中 设置 所 有 外边 距 属性 。 1 
margin-bottom 设置 元 素 的 下 外 边 距 。 1 
margin-left 设置 元 素 的 左 外 边 距 。 1 
margin-right 设置 元 素 的 右 外 边 距 。 1 


margin-top 设置 元 素 的 上 外 边 距 。 1 


CSS margin 属性 


实例 
E p 元 素 的 4 个 外 边 路 


p 
{ 


margin:2cm 4cm 3cm 4cm; 


} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 margin 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
margin 简写 属性 在 一 个 声明 中 设置 所 有 外 边 距 属性 。 该 属性 可 以 有 1 到 4 个 值 。 
说 明 

这 个 简写 属性 设置 一 个 元 素 所 有 外 边 距 的 宽度 ， 或 者 设置 各 边 上 外 边 距 的 宽度 。 


块 级 元 素 的 垂直 相 邻 外 边 距 会 合并 ， noon ee 行内 元 素 
的 的 左右 外 边 距 不 会 合并 。 同 样 地 ， 浮 动 元 素 的 外 边 距 也 不 会 合并 。 人 多 许 指定 负 的 
外 边 距 值 ， 不 过 使 用 时 要 小 心 。 


注释 : 允许 使 用 负 值 。 


例子 1 


margin:10px 5px 15px 20px; 


e Sia B= 10px 
e 右 外 边 距 是 5px 


e 下 外 边 距 是 15px 
e 左 外 边 距 是 20px 


例子 2 


margin:10px 5px 15px; 


e 上 人 外边 距 是 10px 
e 右 外 边 距 和 左 外 边 距 是 5px 
e 下 外 边 距 是 15px 


例子 3 


margin:10px 5px; 


e 上 外 边 距 和 下 外 边 距 是 10px 
e 右 外 边 距 和 左 外 边 距 是 5px 


例子 4 


margin:10px; 


e 所 有 4 个 外 边 距 都 是 10px 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.margin="10px 5px" 


可 能 的 值 


值 描述 
auto 浏览 器 计算 外 边 
length — 规定 以 具体 单位 计 的 外 边 距 值 ， 上 比如 像素 、 厘 米 和 等。 默认 值 是 0px。 
% 规定 基于 父 元 素 的 宽度 的 百分比 的 外 边 距 
inherit ”规定 应 该 从 父 元 素 继承 外 边 距 。 


TIY 实例 


所 有 的 边 距 属性 在 一 个 声明 中 
本 例 演示 如 何 将 所 有 的 边 距 属性 设置 于 一 个 声明 中 。 


«html» 

«head» 

«style type="text/css"> 

p.margin (margin: 2cm 4cm 3cm 4cm} 
</style> 

</head> 

<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

<p class="margin"> 这 个 段落 带 有 指定 的 外 边 距 。 这 个 段落 带 有 指定 的 外 边 距 。 这 个 段 
<p> 这 个 段落 没有 指定 外 边 距 。</p> 
</body> 

</html> 


E —— 


相关 页 面 


CSS 教程 : CSS 外 边 距 
HTML DOM 参考 手册 : margin 属性 





CSS margin-bottom 属性 


实例 
设置 p 元 素 的 下 外 边 距 : 


p 
{ 


margin-bottom:2cm; 


j 
(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 margin-bottom 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

margin-bottom 属性 设置 元 素 的 下 外 边 距 。 

注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginBottom="10px" 


可 能 的 值 


学 


值 Tx 
auto 浏览 器 计算 下 外 边 距 。 


规定 以 具体 单位 计 的 下 外 边 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 
Opx。 


% 规定 基于 父 元 素 的 宽度 的 百分比 的 下 外 边 距 。 
inherit ”规定 应 该 从 父 元 素 继 承 下 外 边 距 。 


length 


TIY 实例 


设置 文本 的 下 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 下 外 边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.bottommargin {margin-bottom: 2cm} 
</style> 

</head> 

<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

<p class="bottommargin"> 这 个 段落 带 有 指定 的 下 外 边 距 。</p> 
<p> 这 个 段落 没有 指定 外 边 距 。</p> 

</body> 


</html> 


设置 文本 的 下 外 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 下 外 边 距 。 


<html> 

<head> 

<style type="text/css"> 
p.bottommargin 


d 


margin-bottom: 25% 

} 

</style> 

</head> 

<body> 

<p>This is a paragraph with no margin specified</p> 

<p class="bottommargin">This is a paragraph with a specified bottor 
<p>This is a paragraph with no margin specified</p> 


</body> 
</html> 


图 o” 8 


相关 页 面 


CSS 教程 : CSS A ih TR 
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CSS margin-left 属性 


实例 
设置 p 元 素 的 左 外 边 距 : 
p 


margin-left:2cm; 


j 
(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 margin-left 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

margin-left 属性 设置 元 素 的 左 外 边 距 。 

注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginLeft="10px" 


可 能 的 值 


值 描述 
auto 浏览 器 设置 的 左 外 边 距 。 
length 定义 固定 的 左 外 边 距 。 默 认 值 是 0。 
% 定义 基于 父 对 象 总 高 度 的 百分比 左 外 边 距 。 
inherit 规定 应 该 从 父 元 素 继 承 左 外 边 距 。 


TIY 实例 


设置 文本 的 左 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 左边 距 。 


<html> 

<head> 

<style type="text/css"> 
p.leftmargin {margin-left: 2cm} 
</style> 

</head> 


<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

<p class="leftmargin"> 这 个 段落 带 有 指定 的 左 外 边 距 。</p> 
</body> 


</html> 


设置 文本 的 左 外 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 左边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.leftmargin 


margin-left: 2596 
} 

</style> 

</head> 


<body> 


<p>This is a paragraph with no margin specified</p> 
«p class="leftmargin">This is a paragraph with a specified left mat 


</body> 
</html> 


FE 


相关 页 面 


CSS 教程 : CSS 外 边 距 
HTML DOM 参考 手册 : marginLeft 属性 





CSS margin-right 属性 


实例 
设置 p 元 素 的 右 外 边 中 : 
p 

{ 


margin-right:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 margin-right 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit", 
定义 和 用 法 

margin-right 属性 设置 元 素 的 右 外 边 距 。 

注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginRight="10px" 


可 能 的 值 


值 描述 
auto 浏览 器 设置 的 右 外 边 距 。 
length 定义 固定 的 右 外 边 距 。 默 认 值 是 0。 
% 定义 基于 父 对 象 总 高 度 的 百分比 右 外 边 距 。 
inherit 规定 应 该 从 父 元 素 继承 右 外 边 距 。 


TIY 实例 


设置 文本 的 右 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 右 外 边 距 。 


<html> 

<head> 

<style type="text/css"> 
p.rightmargin {margin-right: 8cm} 
</style> 

</head> 


<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

<p class="rightmargin"> 这 个 段落 带 有 指定 的 右 外 边 距 。 这 个 段落 带 有 指定 的 右 外 边 

</body> 

</html> 
SSS mt 
设置 文本 的 右 外 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 右 外 边 距 。 





<html> 

<head> 

<style type="text/css"> 
p.rightmargin 


margin-right : 25% 
} 

</style> 

</head> 


<body> 


<p style="text-align:right">This is a right aligned paragraph with 
<p class="rightmargin" style="text-align:right">This is a right al: 


</body> 
</html> 


akes eee 
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CSS margin-top 属性 
实例 
设置 p 元 素 的 上 外 边 距 : 


p 
{ 


margin-top:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 margin-top 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

margin-top 属性 设置 元 素 的 上 外 边 距 。 

注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginTop="10px" 


可 能 的 值 


值 描述 
auto 浏览 器 设置 的 上 外 边 距 。 
length 定义 固定 的 上 外 边 距 。 默 认 值 是 0。 
% 定义 基于 父 对 象 总 高 度 的 百分比 上 外 边 距 。 
inherit 规定 应 该 从 父 元 素 继承 上 外 边 距 。 


TIY 实例 


设置 文本 的 上 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 项 边 距 。 


<html> 

<head> 

<style type="text/css"> 
p.topmargin {margin-top: 5cm} 
</style> 

</head> 


<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

<p class="topmargin"> 这 个 段落 带 有 指定 的 上 外 边 距 。</p> 
</body> 

</html> 


设置 文本 的 上 外 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 顶 边 距 。 


<html> 

<head> 

<style type="text/css"> 
p.topmargin 


margin-top: 25% 
} 

</style> 
</head> 


<body> 


<p>This is a paragraph with no margin specified</p> 
<p class="topmargin">This is a paragraph with a specified top marg: 


</body> 
</html> 


a 
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Marquee 属性 


属性 
marquee-direction 
marquee-play-count 
marquee-speed 


marquee-style 


描述 
移动 内 容 的 方向 。 


C C WO C 


CSS 


多 列 属 性 (Multi-column) 


属性 
column-count 
column-fill 
column-gap 
column-rule 


column-rule- 
color 


column-rule- 
style 


column-rule- 
width 


column-span 


column-width 


columns 


描述 
规定 元 素 应 该 被 分 隔 的 列 数 。 


规定 如 何 填 充 列 。 
规定 列 之 间 的 间隔 。 
设置 所 有 column-rule-* 属性 的 简写 属性 。 


规定 列 之 间 规则 的 颜色 。 


规定 列 之 间 规 则 的 样式 。 


规定 列 之 间 规 则 的 宽度 。 


CSS3 column-count 属性 


实例 
将 div 元 素 中 的 文本 分 为 三 列 : 


div 
{ 


-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari #1 Chrome */ 
column-count:3; 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-count 属性 。 

Firefox 支持 替代 的 -moz-column-count 属性 。 

Safari 和 Chrome 支持 替代 的 -webkit-column-count 属性 。 

注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-count 属性 。 


定义 和 用 法 
column-count 属性 规定 元 素 应 该 被 划分 的 列 数 。 
默认 值 : auto 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.columnCount=3 


语法 


column-count: _number_|auto; 


值 描述 测试 
number 元 素 内 容 将 被 划分 的 最 佳 列 数 。 测试 
auto 由 其 他 属性 决定 列 数 ， 比 如 "column-width"。 测试 


亲 目 试 一 试 - 实例 
Column-count 


把 div 元 素 中 的 文本 划分 为 三 列 。 


<!DOCTYPE html» 

<html> 

<head> 

<style> 

. newspaper 

{ 

-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 

} 

</style> 

</head> 

<body> 


<p><b> 注 释 : </b>Internet Explorer 不 支持 column-count 属性 。</p> 


«div class="newspaper"> 
人 民 网 北京 2 月 24 日 电 (记者 刘 阳 ) 国 家 发 展 改 革 委 近日 发 出 通知 ， 决 定 自 2 月 25 日 需 时 起 


此 次 国内 成 品 油价 格调 整 幅 度 ， 是 按照 现行 国内 成 品 油价 格 形成 机 制 ， 根 据 国际 市 场 油价 变 
通知 指出 ， 这 次 成 品 油 调价 后 ， 国 家 将 按照 已 建立 的 补贴 机 制 ， 继 续 对 种 粮农 民 、 渔 业 (à 
通知 要 求 ， 中 石油 、 中 石化 、 中 海 油 三 大 公司 要 组 织 好 成 品 油 生 产 和 调运 ， 保 持 合理 库存 ， 


</div> 


</body> 
</html> 








相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-fill 属性 
实例 
规定 如 何 对 列 进行 填充 : 

div 


column-fill:auto; 


} 
浏览 器 文 持 
主流 浏览 器 都 不 支持 column-fill 属性 。 
定义 和 用 法 
IE Firefox Chrome Safari Opera 


column-fill 属性 规定 如 何 填充 列 (是 否 进 行 协 调 ) 。 


默认 值 : balance 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.columnFill="auto" 


语法 


column-fill: balance|auto; 


E 描述 
balance 对 列 进行 协调 。 浏 览 器 应 对 列 长 度 的 差异 进行 最 小 化 处 理 。 
auto 按 顺 序 对 列 进行 填充 ， 列 长 度 会 各 有 不 同 。 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-gap 属性 


实例 
规定 列 间 的 间隔 为 40 像素 : 
div 
{ 
-moz-column-gap:40px; /* Firefox */ 


-webkit-column-gap:40px; /* Safari #1 Chrome */ 
column-gap: 40px; 


页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-gap 属性 。 

Firefox 支持 替代 的 -moz-column-gap 属性 。 

Safari 和 Chrome 支持 替代 的 -webkit-column-gap 属性 。 

注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-gap 属性 。 


定义 和 用 法 
column-gap 属性 规定 列 之 间 的 间隔 。 
注释 : 如 果 列 之 间 设 置 了 column-rule， 它 会 在 间隔 中 间 显 示 。 


JavaScript 语法 : 


normal 


object.style.columnGap="40px" 


column-gap: _length_|normal; 


值 描述 测试 
length ”把 列 间 的 间隔 设置 为 指定 的 长 度 。 测试 
normal ”规定 列 间 间隔 为 一 个 常规 的 间隔。W3C 建议 的 值 是 1em。 测试 


亲 目 试 一 试 - 实例 


Column-gap 


将 div 元 素 中 的 文本 分 为 三 列 ， 并 规定 列 间 30 像素 的 间隔 。 


«IDOCTYPE html» 
«html» 

«head» 

«style» 

. newspaper 


-moz-column-count:3; /* Firefox */ 

-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 

-moz-column-gap:30px; /* Firefox */ 

-webkit-column-gap:30px; /* Safari and Chrome */ 

column-gap: 30px; 

</style> 

</head> 

<body> 

<p><b>jt# : </b>Internet Explorer 不 支持 column-count 属性 。</p> 


«div class="newspaper"> 
人 民 网 北京 2 月 24 日 电 (记者 刘 阳 ) 国 家 发 展 改 革 委 近日 发 出 通知 ， 决 定 自 2 月 25 日 雾 时 起 


此 次 国内 成 品 油价 格调 整 幅 度 ， 是 按照 现行 国内 成 品 油价 格 形成 机 制 ， 根 据 国 际 市 场 油价 变 
通知 指出 ， 这 次 成 品 油 调价 后 ， 国 家 将 按照 已 建立 的 补贴 机 制 ， 继 续 对 种 粮农 民 、 渔 业 (A 
通知 要 求 ， 中 石油 、 中 石化 、 中 海 油 三 大 公司 要 组 织 好 成 品 油 生产 和 调运 ， 保 持 合理 库存 ， 


</div> 


</body> 
</html> 
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相关 页 面 


CSS3 教程 : CSS3 多 列 





CSS3 column-rule 属性 


实例 
规定 列 之 间 的 宽度 、 样 式 和 颜色 规则 : 


div 
{ 
-moz-column-rule:3px outset #ffooff; /* Firefox */ 


-webkit-column-rule:3px outset #ffooff; /* Safari 和 Chrome */ 
column-rule:3px outset zffOOff; 


j 


页 面 底部 有 更 多 实例 。 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-rule 属性 。 

Firefox 支持 替代 的 -moz-column-rule 属性 。 

Safari 和 Chrome 支持 替代 的 -webkit-column-rule 属性 。 

注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule 属性 。 


定义 和 用 法 
column-rule 属性 是 一 写 属性 ， 用 于 设置 所 有 column-rule-* 属性 。 
觉 


个 简 
column-rule 属性 设置 列 只 觉得 宽度 、 样 式 和 颜色 规则 。 


默认 值 : medium none black 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.columnRule="3px outset ZffOOff" 
语法 


column-rule: _column-rule-width_ _column-rule-style_ _column-rule-« 


a — — 





值 描述 
column-rule-width 设置 列 之 间 的 宽度 规则 。 
column-rule-style 设置 列 之 间 的 样式 规则 。 
column-rule-color 设置 列 之 间 的 颜色 规则 。 


亲 目 试 一 试 - 实例 
Column-rule 


规定 列 之 间 的 宽度 、 样 式 和 颜色 。 


«IDOCTYPE html» 
«html» 

«head» 

«style» 

. newspaper 


-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 


-moz-column-gap:40px; /* Firefox */ 
-webkit-column-gap:40px; /* Safari and Chrome */ 
column-gap: 40px; 


-moz-column-rule:4px outset #ff0000; /* Firefox */ 


-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ 
column-rule:4px outset #ff0000; 


j 

</style> 

</head> 

<body> 

<p><b> 注 释 : </b>Internet Explorer 不 支持 column-count 属性 。</p> 


«div class="newspaper'"> 
人 民 网 北京 2 月 24 日 电 (记者 刘 阳 ) 国 家 发 展 改 革 委 近日 发 出 通知 ， 决 定 自 2 月 25 日 需 时 起 


此 次 国内 成 品 油价 格调 整 幅 度 ， 是 按照 现行 国内 成 品 油价 格 形成 机 制 ， 根 据 国际 市 场 油价 变 
通知 指出 ， 这 次 成 品 油 调价 后 ， 国 家 将 按照 已 建立 的 补贴 机 制 ， 继 续 对 种 粮农 民 、 渔 业 (A 
通知 要 求 ， 中 石油 、 中 石化 、 中 海 油 三 大 公司 要 组 织 好 成 品 油 生 产 和 调运 ， 保 持 合理 库存 ， 


</div> 


</body> 
</html> 
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相关 页 面 
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CSS3 column-rule-color 属性 


实例 
设置 列 之 间 的 颜色 规则 : 


div 
{ 


-moz-column-rule-color:#ff0000; /* Firefox */ 
-webkit-column-rule-color:#ff0000; /* Safari 和 Chrome */ 
column-rule-color:#ff0000; 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 
Internet Explorer 10 和 Opera 支持 column-rule-color 属性 。 
Firefox 支持 替代 的 -moz-column-rule-color 属性 。 


Safari 和 Chrome 支持 替代 的 -webkit-column-rule-color 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule-color 属性 。 


定义 和 用 法 
column-rule-color 属性 规定 列 之 间 的 颜色 规则 。 


默认 值 : black 
继承 性 : no 


JavaScript 语法 : object.style.columnRuleColor="#ffOOf*" 


语法 


column-rule-color: _color_; 


值 描述 
color 规定 颜色 规则 。 请 参阅 CSS MAM. 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-rule-style 属性 


实例 
设置 列 之 间 的 颜色 规则 : 


div 
{ 


-moz-column-rule-style:dotted; /* Firefox */ 
-webkit-column-rule-style:dotted; /* Safari 和 Chrome */ 
column-rule-style:dotted; 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 
Internet Explorer 10 和 Opera 支持 column-rule-style 属性 。 
Firefox 支持 替代 的 -moz-column-rule-style 属性 。 


Safari 和 Chrome 支持 替代 的 -webkit-column-rule-style 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule-style 属性 。 


定义 和 用 法 
column-rule-style 属性 规定 列 之 间 的 样式 规则 。 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.columnRuleStyle="dotted" 


语法 


column-rule-style: none|hidden|dotted|dashed|solid|double|groove|r: 








值 描述 测试 
none 定义 没有 规则 。 测试 
hidden 定义 隐藏 规则 。 测试 
dotted 定义 点 状 规则 。 测试 
dashed ”定义 虚线 规则 。 测试 
solid 定义 实 线 规则 。 测试 
double 定义 双 线 规则 。 测试 
groove 定义 3D grooved 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 测试 
ridge 定义 3D ridged 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 测试 
inset 定义 3D inset 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 测试 
outset 定义 3D outset 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 测试 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-rule-width 属性 


实例 
设置 列 之 间 的 颜色 规则 : 


div 

{ 

-moz-column-rule-width:1px; /* Firefox */ 
-webkit-column-rule-width:1px; /* Safari 和 Chrome */ 
column-rule-width:1px; 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
Internet Explorer 10 和 Opera 支持 column-rule-width 属性 。 
Firefox 支持 替代 的 -moz-column-rule-width 属性 。 


Safari 和 Chrome 支持 替代 的 -webkit-column-rule-width 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule-width 属性 。 


定义 和 用 法 
column-rule-width 属性 规定 列 之 间 的 宽度 规则 。 
默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.columnRuleWidth="thin" 


语法 


column-rule-width: 


值 
thin 
medium 
thick 
length 


相关 页 面 
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thin|medium|thick| length ; 


描述 
定义 纤细 规则 。 
定义 中 等 规则 。 
定义 宽厚 规则 。 
规定 规则 的 宽度 。 


测试 


测试 
测试 


测试 








测试 


CSS3 column-span 属性 


实例 
使 h2 元 素 横 跨 所 有 列 : 
h2 


-webkit-column-span:all; /* Chrome */ 
column-span:all; 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-span 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column-span 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-span 属性 。 


定义 和 用 法 
column-span 属性 规定 元 素 应 横 跨 多 少 列 。 
默认 值 : 1 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.columnSpan="all" 


语法 


column-span: 1|all; 


值 描述 测试 
1 元 素 应 横 跨 一 列 。 测试 
all 元 素 应 横 跨 所 有 列 。 测试 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-width 属性 


实例 


div 

{ 

column-width:100px; 

-moz-column-width:100px; /* Firefox */ 
-webkit-column-width:100px; /* Safari 和 Chrome */ 
} 


页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-width 属性 。 

Firefox 支持 替代 的 -moz-column-width 属性 。 

Safari 和 Chrome 支持 替代 的 -webkit-column-width 属性 。 

注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-width 属性 。 


定义 和 用 法 
column-width 属性 规定 列 的 宽度 。 
默认 值 : auto 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.columnWidth="100px" 


语法 


column-width: auto|_length_; 


值 描述 测试 
auto 由 浏览 器 决定 列 宽 。 测试 
length 规定 列 的 宽度 。 测试 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 columns 属性 


实例 
规定 列 的 宽度 和 列 数 : 
div 


columns:100px 3; 

-moz-columns:100px 3; /* Firefox */ 
-webkit-columns:100px 3; /* Safari 和 Chrome */ 
} 


页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column 属性 。 

Firefox 支持 替代 的 -moz-column 属性 。 

Safari 和 Chrome 支持 替代 的 -webkit-column 属性 。 

注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column 属性 。 


定义 和 用 法 
columns 属性 是 一 个 简写 属性 ， 用 于 设置 列 宽 和 列 数 。 
默认 值 : auto auto 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.columns="100px 3" 


语法 


columns: _column-width_ _column-count_/; 


值 
column-width 列 的 宽度 。 


column-count 列 数 。 


相关 页 面 


CSS3 教程 : CSS3 多 列 
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CSS 内 边 距 属性 (Padding) 


属性 描述 CSS 
padding 在 一 个 声明 中 设置 所 有 内 边 距 属性 。 1 
padding-bottom 设置 元 素 的 下 内 边 距 。 1 
padding-left 设置 元 素 的 左 内 边 距 。 1 
padding-right 设置 元 素 的 右 内 边 距 。 1 


padding-top 设置 元 素 的 上 内 边 距 。 1 


CSS padding 属性 


实例 
IB p 元 素 的 4 个 内 边 距 : 


padding:2cm 4cm 3cm 4cm; 


} 


浏览 器 支持 


所 有 浏览 器 都 支持 padding 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

padding 简写 属性 在 一 个 声明 中 设置 所 有 内 边 距 属性 。 

说 明 

这 个 简写 属性 设置 元 素 所 有 内 边 距 的 宽度 ， 或 者 设置 各 边 上 内 边 距 的 宽度 。 行 内 非 
替换 元 素 上 设置 的 内 边 距 不 会 影响 行 高 计算 ; 因此 ， 如 果 一 个 元 素 既 有 内 边 距 又 有 
背景 ， 从 视觉 ee ud. die 还 会 与 其 他 内 容重 登 。 元 素 的 背景 
会 延伸 穿 过 内 边 距 。 不 允许 指定 负 边 距 值 。 

注释 : 不 允许 使 用 负 值 。 


例子 1 


padding:10px 5px 15px 20px; 


上 内 边 距 是 10px 
右 内 边 距 是 5px 

下 内 边 距 是 15px 
左 内 边 距 是 20px 


例子 2 


padding:10px 5px 15px; 


e 上 内 边 距 是 10px 
e 右 内 边 距 和 左 内 边 距 是 Spx 
。 下 内 边 距 是 15px 


例子 3 
padding:10px 5px; 


e 上 内 边 距 和 下 内 边 距 是 10px 
e 右 内 边 距 和 左 内 边 距 是 5px 


例子 4 
padding:10px; 


e ATA 4 个 内 边 距 都 是 10px 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.padding-" 10px 5px" 


可 能 的 值 


学 


值 TX 
auto 浏览 器 计算 内 边 
length — 规定 以 具体 单位 计 的 内 边 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 0px。 
% 规定 基于 父 元 素 的 宽度 的 百分比 的 内 边 距 。 
inherit ”规定 应 该 从 父 元 素 继 承 内 边 距 。 


TIY 实例 


所 有 内 边 距 属性 在 一 个 声明 中 


本 例 演示 使 用 简写 属性 将 所 有 的 内 边 距 属性 设置 于 一 个 声明 中 ， 可 以 有 一 到 四 个 
值 。 


«html» 

«head» 

«style type="text/css"> 
td.test1 (padding: 1.5cm} 
td.test2 (padding: 0.5cm 2.5cm) 
</style> 

</head> 


<body> 

<table border="1"> 

<tr> 

<td class="testi"> 

这 个 表格 单元 的 每 个 边 拥有 相等 的 内 边 距 。 
</td> 

</tr> 

</table> 

<br /> 

<table border="1"> 

<tr> 

<td class="test2"> 

这 个 表格 单元 的 上 和 下 内 边 距 是 0.5cm， 左 和 右 内 边 距 是 2.5cm。 
</td> 

</tr> 

</table> 

</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 


W3School 前 端 教 程 合集 


HTML DOM 参考 手册 : padding 属性 


CSS padding 属性 1188 


CSS padding-bottom 属性 


实例 
设置 p 元 素 的 下 内 边 中 : 


p 


padding-bottom:2cm; 
} 


(在 页 面 底部 可 以 找到 更 多 实例 ) 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 padding-bottom 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
padding-bottom 属性 设置 元 素 的 下 内 边 距 (底部 空白 ) 。 
说 明 
该 属性 设置 元 素 下 内 边 距 的 宽度 。 行 内 非 替 换 元 素 上 设置 的 下 内 边 距 不 会 影响 行 高 
计算 ， 因 此 ， 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 
有 可 能 还 会 与 其 他 内 容重 县 。 不 人 允许 指定 负 内 边 距 值 。 
注释 : 不 允许 使 用 负 值 。 
默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.paddingBottom="10px" 


可 能 的 值 


值 描述 
length ， 规定 以 具体 单位 计 的 固定 的 下 内 边 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 
是 0px。 


定义 基于 父 元 素 宽度 的 百分比 下 内 边 距 。 此 值 不 会 如 预期 地 那样 工作 
于 所 有 的 浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继承 下 内 边 距 。 


% 


TIY 实例 


设置 下 内 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 下 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td (padding-bottom: 2cm) 
</style> 

</head> 


<body> 

<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 下 内 边 距 。 
</td> 

</tr> 

</table> 

</body> 


</html> 


设置 下 内 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 下 内 边 距 。 


<html> 

<head> 

<style type="text/css"> 
td 


{ 
padding-bottom: 10% 


} 
</style> 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 下 内 边 距 。 
</td> 

</tr> 

</table> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 
HTML DOM 参考 手册 : paddingBottom 属性 


CSS padding-left 属性 


实例 
设置 p 元 素 的 左 内 边 中 : 
p 


{ 
padding-left:2cm; 
} 


(在 页 面 底 部 可 以 找到 更 多 实例 ) 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 padding-left 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
padding-left 属性 设置 元 素 左 内 边 距 (空白 ) 。 
说 明 
该 属性 设置 元 素 左 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 左 内 边 距 仅 在 元 素 所 生 
成 的 第 一 个 行内 框 的 左边 出 现 . 
注释 : 不 允许 使 用 负 值 。 
默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.paddingLeft="10px" 


可 能 的 值 


值 描述 
length 规定 以 具体 单位 计 的 固定 的 左 内 边 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 
是 0px。 


定义 基于 父 元 素 宽度 的 百分比 左 内 边 距 。 此 值 不 会 如 预期 地 那样 工作 
于 所 有 的 浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继承 左 内 边 距 。 


% 


TIY 实例 


设置 左 内 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 左 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td {padding-left: 2cm} 
</style> 

</head> 


<body> 

<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 左 内 边 距 。 
</td> 

</tr> 

</table> 

</body> 


</html> 


设置 左 内 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 左 内 边 距 。 


<html> 

<head> 

<style type="text/css"> 
td 


{ 
padding-left: 10% 


} 
</style> 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 左 内 边 距 。 
</td> 

</tr> 

</table> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 
HTML DOM 参考 手册 : paddingLeft 属性 


CSS padding-right 属性 


实例 
设置 p 元 素 的 右 内 边 中 : 
p 


{ 
padding-right:2cm; 
} 


(在 页 面 底 部 可 以 找到 更 多 实例 ) 


浏览 器 支持 

所 有 主流 浏览 器 都 支持 padding-right 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

padding-right 属性 设置 元 素 右 内 边 距 (空白 ) 。 

注释 : 不 允许 使 用 负 值 。 

说 明 


该 属性 设置 元 素 右 内 边 距 的 宽度 。 行 内 非 替 换 元 素 上 设置 的 右 内 边 距 仅 在 元 素 所 生 
成 的 第 一 个 行内 框 的 右边 出 现 . 


默认 值 : 0 
继承 性 : no 


版 本 : CSS1 


JavaScript 语法 : object.style.paddingRight="10px" 


可 能 的 值 


值 描述 
length 规定 以 具体 单位 计 的 固定 的 右 内 边 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 
是 0px。 


定义 基于 父 元 素 宽度 的 百分比 右 内 边 距 。 此 值 不 会 如 预期 地 那样 工作 
于 所 有 的 浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继承 右 内 边 距 。 


% 


TIY 实例 


设置 右 内 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 右 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td {padding-right: 5cm} 
</style> 

</head> 


<body> 

<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 右 内 边 距 。 
</td> 

</tr> 

</table> 

</body> 


</html> 


设置 右 内 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 右 内 边 距 。 


<html> 

<head> 

<style type="text/css"> 
td 


padding-right: 10% 


} 
</style> 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 右 内 边 距 。 
</td> 

</tr> 

</table> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 
HTML DOM 参考 手册 : paddingRight 属性 


CSS padding-top 属性 


实例 
设置 p 元 素 的 上 内 边 距 : 


p 


{ 
padding-top:2cm; 
} 


(在 页 面 底部 可 以 找到 更 多 实例 ) 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 padding-top 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
padding-top 属性 设置 元 素 的 上 内 边 距 (空间) 。 
说 明 
该 属性 设置 元 素 上 内 边 距 的 宽度 。 行 内 非 检 换 元 素 上 设置 的 上 内 边 距 不 会 影响 行 高 
计算 ， 因此， 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 
有 可 能 还 会 与 其 他 内 容重 一 。 不 允许 指定 负 内 边 距 值 。 
注释 : 不 允许 使 用 负 值 。 
默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.padding Top="10px" 


可 能 的 值 


值 描述 
jength ， 规定 以 具体 单位 计 的 固定 的 上 内 这 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 人 
是 0px。 


定义 基于 父 元 素 宽度 的 百分比 上 内 边 距 。 此 值 不 会 如 预期 的 那样 工作 
于 所 有 的 浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继承 上 内 边 距 。 


% 


TIY 实例 


设置 上 内 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 上 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td {padding-top: 2cm} 
</style> 

</head> 


<body> 

<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 上 内 边 距 。 
</td> 

</tr> 

</table> 

</body> 


</html> 


设置 上 内 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 上 内 边 距 。 


<html> 

<head> 

<style type="text/css"> 
td 


padding-top: 10% 


} 
</style> 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 上 内 边 距 。 
</td> 

</tr> 

</table> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 
HTML DOM 参考 手册 : paddingTop 属性 


Paged Media 属性 


属性 
fit 
fit-position 


image- 
orientation 


page 


size 


描述 
示意 如 何 对 width 和 height 属 性 均 不 是 auto 的 被 替换 元 
素 进行 缩放 。 
定义 盒 内 对 象 的 对 齐 方式 。 
规定 用 户 代 理应 用 于 图 像 的 顺 时 针 方 向 旋转 。 


元 素 应 该 被 显示 的 页 面 特定 类 型 。 
页 面 内 容 包 含 框 的 尺寸 和 方向 。 


CSS 


CSS 定位 属性 (Positioning) 


属性 
bottom 


clear 
clip 
cursor 
display 


float 
left 


overflow 


position 


right 


top 
vertical- 
align 
visibility 


z-index 


描述 

a ee eee 边界 之 间 的 偏 
多 。 

规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 。 
剪裁 绝对 定位 元 素 。 

规定 要 显示 的 光标 的 类 型 (形状 ) 。 

规定 元 素 应 该 生成 的 框 的 类 型 。 
规定 框 是 否 应 该 浮动 。 

设置 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 
移 。 

规定 当 内 容 浴 出 元 素 框 时 发 生 的 事情 。 
规定 元 素 的 定位 类 

T E 边界 与 其 包含 块 右边 界 之 间 的 偏 


NS ER 


设置 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 


RB. 
设置 元 素 的 垂直 对 齐 方式 。 


规定 元 素 是 否 可 见 。 
设置 元 素 的 堆 和 全 顺序 。 


边界 之 间 的 


CSS 


CSS bottom 属性 


实例 
把 图 像 的 底 边缘 设置 在 其 包含 元 素 底 边 缘 之 上 5 像素 高 的 位 置 : 


img 
{ 
position:absolute; 
bottom:5px; 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 bottom 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

bottom 属性 规定 元 素 的 底部 边缘 。 该 属性 定义 了 定位 元 素 下 外 边 距 边界 和 与 其 包含 块 
下 边界 之 间 的 偏 移 。 

注释 : 如 果 "position" 属性 的 值 为 "static"， 那 么 设置 "bottom" 属性 不 会 产生 任何 效 
说 明 

对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 
为 指定 值 ; 否则 为 auto。 


对 于 相对 定义 元 素 ， 如 果 bottom 和 top 都 是 auto， 其 计算 值 则 都 是 0 ; 如 果 其 中 
之 一 为 auto， 则 取 另 一 个 值 的 相反 数 ; 如 果 二 者 都 不 是 auto，bottom 将 取 top 值 
的 相反 数 。 


默认 值 : auto 


继承 性 no 
版 本 CSS2 
JavaScript 语法 : object.style.bottom="50px" 
可 能 的 值 
值 描述 
auto 默认 值 。 通 过 浏览 器 计算 底部 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 底 边 位 置 。 可 使 用 负 值 。 


length 使 用 px. cm 等 单位 设置 元 素 的 底 边 位 置 。 可 使 用 负 
inherit 规定 应 该 从 父 元 素 继承 bottom 属性 的 值 。 


TIY 实例 


使 用 像素 值 设置 图 像 的 底部 边缘 
本 例 演示 如 何 使 用 像素 值 设置 图 像 的 底部 边缘 。 


<html> 


<head> 

<style type="text/css"> 
img 

1 
position:absolute; 
bottom: 0px 

} 

</style> 

</head> 

<body> 
<h1> 这 是 标题 </h1> 


«img class-"normal" src="/i/eg_smile.gif" /> 
qe, ou ses, acs, Eee. Ess, aie 


</body> 
</html> 


使 用 百分比 设置 图 像 的 底部 边缘 
本 例 演示 如 何 使 用 百分比 值 设置 图 像 的 底部 边缘 。 


<html> 

<head> 

<style type="text/css"> 
img 

1 
position:absolute; 
bottom: 5% 

} 

</style> 

</head> 

<body> 


<h1> 这 是 标题 </h1> 
<img class="normal" src="/i/eg_smile.gif" /> 
<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文 本 。 一 些 文 本 。</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : bottom 属性 


CSS clear 属性 


实例 
图 像 的 左 侧 和 右 侧 均 不 允许 出 现 浮动 元 素 : 
img 


{ 
float:left; 
clear:both; 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 clear 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
clear 属性 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 。 
说 明 
clear 属性 定义 了 元 素 的 哪 边 上 不 人 允许 出 现 浮动 元 素 。 在 CSS1 和 CSS2 中 ， 这 是 
通过 自动 为 清除 元 素 ( 即 设置 了 clear 属性 的 元 素 ) 增加 上 外 边 距 实现 的 。 在 
CSS2.1 中 ， 会 在 元 素 上 外 边 距 之 上 增加 清除 空间 ， 而 外 边 距 本 身 并 不 改变 。 不 论 


哪 一 种 改变 ， 最 终结 果 都 一 样 ， 如 果 声 明 为 左边 或 右边 清除 ， 会 使 元 素 的 上 外 边框 
边界 刚好 在 该 边 上 浮动 元 素 的 下 外 边 距 边界 之 下 。 


默认 值 : none 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.clear="left" 


可 能 的 值 


值 描述 
left 在 左 侧 不 允许 浮动 元 素 。 
right 在 右 侧 不 允许 浮动 元 素 。 
both 在 左右 两 侧 均 不 允许 浮动 元 素 。 
none 默认 值 。 人 允许 浮动 元 素 出 现在 两 侧 。 
inherit 规定 应 该 从 父 元 素 继承 clear 属性 的 值 。 


TIY 实例 


清除 元 素 的 侧面 
本 例 演示 如 何 使 用 清除 元 素 侧面 的 浮动 元 素 。 


<html> 


<head> 
<style type="text/css"> 
img 


{ 
float:left; 
clear:both; 


j 
</style> 
</head> 
<body> 
<img src="/i/eg_smile.gif" /> 
<img src="/i/eg_smile.gif" /> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : clear 属性 


CSS clip 属性 


实例 
剪裁 图 像 : 


img 
{ 
position:absolute; 
clip:rect(Opx, 60px, 200px, Opx); 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 clip 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

clip 属性 剪裁 绝对 定位 元 素 。 

当 一 幅 图 像 的 尺寸 大 于 包含 它 的 元 素 时 会 发 生 什么 呢 ? "clip" 属性 允许 您 规定 一 个 
元 素 的 可 见 尺寸 ， 这 样 此 元 素 就 会 被 修剪 并 显示 为 这 个 形状 。 

说 明 

这 个 属性 用 于 定义 一 个 剪裁 矩形 。 对 于 一 个 绝对 定义 元 素 ， 在 这 个 矩形 内 的 内 容 才 
可 见 。 出 了 这 个 剪裁 区 域 的 内 容 会 根据 overflow 的 值 来 处理 。 剪 裁 区 域 可 能 比 元 素 
的 内 容 区 大 ， 也 可 能 比 内 容 区 小 。 


默认 值 : auto 
继承 性 : no 


JavaScript 语法 : object.style.clip="rect(Opx,50px,50px,0px)" 


可 能 的 值 


值 描述 
shape ， 设 置 元 素 的 形状 。 唯 一 合法 的 形状 值 是 rect (top, right, bottom, left) 
auto 默认 值 。 不 应 用 任何 剪裁 。 
inherit ”规定 应 该 从 父 元 素 继承 clip 属性 的 值 。 


TIY 实例 


设置 元 素 的 形状 
本 例 演 示 如 何 设置 元 素 的 形状 。 此 元 素 被 剪 人 形状 中 ， 然 后 显示 出 来 。 


<html> 

<head> 

<style type="text/css"> 

img 

{ 

position:absolute; 
clip:rect(Opx 50px 200px Opx) 


} 
</style> 
</head> 


<body> 

<p>clip RIES TIEA : </p> 

<p><img border="0" src="/i/eg_ bookasp.gif" width="120" height="151' 
</body> 

</html> 


1 LLL Bi 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : clip 属性 





CSS cursor 属性 


实例 
一 些 不 同 的 光标 : 


span.crosshair {cursor:crosshair; } 
span.help {cursor:help; } 
span.wait {cursor:wait;} 


浏览 器 文 持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 cursor 属性 。 
注释 : Opera 9.3 和 Safari 3 不 支持 url 值 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
cursor 属性 规定 要 显示 的 光标 的 类 型 (形状 ) 。 


该 属性 定义 了 妃 标 指针 放 在 一 个 元 素 边 界 范围 内 时 所 用 的 光标 形状 (不 过 CSS2.1 
没有 定义 由 哪个 边界 确定 这 个 范围 ) 。 


默认 值 : auto 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.cursor="crosshair" 


可 能 的 值 


it 
本 


url 


需 使 用 的 自 定义 光标 的 URL. 
注释 : 请 在 此 列表 的 末端 始终 定义 一 种 普通 的 光标 ， 以 防 没有 由 URL 定义 的 可 用 


光标 。 


| | default | 默认 光标 (通常 是 一 个 箭头 ) | | auto | 默认 。 浏 览 器 设置 的 光标 。 | | 
crosshair | 光标 呈现 为 十 字 线 。 | | pointer | 光标 呈现 为 指示 链接 的 指针 (一 只 手 ) 
| | move | 此 光标 指示 某 对 象 可 被 移动 。 | | e-resize | 此 光标 指示 矩形 框 的 边缘 可 被 
HA (X) 移动 。 | | ne-resize | 此 光标 指示 矩形 框 的 边缘 可 被 向 上 及 向 右 移 动 
( 北 / 东 ) o || nw-resize | 此 光标 指示 算 形 框 的 边缘 可 被 向 上 及 向 左 移动 ( 北 / 
Fa) 。 | | n-resize | 此 光标 指示 矩形 框 的 边缘 可 被 向 上 ( 北 ) 移动 。 | | se-resize | 
此 光标 指示 矩形 框 的 边缘 可 被 向 下 及 向 右 移动 〈 南 / 东 ) o | | sw-resize | 此 光标 指 
示 和 矩形 框 的 边缘 可 被 向 下 及 向 左 移动 (A) 。 | | s-resize | 此 光标 指示 矩形 框 的 
边缘 可 被 向 下 移动 (BR) 。 | | w-resize | 此 光标 指示 矩形 框 的 边缘 可 被 向 左 移动 
(FR) 。 | | text | 此 光标 指示 文本 。 | | wait | 此 光标 指示 程序 正 忙 (通常 是 一 只 表 
或 沙漏 ) 。 | | help | 此 光标 指示 可 用 的 帮助 (通常 是 一 个 问号 或 一 个 气球 ) 。 | 


TIY 实例 


改变 光标 
本 例 演示 如 何 改 变 光 标 。 


<html> 


<body> 

<p> 请 把 鼠标 移动 到 单词 上 ， 可 以 看 到 鼠标 指针 发 生变 化 : </p> 
«span style-'"cursor:auto"» 
Auto</span><br /> 

«span style-'"cursor:crosshair'» 
Crosshair</span><br /> 

«span style="cursor:default"> 
Default</span><br /> 

«span style="Ccursor:pointer"> 
Pointer</span><br /> 

«span style="cursor:move"> 
Move</span><br /> 

«span style="Cursor:e-resize"> 
e-resize</span><br /> 

«span style="Cursor:ne-resize"> 
ne-resize</span><br /> 

«span style="cursor:nw-resize"> 
nw-resize</span><br /> 

«span style="cursor:n-resize"> 
n-resize</span><br /> 

«span style="Cursor:se-resize"> 
se-resize</span><br /> 

«span style="Cursor:sw-resize"> 
Sw-resizec/span»«br /> 

«span style="Cursor:s-resize"> 
s-resize</span><br /> 

«span style="cursor:w-resize"> 
w-resize</span><br /> 

«span style-'"cursor:text"» 
text</span><br /> 

«span style-'"cursor:wait"» 
wait</span><br /> 

«span style="cursor:help"> 
help</span> 

</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : cursor 属性 


CSS display 属性 


实例 
使 段落 生出 行内 框 : 


p.inline 
{ 


display:inline; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 display 属性 。 


注释 : 如 果 规 定 了 IDOCTYPE， 则 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 属性 
fà "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table- 
column"、"table-column-group"、"table-row"、"table-row-group"、 以 及 "inherit". 


定义 和 用 法 

display 属性 规定 元 素 应 该 生成 的 框 的 类 型 。 

说 明 

这 个 属性 用 于 定义 建立 布局 时 元 素 生 成 的 显示 框 类 型 。 对 于 HTML 等 文档 类 型 ， 如 
果 使 用 display 不 着 司 会 很 危险 ， 因 为 可 能 违反 HTML 中 已 经 定义 的 显示 层次 结 
M. XT XML, AF XML 没有 内 和 置 的 这 种 层次 结构 ， 所 有 display 是 绝对 必要 

的 。 


注释 : CSS2 中 有 值 compact 和 marker， 不 过 由 于 缺乏 广泛 的 支持 ， 已 经 从 
CSS2.1 中 去 除了 。 


inline 


object.style.display="inline 


值 
none 
block 
inline 
inline-block 
list-item 


run-in 


compact 


marker 


table 


inline-table 
table-row- 
group 


table-header- 
group 


table-footer- 
group 


table-row 


table-column- 
group 


table-column 
table-cell 
table-caption 


inherit 


描 


学 


此 元 素 不 会 被 显示 。 
此 元 素 将 显示 为 块 级 元 素 ， 此 元 素 前 后 会 带 有 换行 符 。 
默认 。 此 元 素 会 被 显示 为 内 联 元 素 ， 元 素 前 后 没有 换行 符 。 


行内 块 元 素 。 (CSS2.1 新 增 的 值 ) 
此 元 素 会 作为 列表 显示 。 


此 元 素 会 根据 上 下 文 作为 块 级 元 素 或 内 联 元 素 显 示 。 


CSS 中 有 值 compact， 不 过 由 于 缺乏 广泛 支持 ， 已 经 从 
CSS2.1 中 删除 。 


CSS 中 有 值 marker, 
CSS2.1 中 删除 。 


HATZ Ix, BAM 


此 元 素 会 作为 块 级 表格 来 显示 (类似 <table>) ， 表 格 前 后 
带 有 换行 符 。 
此 元 素 会 作为 内 联 表格 来 显示 (类似 <table>) ， 表 格 前 后 


没有 换行 符 。 


此 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类 似 
<tbody>) 。 
此 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类 似 
<thead>) 。 


此 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类 似 <tfoot>) 。 


此 元 素 会 作为 一 个 表格 行 显示 (类 似 <tr>) 。 


此 元 素 会 作为 一 个 或 多 个 列 的 分 组 来 显示 (类 似 
<colgroup>) 。 


此 元 素 会 作为 一 个 单元 格 列 显示 (类似 <col>) 

此 元 素 会 作为 一 个 表格 单元 格 显 示 (类 似 <td> 和 <th>) 
此 元 素 会 作为 一 个 表格 标题 显示 (类似 <caption>) 
规定 应 该 从 父 元 素 继承 display 属性 的 值 。 


TIY 实例 


如 何 把 元 素 显 示 为 内 联 元 素 
本 例 演示 如 何 把 元 素 显示 为 内 联 元 素 。 


«html» 

«head» 

«style type="text/css"> 
p (display: inline} 

div (display: none} 
</style> 

</head> 


<body> 
<p> 本 例 中 的 样式 表 把 段落 元 素 设 置 为 内 联 元 素 。</p> 


<p> 而 div 元 素 不 会 显示 出 来 ! </p> 
<div>div 元 素 的 内 容 不 会 显示 出 来 </div> 


</body> 
</html> 


如 何 把 元 素 显 示 为 块 级 元 素 
本 例 演示 如 何 把 元 素 显 示 为 块 级 元 素 。 


<html> 

<head> 

<style type="text/css"> 
span 

1 

display: block 

} 


</style> 
</head> 
<body> 


<span> 本 例 中 的 样式 表 把 span 元 素 设 置 为 块 级 元 素 。</span> 
<span> 两 个 span 元 素 之 间 产 生 了 一 个 换行 行为 。</span> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : display 属性 


CSS float 属性 


实例 
把 图 像 向 右 浮动 : 
img 


{ 
float:right; 
j 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 float 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


float 属性 定义 元 素 在 哪个 方向 浮动 。 以 往 这 个 属性 总 应 用 于 图 像 ， 使 文本 围绕 在 图 
RAA, ME CSS 中 ， 任 何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 而 
不 论 它 本 身 是 何 种 元 素 。 


如 果 浮 动 非 蔡 换 元 素 ， 则 要 指定 一 个 明确 的 宽度 ; 否则 ， 它 们 会 尽 可 能 地 窗 。 


注释 : 假如 在 一 行 之 上 只 有 极 少 的 空间 可 供 浮动 元 素 ， 那 么 这 个 元 素 会 跳 至 下 一 
行 ， 这 个 过 程 会 持续 到 某 一 行 拥有 足够 的 空间 为 止 。 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.cssFloat="left" 


可 能 的 值 


值 描述 
left 元 素 向 左 浮动 。 
right 元 素 向 右 浮动 。 
none 默认 值 。 元 素 不 浮动 ， 并 会 显示 在 其 在 文本 中 出 现 的 位 置 。 
inherit ” 规定 应 该 从 父 元 素 继承 float 属性 的 值 。 


TIY 实例 


float 属性 的 简单 应 用 
使 图 像 浮 动 于 一 个 段落 的 右 侧 。 


<html> 

<head> 

<style type="text/css"> 
img 

1 

float:right 

} 

</style> 

</head> 


<body> 

<p> 在 下 面 的 段落 中 ， 我 们 添加 了 一 个 样式 为 <b>float:right</b> 的 图 像 。 结 果 是 这 
<p> 

<img src="/i/eg_cute.gif" /> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 

</body> 


</html> 
«| == 








将 带 有 边框 和 边界 的 图 像 浮动 于 段落 的 右 例 


使 图 像 浮动 于 段落 的 右 侧 。 向 图 像 添加 边框 和 边界 。 


<html> 

<head> 

<style type="text/css"> 
img 

1 

float:right; 

border:1px dotted black; 
margin:Opx Opx 15px 20px; 
} 

</style> 

</head> 


<body> 

<p> 在 下 面 的 段落 中 ， 图 像 会 浮动 到 右 侧 ， 并 且 添 加 了 点 状 的 边框 。 我 们 还 为 图 像 添加 了 边 
<p> 

<img src="/i/eg_cute.gif" /> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 

</body> 


</html> 
BE ae 
带 标 题 的 图 像 浮动 于 右 侧 

使 带 有 标题 的 图 像 浮动 于 右 侧 





<html> 

<head> 

<style type="text/css"> 
div 

1 

float:right; 
width:120px; 

margin:0 © 15px 20px; 
padding:15px; 
border:1px solid black; 
text-align:center; 


</style> 
</head> 


<body> 

<div> 

<img src="/i/eg_cute.gif" /><br /> 

CSS is fun! 

</div> 

<p> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 


在 上 面 的 段落 中 ，div 元 来 的 宽度 是 120 像素 ， 它 其 中 包含 图 像 。div 元 素 浮动 到 右 全 
i dues 
«/html» 

二 





使 段落 的 首 字母 浮动 于 左 例 
使 段落 的 首 字 母 浮动 于 左 侧 ， 并 向 这 个 字母 添加 样式 。 


«html» 

«head» 

«style type="text/css"> 
span 

{ 

float:left; 
width:0.7em; 
font-size:4009; 
font-family:algerian,courier; 
line-height : 80%; 

} 

</style> 

</head> 


<body> 

<p> 

<span>T</span>his is some text. 

This is some text. This is some text. 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 


<p> 
在 上 面 的 段落 中 ， 文 本 的 第 一 个 字母 包含 在 一 个 span 元 素 中 。 这 个 span 元 素 的 宽度 是 
</p> 


</body> 
</html> 


aj — 
创建 水 平 菜单 
使 用 具有 一 栏 超 链接 的 浮动 来 创建 水 平 菜单 。 





<html> 


<head> 

<style type="text/css"> 
ul 

1 

float:left; 
width:100%; 
padding:0; 

margin:0; 
list-style-type:none; 
} 

a 

{ 

float:left; 
width:7em; 


text-decoration:none; 

color:white; 

background-color :purple; 
padding:0.2em 0.6em; 
border-right:1px solid white; 

} 

a:hover {background-color :#ff3300} 
li {display:inline} 

</style> 

</head> 


<body> 

<ul> 

<li><a href="#">Link one</a></li> 
<li><a href="#">Link two</a></li> 
<li><a href="#">Link three</a></li> 
<li><a href="#">Link four</a></li> 
</ul> 


<p> 
在 上 面 的 例子 中 ， 我 们 把 ul 元 素 和 a 元 素 浮 向 左 浮动 。1i 元 素 显 示 为 行内 元 素 (元 素 
</p> 


</body> 
</html> 


E E 
创建 无 表格 的 首页 
使 用 浮动 来 创建 拥有 页 眉 、 页 脚 、 左 侧目 录 和 主体 内 容 的 首页 。 





<html> 

<head> 

<style type="text/css"> 
div.container 


{ 


width:100%; 
margin:Opx; 

border:1px solid gray; 
line-height:15096; 

} 
div.header,div.footer 
{ 

padding:0.5em; 
color:white; 
background-color :gray; 
clear:left; 


} 
h1.header 


padding:0; 
margin:0; 

} 

div.left 

{ 

float:left; 
width:160px; 
margin:0; 
padding:1em; 

} 

div.content 

{ 
margin-left:190px; 
border-left:1px solid gray; 
padding:1em; 

} 

</style> 

</head> 

<body> 


<div class="container"> 

«div class="header"><h1 class="header">w3School.com.cn</h1></div> 
<div class="left"><p>"Never increase, beyond what is necessary, the 
<div class="content"> 

<h2>Free Web Building Tutorials</h2> 

<p>At W3School.com.cn you will find all the Web-building tutorials 
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP 
<p>W3School.com.cn - The Largest Web Developers Site On The Net!«/[ 


«div class="footer">Copyright 2008 by YingKe Investment .</div> 
</div> 


</body> 
</html> 


«| E 











相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : cssFloat 属性 


CSS left 属性 


实例 
把 力 像 的 左边 缘 设 置 在 其 包含 元 素 左边 缘 向 右 100 像素 的 位 置 : 


img 
{ 
position:absolute; 
left:100px; 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 left 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

left 属性 规定 元 素 的 左边 缘 。 该 属性 定义 了 定位 元 素 左 外 边 距 边界 与 其 包含 块 左 边 
界 之 间 的 偏 移 。 

注释 : 如 果 "position" 属性 的 值 为 "static", PAB "left" 属性 不 会 产生 任何 效 
说 明 

对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 
为 指定 值 ; 否则 为 auto。 


对 于 相对 定义 元 素 ，left 的 计算 值 始终 等 于 right, 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.left="100px" 
可 能 的 值 
t 描述 
auto 默认 值 。 通 过 浏览 器 计算 左边 缘 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 左边 位 置 。 可 使 用 负 值 。 


length 使 用 px. cm 等 单位 设置 元 素 的 左边 位 置 。 可 使 用 负 值 。 
inherit 规定 应 该 从 父 元 素 继承 left 属性 的 值 。 
TIY 实例 


使 用 固定 值 设置 图 像 的 左边 缘 
本 例 演示 如 何 使 用 固定 值 设置 图 像 的 左边 缘 。 


<html> 


<head> 

<style type="text/css"> 
img 

1 
position:absolute; 
left:100px 

} 

</style> 

</head> 

<body> 
<h1> 这 是 标题 </h1> 


«img class-"normal" src="/i/eg_smile.gif" /> 
qe, ou ses, acs, Eee. Ess, aie 


</body> 
</html> 


使 用 百分比 设置 图 像 的 左边 缘 
本 例 演示 如 何 使 用 百分比 值 设 置 图 像 的 左边 缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

1 
position:absolute; 
left:20% 

} 

</style> 

</head> 

<body> 


<h1> 这 是 标题 </h1> 
«img class="normal" src="/i/eg_smile.gif" /> 
<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文 本 。 一 些 文 本 。</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : left 属性 


CSS overflow 属性 


Ry 
实例 
设置 overflow 属性 : 
div 
{ 
width:150px; 
height:150px; 


overflow:scroll; 


j 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 Overflow 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
overflow 属性 规定 当 内 容 渝 出 元 素 杠 时 发 生 的 事情 。 
说 明 
这 个 属性 定义 浴 出 元 素 内 容 区 的 内 容 会 如 何 处 理 。 如 果 值 为 scroll, 不 论 是 否 需 
要 ， 用 户 代理 都 会 提供 一 种 滚动 机 制 。 因 此 ， 有 可 能 即使 元 素 框 中 可 以 放下 所 有 内 
容 也 会 出 现 滚 动 条 。 
默认 值 : visible 
继承 性 : no 


JavaScript 语法 : object.style.overflow="scroll" 


可 能 的 值 


值 描述 
visible  ， 软 认 值 。 内 容 不 会 被 修剪 ， 会 呈现 在 元 素 框 之 外 。 
hidden 内容 会 被 修剪 ， 并 且 其 余 内 容 是 不 可 见 的 。 
scroll 内 容 会 被 修剪 ， 但 是 浏览 器 会 显示 滚动 条 以 便 查看 其 余 的 内 容 。 
auto 如 果 内 容 被 修剪 ， 则 浏览 器 会 


显示 滚动 条 以 便 查看 其 余 的 内 容 。 
ow 


inherit 规定 应 该 从 父 元 素 继 承 overflow 属性 的 值 。 


TIY 实例 


如 何 使 用 滚动 条 来 显示 元 素 内 洽 出 的 内 容 


守 示 当 元 素 内 容 太 大 而 超出 规定 区 域 时 ， 如 何 设置 浴 出 属性 来 规定 相应 的 动 


«html» 

«head» 

«style type="text/css"> 
div 


background-color :#00FFFF; 
width:150px; 
height:150px; 

overflow: scroll 


</style> 
</head> 


<body> 
<p> 如 果 元 素 中 的 内 容 超出 了 给 定 的 宽度 和 高 度 属性 ，overflow 属性 可 以 确定 是 否 显示 尝 


<div> 
这 个 属性 定义 浴 出 元 素 内 容 区 的 内 容 会 如 何 义理 。 如 果 值 为 scroll， 不 论 是 否 需要 ， 用 广 
</div> 
</body> 


</html> 
-| B 
如 何 隐藏 浴 出 元 素 中 浴 出 的 内 容 


本 例 演示 在 元 素 中 的 内 容 太 大 以 至 于 无 法 适应 指定 的 区 域 时 ， 如 何 设置 overflow E 
性 来 隐藏 其 内 容 。 





<html> 

<head> 

<style type="text/css"> 
div 

1 

background-color :#00FFFF; 
width:150px; 
height:150px; 

overflow: hidden 

} 

</style> 

</head> 


<body> 
<p> 如 果 元 素 中 的 内 容 超出 了 给 定 的 宽度 和 高 度 属性 ，overflow BHEAUBESA LTH 


<div> 

这 个 属性 定义 浴 出 元 素 内 容 区 的 内 容 会 如 何 处 理 。 如 果 值 为 scroll， 不 论 是 否 需要 ， 用 上 广 

</div> 

</body> 

</html> 
SSS Srey 
如 何 设置 浏览 器 来 自动 地 义理 浴 出 
本 例 演示 如 何 设置 浏览 器 来 自动 地 处 理 浴 





<html> 

<head> 

<style type="text/css"> 
div 

1 

background-color :#00FFFF; 
width:150px; 
height:150px; 

overflow: auto 

} 

</style> 

</head> 


<body> 
<p> 如 果 元 素 中 的 内 容 超出 了 给 定 的 宽度 和 高 度 属性 ，overflow BHEAUBESA LTH 


<div> 

这 个 属性 定义 渝 出 元 素 内 容 区 的 内 容 会 如 何人 处 理 。 如 果 值 为 Scro1L1， 不 论 是 否 需要 ， 用 上 
</div> 

</body> 


</html> 





相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : overflow 属性 


CSS position 属性 


实例 
定位 h2 元 素 : 


h2 


position:absolute; 
left:100px; 
top:150px; 

j 


| Jt a8 32 FF 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 position 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
position 属性 规定 元 素 的 定位 类 型 。 
说 明 
这 个 属性 定义 建立 元 素 布局 所 用 的 定位 机 制 。 任 何 元 素 都 可 以 定位 ， 不 过 绝对 或 固 


定 元 素 会 生成 一 个 块 级 框 ， 而 不 论 该 元 素 本 身 是 什么 类 型 。 相 对 定位 元 素 会 相对 于 
它 在 正常 流 中 的 默认 位 置 偏 移 。 


默认 值 : static 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.position="absolute" 


可 能 的 值 


值 描述 
absolute 
生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进 行 定 位 。 
元 素 的 位 置 通过 "left", "top", "right" 以 及 "bottom" 属性 进行 规定 。 
| | fixed | 
生成 绝对 定位 的 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 。 
元 素 的 位 置 通过 "left", "top", "right" 以 及 "bottom" 属性 进行 规定 。 
| | relative | 
生成 相对 定位 的 元 素 ， 相 对 于 其 正常 位 置 进行 定位 。 
因此 ，"left:20" 会 向 元 素 的 LEFT 位 置 添加 20 RR. 


| | static | 默认 值 。 没 有 定位 ， 元 素 出 现在 正常 的 流 中 (忽略 top, bottom, left, right 
或 者 z-index 声明 ) 。 | | inherit | 规定 应 该 从 父 元 素 继承 position 属性 的 值 。 | 


TIY 实例 
定位 : 相对 定位 


本 例 演示 如 何 相对 于 一 个 元 素 的 正常 位 置 来 对 其 定位 。 


<html> 

<head> 

<style type="text/css"> 
h2.pos_left 

{ 

position:relative; 
left: -20px 


} 
h2.pos_right 


position:relative; 
left :20px 

} 

</style> 

</head> 


<body> 

<h2> 这 是 位 于 正常 位 置 的 标题 </h2> 

<h2 class="pos_left"> 这 个 标题 相对 于 其 正常 位 置 向 左 移动 </h2> 

<h2 class="pos_right"> 这 个 标题 相对 于 其 正常 位 置 向 右 移动 </h2> 
<p> 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 移动 。</p> 

<p> 样 式 "left:-20px" 从 元 素 的 原始 左 侧 位 置 减 去 20 RR. </p> 
<p> 样 式 "left:20px" 向 元 素 的 原始 左 侧 位 置 增加 20 R. </p> 

</body> 


</html> 


定位 : 绝对 定位 


本 例 演示 如 何 使 用 绝对 值 来 对 元 素 进行 定位 。 


<html> 

<head> 

<style type="text/css"> 
h2.pos_abs 

{ 

position:absolute; 
left:100px; 

top: 150px 


} 
</style> 
</head> 


<body> 

<h2 class="pos_abs"> 这 是 带 有 绝对 定位 的 标题 </h2> 

<p> 通 过 绝对 定位 ， 元 素 可 以 放置 到 页 面 上 的 任何 位 置 。 下 面 的 标题 距离 页 面 左 侧 100px, 
</body> 


</html> 








定位 : 固定 定位 


本 例 演示 如 何 相 对 于 浏览 器 窗口 来 对 元 素 进行 定位 。 


«html» 

«head» 

«style type="text/css"> 
p.one 

t 

position:fixed; 
left : 5px; 

top:5px; 


p.two 

{ 

position: fixed; 
top: 30px; 

right :5px; 


y 
</style> 
</head> 
<body> 


<p class="one"> 一 些 文本 。</p> 
<p class="two"> 更 多 的 文本 。</p> 


</body> 
</html> 
设置 元 素 的 形状 


本 例 演 示 如 何 设置 元 素 的 形状 。 此 元 素 被 剪裁 到 这 个 形状 内 ， 


«html» 

«head» 

«style type="text/css"> 

img 

{ 

position:absolute; 
clip:rect(Opx 50px 200px Opx) 


</style> 
</head> 


<body> 

<p>clip 属性 剪 切 了 一 幅 图 像 : </p> 

<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151' 
</body> 


</html> 
| = : 





Z-index 


Z-index 可 被 用 于 将 在 一 个 元 素 放 置 于 另 一 元 素 之 后 。 


«html» 

«head» 

«style type="text/css"> 
img.x 

{ 
position:absolute; 
left : 0px; 

top:0px; 
z-index: -1 

} 

</style> 

</head> 


<body> 

<h1> 这 是 一 个 标题 </h1> 

<img class="x" src="/i/eg_mouse.jpg" /> 

<p> 默 认 的 z-index 是 0. Z-index -1 拥有 更 低 的 优先 级 。</p> 
</body> 


</html> 


Z-index 


上 面 的 例子 中 的 元 素 已 经 更 改 了 Z-index。 


<html> 

<head> 

<style type="text/css"> 
img. x 

1 

position:absolute; 
left:Opx; 

top:0px; 

z-index:1 


</style> 

</head> 

<body> 

<h1> 这 是 一 个 标题 </h1> 

<img class="x" src="/i/eg_mouse.jpg" /> 

<p> 默 认 的 z-index 是 0。Z-index 1 拥有 更 高 的 优先 级 。</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : position 属性 


CSS right 属性 


实例 
把 图 像 的 右边 缘 设 置 在 其 包含 元 素 右边 缘 向 左 5 像素 的 位 置 : 


img 
{ 
position:absolute; 
right:5px; 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 right 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

right 属性 规定 元 素 的 右边 缘 。 该 属性 定义 了 定位 元 素 右 外 边 距 边界 与 其 包含 块 右边 
界 之 间 的 偏 移 。 

注释 : 如 果 "position" 属性 的 值 为 "static"， 那 么 设置 "right" 属性 不 会 产生 任何 效 
说 明 

对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 
为 指定 值 ; 否则 为 auto。 


对 于 相对 定义 元 素 ，left 的 计算 值 始终 等 于 right, 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.right="50px" 
可 能 的 值 
tā 描述 
auto 默认 值 。 通 过 浏览 器 计算 右边 缘 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 右边 位 置 。 可 使 用 负 值 。 


length 使 用 px. cm 等 单位 设置 元 素 的 右边 位 置 。 可 使 用 负 值 。 
inherit 规定 应 该 从 父 元 素 继承 right 属性 的 值 。 
TIY 实例 


使 用 固定 值 设置 图 像 的 右边 缘 
本 例 演示 如 何 使 用 固定 值 设置 图 像 的 右边 缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

position:absolute; 
right : 0px 


</style> 
</head> 
<body> 


<h1> 这 是 标题 </h1> 
«img class="normal" src="/i/eg_smile.gif" /> 
<p> 一 些 文本 。 一 些 文本 。 一 些 文 本 。 一 些 文 本 。 一 些 文本 。 一 些 文 本 。</p> 


</body> 
</html> 


使 用 百分比 设置 图 像 的 右边 缘 
本 例 演示 如 何 使 用 百分比 值 设 置 图 像 的 右边 缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

1 
position:absolute; 
right :5% 

} 

</style> 

</head> 

<body> 


<h1> 这 是 标题 </h1> 
«img class="normal" src="/i/eg_smile.gif" /> 
<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文 本 。 一 些 文 本 。</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : right 属性 


CSS top 属性 


实例 
把 图 像 的 上 按 缘 设置 在 其 包含 元 素 上 边缘 之 下 5 像素 高 的 位 置 : 


img 
{ 
position:absolute; 
top: 5px, 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 top 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

top 属性 规定 元 素 的 顶部 边缘 。 该 属性 定义 了 一 个 定位 元 素 的 上 外 边 距 边界 与 其 包 
含 块 上 边界 之 间 的 偏 移 。 

注释 : 如 果 "position" 属性 的 值 为 "static"， 那 么 设置 "top" 属性 不 会 产生 任何 效 
说 明 

对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 
为 指定 值 ; 否则 为 auto。 


对 于 相对 定义 元 素 ， 如 果 top 和 bottom 都 是 auto， 其 计算 值 则 都 是 0 ; 如 果 其 中 
之 一 为 auto， 则 取 另 一 个 值 的 相反 数 ; 如 果 二 者 都 不 是 auto，bottom 将 取 top 值 
的 相反 数 。 


默认 值 : auto 


继承 性 no 
版 本 CSS2 
JavaScript 语法 : object.style.top="50px" 
可 能 的 值 
tā 描述 
auto 默认 值 。 通 过 浏览 器 计算 上 边缘 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 上 边 位 置 。 可 使 用 负 值 。 


length 使 用 px. cm 等 单位 设置 元 素 的 上 边 位 置 。 可 使 用 负 
inherit 规定 应 该 从 父 元 素 继承 top 属性 的 值 。 


TIY 实例 


使 用 固定 值 设置 图 像 的 上 边缘 
本 例 演示 如 何 使 用 固定 值 设置 图 像 的 上 边缘 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

position:absolute; 

top: 0px 


</style> 
</head> 
<body> 


<hi>This is a Heading</h1> 
<img class="normal" src="/i/eg_smile.gif" /> 
<p> 一 些 文 本 。 一 些 文 本 。 一 些 文 本 。 一 些 文 本 。 一 些 文本 。 一 些 文 本 。</p> 


</body> 
</html> 


使 用 百分比 设置 图 像 的 上 边缘 
本 例 演示 如 何 使 用 百分比 值 设 置 图 像 的 上 边缘 。 


<html> 

<head> 

<style type="text/css"> 
img 

{ 
position:absolute; 
top: 5% 

} 

</style> 

</head> 

<body> 


<h1> 这 是 标题 </h1> 
«img class="normal" src="/i/eg_smile.gif" /> 
<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文 本 。 一 些 文 本 。</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : top 属性 


CSS vertical-align 属性 


实例 
垂直 对 齐 一 幅 图 像 : 
img 


vertical-align: text-top; 


} 


浏览 器 文 持 

所 有 浏览 器 都 支持 vertical-align 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

vertical-align 属性 设置 元 素 的 垂直 对 齐 方式 。 

说 明 

该 属性 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 的 垂直 对 齐 。 人 允许 指定 负 长 


度 值 和 百分比 值 。 这 会 使 元 素 降低 而 不 是 升 高 。 在 表单 元 格 中 ， 这 个 属性 会 设置 单 
元 格 框 中 的 单元 格 内 容 的 对 齐 方 式 。 


默认 值 : baseline 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.verticalAlign="bottom" 


可 能 的 值 


值 描述 
baseline 默认 。 元 素 放置 在 父 元 素 的 基线 上 。 


sub 垂直 对 齐 文本 的 下 标 。 

super 垂直 对 齐 文本 的 上 标 

top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 

text-top 把 元 素 的 顶端 与 父 元 素 字 体 的 顶端 对 齐 

middle 把 此 元 素 放置 在 父 元 素 的 中 部 。 

bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 。 

eae 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 。 

length 

9, 2 "line-height" 属性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 
inherit 规定 应 该 从 父 元 素 继承 vertical-align 属性 的 值 。 


TIY 实例 


垂直 对 齐 图 象 
本 例 演示 如 何在 文本 中 垂直 排列 图 象 。 


<html> 


<head> 

<style type="text/css"> 

img.top {vertical-align:text-top} 
img.bottom {vertical-align:text-bottom} 
</style> 

</head> 


<body> 

<p> 

这 是 一 幅 <img class="top" border="0" src="/i/eg_cute.gif" /> 位 于 段落 中 f 
</p> 

<p> 

这 是 一 幅 <img class-"bottom" border="0" src="/i/eg_cute.gif" /> 位 于 段 邯 
</p> 


</body> 


</html> 





相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : verticalAlign 属性 


CSS visibility 属性 


实例 
使 h2 元 素 不 可 见 : 


h2 


visibility:hidden; 
} 
\、 - OO 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 visibility 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IEB) 都 不 支持 "inherit" 和 "collapse" 
属性 值 。 


定义 和 用 法 
visibility 属性 规定 元 素 是 否 可 见 。 


提示 : 即使 不 可 见 的 元 素 也 会 占据 页 面 上 的 空间 。 请 使 用 "display" 属性 来 创建 不 占 
据 页 面 空间 的 不 可 见 元 素 。 


说 明 


这 个 属性 指定 是 否 显示 一 个 元 素 生 成 的 元 素 框 。 这 意味 着 元 素 仍 占据 其 本 来 的 空 
间 ， 不 过 可 以 完全 不 可 见 。 值 collapse 在 表 中 用 于 从 表 布 局 中 删除 列 或 行 。 


默认 值 : visible 


继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.visibility="hidden" 
ZA 
可 能 的 值 
值 描述 


visible 默认 值 。 元 素 是 可 见 的 
hidden 元 素 是 不 可 见 的 。 


当 在 表格 元 素 中 使 用 时 ， 此 值 可 删除 一 行 或 一 列 ， 但 是 它 不 会 影响 
collapse ”表格 的 布局 。 被 行 或 列 占据 的 空 ABA RIA. P RUE IE 
被 用 在 其 他 的 元 素 上 ， 会 呈现 为 "hidden"。 


inherit 规定 应 该 从 父 元 素 继承 visibility 属性 的 值 。 


TIY 实例 


如 何 使 元 素 不 可 见 
本 例 演示 如 何 使 元 素 不 可 见 。 你 希望 元 素 被 显示 出 来 ， 还 是 不 呢 ? 


«html» 

«head» 

«style type="text/css"> 
hi.visible {visibility:visible} 
hi.invisible {visibility:hidden} 
</style> 

</head> 


<body> 

<h1 class="visible"> 这 是 可 见 的 标题 </h1> 

<h1 class="invisible"> 这 是 不 可 见 的 标题 </h1> 
</body> 


</html> 


把 表格 元 素 设置 为 collapse 
ZUR ZR D RT S TR TUS d n? 


«html» 
«head» 
«style type="text/css"> 
tr.coll 


visibility:collapse 
} 

</style> 

</head> 

<body> 


<table border="1"> 
<tr> 
<td>Adams</td> 
<td>John</td> 
</tr> 

<tr class="coll"> 
<td>Bush</td> 
<td>George</td> 
</tr> 

</table> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : visibility 属性 


CSS z-index 属性 


实例 


设置 图 像 的 z-index : 


img 
{ 
position:absolute; 
left: 0px; 
top:Opx; 
z-index:-1; 
} 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 z-index 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

z-index 属性 设置 元 素 的 堆 秋 顺序。 拥有 更 高 堆 过 顺序 的 元 素 总 是 会 处 于 堆 秋 顺序 
较 低 的 元 素 的 前 面 。 

注释 : 元 素 可 拥有 负 的 z-index 属性 值 。 

注释 : Z-index 仅 能 在 定位 元 素 上 奏效 (例如 position:absolute;) ! 


说 明 


该 属性 设置 一 个 定位 元 素 治 z 轴 的 位 置 ，z 轴 定 义 为 垂直 延伸 到 显示 区 的 轴 。 如 果 
为 正 数 ， 则 离 用 户 更 近 ， 为 负数 则 表示 离 用 户 更 远 。 


JavaScript 语法 : 


可 能 的 值 


auto 


object.style.zIndex="1" 


值 描述 
auto BAG. MESOUEES TURIS. 
number BITRATE ORE. 
inherit 规定 应 该 从 父 元 素 继承 z-index 属性 的 值 。 


TIY 实例 


Z-index 


Z-index 可 用 于 将 在 一 个 元 素 放 置 于 另 一 元 素 之 后 。 


<html> 

<head> 

<style type="text/css"> 
img. x 

1 

position:absolute; 
left:Opx; 

top:0px; 

z-index:-1 


</style> 
</head> 


<body> 

<h1> 这 是 一 个 标题 </h1> 

<img class="x" src="/i/eg_mouse.jpg" /> 

<p> 默 认 的 z-index 是 0. Z-index -1 拥有 更 低 的 优先 级 。</p> 
</body> 


</html> 


Z-index 


上 例 中 的 元 素 已 经 更 改 了 Z-index. 


<html> 

<head> 

<style type="text/css"> 
img. x 

{ 

position:absolute; 
left : 0px; 

top:0px; 

z-index:1 


} 
</style> 
</head> 


<body> 

<h1> 这 是 一 个 标题 </h1> 

«img class="x" src="/i/eg_mouse.jpg" /> 

<p> 默 认 的 z-index 是 0, Z-index 1 拥有 更 高 的 优先 级 。</p> 
</body> 


</html> 


相关 页 面 


W3School 前 端 教程 合集 


CSS 教程 : CSS 定位 
HTML DOM 参考 手册 : zlndex 属性 


CSS z-index 属性 1254 


CSS 打印 属性 (Print) 


属性 
orphans 
page-break- 
after 


page-break- 
before 


page-break- 
inside 


widows 


B 
学 


设置 当 元 素 内 部 发 生 分 页 时 
少 行 数 。 


S Xs 


设置 元 素 后 的 分 页 行为 。 


设置 元 素 前 的 分 页 行为 。 


设置 元 素 内 部 的 分 页 行为 。 


必须 在 页 面 底部 保留 的 


设置 当 元 素 内 部 发 生 分 页 时 必须 在 页 面 顶部 保留 的 


最 少 行 数 。 


CSS 


CSS page-break-after 属性 


实例 
设置 在 表格 元 素 之 后 始终 进行 分 页 的 分 页 行为 : 


<html> 

<head> 

<style> 

@media print 

{ 

table {page-break-after:always;} 
} 


</style> 
</head> 


<body> 
</body> 
</html> 


浏览 器 支持 


所 有 浏览 器 都 支持 page-break-after 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "left"、"right" 
以 及 "inherit"。 


注释 : Firefox, Chrome 以 及 Safari 不 支持 属性 值 "avoid"、"left" 以 及 "right". 


c : 
page-break-after 属性 设置 元 素 后 的 page-breaking 行为 。 


管 可 以 用 always 强制 放 上 分 页 符 ， 但 是 无 法 保证 避免 分 页 符 的 插入 ， 创 作 人 员 
Sn E S 户 代 理 尽 可 能 避免 插入 分 页 。 


应 用 于 : position 值 为 relative 或 static 的 非 浮动 块 级 元 素 。 


注释 : 请 尽 可 能 少 地 使 用 分 页 属性 ， 并 且 避 免 在 表格 、 浮 动 元 素 、 带 有 边框 的 块 元 
KOREA RB. 


JavaScript 语法 : 


可 能 的 值 


值 


auto 


object.style.pageBreakAfter-"always" 


Bt 
EH 


auto 默认 。 如 果 必 要 则 在 元 素 后 插入 分 页 符 。 
always 在 元 素 后 插入 分 页 符 。 
avoid 避免 在 元 素 后 插 和 人 分 页 符 。 


left 在 元 素 之 后 足够 的 分 页 符 ， 
right 在 元 素 之 后 足够 的 分 页 符 ， 


I 一 张 空白 的 左 页 为 止 。 


一 直至 
一 直到 一 张 空白 的 右 页 为 止 。 


inherit 规定 应 该 从 父 元 素 继承 page-break-after 属性 的 设置 。 


相关 页 面 


HTML DOM 参考 手册 : pageBreakAfter 属性 


CSS page-break-before 属性 


实例 
设置 在 表格 元 素 之 后 始终 进行 分 页 的 分 页 行为 : 


<html> 

<head> 

<style> 

@media print 

t 

table {page-break-before:always; } 
} 


</style> 
</head> 


<body> 
</body> 
</html> 


浏览 器 支持 


所 有 浏览 器 都 支持 page-break-before 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "left"、"right" 
以 及 "inherit"。 


注释 : Firefox, Chrome 以 及 Safari 不 支持 属性 值 "avoid"、"left" 以 及 "right". 


mag S 
page-break-before 属性 设置 元 素 前 的 page-breaking 行为 。 


管 可 以 用 always 强制 放 上 分 页 符 ， 但 是 无 法 保证 避免 分 页 符 的 插入 ， 创 作 人 员 
SRA ES 户 代 理 尽 可 能 避免 插入 分 页 。 


应 用 于 : position 值 为 relative 或 static 的 非 浮动 块 级 元 素 。 


注释 : 请 尽 可 能 少 地 使 用 分 页 属性 ， 并 且 避 免 在 表格 、 浮 动 元 素 、 带 有 边框 的 块 元 
KOREA RB. 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.pageBreakBefore="always" 
A| 
可 能 的 值 
值 描述 
auto 默认 值 。 如 果 必 要 则 在 元 素 前 插入 分 页 符 。 


always 在 元 素 前 插入 分 页 符 。 
avoid 避免 在 元 素 前 插入 分 页 符 。 


left 在 元 素 之 前 足够 的 分 页 符 ， 一 直到 一 张 空 白 的 左 页 为 止 。 
right 在 元 素 之 前 足够 的 分 页 符 ， 一 直到 一 张 空 白 的 右 页 为 止 。 


inherit 规定 应 该 从 父 元 素 继承 page-break-before 属性 的 设置 。 


相关 页 面 


HTML DOM 参考 手册 : pageBreakBefore 属性 


CSS page-break-inside 属性 


实例 
设置 在 表格 元 素 内 部 避免 进行 分 页 的 分 页 行为 : 


<html> 

<head> 

<style> 

@media print 

table {page-break-inside:avoid; } 


</style> 
</head> 


<body> 
</body> 
</html> 


浏览 器 支持 


只 有 Opera 浏览 器 支持 page-break-inside 属性 。 


定义 和 用 法 
page-break-inside 属性 设置 元 素 内 部 的 page-breaking 行为 。 


尽管 可 以 用 always 强制 放 上 分 页 符 ， 但 是 无 法 保证 避免 分 页 符 的 插入 ， 创 作 人 员 
最 多 只 能 要 求 用 户 代 理 尽 可 能 避免 插入 分 页 。 


应 用 于 : position 值 为 relative 或 static 的 非 浮 动 块 级 元 素 。 


注释 : 请 尽 可 能 少 地 使 用 分 页 属性 ， 并 且 避 免 在 表格 、 浮 动 元 素 、 带 有 边框 的 块 元 
KOREA RB. 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.pageBreaklnside-"avoid" 
LA 
可 能 的 值 
值 描述 


auto 默认 。 如 果 必 要 则 在 元 素 内 部 插入 分 页 符 。 
avoid 避免 在 元 素 内 部 插入 分 页 符 。 
inherit 规定 应 该 从 父 元 素 继承 page-break-inside 属性 的 设置 。 


相关 页 面 


HTML DOM 参考 手册 : pageBreaklnside 属性 


CSS 表格 属性 (Table) 


属性 描述 css 
border-collapse ”规定 是 否 合并 表格 边框 。 2 
border-spacing ”规定 相 邻 单元 格 边 框 之 间 的 距离 。 2 
caption-side 规定 表格 标题 的 位 置 。 2 
empty-cells 规定 是 否 显示 表格 中 的 空 单元 格 上 的 边框 和 背景 。 2 
2 


table-layout 设置 用 于 表格 的 布局 算法 。 


CSS border-collapse 属性 


实例 
为 表格 设置 合并 边框 模型 : 
table 


border-collapse:collapse; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 border-collapse 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 
注释 : 如 果 没 有 规定 !IDOCTYPE， 则 border-collapse 可 能 产生 意 想 不 到 的 结果 。 


定义 和 用 法 


border-collapse 属性 设置 表格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 ， 还 是 象 在 标准 
的 HTML 中 那样 分 开 显示 。 


默认 值 : separate 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.borderCollapse-"collapse" 


可 能 的 值 


值 描述 


gr. sh HES am sena : 
separate 2. 边框 会 被 分 开 。 不 会 忽略 border-spacing 和 empty-cells 


如 果 可 能 ， 边 框 会 合并 为 一 个 单一 的 边框 。 会 忽略 border-spacing 


Sons 和 empty-cells 属性 。 


inherit 规定 应 该 从 父 元 素 继承 border-collapse 属性 的 值 。 


TIY 实例 


合并 表格 边框 
本 例 演示 是 否 把 表格 边框 显示 为 一 条 单独 的 边框 ， 还 是 像 标准 的 HTML 中 那样 分 开 


X No 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt 
<html> 
<head> 
<style type="text/css"> 
table 
{ 
border-collapse:collapse; 


} 


table, td, th 
{ 
border:1px solid black; 
} 

</style> 

</head> 


<body> 

<table> 

<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
</tr> 

<tr> 

<td>Bill</td> 
<td>Gates</td> 
</tr> 

<tr> 
<td>Steven</td> 
<td>Jobs</td> 
</tr> 

</table> 
<p><b> 注 释 : </b> 如 果 没 有 规定 !DOCTYPE, border-collapse 属性 可 能 会 引起 意 想 
</body> 

</html> 





相关 页 面 


CSS 教程 CSS 表格 
HTML DOM 参考 手册 : borderCollapse 属性 


CSS border-spacing 属性 


实例 
为 表格 设置 border-spacing : 


table 


border-collapse:separate; 
border-spacing:10px 50px; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 border-spacing 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 
border-spacing 属性 。 


定义 和 用 法 
border-spacing 属性 设置 相 邻 单元 格 的 边框 间 的 距离 ( 仅 用 于 “边框 分 离 " 模 式 ) o 
注释 : 某 些 版 本 的 IE 浏 览 器 不 支持 此 属性 。 


说 明 


eee 定 分 隅 边框 模型 中 单元 格 边 界 之 间 的 距离 。 在 指定 的 两 个 长 度 值 中 ， 第 一 
是 水 平 间 隔 ， 第 二 个 是 垂直 间隔 。 除 非 border-collapse wit E» separate, A 
» | 将 忽略 这 个 属性 。 尽 管 这 个 属性 只 应 用 于 表 ， 不 过 它 可 以 由 表 中 的 所 有 元 素 继 


o 


默认 值 : not specified 


继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.borderSpacing="15px" 
A| 
可 能 的 值 
值 描述 
length length 


规定 相 邻 单元 的 边框 之 间 的 距离 。 使 用 px, cm 等 单位 。 不 允许 使 用 负 值 。 

如 果 定 义 一 个 length 参数 ， 那 么 定义 的 是 水 平和 垂直 间距 。 

如 果 定 义 两 个 length 参数 ， 那 么 第 一 个 设置 水 平 间 距 ， 而 第 二 个 设置 垂直 间距 。 
| | inherit | 规定 应 该 从 父 元 素 继 承 border-spacing 属性 的 值 。 | 


TIY 实例 


设置 表格 边框 之 间 的 空白 
本 例 演示 如 何 设 置 单元 格 边框 之 间 的 距离 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht! 


«html» 

«head» 

«style type="text/css"> 
table.one 

{ 

border-collapse: separate; 
border-spacing: 10px 

} 

table. two 

{ 

border-collapse: separate; 
border-spacing: 10px 50px 
} 

</style> 

</head> 

<body> 


<table class="one" border="1"> 
<tr> 

<td>Adams</td> 

<td>John</td> 

</tr> 

<tr> 

<td>Bush</td> 

<td>George</td> 

</tr> 

</table> 


<br /> 


<table class="two" border="1"> 
<tr> 

<td>Carter</td> 
<td>Thomas</td> 

</tr> 

<tr> 

<td>Gates</td> 

<td>Bill</td> 

</tr> 

</table> 


<p><b> 注 释 : </b> 如 果 已 规定 !DOCTYPE, ABZ Internet Explorer 8 (以 及 更 高 


</body> 
</html> 


«| Em 
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CSS 教程 : CSS 表格 
HTML DOM 参考 手册 : borderSpacing 属性 


CSS border-spacing 属性 1269 


CSS caption-side 属性 


实例 
规定 表格 标题 的 放置 方式 : 


caption 
{ 


caption-side:bottom; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 caption-side 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 
caption-side 属性 。 


定义 和 用 法 
caption-side 属性 设置 表格 标题 的 位 置 。 
说 明 


该 属性 指定 了 表 标 题 相对 于 表 框 的 放置 位 置 。 表 标题 显示 为 好 像 它 是 表 之 前 (或 之 
后 ) 的 一 个 块 级 元 素 。 


默认 值 : top 
继承 性 : yes 


JavaScript 语法 : object.style.captionSide="bottom" 


可 能 的 值 


值 描述 


top 默认 值 。 把 表格 标题 定位 在 表格 之 上 。 
bottom 把 表格 标题 定位 在 表格 之 下 。 
inherit 规定 应 该 从 父 元 素 继承 caption-side 属性 的 值 。 


Ww 


TIY 实例 


设 


置 表格 标题 的 位 置 


本 例 演 示 如 何 定位 表格 的 标题 。 


‘| 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt 


<html> 

<head> 

<style type="text/css"> 
caption 

1 

caption-side:bottom 

} 

</style> 

</head> 

<body> 


<table border="1"> 
<caption>This is a caption</caption> 
<tr> 
<td>Adams</td> 
<td>John</td> 
</tr> 

<tr> 

<td>Bush</td> 
<td>George</td> 
</tr> 

</table> 


<p><b> 注 释 : </b> 如 果 已 规定 !DOCTYPE, H&A Internet Explorer 8 (以 及 更 高 


</body> 
</html> 








相关 页 面 
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HTML DOM 参考 手册 : captionSide 属性 


CSS caption-side 属性 1272 


CSS empty-cells 属性 


实例 
隐藏 表格 中 空 单 元 格 上 的 边框 和 背景 : 


table 


border -collapse:separate; 
empty-cells:hide; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 empty-cells 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 
empty-cells 属性 。 


定义 和 用 法 

empty-cells 属性 设置 是 否 显示 表格 中 的 空 单元 格 ( 仅 用 于 “分 离 边 框 "模式 ) 。 
注释 : 某 些 版 本 的 IE 浏览 器 不 支持 此 属性 。 

说 明 


该 属性 定义 了 不 包含 任何 内 容 的 表单 元 格 如 何 表示 。 如 果 显 示 ， 就 会 绘制 出 单元 格 
的 边框 和 背景 。 除 非 border-collapse 设置 为 separate， 否 则 将 忽略 这 个 属性 。 


默认 值 : show 


继承 性 : yes 

版 本 CSS2 

JavaScript 语法 : object.style.emptyCells="hide" 
可 能 的 值 

t 描述 

hide 不 在 空 单元 格 周围 绘制 边框 。 

show 在 空 单元 格 周围 绘制 边框 。 默 认 。 

inherit 规定 应 该 从 父 元 素 继承 empty-cells 属性 的 值 。 
相 天 页 面 


CSS 教程 : CSS 表格 
HTML DOM 参考 手册 : emptyCells 属性 


CSS table-layout 属性 


实例 
设置 表格 布局 算法 : 


table 


table-layout: fixed; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 table-layout 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
tableLayout 属性 用 来 显示 表格 单元 格 、 行 、 列 的 算法 规则 。 
固定 表格 布局 : 


固定 表格 布局 与 自动 表格 布局 相 比 ， 人 允许 浏览 器 更 快 地 对 表格 进行 布局 。 


在 固定 表格 布局 中 ， 水 平 布局 仅 取决 于 表格 宽度 、 列 宽度 、 表 格 边 框 宽度 、 单 元 格 
间距 ， 而 与 单元 格 的 内 容 无 关 。 


通过 使 用 固定 表格 布局 ， 用 户 代理 在 接收 到 第 一 行 后 就 可 以 显示 表格 。 
目 动 表格 布局 : 


在 自动 表格 布局 中 ， 列 的 宽度 是 由 列 单元 格 中 没有 折 行 的 最 宽 的 内 容 设 定 的 。 
此 算法 有 时 会 较 慢 ， 这 是 由 于 它 需要 在 确定 最 终 的 布局 之 前 访问 表格 中 所 有 的 内 


sy 


合 


说 明 


该 属性 指定 了 完成 表 布 局 时 所 用 的 布局 算法 。 固 定 布局 算法 比较 快 ， 但 是 不 太 灵 
活 ， 而 自动 算法 比较 慢 ， 不 过 更 能 反映 传统 的 HTML X. 


默认 值 : auto 

继承 性 : yes 

版 本 CSS2 

JavaScript 语法 : object.style.tableLayout="fixed" 
可 能 的 值 

值 描述 

automatic 默认 。 列 宽度 由 单元 格 内 容 设 定 。 

fixed 列 宽 由 表格 宽度 和 列 宽度 设 定 。 

inherit 规定 应 该 从 父 元 素 继承 table-layout 属性 的 值 。 
TIY 实例 
设置 表格 的 布局 


本 例 演示 如 何 设置 表格 的 布局 。 


<html> 

<head> 

<style type="text/css"> 
table.one 

{ 

table-layout: automatic 
} 

table. two 

{ 

table-layout: fixed 

} 

</style> 

</head> 

<body> 


<table class="one" border="1" width="100%"> 

<tr> 

<td width="20%">1000000000000000000000000000</td> 
<td width="40%">10000000</td> 

<td width="40%">100</td> 

</tr> 

</table> 


<br /> 


«table class="two" border="1" width="100%"> 

<tr> 

<td width="20%">1000000000000000000000000000</td> 
<td width="40%">10000000</td> 

<td width="40%">100</td> 

</tr> 

</table> 


</body> 
</html> 


相关 页 面 
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CSS 文本 属性 (Text) 


uL 
W3School 前 端 教程 合 


属性 
color 
direction 
letter-spacing 
line-height 
text-align 
text-decoration 
text-indent 
text-shadow 
text-transform 
unicode-bidi 
white-space 
word-spacing 


hanging- 
punctuation 


punctuation-trim 


text-align-last 


text-emphasis 


text-justify 


text-outline 
text-overflow 
text-shadow 
text-wrap 


word-break 


word-wrap 


CSS 文本 属性 (Te 


xxt) 


描述 
设置 文本 的 颜色 。 
规定 文本 的 方向 / 书写 方向 。 
REF uia 
Ax X BI [Flo 
规定 文本 的 水 平 对 齐 方式 。 
规定 添加 到 文本 的 装饰 效果 。 
规定 文本 块 首 行 的 缩 进 
规定 添加 到 文本 的 阴影 效果 。 
控制 文本 的 大 小 写 。 
设置 文本 方向 。 


规定 如 何 义理 元 素 中 的 空白 。 
设置 单词 间距 。 


规定 标点 字符 是 否 位 于 线 框 之 外 。 


规定 是 否 对 标点 字符 进行 修剪 。 


置 如 何 对 齐 最 后 一 行 或 紧 挨 着 强制 换行 符 之 前 
的 行 。 


向 元 素 的 文本 应 用 重点 标记 以 及 重点 标记 的 前 景 


o 


规定 当 text-align 设置 为 "justify" 时 所 使 用 的 对 齐 
方法 。 


规定 文本 的 轮廓 。 

规定 当 文 本 渝 出 包含 元 素 时 发 生 的 事情 。 
向 文本 添加 阴影 。 

规定 文本 的 换行 规则 。 

规定 非 中 日 韩文 本 的 换行 规则 。 


允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换行 到 下 
m 


CSS 


C CO CQ C Ww 


CSS color 属性 


实例 
为 不 同 元 素 设置 文本 颜色 : 


body 
color:red; 
} 

hi 


{ 
color: #00ff00; 
} 

p 


{ 
color:rgb(0,0,255); 
} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 color 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
color 属性 规定 文本 的 颜色 。 
个 属性 设置 了 一 个 元 素 的 前 景色 (在 HTML 表现 中 ， 就 是 元 素 文 本 的 颜色 ) ; 光 


m Cos 影响 。 这 个 颜色 还 会 应 用 到 元 素 的 所 有 边框 ， 除 非 被 border-color 
或 另外 某 个 边框 颜色 属性 覆盖 。 


要 设置 一 个 元 素 的 前 景色 ， 最 容易 的 方法 是 使 用 color 属性 。 


默认 值 : not specified 


继承 性 : yes 

版 本 : CSS1 

JavaScript 语法 : object.style.color="#FFOOOO" 
提示 和 注释 


提示 : 请 使 用 合理 的 背景 颜色 和 文本 颜色 搭配 ， 这 样 可 以 提高 文本 的 可 读 性 。 


可 能 的 值 
值 描述 
color_name 颜色 值 为 颜色 名 称 的 颜色 (比如 red) 。 


hex_number 颜色 值 为 十 六 进 制 值 的 颜色 (LE 4ff0000) 。 


规定 颜 
规定 
规定 颜 
规定 


rgb_number 颜色 值 为 rgb 代码 的 颜色 (比如 rgb(255,0,0)) 。 
inherit 应 该 从 父 元 素 继 承 颜色 。 


TIY 实例 


置 文本 颜色 
本 例 演示 如 何 设置 文本 的 颜色 。 


«html» 

«head» 

«style type="text/css"> 
body {color:red} 

hi {color :#00ff00} 

p.ex {color:rgb(0,0,255)} 
</style> 

</head> 


<body> 

<hi>ix heading 1</h1> 

<p> 这 是 一 段 普通 的 段落 。 请 注意 ， 该 段落 的 文本 是 红色 的 。 在 body 选择 器 中 定义 了 本 
<p class="ex"> 该 段落 定义 了 class="ex"。 该 段落 中 的 文本 是 蓝 色 的 。</p> 
</body> 

</html> 
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CSS direction 属性 


实例 


把 文本 方向 设置 为 "从 右 向 左 ”: 


div 
{ 
direction: rtl 
} 
\、 - OO 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 direction 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


direction 属性 规定 文本 的 方向 / 书写 方向 。 


该 属性 指定 了 块 的 基本 书写 方向 ， 以 及 针对 Unicode 双向 算法 的 冤 入 和 覆盖 方向 。 
不 支持 双向 文本 的 用 户 代理 可 以 忽略 这 个 属性 。 


默认 值 : Itr 
继承 性 : yes 
版 本 : CSS2 
JavaScript 语法 : object.style.direction="rtl" 


可 能 的 值 


值 描述 


Itr 默认 。 文 本 方向 从 左 到 右 。 
rtl 文本 方向 从 右 到 左 。 
inherit 规定 应 该 从 父 元 素 继承 direction 属性 的 值 。 


TIY 实例 


设置 文本 的 方向 
本 例 演 示 如 何 设置 文本 的 方向 。 


<html> 

<head> 

<style type="text/css"> 
div.one 

{ 

direction: rtl 
} 

div. two 

1 

direction: ltr 
} 

</style> 
</head> 

<body> 


<div class="one">Some text. Right-to-left direction.</div> 
<div class="two">Some text. Left-to-right direction.</div> 


</body> 
</html> 


相关 页 面 
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CSS letter-spacing 属性 


实例 
设置 h1 和 h2 元 素 的 字母 间距 : 


hi {letter-spacing:2px} 
h2 {letter-spacing: -3px} 


浏览 器 文 持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 letter-spacing 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
letter-spacing 属性 增加 或 减少 字符 间 的 空白 〈 字 符 间 距 ) 。 


该 属性 定义 了 在 文本 字符 框 之 间 插 入 多 少 空间 。 由 于 字符 字形 通常 比 其 字符 框 要 
罕 ， 指 定 长 度 值 时 ， 会 调整 字母 之 间 通 常 的 间隔 。 因 此 ，normal 就 相当 于 值 为 0。 


注释 : 允许 使 用 负 值 ， 这 会 让 字母 之 间 挤 得 更 紧 。 


默认 值 : normal 
继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.letterSpacing="3px" 


可 能 的 值 


值 描述 


normal 默认 。 规 定 字符 间 没 有 额外 的 空间 。 
length 定义 字符 间 的 固定 空间 (人 允许 使 用 负 值 ) 。 
inherit 规定 应 该 从 父 元 素 继承 letter-spacing 属性 的 值 。 


TIY 实例 


规定 字符 间距 (字母 间隔 ) 
本 例 演示 如 何 增加 或 减少 字符 间距 。 


<html> 


<head> 

<style type="text/css"> 

hi {letter-spacing: -0.5em} 
h4 {letter-spacing: 20px} 
</style> 

</head> 


<body> 
<hi>This is header 1</h1> 
<h4>This is header 4</h4> 
</body> 


</html> 


相关 页 面 
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HTML DOM 参考 手册 : letterSpacing 属性 


CSS line-height 属性 


实例 
设置 以 百分比 计 的 行 高 : 


p.small {line-height : 90%} 
p.big {line-height : 200%} 


(可 以 在 页 面 底部 查看 更 多 实例 ) 
浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 line-height 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
line-height 属性 设置 行 间 的 距离 (frm) 。 
注释 : 不 允许 使 用 负 值 。 
说 明 


该 属性 会 影响 行 框 的 布局 。 在 应 用 到 一 个 块 级 元 素 时 ， 它 定义 了 该 元 素 中 基线 之 间 
的 最 小 距离 而 不 是 最 大 距离 。 


line-height 与 font-size 的 计算 值 之 差 (在 CSS 中 成 为 “ 行 间 距 ”) 分 为 两 半 ， 分 别 
加 到 一 个 文本 行内 容 的 项 部 和 底部 。 可 以 包含 这 些 内 容 的 最 小 框 就 是 行 框 。 


原始 数字 值 指定 了 一 个 缩放 因子 ， 后 代 元 素 会 继承 这 个 缩放 因子 而 不 是 计算 值 。 


默认 值 : 


JavaScript 语法 : 


可 能 的 值 


值 


normal 默认 。 


normal 


object.style.lineHeight="2" 


描 


学 


a HEAT ig ER. 


number ， 设 置 数 字 ， 此 数字 会 与 当前 的 字体 尺寸 相 乘 来 设置 行 间距 。 


length 设置 固定 的 行 间距 。 


% 基于 当前 字体 尺寸 的 百分比 行 间距 。 
inherit 规定 应 该 从 父 元 素 继 承 line-height 属性 的 值 。 


TIY 实例 


使 用 百分比 设置 行 间距 


本 例 演示 如 何 使 用 百分比 值 来 设置 段落 中 的 行 间距 。 


<html> 


<head> 

<style type="text/css"> 
p.small {line-height: 90%} 
p.big {line-height: 200%} 
</style> 

</head> 


<body> 


<p> 

这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏览 器 中 默认 行 高 大 约 是 110% 到 12096, 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

</p> 


<p class="small"> 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
</p> 


<p class="big"> 

这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
</p> 


</body> 
</html> 
使 用 像素 值 设 置 行 间 距 
本 例 演示 如 何 使 用 像素 值 来 设置 段落 中 的 行 间距 。 


<html> 


<head> 
<style type="text/css"> 
p.small 
{ 
line-height: 10px 
} 
p.big 
line-height: 30px 


</style> 
</head> 


<body> 


<p> 
这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏览 器 中 默认 行 高 大 约 是 20px。 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

</p> 


<p class="small"> 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
</p> 


<p class="big"> 

这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
</p> 


</body> 
</html> 


使 用 数值 来 设置 行 间距 


本 例 演示 如 何 使 用 一 个 数值 来 设置 段落 中 的 行 间距 。 


<html> 


<head> 

<style type="text/css"> 
p.small 

{ 

line-height: 0.5 
} 

p.big 

{ 

line-height: 2 

} 

</style> 

</head> 


<body> 


<p> 

这 是 拥有 标准 行 高 的 段落 。 
默认 行 高 大 约 是 1。 

这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
</p> 





«p class="small"> 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
</p> 





<p class="big"> 

这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
</p> 





</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : lineHeight 属性 


CSS text-align 属性 


实例 
设置 h1、h2、h3 元 素 的 文本 对 齐 方式 : 


hi {text-align:center} 
h2 {text-align:left} 
h3 {text-align: right} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 text-align 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

text-align 属性 规定 元 素 中 的 文本 的 水 平 对 齐 方式 。 

该 属性 通过 指定 行 框 与 哪个 点 对 齐 ， 从 而 设置 块 级 元 素 内 文本 的 水 平 对 齐 方式 。 通 
过 人 允许 用 户 代理 调整 行内 容 中 字母 和 字 之 间 的 间隔 ， 可 以 支持 值 justify ; TAA 
代理 可 能 会 得 到 不 同 的 结果 。 


如 果 direction 属性 是 ltr， 则 默认 值 是 left ; WR direction 


里 ^. . 

默认 值 : 是 rtl， 则 为 right。 
继承 性 : yes 
版 本 : CSS1 
JavaScript 


object.style.textAlign="right" 


语法 


可 能 的 值 


值 描述 
left 把 文本 排列 到 左边 。 默 认 值 : 由 浏览 器 决定 。 
right 把 文本 排列 到 右边 。 
center 把 文本 排列 到 中 间 。 
justify 实现 两 端 对 齐 文本 效果 。 
inherit 规定 应 该 从 父 元 素 继 承 text-align 属性 的 值 。 
值 justify 


最 后 一 个 水 平 对 齐 属性 是 justify， 它 会 带 来 自己 的 一 些 问 题 。 


值 justify 可 以 使 文本 的 两 端 都 对 齐 。 在 两 端 对 齐 文 本 中 ， 文 本 行 的 左右 两 端 都 放 在 
父 元 素 的 内 边界 上 上。 然后， 调整 单词 和 字母 间 的 间隔 ， 使 各 行 的 长 度 恰好 相等 。 您 
也 许 已 经 注意 到 了 ， 两 端 对 齐 文 本 在 打印 领域 很 常见 。 不 过 在 CSS 中 ， 还 需要 多 
做 些 考 虑 。 


要 由 用 户 代理 (而 不 是 CSS) 来 确定 两 端 对 齐 文 本 如 何 拉 伸 ， 以 填 满 父 元 素 左 右边 
界 之 间 的 空间 。 例 如 ， 有 些 浏览 器 可 能 只 在 单词 之 间 增 加 额外 的 空间 ， 而 另外 一 些 
浏览 器 可 能 会 平均 分 布 字母 间 的 额外 空间 (不 过 CSS 规范 特别 指出 ， 如 果 letter- 
spacing 属性 指定 为 一 个 长 度 值 , “用 户 代 理 不 能 进一步 增加 或 减少 字符 间 的 空 

H) 。 还 有 一 些 用 户 代 理 可 能 会 减少 某 些 行 的 空间 ， 使 文本 挤 得 更 紧密 。 所 有 这 些 
做 法 都 会 影响 元 素 的 外 观 ， 甚 至 改变 其 高 度 ， 这 取决 于 用 户 代 理 的 对 齐 选择 影响 了 
多 少 文 本 行 。 

CSS 也 没有 指定 应 当 如 何 处 理 连 字 符 ( 注 1) 。 大 多 数 两 端 对 齐 文 本 都 使 用 连 字 符 
将 长 单词 分 开放 在 两 行 上 ， 从 而 缩小 单词 之 间 的 间隔 ， 改 善文 本 行 的 外 观 。 不 过 ， 
由 于 CSS 没有 定义 连 字 符 行为 ， 用 户 代 理 不 太 可 能 自动 加 连 字 符 。 因 此 ， 在 CSS 
中 ， 两 端 对 齐 文 本 看 上 去 没有 打印 出 来 好 看 ， 特 别 是 元 素 可 能 太 罕 ， 以 至 于 每 行 只 
能 放下 几 个 单词 。 当 然 ， 使 用 窄 设计 元 素 是 可 以 的 ， 不 过 要 当心 相应 的 缺点 。 


注 1 : CSS 中 没有 说 明 如 何 处 理 连 字符 ， 因 为 不 同 的 语言 有 不 同 的 连 字 符 规 则 。 规 
范 没 有 党 试 去 调和 这 样 一 些 很 可 能 不 完备 的 规则 ， 而 是 干脆 不 提 这 个 问题 。 


TIY 实例 


对 齐 文本 
本 例 演示 如 何 对 齐 文 本 。 


«html» 

«head» 

«style type="text/css"> 
hi (text-align: center) 
h2 (text-align: left) 
h3 (text-align: right} 
</style> 

</head> 

<body> 

<h1> 这 是 标题 1</h1> 
<h2> 这 是 标题 2</h2> 
<h3> 这 是 标题 3</h3> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : textAlign 属性 


CSS text-decoration 属性 


实例 
设置 h1、h2、h3、h4 元 素 的 文本 修饰 : 


hi (text-decoration:overline) 

h2 (text-decoration:line-through) 
h3 {text-decoration: underline} 

h4 {text-decoration: blink} 


ay - nu 
浏览 器 文 持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 text-decoration 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
注释 : IE, Chrome 或 Safari 不 支持 "blink" 属性 值 。 


定义 和 用 法 

text-decoration 属性 规定 添加 到 文本 的 修饰 。 
注释 : 修饰 的 颜色 由 "color" 属性 设置 。 

说 明 


这 个 属性 允许 对 文本 设置 某 种 效果 ， 如 加 下 划 线 。 如 果 后 代 元 素 没 有 自己 的 装饰 ， 
祖先 元 素 上 设置 的 装饰 会 "延伸 "到 后 代 元 素 中 。 不 要 求 用 户 代理 支持 blink, 


JavaScript 语法 : 


可 能 的 值 


值 
none 
underline 
overline 
line-through 
blink 


inherit 


TIY 实例 


修饰 文本 


none 


object.style.textDecoration-"overline" 


B 
EL 


默认 。 定 义 标 准 的 文本 。 

定义 文本 下 的 一 条 线 。 

定义 文本 上 的 一 条 线 。 

定义 穿 过 文本 下 的 一 条 线 。 

定义 闪烁 的 文本 。 

规定 应 该 从 父 元 素 继承 text-decoration 属性 的 值 。 


本 例 演示 如 何 向 文本 添加 修饰 。 


<html> 

<head> 

<style type="text/css"> 

hi {text-decoration: overline} 

h2 {text-decoration: line-through} 
h3 {text-decoration: underline} 

h4 {text-decoration: blink} 

a {text-decoration: none} 

</style> 

</head> 


<body> 

<h1> 这 是 标题 1</h1> 

<h2> 这 是 标题 2</h2> 

<h3> 这 是 标题 3</h3> 

<h4> 这 是 标题 4</h4> 

<p><a href="http://www.w3school.com.cn/index.html"> 这 是 一 个 链接 </a><， 
</body> 


</html> 





相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : textDecoration 属性 


CSS text-indent 属性 


实例 
将 段落 的 第 一 行 缩 进 50 像素 : 


p 


{ 
text-indent :50px; 


} 


浏览 器 文 持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 text-indent 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 
text-indent 属性 规定 文本 块 中 首 行文 本 的 缩 进 。 
注释 : 允许 使 用 负 值 。 如 果 使 用 负 值 ， 那 么 首 行 会 被 缩 进 到 左边 。 
注意 : Æ CSS 2.1 之 前 ，text-indent 总 是 继承 计算 值 ， 而 不 是 声明 值 。 
说 明 


用 于 定义 块 级 元 素 中 第 一 个 内 容 行 的 缩 进 。 这 最 常用 于 建立 一 个 “标签 页 "效果 。 人 多 
许 指 定 负 值 ， 这 会 产生 一 种 “悬挂 缩 进 ”的 效果 。 


JavaScript 语法 : 


length 定义 固定 的 缩 进 。 


可 能 的 值 

值 
76 LEFF RIT 
inherit 规定 应 该 人 


TIY 实例 


缩 进 文本 
本 例 演示 如 何 缩 缩 进 


not specified 


object.style.textIndent="50px" 


描述 


默认 值 : 0。 
素 宽 度 的 百分比 的 缩 进 。 
父 元 素 继承 text-indent 属性 的 值 。 


<html> 

<head> 

<style type="text/css"> 
p {text-indent: 1cm} 
</style> 

</head> 


<body> 

<p> 

这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
</p> 

</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : textlndent 属性 


CSS text-transform 属性 


实例 
转换 不 同 元 素 中 的 文本 : 


h1 {text-transform:uppercase} 
h2 {text-transform:capitalize} 
p {text-transform: lowercase} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 text-transform 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
text-transform 属性 控制 文本 的 大 小 写 。 
说 明 
这 个 属性 会 改变 元 素 中 的 字母 大 小 写 ， 而 不 论 源 文 档 中 文本 的 大 小 写 。 如 果 值 为 
capitalize， 则 要 对 某 些 字母 大 写 ， 但 是 并 没有 明确 定义 如 何 确 定 哪些 字母 要 大 写 ， 
这 取决 于 用 户 代理 如 何 识 别 出 各 个 “ 词 ”。 
默认 值 : none 
继承 性 : yes 


JavaScript 语法 : object.style.textTransform-"uppercase" 


提示 和 注释 
注释 : 不 同 的 用 户 代理 可 能 会 用 不 同 的 方法 来 确定 单词 从 哪里 开始 ， 相 应 地 确定 哪 


些 字母 要 大 写 。 例 如 ， 文 本 "w3-school" 可 以 用 两 种 方式 显示 : "W3-school" 和 
"W3-School"。CSS 并 没有 规定 哪 一 种 是 正确 的 ， 所 以 这 两 种 都 是 可 以 的 。 


可 能 的 值 


值 描述 
none 默认 。 定 义 带 有 小 写字 母 和 大 写字 母 的 标准 的 文本 。 
capitalize 文本 中 的 每 个 单词 以 大 写字 母 开 头 。 
uppercase 定义 仅 有 大 写字 母 。 
lowercase 定义 无 大 写字 母 ， 仅 有 小 写字 母 。 
inherit 规定 应 该 从 父 元 素 继承 text-transform 属性 的 值 。 


TIY 实例 


控制 文本 中 的 字母 
本 例 演示 如 何 控 制 文本 中 的 字母 的 大 小 写 。 


<html> 


<head> 

<style type="text/css"> 
h1 {text-transform: uppercase} 
p.uppercase {text-transform: uppercase} 
p.lowercase {text-transform: lowercase} 
p.capitalize {text-transform: capitalize} 

</style> 

</head> 


<body> 

<hi>This Is An H1 Element</h1> 

<p class="uppercase">This is some text in a paragraph.</p> 
<p class="lowercase">This is some text in a paragraph.</p> 
<p class="capitalize">This is some text in a paragraph.</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : textTransform 属性 


CSS unicode-bidi 属性 


定义 

unicode-bidi 属性 设置 文本 的 方向 。 

继承 性 : Yes 

说 明 

RE CSS 试图 处 理 书写 方向 ， 但 Unicode 有 一 种 更 健壮 的 方式 来 处 理 方向 性 。 利 

用 属性 unicode-bidi，CSS 创作 人 员 可 以 充分 利用 Unicode 的 某 些 功能 。 

可 能 的 值 

在 这 里 ， 我 们 将 简要 引用 CSS2.1 规范 中 关于 这 些 值 的 描述 ， 这 些 描述 很 好 地 说 明 

了 各 个 值 的 实现 。 

normal 

元 素 不 会 对 双向 算法 打开 附加 的 一 层 艇 套 。 对 于 行内 元 素 ， 顺 序 的 隐 式 重 排 会 跨 元 
素 边 界 进行 。 

embed 

如 果 是 一 个 行内 元 素 ， 这 个 值 对 于 双向 算法 会 打开 附件 的 一 层 伺 套 。 这 个 嵌 套 层 的 
方向 由 direction 属性 指定 。 会 在 元 素 内 部 隐 式 地 完成 顺序 重 排 。 这 对 应 于 在 元 素 开 


台 多 增加 一 个 LRE (对 于 direction:ltr : U+202A) 或 RLE (对 于 direction:rtl : 
U+202B) ， 并 在 元 素 的 最 后 增加 一 个 PDF (U+202C) 。 


bidi-override 


这 会 为 行内 元 素 创建 一 个 覆盖 。 对 于 块 级 元 素 ， 将 为 不 在 另 一 块 中 的 行内 后 代 创 建 
一 个 覆盖 。 这 说 明 ， 顺 序 重 排 在 元 素 内 部 严格 按照 direction 属性 进行 ; 忽略 了 双向 
算法 的 隐 式 部 分 。 这 对 应 于 在 元 素 开 始 处 增加 一 个 LRO (对 于 direction:ltr : 
U+202D) 或 RLO (对 于 direction:rt| : U+202E) ， 并 在 元 素 最 后 增加 一 个 

PDF (U+202C) 。 


CSS white-space 属性 


实例 
规定 段落 中 的 文本 不 进行 换行 : 


p 
{ 


white-space: nowrap 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 white-space 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


white-space 属性 设置 如 何 义理 元 素 内 的 空白 。 


这 个 属性 声明 建立 布局 过 程 中 如 何 处 理 元 素 中 的 空白 符 。 值 pre-wrap 和 pre-line 是 
CSS 2.1 中 新 增 的 。 


默认 值 : normal 
继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.whiteSpace="pre" 


可 能 的 值 


值 描述 
normal 默认 。 空 日 会 被 浏 | 5 Kk 2222085. 
pre 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 HTML 中 的 «pre» 标签 
amiei 文本 不 会 换行 ， 文 本 会 在 在 同一 行 上 继续 ， 直 到 遇 到 <br> 标签 为 
pre- ED 7T E nia E^ * 
vee 保留 空白 符 序 列 ， 但 是 正常 地 进行 换行 。 


iS 


pre-line Azz 


A 
白 符 序列 ， 但 是 保留 换行 符 。 
inherit 规定 应 该 从 父 元 素 继承 white-space 属性 的 值 。 


TIY 实例 


在 元 素 中 茶 止 文本 折 行 
本 例 演示 如 何 茶 止 在 元 素 中 的 文本 折 行 。 


«html» 

«head» 

«style type="text/css"> 
p 

{ 


white-space: nowrap 


</style> 
</head> 
<body> 


<p> 
这 是 一 些 文本 。 
是 一 些 文本 。 
是 一 些 文本 。 
这 是 一 些 文本 。 
是 一 些 文本 。 
是 一 些 文本 。 
是 
是 
是 
是 


一 些 文本 。 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : whiteSpace 属性 


CSS word-spacing 属性 


实例 
规定 段落 中 的 字 间 距 是 25 像素 : 


p 
{ 


word-spacing: 25px; 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 word-spacing 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IES) 都 不 支持 属性 值 "inherit"。 
定义 
word-spacing 属性 增加 或 减少 单词 间 的 空白 〈 即 字 间 隔 ) o 
该 属性 定义 元 素 中 字 之 间 插 入 多 少 空白 符 。 针 对 这 个 属性 ,，“ 字 ” 定义 为 由 空白 符 包 
围 的 一 个 字符 串 。 如 果 指 定 为 长 度 值 ， 会 调整 字 之 间 的 通常 间隔 ; 所 以 ，normal 就 
等 同 于 设置 为 0。 人 允许 指定 负 长 度 值 ， 这 会 让 字 之 间 挤 得 更 紧 。 
注释 : 允许 使 用 负 值 。 
默认 值 : normal 
继承 性 : yes 


JavaScript 语法 : object.style.wordSpacing="10px" 


提示 和 注释 


注释 : CSS EF (word)“" 定 义 为 任何 非 空白 符 字 符 组 成 的 串 ， 并 由 某 种 空白 字符 
包围 。 这 个 定义 没有 实际 的 语义 ， 它 只 是 假设 一 个 文档 包含 由 一 个 或 多 个 空白 字符 
JAF. Xi CSS 的 用 户 代理 不 一 定 能 确定 一 个 给 定语 言 中 哪些 是 合法 的 字 ， 
而 哪些 不 是 。 尽 管 这 个 定义 没有 多 大 价值 ， 不 过 它 意 味 着 采用 象形 文字 的 语言 或 非 
罗马 书写 体 往往 无 法 指定 字 间 隔 。 


提示 : 利用 这 个 属性 ， 可 能 会 创建 字 间 隔 太 宽 的 文档 ， 所 以 ， 使 用 word-spacing 
时 要 小 心 。 


可 能 的 值 


值 描述 
normal 默认 。 定 义 单 词 间 的 标准 空间 。 
length 定义 单词 间 的 固定 空间 。 
inherit 规定 应 该 从 父 元 素 继承 word-spacing 属性 的 值 。 


TIY 实例 


增加 或 减少 单词 间距 〈 字 间隔 ) 
本 例 演 示 如 何 增 加 段落 中 单词 间 的 距离 。 


«html» 

«head» 

«style type="text/css"> 
p.spread {word-spacing: 30px;} 
p.tight {word-spacing: -0.5em;) 
</style> 

</head> 


<body> 
<p class="spread">This is some text. This is some text.</p> 
<p class="tight">This is some text. This is some text.</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 文本 
HTML DOM 参考 手册 : wordSpacing 属性 
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CSS3 hanging-punctuation 属性 
实例 
在 p 元 素 首 行 的 开始 边缘 之 外 放置 一 个 标点 符号 : 


p 
{ 


hanging-punctuation: first; 


浏览 器 支持 


IE Firefox Chrome Safari Opera 
目前 主流 浏览 器 都 不 支持 hanging-punctuation 属性 。 
rm . ` 
hanging-punctuation 属性 规定 把 标点 符号 放 在 文本 整 行 的 开头 还 是 结尾 的 行 框 之 
默认 值 : none 

继承 性 : yes 

版 本 CSS3 

JavaScript 语法 : object.style.hangingPunctuation="first" 


语法 


hanging-punctuation: none|first|last|allow-end|force-end; 


值 描述 


none 不 在 文本 整 行 的 开头 还 是 结尾 的 行 框 之 外 放置 标签 符号 。 
first 标点 附着 在 首 行 开始 边缘 之 外 。 

last 标点 附着 在 首 行 结尾 边缘 之 外 。 

allow-end 


force-end 


CSS3 punctuation-trim 属性 


实例 
修剪 p 元 素 中 每 行 开头 的 开启 标点 : 


p 
{ 


punctuation-trim:start; 


} 

浏览 器 支持 

目前 主流 浏览 器 都 不 支持 punctuation-trim 属性 。 
定义 和 用 法 


punctuation-trim 属性 规定 如 果 标 点 位 于 行 开头 或 结尾 处 ， 或 者 临近 另 一 个 全 角 标 
点 符号 ， 是 否 对 标点 符号 进行 修剪 。 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.punctuationTrim="start" 


punctuation-trim: none|start|end|allow-end|adjacent; 


值 
none 
Start 
end 
allow-end 


adjacent 


不 修剪 开启 或 闭 合 标点 符号 。 


修剪 每 行 


a 


修剪 每 行 


el 


结尾 的 开启 标点 符号 。 
结尾 的 闭合 标点 符号 。 


CSS3 text-emphasis 属性 


浏览 器 支持 


目前 主流 浏览 器 都 不 支持 text-emphasis 属性 。 


ch 、 $ 
text-emphasis 属性 是 简写 属性 ， 用 于 在 一 个 声明 中 设置 text-emphasis-style 和 
text-emphasis-color。 


提示 : Adobe 的 "Kenten Generic OpenType Font" 是 一 个 适合 重点 标记 的 字体 ， 
它 专门 为 重点 标记 设计 。 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.textEmphasis="filled blue" 


text-emphasis: _text-emphasis-style_ _text-emphasis-color_; 


值 描述 
text-emphasis-style 向 元 素 的 文本 应 用 重点 标记 。 


text-emphasis-color 定义 重点 标记 的 前 景色 。 


CSS3 text-justify 属性 


实例 


齐 行 改变 单词 间 的 间隔 : 


div 


{ 


text-align: justify; 
text-justify:inter-word; 


} 


浏览 器 支持 


IE Firefox 


Chrome Safari 


只 有 Internet Explorer 支持 text-justify 属性 。 


定义 和 用 法 


text-justify 属性 规定 当 text-align 被 设置 为 text-align 时 的 齐 行 方法 。 


该 属性 规定 如 何 对 齐 行 文本 进行 对 齐 和 分 隔 。 


默认 值 : 


继承 性 : 


JavaScript 语法 : 


语法 


auto 


object.style.textJustify="inter-word" 


Opera 


text-justify: auto|inter-word|inter-ideograph|inter-cluster|distril 





fä 描述 测 

TA, 

auto 浏览 器 决定 齐 行 算法 。 
none 禁用 齐 行 。 ^ 
试 

inter-word 增加 /减少 单词 间 的 间隔 。 
inter- = a dure 测 
Ge graph 用 表意 文本 来 排 齐 内 容 。 x 
intercluster URES Ha OA (比如 亚洲 语系 ) AT 
HEF o 试 

类 似 报纸 版 面 ， 除 了 在 东亚 语系 中 最 后 一 行 是 不 齐 行 测 
的 。 试 


kashida 通过 拉 伸 字符 来 排 齐 内 容 。 - 


CSS3 text-outline 属性 


实例 
设置 text-outline : 


p.test 
{ 


text-outline: 2px 2px #ff0000; 


} 


浏览 器 支持 


所 有 主流 浏览 器 都 不 支持 text-outline 属性 。 


定义 和 用 法 


text-outline 属性 规定 文本 轮廓 。 


默认 值 : 
继承 性 : 


JavaScript 语法 : 


语法 


none 


object.style.textOutline="2px 2px #ff0000" 


text-outline: thickness _blur_ color ; 


W3School 前 端 教程 合集 


值 
thickness 必需 。 轮 廓 的 粗细 。 
blur 可 选 。 轮 廊 的 模糊 半径 。 
color 必需 


CSS3 text-outline 属性 


。 轮 廓 的 颜色 。 参 阅 CSS 颜色 值 。 


1320 


CSS3 text-overflow 属性 


实例 
使 用 text-overflow 属性 : 


div.test 


{ 


text-overflow:ellipsis; 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari 


所 有 主流 浏览 器 都 支持 text-overflow 属性 。 


= . N 
text-overflow 属性 规定 当 文 本 浴 出 包含 元 素 时 发 生 的 事情 。 
默认 值 : clip 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.textOverflow="ellipsis" 


语法 


text-overflow: clip|ellipsis|_string_; 


Opera 


值 描述 测试 


clip 修剪 文本 。 测试 
ellipsis 显示 省 略 符号 来 代表 被 修剪 的 文本 。 测试 
string 使 用 给 定 的 字符 串 来 代表 被 修剪 的 文本 。 


亲自 试 一 试 - 实例 
带 有 hover 效果 的 Text-overflow 
本 例 演 示 当 光标 浮动 到 元 素 上 时 如 何 显 示 全 部 文本 。 


«IDOCTYPE html» 
«html» 

«head» 

«style» 
div.test 


{ 


white-space :nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000; 


} 


div.test:hover 


{ 


text-overflow:inherit; 
overflow:visible; 


</style> 

</head> 

<body> 

<p> 如 果 您 把 光标 移动 到 下 面 两 个 div 上 ， 就 能 够 看 到 全 部 文本 。</p> 

<p> 这 个 div 使 用 "text-overflow:ellipsis" : </p> 

«div class="test" style="text-overflow:ellipsis;">This is some lont 
<p> 这 个 div 使 用 "text-overflow:clip" : </p> 

«div class="test" style="text-overflow:clip;">This is some long te 


</body> 
</html> 


«| = 
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CSS3 text-shadow 属性 


实例 
基础 的 文本 阴影 效果 : 
hi 
{ 
text-shadow: 5px 5px 5px #FF0000; 
} 
页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 text-shadow 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 text-shadow 属性 。 


rm. i 
text-shadow 属性 向 文本 设置 阴影 。 
默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.textShadow="2px 2px #ff0000" 


text-shadow: h-shadow _v-shadow blur color_; 


, 





注释 : text-shadow 属性 向 文本 添加 一 个 或 多 个 阴影 。 该 属性 是 逗号 分 隔 的 阴影 列 
表 ， 每 个 阴影 有 两 个 或 三 个 长 度 值 和 一 个 可 选 的 颜色 值 进行 规定 。 省 略 的 长 度 是 
0。 








值 描述 测试 
h-shadow 必需 。 水 平 阴 影 的 位 置 。 人 允许 负 值 。 测试 
v-shadow 必需 。 垂 直 阴 影 的 位 置 。 克 许 负 值 。 测试 
blur 可 选 。 模 糊 的 距离 。 测试 
color 可 选 。 阴 影 的 颜色 。 参 阅 CSS 颜色 值 。 测试 

亲自 试 一 试 - 实例 
oR H 72 TN T Gk 
带 有 模糊 效果 的 文本 阴影 
该 例 演示 带 有 模糊 效果 的 文本 阴影 。 
<!DOCTYPE html» 
<html> 
<head> 
<style> 
h1 {text-shadow:2px 2px 8px #FF0000;} 
</style> 
</head> 
<body> 


<h1> 模 糊 效果 的 文本 阴影 ! </h1> 


</body> 
</html> 
白色 文本 上 的 阴影 


本 例 演示 白色 文本 上 的 文本 阴影 。 


<!DOCTYPE html» 
<html> 

<head> 

<style> 

hi { 
color:white; 
text-shadow:2px 2px 4px #000000; 
} 

</style> 
</head> 

<body> 


<h1> 白 色 文本 的 阴影 效果 | </h1> 


</body> 
</html> 


霓虹灯 效果 的 文本 阴影 
本 例 演示 带 有 霓虹灯 效果 的 文本 阴影 。 


<!DOCTYPE html» 

«html» 

«head» 

«style» 

h1 { 

text-shadow:0 0 3px #FF0000; 


</style> 

</head> 

<body> 

<h1> 需 虹 灯 效果 的 文本 阴影 ! </h1> 


</body> 
</html> 


相关 页 面 
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CSS3 text-wrap 属性 


实例 
不 人 允许 换行 : 


p.test {text-wrap:none; } 


浏览 器 支持 


目前 主流 浏览 器 都 不 支持 text-wrap 属性 。 


ris i 
text-wrap 属性 规定 文本 的 换行 〈( 折 行 ) 规则 。 
默认 值 : normal 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.textWrap="none" 


语法 


text-wrap: normal|none|unrestricted|suppress; 


值 
normal 
none 


unrestricted 


suppress 


描述 
只 在 允许 的 换行 点 进行 换行 。 
不 换行 。 元 素 无 法 容纳 的 文本 会 浴 出 。 
在 任意 两 个 字符 间 换 行 。 


压缩 元 素 中 的 换行 。 浏 览 器 只 在 行 中 没有 其 他 有 效 换行 点 时 进行 
换行 。 


CSS3 word-break 属性 


实例 
在 恰当 的 断 字 点 进行 换行 : 


p.test {word-break:hyphenate;} 


浏览 器 文 持 


IE Firefox Chrome Safari 


所 有 主流 浏览 器 都 支持 word-break 属性 。 


Opera 


iB B4 17. 


ris. S 
word-break 属性 规定 自动 换行 的 处 理 方法 。 
提示 : 通过 使 用 word-break 属性 ， 可 以 让 浏览 器 实现 在 任意 位 
默认 值 : normal 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.wordBreak="keep-all" 


word-break: normal|break-all|keep-all; 


值 
normal 
break-all 


keep-all 


T8 
使 用 浏览 器 默认 的 换行 规则 。 
允许 在 单词 内 换行 。 
只 能 在 半角 空格 或 连 字符 处 换行 。 


iE 


CSS3 word-wrap 属性 


实例 
允许 长 单词 换行 到 下 一 行 : 


p.test {word-wrap:break-word; } 
SY a 3 FF 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 word-wrap 属性 。 


= 、 N 
word-wrap 属性 允许 长 单词 或 URL 地 址 换行 到 下 一 行 。 
默认 值 : normal 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.wordWrap="break-word" 


word-wrap: normal|break-word; 


值 描述 
normal 只 在 允许 的 断 字 点 换行 〈 浏 览 器 保持 默认 义理 ) 。 
break-word 在 长 单词 或 URL 地 址 内 部 进行 换行 。 


2D/3D 转换 属性 (Transform) 


属性 
transform 
transform-origin 
transform-style 
perspective 
perspective-origin 


backface-visibility 


描述 
向 元 素 应 用 2D 或 3D 转换 。 
允许 你 改变 被 转换 元 素 的 位 置 。 
规定 被 嵌 套 元 素 如 何在 3D 空间 中 显示 。 
规定 3D 元 素 的 透视 效果 。 
规定 3D 元 素 的 底部 位 置 。 
定义 元 素 在 不 面 对 屏 幕 时 是 否 可 见 。 


CSS 


C Ww wow wo O 


CSS3 transform 属性 


实例 
旋转 div 元 素 : 


div 

{ 

transform: rotate(7deg); 

-ms-transform:rotate(7deg); /UTES98 7 
-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */ 
-o-transform:rotate(7deg); /* Opera */ 


} 
页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 支持 transform 属性 。 

Internet Explorer 9 支持 替代 的 -ms-transform 属性 ( 仅 适用 于 2D 转换 ) 。 
Safari 和 Chrome 支持 替代 的 -webkit-transform 属性 (3D 和 2D 转换 ) 。 
Opera 只 支持 2D 转换 。 


定义 和 用 法 


transform 属性 向 元 素 应 用 2D 或 3D 转换 。 该 属性 允许 我 们 对 元 素 进 行 旋 转 、 缩 
放 、 移 动 或 倾斜 。 


为 了 更 好 地 理解 transform 属性 ， 请 查看 这 个 演示 。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.transform="rotate(7deg)" 
语法 
transform: none| transform-functions ; 
值 描述 
none 定义 不 进行 转换 。 


matrix(n,n,n,n,n,n) 


matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 


translate(x, y) 
translate3d(x,y,Z) 


translateX(x) 


translateY(y) 


translateZ(z) 


scale(x,y) 
scale3d(x,y,Z) 


scaleX(x) 


定义 2D 转换 ， 使 用 六 个 值 的 
4B 阵 。 


定义 3D 转换 ， 使 用 16 个 值 
的 4x4 和 矩阵 。 


定义 2D 转换 。 
定义 3D 转换 。 


定义 转换 ， 只 是 用 X 轴 的 值 。 


定义 转换 ， 只 是 用 Y 轴 的 值 。 


定义 3D 转换 ， 只 是 用 Z sam 
值 。 


定义 2D 缩放 转换 。 


定义 3D 缩放 转换 。 


通过 设置 X 轴 的 值 来 定义 缩放 
转换 。 


scaleY(y) 通过 设置 Y 轴 的 值 来 定义 缩放 


转换 。 

通过 设置 Z 轴 的 值 来 定义 3D 
PERPE 缩放 转换 。 

一 一 Zi ra 
meine angie) a 2D 旋转 ， 在 参数 中 规定 
rotate3d(x,y,z,angle) 定义 3D 旋转 。 
rotateX(angle) 定义 治 着 X 轴 的 3D 旋转 。 
rotateY(angle) 定义 治 着 Y 轴 的 3D 旋转 。 
rotateZ(angle) 定义 治 着 Z 轴 的 3D 旋转 。 

定义 治 着 X 和 YY 轴 的 2D fni 
skew(x-angle, y-angle) 斜 转换 。 
| > X 轴 的 2D 倾斜 转 
SkewY (angie) = Y &yB8 2D 倾斜 转 
perspective(n) I E 


亲 目 试 一 试 - 实例 


扔 到 桌子 上 面 的 图 片 
本 例 演示 如 何 创 建 " 宝 丽 来 "图 片 ， 并 旋转 图 片 。 


<!DOCTYPE html» 

«html» 

«head» 

«style» 

body 

{ . 

margin: 30px; 
background-color :#E9E9E9; 
} 


div.polaroid 


{ 
width:294px; 


padding:10px 10px 20px 10px; 
border:1px solid #BFBFBF; 
background-color :white; 

/* Add box-shadow */ 
box-shadow:2px 2px 3px #aaaaaa; 


} 


div.rotate left 


float:left; 

-ms-transform:rotate(7deg); /* IE 9 */ 
-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari and Chrome */ 
-o-transform:rotate(7deg); /* Opera */ 
transform:rotate(7deg); 


j 


div.rotate right 

t 

float:left; 

-ms-transform:rotate(-8deg); /* IE 9 */ 
-moz-transform:rotate(-8deg); /* Firefox */ 
-webkit-transform:rotate(-8deg); /* Safari and Chrome */ 
-o-transform:rotate(-8deg); /* Opera */ 
transform:rotate( -8deg); 

} 

</style> 

</head> 

<body> 


<div class="polaroid rotate left"> 

<img src="/i/ballade_dream.jpg" alt=" 郁 金 香 " width="284" height="21: 
<p class="caption"> 上 海鲜 花 港 的 郁金香 ， 花 名 : Ballade Dream, </p> 

</div> 

<div class="polaroid rotate_right"> 

<img src="/i/china_pavilion.jpg" alt=" 世 博 中 国 馆 " width="284" height 
<p class="caption'">2010 年 上 海 世 博 会 ， 中 国 馆 。</p> 

</div> 


</body> 
</html> 


EJE 


相关 页 面 


CSS3 教程 : CSS3 2D 转换 
CSS3 教程 : CSS3 3D 转换 





CSS3 transform-origin 属性 


设置 旋转 元 素 的 基点 位 置 : 


div 

{ 

transform: rotate(45deg); 
transform-origin:20% 4096; 


-ms-transform: rotate(45deg); /* IE 9 */ 
-ms-transform-origin:20% 40%; p^ ESONT 
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */ 
-webkit-transform-origin:20% 4096; /* Safari 和 Chrome */ 
-moz-transform: rotate(45deg); /* Firefox */ 
-moz-transform-origin:20% 4096; /* Firefox */ 
-o-transform: rotate(45deg); /* Opera */ 
-o-transform-origin:20% 40%; /* Opera */ 
j 

页 面 底部 有 更 多 实例 。 

M le 口 

浏览 器 文 持 

IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 支持 transform-origin 属性 。 

Internet Explorer 9 支持 替代 的 -ms-transform-origin 属性 ( 仅 适用 于 2D 4448) 。 
Safari 和 Chrome 支持 替代 的 -webkit-transform-origin 属性 (3D 和 2D 转换 ) 。 
Opera 只 支持 2D 转换 。 


定义 和 用 法 
transform-origin 属性 允许 您 改变 被 转换 元 素 的 位 置 。 
2D 转换 元 素 能 够 改变 元 素 x 和 y 轴 。3D 转换 元 素 还 能 改变 其 Z 轴 。 


为 了 更 好 地 理解 transform-origin 属性 ， 请 查看 这 个 演示 。 


Safari/Chrome Ħ > : 为 了 更 好 地 理解 transform-origin 属性 用 于 3D 转换 的 情况 ， 
请 查看 这 个 演示 。 


注释 : 该 属性 必须 与 transform 属性 一 同 使 用 。 
为 了 更 好 地 理解 transform 属性 ， 请 查看 这 个 演示 。 


默认 值 : 50% 50% 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.transformOrigin="20% 40%" 


语法 


transform-origin: x-axis _y-axis_ _z-axis_; 


学 


值 T 


x-axis 


定义 视图 被 置 于 X daB A^, PRERJA : 


left 
center 
right 
length 
% 


| | y-axis | 
定义 视图 被 置 于 YY 轴 的 何 处 。 可 能 的 值 : 


top 
center 
bottom 
length 
% 


| | Z-axis | 


定义 视图 被 置 于 Z 轴 的 何 处 。 可 能 的 值 : 
e length 
| 


相关 页 面 


CSS3 教程 : CSS3 2D 转换 
CSS3 教程 : CSS3 3D 转换 


CSS3 transform-style 属性 


实例 
使 被 转换 的 子 元 素 保留 其 3D 转换 : 


div 
{ 
transform: rotateY(60deg); 


transform-style: preserve-3d; 
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */ 
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */ 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Firefox 支持 transform-style 属性 。 
Chrome, Safari 和 Opera 支持 替代 的 -webkit-transform-style 属性 。 


定义 和 用 法 
transform-style 属性 规定 如 何在 3D 2 jg] PS su t ERES BP ITH. 
注释 : 该 属性 必须 与 transform 属性 一 同 使 用 。 


默认 值 : flat 
继承 性 : no 


JavaScript 语法 : object.style.transformStyle="preserve-3d" 


语法 


transform-style: flat|preserve-3d; 


值 描述 
flat 子 元 素 将 不 保留 其 3D 位 置 。 


preserve-3d 子 元 素 将 保留 其 3D 位 置 。 


CSS3 perspective 属性 


实例 
设置 元 素 被 查看 位 置 的 视图 : 


div 

{ 

perspective: 500; 

-webkit-perspective: 500; /* Safari 和 Chrome */ 
} 


浏览 器 支持 
目前 浏览 器 都 不 支持 perspective 属性 。 
Chrome 和 Safari 支持 替代 的 -webkit-perspective 属性 。 


定义 和 用 法 

perspective 属性 定义 3D 元 素 距 视图 的 距离 ， 以 像素 计 。 该 属性 允许 您 改变 3D 元 
素 查 看 3D 元 素 的 视图 。 

当 为 元 素 定 义 perspective 属性 时 ， 其 子 元 素 会 获得 透视 效果 ， 而 不 是 元 素 本 身 。 
注释 : perspective 属性 只 影响 3D 转换 元 素 。 


提示 : 请 与 perspective-origin 属性 一 同 使 用 该 属性 ， 这 样 您 就 能 够 改变 3D 元 素 的 
底部 位 置 。 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 


JavaScript 语法 : object.style.perspective=500 


语法 


perspective: _number_|none; 


值 描述 
number 元 素 距 离 视 图 的 距离 ， 以 像素 计 。 


none 默认 值 。 与 0 相同 。 不 设置 透视 。 


CSS3 perspective-origin 属性 


实例 
设置 3D 元 素 的 基点 位 置 : 


div 

{ . 

perspective:150; 

perspective-origin: 10% 10%; 

-webkit-perspective:150; /* Safari 和 Chrome */ 
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */ 


} 


浏览 器 支持 
目前 浏览 器 都 不 支持 perspective-origin 属性 。 
Chrome 和 Safari 支持 替代 的 -webkit-perspecitve-origin 属性 。 


定义 和 用 法 
perspective-origin 属性 定义 3D 元 素 所 基于 的 X 480 Y 轴 。 该 属性 允许 您 改变 3D 
元 素 的 底部 位 置 。 


当 为 元 素 定 义 perspective-origin 属性 时 ， 其 子 元 素 会 获得 透视 效果 ， 而 不 是 元 素 
本 身 。 


注释 : 该 属性 必须 与 perspective 属性 一 同 使 用 ， 而 且 只 影响 3D 转换 元 素 。 
默认 值 : 50% 50% 
继承 性 : no 


JavaScript 语法 : object.style.perspectiveOrigin="10% 10%" 


语法 


perspective-origin: _x-axis_ _y-axis_; 


值 


X-axis 


定义 该 视图 在 x 轴 上 的 位 置 。 默 认 值 : 5096. 
可 能 的 值 : 


left 
center 
right 
length 
% 


| | y-axis | 
定义 该 视图 在 y HEME. Rite : 50%。 
可 能 的 值 : 


top 
center 
bottom 
length 
% 


CSS3 backface-visibility 属性 


实例 
隐藏 被 施 转 的 div 元 素 的 背面 : 


div 

{ 

backface-visibility:hidden; 

-webkit -backface-visibility:hidden; /* Chrome 和 Safari */ 
-moz -backface-visibility:hidden; /* Firefox */ 
-ms-backface-visibility:hidden; /* Internet Explorer */ 


j 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


只 有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性 。 
Opera 15+, Safari 和 Chrome 支持 替代 的 -webkit-backface-visibility 属性 。 


定义 和 用 法 
backface-visibility 属性 定义 当 元 素 不 面向 屏幕 时 是 否 可 见 。 
如 果 在 旋转 元 素 不 希望 看 到 其 背面 时 ， 该 属性 很 有 用 。 


默认 值 : visible 
继承 性 : no 


JavaScript 语法 : object.style.backfaceVisibility="hidden" 


语法 


backface-visibility: 


visible 


hidden 


值 


visible|hidden; 


过 渡 属 性 (Transition ) 


属性 描述 CSS 
— iei 人 性， 用 于 在 一 个 属性 中 设置 四 个 过 渡 3 
transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 。 
transition-duration 定义 过 渡 效 果 花 费 的 时 间 。 3 
Pane lion ming: 规定 过 渡 效 果 的 时 间 曲 线 。 3 


function 
transition-delay 规定 过 渡 效 果 何 时 开始 。 3 


CSS3 transition 属性 


Ro 

实例 

把 鼠标 指针 放 到 div 元 素 上 ， 其 宽度 会 从 100px 逐渐 变 为 300px : 
div 
{ 
width:100px; 
transition: width 2s; 
-moz-transition: width 2s; /* Firefox 4 */ 
-webkit-transition: width 2s; /* Safari 和 Chrome */ 


-o-transition: width 2s; /* Opera */ 


} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 和 Chrome 支持 transition 属性 。 
Safari 支持 替代 的 -webkit-transition 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition 属性 。 


定义 和 用 法 
transition 属性 是 一 个 简写 属性 ， 用 于 设置 四 个 过 渡 属性 : 


e transition-property 
e transition-duration 

e transition-timing-function 
e transition-delay 


注释 : 请 始终 设置 transition-duration 属性 ， 否 则 时 长 为 0， 就 不 会 产生 过 渡 效 果 。 


JavaScript 语法 : 


transition: _property_ _duration_ _timing-function_ _delay_ 


值 
transition-property 
transition-duration 
transition-timing-function 


transition-delay 


all 0 ease 0 


object.style.transition="width 2s" 


描述 


5 
速度 效果 的 速度 曲线 。 
定义 过 渡 效 果 何 时 开始 。 


成 过 渡 效 果 需 要 多 少 秒 或 毫秒 。 


, 


CSS3 transition-property 属性 


实例 
把 鼠标 指针 放 到 div 元 素 上 ， 会 产生 带 有 平滑 改变 元 素 宽度 的 过 渡 效 果 : 


div 

{ 

transition-property:width; 

-moz-transition-property: width; /* Firefox 4 */ 
-webkit-transition-property:width; /* Safari 和 Chrome */ 
-o-transition-property:width; /* Opera */ 


j 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性 。 
Safari 支持 替代 的 -webkit-transition-property 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-property 属性 。 


定义 和 用 法 

transition- -property 属性 规定 应 用 过 渡 效 果 的 CSS 属性 的 名 称 。 ( 当 指 定 的 CSS 
属性 改变 时 ， 过 渡 效 果 将 开始 ) 。 

提示 : 过 渡 效 果 通 常 在 用 户 将 鼠标 指针 浮动 到 元 素 上 时 发 生 。 

注释 : 请 始终 设置 transition-duration 属性 ， 否 则 时 长 为 0， 就 不 会 产生 过 渡 效 果 。 


默认 值 : all 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.transitionProperty-"width,height" 
语法 


transition-property: none|all| property ; 


值 描述 
none 没有 属性 会 获得 过 渡 效 果 。 
all 所 有 属性 都 将 获得 过 渡 效 果 。 


property ”定义 应 用 过 渡 效 果 的 CSS 属性 名 称 列表 ， 列 表 以 逗号 分 隔 。 


CSS3 transition-duration 属性 


例 
过 渡 效 果 持 续 51 秒 : 


将 


div 

{ 

transition-duration: 5s; 

-moz-transition-duration: 5s; /* Firefox 4 */ 
-webkit-transition-duration: 5s; /* Safari 和 Chrome */ 
-o-transition-duration: 5s; /* Opera */ 


} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 和 Chrome 支持 transition-duration 属性 。 
Safari 支持 替代 的 -webkit-transition-duration 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-duration 属性 。 


定义 和 用 法 
transition-duration 属性 规定 完成 过 渡 效 果 需 要 花费 的 时 间 (以 秒 或 毫秒 计 ) o 
默认 值 : 0 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.transitionDuration="5s" 


语法 


transition-duration: _time_; 


值 
time 
规定 完成 过 渡 效 果 需 要 花费 的 时 间 (以 秒 或 毫秒 计 ) o 
默认 值 是 0， 意 味 着 不 会 有 效果 。 
| 


Br 


学 


CSS3 transition-timing-function 属性 


实例 
以 相同 的 速度 从 开始 到 结束 的 过 渡 效果 : 


div 

{ 

transition-timing-function: linear; 
-moz-transition-timing-function: linear; /* Firefox 4 */ 
-webkit-transition-timing-function: linear; /* Safari 和 Chrome */ 
-o-transition-timing-function: linear; /* Opera */ 


} 
a Hi 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 
属性 。 

Safari 支持 替代 的 -webkit-transition-timing-function 属性 。 

注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-timing-function 
属性 。 

rm. i 

transition-timing-function 属性 规定 过 渡 效 果 的 速度 曲线 。 

该 属性 允许 过 渡 效 果 随 着 时 间 来 改变 其 速度 。 


JavaScript 语法 : 


ease 


object.style.transitionTimingFunction="linear" 


transition-timing-function: linear |ease|ease-in|ease-out|ease-in-ol 


bezier(_n_,_n 


, n , n Ne 





值 


linear 


ease 


ease-in 


ease-out 


ease-in-out 


cubic- 
bezier(n,n,n,n) 





描述 


规定 以 相同 速度 开始 至 结束 的 过 渡 效 果 (等 于 cubic- 
bezier(0,0,1,1)) 。 


规定 慢 速 开始 ， 然 后 变 快 ， 然 后 慢 速 结束 的 过 渡 效 果 (cubic- 
bezier(0.25,0.1,0. F D 


规定 以 慢 速 开始 的 过 渡 效 果 (等 于 cubic- 
bezier(0.42,0,1,1)) 。 


规定 以 慢 速 结束 的 过 渡 效 果 (等 于 cubic- 
bezier(0,0,0.58,1)) 。 


规定 以 慢 速 开始 和 结束 的 过 渡 效 果 (等 于 cubic- 
bezier(0.42,0,0.58,1)) 。 


在 cubic-bezier 加 数 中 定义 自己 的 值 。 可 能 的 值 是 0 至 1 之 
间 的 数值 。 


~ 


提示 : 请 在 实例 中 测试 不 同 的 值 ， 这 样 可 以 更 好 地 理解 它们 的 工作 原理 。 


亲自 试 一 
实例 1 


- 实例 


为 了 更 好 地 理解 不 同 的 函数 值 ， 请 看 下 面 带 有 五 个 不 同 值 的 五 个 不 同 的 div 元 素 : 


#divi {transition-timing-function: linear; } 

#div2 {transition-timing-function: ease; } 

#div3 {transition-timing-function: ease-in; } 

#div4 {transition-timing-function: ease-out; } 

#div5 {transition-timing-function: ease-in-out;) 

/* Firefox 4: */ 

#divi {-moz-transition-timing-function: linear; } 
#div2 {-moz-transition-timing-function: ease; } 

#div3 {-moz-transition-timing-function: ease-in; } 
#div4 {-moz-transition-timing-function: ease-out; } 
#div5 {-moz-transition-timing-function: ease-in-out; } 
/* Safari and Chrome: */ 

#divi {-webkit-transition-timing-function: linear; } 
#div2 {-webkit-transition-timing-function: ease; } 
#div3 {-webkit-transition-timing-function: ease-in; } 
#div4 {-webkit-transition-timing-function: ease-out; } 
#div5 {-webkit-transition-timing-function: ease-in-out;} 
/* Opera: */ 

#divi {-o-transition-timing-function: linear; } 

#div2 {-o-transition-timing-function: ease; } 

#div3 {-o-transition-timing-function: ease-in; } 

#div4 {-o-transition-timing-function: ease-out;) 
#div5 {-o-transition-timing-function: ease-in-out;} 


实例 2 
与 上 例 相 同 ， 但 通过 cubic-bezier 来 规定 速度 曲线 : 


#divi {transition-timing-function: cub 
#div2 {transition-timing-function: cub 
#div3 {transition-timing-function: cub 
#div4 {transition-timing-function: cub 
#div5 {transition-timing-function: cub 
/* Firefox 4: */ 


#divi {-moz-transition-timing-function: 
#div2 {-moz-transition-timing-function: 
#div3 {-moz-transition-timing-function: 
#div4 {-moz-transition-timing-function: 
#div5 {-moz-transition-timing-function: 


/* Safari and Chrome: */ 

#divi {-webkit-transition-timing-funct 
#div2 {-webkit-transition-timing-funct 
#div3 {-webkit-transition-timing-funct 
#div4 {-webkit-transition-timing-funct 
#div5 {-webkit-transition-timing-funct 
/* Opera: */ 

#divi {-o-transition-timing-function: 
#div2 {-o-transition-timing-function: 
#div3 {-o-transition-timing-function: 
#div4 {-o-transition-timing-function: 
#div5 {-o-transition-timing-function: 


El — E 


ic-bezier(0,0,1,1;) 
ic-bezier(0.25,0.1,0.25,1);) 
ic-bezier(0.42,0,1,1);) 
ic-bezier(0,0,0.58,1);) 
ic-bezier(0.42,0,0.58,1);) 


cubic-bezier(0,0,0.25,1);) 
cubic-bezier(0.25,0.1,0.25, 
cubic-bezier(0.42,0,1,1);) 
cubic-bezier(0,0,0.58,1);) 
cubic-bezier(0.42,0,0.58,1. 


ion: cubic-bezier(0,0,1,1;) 

ion: cubic-bezier(0.25,0.1,0 
ion: cubic-bezier(0.42,0,1,1: 
ion: cubic-bezier(0,0,0.58,1: 
ion: cubic-bezier(0.42,0,0.5t 


cubic-bezier(0,0,1,1;) 
cubic-bezier(0.25,0.1,0.25,1: 
cubic-bezier(0.42,0,1,1);) 
cubic-bezier(0,0,0.58,1);) 
cubic-bezier(0.42,0,0.58,1);. 





CSS3 transition-delay 属性 


例 
在 过 渡 效 果 开始 前 等 待 2 秒 : 


将 


div 

f 

transition-delay: 2s; 

-moz-transition-delay: 2s; /* Firefox 4 */ 
-webkit-transition-delay: 2s; /* Safari 和 Chrome */ 
-o-transition-delay: 2s; /* Opera */ 


} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 和 Chrome 支持 transition-delay 属性 。 
Safari 支持 替代 的 -webkit-transition-delay 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-delay 属性 。 


定义 和 用 法 
transition-delay 属性 规定 过 渡 效 果 何 时 开始 。 
transition-delay 值 以 秒 或 毫秒 计 。 


默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.transitionDelay="2s" 


语法 


transition-delay: _time_; 


值 描述 
time ”规定 在 过 渡 效 果 开 始 之 前 需要 等 待 的 时 间 ， 以 秒 或 毫秒 计 。 


用 户 界 面 属 性 (User-interface) 


属性 
appearance 


box-sizing 
icon 


nav-down 
nav-index 
nav-left 
nav-right 
nav-up 


outline- 
offset 


resize 


描述 
允许 您 将 元 素 设置 为 标准 用 户 界面 元 素 的 外 观 
允许 您 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 
为 创作 者 提供 使 用 图 标 化 等 价 物 来 设置 元 素 样 式 的 能 


定 在 使 用 arrow-down 导航 键 时 向 何 处 导航 。 
设置 元 素 的 tab 键 控制 次 序 。 

定 在 使 用 arrow-left 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-right 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-up 导航 键 时 向 何 处 导航 。 


对 轮廓 进行 偏 移 ， 并 在 超出 边框 边缘 的 位 置 绘制 轮廓 。 


规定 是 否 可 由 用 户 对 元 素 的 尺寸 进行 调整 。 


CSS 


CSS3 appearance 属性 


实例 
使 div 元 素 看 上 去 像 一 个 按钮 : 


div 

{ 

appearance: button; 

-moz-appearance:button; /* Firefox */ 
-webkit-appearance:button; /* Safari 和 Chrome */ 


页 面 底部 有 更 多 实例 。 


浏览 器 文 持 

所 有 主流 浏览 器 都 不 支持 appearance 属性 。 

Firefox 支持 替代 的 -moz-appearance 属性 。 

Safari 和 Chrome 支持 替代 的 -webkit-appearance 属性 。 


rmm. i 
appearance 属性 允许 您 使 元 素 看 上 去 像 标准 的 用 户 界 面 元 素 。 
默认 值 : normal 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.appearance="button" 


语法 


appearance: 


值 
normal 
icon 
window 
button 
menu 


field 


normal |icon|window|button|menu| field; 


描述 
将 元 素 呈 现 为 常规 元 素 。 
将 元 素 呈 现 为 图 标 〈 小 图 片 ) 。 
将 元 素 呈 现 为 视 口 。 
将 元 素 呈 现 为 按钮 。 
将 元 素 呈 现 为 一 套 供 用 户 选 择 的 选项 。 
将 元 素 呈 现 为 输入 字段 。 


CSS3 box-sizing 属性 


实例 
规定 两 个 并 排 的 带 边 框 的 框 : 


div 

{ 

box-sizing: border -box; 
-moz-box-sizing:border-box; /* Firefox */ 
-webkit-box-sizing:border-box; /* Safari */ 
width :5096; 

float:left; 

} 


页 面 底部 有 更 多 实例 。 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer, Opera 以 及 Chrome 支持 box-sizing 属性 。 
Firefox 支持 替代 的 -moz-box-sizing 属性 。 


定义 和 用 法 
box-sizing 属性 允许 您 以 特定 的 方式 定义 匹配 某 个 区 域 的 特定 元 素 。 
例如 ， 假 如 您 需要 并 排放 置 两 个 带 边 框 的 框 ， 可 通过 将 box-sizing 设置 为 "border- 


box"。 这 可 倒 浏 览 器 呈现 出 带 有 指定 宽度 和 高 度 的 框 ， 并 把 边框 和 内 边 距 放 入 框 
中 。 


默认 值 : content-box 


继承 性 no 

版 本 CSS3 

JavaScript 语法 : object.style.boxSizing="border-box" 
语法 


box-sizing: content-box|border-box|inherit; 


学 


值 TEX 
content-box 
这 是 由 CSS2.1 规定 的 宽度 高 度 行为 。 
宽度 和 高 度 分 别 应 用 到 元 素 的 内 容 框 。 
在 宽度 和 高 度 之 外 绘制 元 素 的 内 边 距 和 边框 。 
| | border-box | 
为 元 素 设 定 的 宽度 和 高 度 决定 了 元 素 的 边框 盒 。 
就 是 说 ， 为 元 素 指定 的 任何 内 边 距 和 边框 都 将 在 已 设 定 的 宽度 和 高 度 内 进行 绘制 。 
通过 从 已 设 定 的 宽度 和 高 度 分 别 减 去 边框 和 内 边 距 才 能 得 到 内 容 的 宽度 和 高 度 。 
| | inherit | 规定 应 从 父 元 素 继 承 box-sizing 属性 的 值 。 | 


相关 页 面 
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CSS3 icon 属性 


实例 
将 图 像 元 素 设置 为 图 标 化 的 等 价 物 : 


img 

{ 

content:icon; 
icon:url(imgicon.png); 


DAC 32 FF 

IE Firefox Chrome Safari Opera 
目前 没有 浏览 器 支持 icon 属性 。 
定义 和 用 法 


icon 属性 为 创作 者 提供 了 将 元 素 设置 为 图 标 等 价 物 的 能 
注释 : 除非 "content" 属性 的 值 被 设置 为 "icon"， 否 则 元 素 的 图 标 不 会 被 使 用 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.icon="url(image.png)" 


icon: auto|_URL_|inherit; 


值 描述 
auto 使 用 由 浏览 器 提供 的 默认 通用 图 标 。 
URL 引用 列表 中 的 一 个 或 多 个 图 标 ， 列 表 用 去 号 分 隔 。 


inherit 规定 应 从 元 素 继 承 icon 属性 的 值 。 


CSS3 nav-down 属性 


实例 
规定 在 使 用 方向 键 时 向 何 处 导航 : 


button#b1 


{ 

top:2096; left:2596; 
nav-index:1; 
nav-right:#b2;nav-left:#b4; 
nav-down:#b2;nav-up:#b4; 


} 


button#b2 


1 

top:4096; left :50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav -down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top: 70%; left: 25%; 

nav -index:3; 
nav-right:#b4;nav-left:#b2; 
nav -down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:40%;1left:O%; 
nav-index:4; 
nav-right:#b1;nav-left:#b3; 
nav -down:#b1;nav-up:#b3; 


} 


浏览 器 支持 


目前 只 有 Opera 支持 nav-down 属性 。 


定义 和 用 法 


nav-down 属性 规定 当 使 用 nav-down 导航 键 时 ， 向 何 处 进行 导航 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.navDown="#div2" 


nav-down: auto| id | target-name |inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 ido 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继 承 nav-down 属性 的 值 。 


CSS3 nav-index 属性 


实例 
规定 在 使 用 方向 键 时 向 何 处 导航 : 


button#b1 


{ 

top:2096; left:2596; 
nav-index:1; 
nav-right:#b2;nav-left:#b4; 
nav-down:#b2;nav-up:#b4; 


} 


button#b2 


1 

top:4096; left :50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav -down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top: 70%; left: 25%; 

nav -index:3; 
nav-right:#b4;nav-left:#b2; 
nav -down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:40%;1left:O%; 
nav-index:4; 
nav-right:#b1;nav-left:#b3; 
nav -down:#b1;nav-up:#b3; 


} 


浏览 器 支持 


目前 只 有 Opera 支持 nav-index 属性 。 


定义 和 用 法 


nav-index 属性 规定 元 素 的 连续 导航 次 序 ("tabbing order"), 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.navindex=2 


nav-index: auto|_number_|inherit; 


值 描述 
auto 由 浏览 器 分 配 元 素 的 导航 键 控制 次 序 。 


number 指示 元 素 的 导航 键 控制 次 序 。1 代表 第 一 个 。 
inherit 规定 应 从 父 元 素 继 承 nav-index 属性 的 值 。 


CSS3 nav-left 属性 


实例 
规定 在 使 用 方向 键 时 向 何 处 导航 : 


button#b1 


{ 

top:2096; left:2596; 
nav-index:1; 
nav-right:#b2;nav-left:#b4; 
nav-down:#b2;nav-up:#b4; 


} 


button#b2 


1 

top:4096; left :50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav -down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top: 70%; left: 25%; 

nav -index:3; 
nav-right:#b4;nav-left:#b2; 
nav -down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:40%;1left:O%; 
nav-index:4; 
nav-right:#b1;nav-left:#b3; 
nav -down:#b1;nav-up:#b3; 


} 


浏览 器 支持 


目前 只 有 Opera 支持 nav-left 属性 。 


定义 和 用 法 


nav-left 属性 规定 当 使 用 nav-left 导航 键 时 ， 向 何 处 进行 导航 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.navLeft="#div2" 


nav-left: auto|_id_|_target-name_|inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 id。 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继承 nav-left 属性 的 值 。 


CSS3 nav-right 属性 


实例 
规定 在 使 用 方向 键 时 向 何 处 导航 : 


button#b1 


{ 

top:2096; left:2596; 
nav-index:1; 
nav-right:#b2;nav-left:#b4; 
nav-down:#b2;nav-up:#b4; 


} 


button#b2 


1 

top:4096; left :50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav -down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top: 70%; left: 25%; 

nav -index:3; 
nav-right:#b4;nav-left:#b2; 
nav -down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:40%;1left:O%; 
nav-index:4; 
nav-right:#b1;nav-left:#b3; 
nav -down:#b1;nav-up:#b3; 


} 


浏览 器 支持 


目前 只 有 Opera 支持 nav-right 属性 。 


定义 和 用 法 


nav-right 属性 规定 当 使 用 nav-right 导航 键 时 ， 向 何 处 进行 导航 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.navRight="#div2" 


nav-right: auto|_id_|_target-name_|inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 id. 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继承 nav-right 属性 的 值 。 


CSS3 nav-up 属性 


实例 
规定 在 使 用 方向 键 时 向 何 处 导航 : 


button#b1 


{ 

top:2096; left:2596; 
nav-index:1; 
nav-right:#b2;nav-left:#b4; 
nav-down:#b2;nav-up:#b4; 


} 


button#b2 


1 

top:4096; left :50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav -down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top: 70%; left: 25%; 

nav -index:3; 
nav-right:#b4;nav-left:#b2; 
nav -down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:40%;1left:O%; 
nav-index:4; 
nav-right:#b1;nav-left:#b3; 
nav -down:#b1;nav-up:#b3; 


} 


浏览 器 支持 


目前 只 有 Opera 支持 nav-up 属性 。 


定义 和 用 法 


nav-up 属性 规定 当 使 用 nav-up 导航 键 时 ， 向 何 处 进行 导航 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.navUp="#div2" 


nav-up: auto|_id_|_target-name_|inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 id。 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继承 nav-up 属性 的 值 。 


CSS3 outline-offset 属性 


实例 
规定 边框 边缘 之 外 15 像素 处 的 轮廓 : 


div 
{ 
border:2px solid black; 


outline:2px solid red; 
outline-offset:15px; 
j 


浏览 器 支持 


所 有 主流 浏览 器 都 支持 outline-offset 属性 ， 除 了 Internet Explorer. 


定义 和 用 法 
outline-offset 属性 对 轮 廊 进行 偏 移 ， 并 在 边框 边缘 进行 绘制 。 


轮廓 在 两 方面 与 边框 不 同 : 


e 轮廓 不 占用 空间 
e 4¢ ERA) AGE IE 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.outlineOffset="15px" 


outline-offset: _length_|inherit; 


值 描述 
length 轮 廊 与 边框 边缘 的 距离 。 
inherit 规定 应 从 父 元 素 继承 outline-offset 属性 的 值 。 


CSS3 resize 属性 


实例 

规定 可 以 由 用 户 调整 div 元 素 的 大 小 : 
div 
1 
resize:both; 


overflow:auto; 


j 


浏览 器 支持 
Firefox 4+、Chrome 以 及 Safari 不 支持 resize。 
定义 和 用 法 
resize 属性 规定 是 否 可 由 用 户 调整 元 素 的 尺寸 。 


注释 : 如 果 希 望 此 属性 生效 ， 需 要 设置 元 素 的 overflow 属性 ， 值 可 以 是 auto, 
hidden 或 scroll。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.resize="both" 


resize: none|both|horizontal|vertical; 


值 
none 
both 
horizontal 


Vertical 


相关 页 面 


TED 
用 户 无 法 调整 元 素 的 尺寸 。 
用 户 可 调整 元 素 的 高 度 和 宽度 。 
用 户 可 调整 元 素 的 宽度 。 
用 户 可 调整 元 素 的 高 度 。 


iE 
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CSS 选择 器 参考 手册 


我 们 会 定期 对 W3School 的 CSS 参考 手册 进行 浏览 器 测试 。 


[attribute-value] 


[attribute-- value] 


[attribute|-value] 


‘link 


[target=_blank] 


[title~=flower] 


[lang|=en] 


a:link 


CSS3 it7345 
在 CSS 中 ， 选 择 器 是 一 种 模式 ， 用 于 选择 需要 添加 样式 的 元 素 。 
"CSS" 列 指 示 该 属性 是 在 哪个 CSS 版 本 中 定义 的 。 (CSS1、CSS2 还 是 
CSS3, ) 
选择 器 例子 例子 描述 
sacs dame - class="intro" 的 所 有 元 
Hig 人 A id="firstname" 的 所 有 元 
选择 所 有 元 素 。 
element p 选择 所 有 <p> 元 素 。 
element,element div,p ig E <div> 元 素 和 所 有 
EA ， 一 Rug 
element element div p ned 元 素 内 部 的 所 有 
l 选择 父 元 素 为 <div> 元 素 的 
element>element div>p 所 有 <p> 元 素 。 
element+ element div+p ee ae aad 
[attribute] [target] 选择 带 有 target 属性 所 有 元 


m 


选择 target="_blank" 的 所 有 
元 来 。 


选择 title 属性 包含 单词 
"flower" 的 所 有 元 素 。 


选择 lang 属性 值 以 "en" F 
头 的 所 有 元 素 。 


选择 所 有 未 被 访问 的 链接 。 


CSS 


‘active 
:hover 
:focus 
:first-letter 
:first-line 


:first-child 


:before 


:after 


‘lang(language) 


element1~element2 


[attribute^-value] 


[attribute$-value] 


[attribute*=value] 


‘first-of-type 


:last-of-type 


:only-of-type 


:only-child 


:nth-child(n) 


:nth-last-child(n) 


IX A 木 二 > Bu 


a:active 
a:hover 
input:focus 
p:first-letter 
p:first-line 


p:first-child 


p:before 


p:after 


p:lang(it) 


p-ul 


a[src^-"https"] 


a[src$=".pdf"] 


a[src*-"abc"] 


p:first-of-type 


p:last-of-type 


p:only-of-type 


p:only-child 


p:nth-child(2) 


p:nth-last- 
child(2) 


选择 获得 焦点 的 input 元 素 。 


选择 每 个 <p> 元 素 的 首 字 


选择 每 个 <p> 元 素 的 首 行 。 
选择 属于 父 元 素 的 第 一 个 子 
元 素 的 每 个 <p> 元 素 。 


在 每 个 <p> 元 素 的 内 容 之 前 
插入 内 容 。 


在 每 个 <p> 元 素 的 内 容 之 后 
插入 内 容 。 


选择 带 有 以 "it" 开头 的 lang 
属性 值 的 每 个 <p> 元 素 。 
选择 前 面 有 <p> 元 素 的 每 个 
«ul» TEZ 


选择 其 src 属性 值 以 "https" 
开头 的 每 个 <a> 元 素 。 


选择 其 src 属性 以 ".pdf" 结 
尾 的 所 有 «a» 元 素 。 


选择 其 src 属性 中 包含 "abc" 
子 串 的 每 个 <a> 元 素 。 
选择 属于 其 父 元 素 的 首 个 
<p> 元 素 的 每 个 <p> 元 素 。 
选择 属于 其 父 元 素 的 最 后 
«p» 元 素 的 每 个 <p> 元 素 。 
选择 属于 其 父 元 素 唯 一 的 
<p> 元 素 的 每 个 <p> 元 素 。 
选择 属于 其 父 元 素 的 唯一 子 
元 素 的 每 个 <p> 元 素 。 

选择 属于 其 父 元 素 的 第 二 个 
子 元 素 的 每 个 «p» 元 素 。 
同上 ， 从 最 后 一 个 子 元 素 开 
台 计 数 。 


IAA/2C Ah AA| ERU arm. 
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:nth-of-type(n) 


:nth-last-of-type(n) 


:Jast-child 
:root 


:empty 


‘target 


‘enabled 


‘disabled 


:checked 


:not(selector) 


zselection 


type(2) 


p:nth-last-of- 
type(2) 


p:last-child 
:root 


p:empty 


#news:target 


input:enabled 


input:disabled 


input:checked 


:not(p) 


zselection 


«p» 元 素 的 每 个 «p» 元 素 。 
同上 ， 但 是 从 最 后 一 个 子 元 
素 开始 计数 。 


选择 属于 其 父 元 素 最 后 一 个 
子 元 素 每 个 <p> 元 素 。 


选择 文档 的 根 元 素 。 


选择 没有 子 元 素 的 每 个 <p> 
元 素 (包括 文本 节点 ) 。 


选择 当前 活动 的 #news 元 
选择 每 个 启用 的 <input> 元 


选择 每 个 禁用 的 <input> 元 


选择 非 <p> 元 素 的 每 个 元 
选择 被 用 户 选取 的 元 素 部 
To 
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听觉 样式 表 


听觉 样式 表 可 把 语音 合成 与 音响 效果 相 组 合 ， 使 用 户 可 以 听 到 信息 ， 而 无 需 进 行 阅 


。 视 觉 能 力 低 弱 的 人 士 
e 帮助 用 户 学 习 阅读 

。 帮助 有 阅读 障碍 的 用 户 
。 RHE 

。 在 汽车 中 使 用 


听觉 呈现 通常 会 把 文档 转化 为 纯 文 本 ， 然 后 传 给 屏幕 阅读 器 〈 可 读 出 屏幕 上 所 有 字 
符 的 一 种 程序 ) 。 


听觉 样式 表 的 一 个 例子 : 
hi, h2, h3, h4 
voice-family: male; 
richness: 80; 


cue-before: url("beep.au") 


j 
上 面 的 例子 可 以 让 语音 合成 器 演奏 一 段 声音 ， 然 后 用 男性 的 声音 读 出 标题 。 


CSS2 听觉 参考 


W3C : "W3C" 列 的 数字 显示 出 属性 由 哪个 CSS 标准 定义 (CSS1 还 是 CSS2) 。 


属性 描述 i W3C 

angle left-side 
far-left left 

Sets where the center-left center 

azimuth sound/voices should e as right 2 

come from (horizontally) A : 
right-side behind 
leftwards 
rightwards 


A shorthand property for 


cue 


cue-after 


cue-before 


elevation 


pause 


pause-after 


pause- 


before 


pitch 


pitch-range 


play-during 


richness 


speak 


setting the cue-before 
and cue-after properties 
in one declaration 


Specifies a sound to be 
played after speaking 
an element's content to 
delimit it from other 


Specifies a sound to be 
played before speaking 
an element's content to 
delimit it from other 


Sets where the 
sound/voices should 
come from (vertically) 


A shorthand property for 
setting the pause- 
before and pause-after 
properties in one 
declaration 


Specifies a pause after 
speaking an element's 
content 


Specifies a pause 
before speaking an 
element's content 


Specifies the speaking 
voice 


Specifies the variation 
in the speaking voice. 
(Monotone voice or 
animated voice?) 


Specifies a sound to be 
played while speaking 
an element's content 


Specifies the richness 
in the speaking voice. 
(Rich voice or thin 
voice?) 


Specifies whether 
content will render 


cue-before 
cue-after 


none url 


none url 


belo 
higher 


angle level 


above 


pause-before 
pause-after 


time 96 


time 96 


x-low 
high 


frequency 


low medium 
x-high 


number 


auto none url 
mix repeat 


number 
normal none 
spell-out 


lower 


speak- 
header 


speak- 
numeral 


speak- 
punctuation 


speech- 
rate 


stress 


voice- 
family 


volume 


aurally 


Specifies how to handle 
table headers. Should 
the headers be spoken 
before every cell, or 
only before a cell with a 
different header than 
the previous cell 


Specifies how to speak 
numbers 


Specifies how to speak 
punctuation characters 


Specifies the speed of 
the speaking 


Specifies the "stress" in 
the speaking voice 


A prioritized list of voice 
family names that 
contain specific voices 


Specifies the volume of 
the speaking 


spell-out 


always once 
digits continuous 
none code 

number x-slow 
slow medium fast 
x-fast faster 
slower 

number 
specific-voice 
generic-voice 
number % silent 
x-soft soft 
medium loud  x-loud 
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曾 用 的 字体 组 合 
font-family 属性 应 该 使 用 若干 种 字体 名 称 作 为 回 退 系统 ， 以 确保 浏览 器 /操作 系统 之 
间 的 最 大 兼容 性 。 如 果 浏 览 器 不 支持 第 一 个 字体 ， 则 会 党 试 下 一 

以 您 喜欢 的 字体 开始 ， 并 以 通用 字体 系列 结束 ， 以 便 使 浏览 器 在 通用 系统 中 挑选 
人 如 果 没 有 其 他 字体 可 用 的 话 : 
实例 


p{font-family:'Times New Roman', Times, serif} 


下 面 是 最 常用 的 字体 组 合 ， 根 据 通用 系统 进行 汇总 
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Serif PU 
font-family 示例 文本 
Georgia, serif This is a heading 
| This is a paragraph 
‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif | This is a heading 
| This is a paragraph 
'Times New Roman’, Times, serif This is a heading 
| This is a paragraph 
Sans-Serif 宇 体 
font-family TARE 





Arial, Helvetica, sans-serif 


This is a heading 


This is a paragraph 





‘Arial Black’, Gadget, sans-serif 


This is a heading 











| This is a paragraph 
"iic Sans MS’, cursive, sans-serif This is a heading 
This is a paragraph 
Impact, Charcoal, sans-serif This is aheadins 
This is a paragraph 
‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif | This is a heading 


| This is a paragraph 





Tahoma, Geneva, sans-serif 


This is a heading 


This is a paragraph 





Trebuchet MS', Helvetica, sans-serif 


| This is a heading 


This is a paragraph 





Verdana, Geneva, sans-serif 





This is a heading 
This is a paragraph 











Monospace 字体 





font-family 


示例 文本 





‘Courier New', Courier, monospace 


This is a heading 


This is a paragraph 





‘Lucida Console’, Monaco, monospace 





| this is a heading 


This is a paragraph 
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CSS 单位 


RT 
Md 描述 
% Bate 
in 英寸 
cm | BX 
mm Æ% 
1em 等 于 当前 的 字体 尺寸 。2em 等 于 当前 字体 尺寸 的 两 倍 。 例 如 ， 如 果 
em ， 某 元 素 以 12pt 显示 ， 那 么 2em 是 24pt。 在 CSS F, em 是 非常 有 用 的 
单位 ， 因 为 它 可 以 自动 适应 用 户 所 使 用 的 字体 。 
ex ”一 个 ex 是 一 个 字体 的 x-height。 (x-height 通常 是 字体 尺寸 的 一 半 。 ) 
pt 磅 (1 pt 等 于 1/72 英寸 ) 
pc 12 点 活字 (1 pc 等 于 12 点 ) 
px ”像素 (计算 机 屏幕 上 的 一 个 点 ) 
颜色 
单位 描述 
(颜色 名 ) 颜色 名 称 (比如 red) 
rgb(X,X,X) RGB 值 (比如 rgb(255,0,0)) 
rgb(x%, x%, x%) RGB 百分比 值 (比如 rgb(100%,0%,0%)) 


#rrggbb 十 六 进 制 数 (比如 410000) 


CSS 颜色 


色 是 通过 对 红 、 绿 和 蓝光 的 组 合 来 显示 的 。 


Nl 


颜色 值 


CSS 颜色 使 用 组 合 了 红 绿 蓝 颜色 值 (RGB) 的 十 六 进 制 (hex) 表示 法 进行 定义 。 对 
光源 进行 设置 的 最 低 值 可 以 是 0 (十 六 进 制 00) 。 最 高 值 是 255 (十 六 进 制 
FF) s 


十 六 进 制 值 使 用 三 个 双 位 数 来 编写 ， 并 以 # 符号 开头 。 


颜色 颜色 HEX 颜色 RGB 
#000000 rgb(0,0,0) 
#FF0000 rgb(255,0,0) 
#00FF00 rgb(0,255,0) 
#0000FF rgb(0,0,255) 
#FFFF00 rgb(255,255,0) 
#00FFFF rgb(0,255,255) 
#FF00FF rgb(255,0,255) 
#COCOCO rgb(192,192,192) 
#FFFFFF rgb(255,255,255) 


1600 万 种 不 同 的 颜色 


从 0 到 255 种 红 绿 蓝 值 能 够 组 合 出 总 共 超过 一 千 六 百 万 种 不 同 的 颜色 (根据 256 x 
256x256 计算 ) 。 
大 多 数 现代 的 显示 器 都 能 显示 出 至 少 16384 种 不 同 的 颜色 。 


如 果 您 查看 下 面 的 表格 ， 您 将 看 到 红 光 从 0 到 255 变化 后 的 结果 ， 此 时 绿 光 和 蓝光 


如 需 查 看 红 光 由 0 向 255 变化 的 完整 颜色 混合 器 列表 ， 请 点 击 下 面 的 十 六 进 制 值 或 
rgb 值 。 


Red Light HEX RGB 
#000000 rgb(0,0,0) 
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#080000 rgb(8,0,0) 


a ME e 
oo 
BEN XT ON 

esoo 


#400000 rgb(64,0,0) 


BEEN 2T ee 
8100.00) 
BEEN X ON 
BEN 2T "ON 
BEEN XT 
BEN XT 


#900000 rgb(144,0,0) 


#A00000 rgb(160,0,0) 


BEN 2 
117800) 
BD 
0 
DD 
ED 0 


#F00000 rgb(240,0,0) 
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灰色 使 用 所 有 光源 的 等 量 的 光线 来 显示 。 为 了 让 您 更 方便 地 选择 正确 的 友 色 ， 我 们 


#F 80000 
#FF0000 


已 经 为 您 编辑 了 一 个 不 色 列 表 : 


IK pg 


HEX 


#000000 
#080808 
#101010 
#181818 
#202020 
#282828 
#303030 
#383838 
#404040 
#484848 
#505050 
#585858 
#606060 
#686868 
#707070 
#787878 
#808080 
#888888 
#909090 
#989898 
#A0A0A0 
#A8A8A8 


rgb(248,0,0) 
rgb(255,0,0) 


RGB 
rgb(0,0,0) 
rgb(8,8,8) 
rgb(16,16,16 
rgb(24,24,24 
rgb(32,32,32 
rgb(40,40,40 
rgb(48,48,48 
rgb(56,56,56 
rgb(64,64,64 
rgb(72,72,72 
rgb(80,80,80 
rgb(88,88,88 
rgb(96,96,96) 
rgb(104,104,104) 
rgb(112,112,112) 
rgb(120,120,120) 
rgb(128,128,128) 
rgb(136,136,136) 
rgb(144,144,144) 

) 

) 

) 


) 
) 
) 
) 
) 
) 
) 
) 
) 
) 


rgb(152,152,152 
rgb(160,160,160 
rgb(168,168,168 


#BOBOBO rgb(176,176,176) 
#B8B8B8 rgb(184,184,184) 
#COCOCO rgb(192,192,192) 
#C8C8C8 rgb(200,200,200) 
#DODODO rgb(208,208,208) 
#D8D8D8 rgb(216,216,216) 
#E0E0E0 rgb(224,224,224) 
#E8E8E8 rgb(232,232,232) 
#FOFOFO rgb(240,240,240) 
#F8F8F8 rgb(248,248,248) 
#FFFFFF rgb(255,255,255) 
网 络 安全 色 ? 


多 年 前 ， 当 电脑 只 支持 最 多 256 种 颜色 时 ，216 种 “网 络 安全 色 ” 列 表 被 定义 为 Web 
标准 ， 并 保留 了 40 种 固定 的 系统 颜色 。 

现在 ， 这 些 都 不 重要 了 ， 因 为 大 多 数 电脑 都 能 显示 数 百 万 种 颜色 ， 但 是 选择 权 依然 
在 您 手 里 。 

这 个 216 跨 浏 览 器 调 色 板 被 创建 的 目的 是 确保 当 计算 机 运行 256 色调 色 板 时 能 够 
正确 地 显示 颜色 : 


000000 000033 000066 000099 0000CC 0000FF 
003300 003333 003366 003399 0033CC 0033FF 
006600 006633 006666 006699 0066CC 0066FF 
009900 009933 009966 009999 0099CC 0099FF 
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 
00FF00 00FF33 00FF66 OOFF99 OOFFCC OOFFFF 
330000 330033 330066 330099 3300CC 3300FF 
333300 333333 333366 333399 3333CC 3333FF 
336600 336633 336666 336699 3366CC 3366FF 
339900 339933 339966 339999 3399CC 3399FF 
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 


33FF00 
660000 
663300 
666600 
669900 
66CC00 
66FF00 
990000 
993300 
996600 
999900 
99CC00 
99FF00 
CC0000 
CC3300 
CC6600 
CC9900 
CCCCOO 
CCFF00 
FF0000 
FF3300 
FF6600 
FF9900 
FFCCOO 
FFFFOO 


33FF33 
660033 
663333 
666633 
669933 
66CC33 
66FF33 
990033 
993333 
996633 
999933 
99CC33 
99FF33 
CC0033 
CC3333 
CC6633 
CC9933 
CCCC33 
CCFF33 
FF0033 
FF3333 
FF6633 
FF9933 
FFCC33 
FFFF33 


33FF66 
660066 
663366 
666666 
669966 
66CC66 
66FF66 
990066 
993366 
996666 
999966 
99CC66 
99FF66 
CC0066 
CC3366 
CC6666 
CC9966 
CCCC66 
CCFF66 
FF0066 
FF3366 
FF6666 
FF9966 
FFCC66 
FFFF66 


33FF99 
660099 
663399 
666699 
669999 
66CC99 
66FF99 
990099 
993399 
996699 
999999 
99CC99 
99FF99 
CC0099 
CC3399 
CC6699 
CC9999 
CCCC99 
CCFF99 
FF0099 
FF3399 
FF6699 
FF9999 
FFCC99 
FFFF99 


33FFCC 
6600CC 
6633CC 
6666CC 
6699CC 
66CCCC 
66FFCC 
9900CC 
9933CC 
9966CC 
9999CC 
99CCCC 
99FFCC 
CCOOCC 
CC33CC 
CC66CC 
CC99CC 
CCCCCC 
CCFFCC 
FFOOCC 
FF33CC 
FF66CC 
FF99CC 
FFCCCC 
FFFFCC 


33FFFF 
6600FF 
6633FF 
6666FF 
6699FF 
66CCFF 
66FFFF 
9900FF 
9933FF 
9966FF 
9999FF 
99CCFF 
99FFFF 
CCOOFF 
CC33FF 
CC66FF 
CC99FF 
CCCCFF 
CCFFFF 
FFOOFF 
FF33FF 
FF66FF 
FF99FF 
FFCCFF 
FFFFFF 


CSS 合法 颜色 值 


CSS 颜色 


可 以 用 以 下 方法 来 规定 CSS 中 的 颜色 : 


十 六 进 制 色 

RGB 颜色 

RGBA 颜色 

HSL 颜色 

HSLA 颜色 
预定 义 / 跨 浏览 器 颜色 名 


十 六 进 制 颜 色 


所 有 浏览 器 都 支持 十 六 进 制 颜色 值 。 


十 六 进 制 颜色 是 这 样 规定 的 : #RRGGBB， 其 中 的 RR (红色 ) 、GG (绿色 ) 、 
BB (i£) 十 六 进 制 整数 规定 了 颜色 的 成 分 。 所 有 值 必 须 介 于 0 与 FF 之 间 。 


举例 说 ，#0000ff 值 显示 为 蓝 色 ， 这 是 因为 蓝 色 成 分 被 设置 为 最 高 值 (人 ff) ， 而 其 他 
成 分 被 设置 为 0。 


实例 


p 


background-color :#0000ff; 


RGB 颜色 


所 有 浏览 器 都 支持 RGB 颜色 值 。 


RGB 颜色 值 是 这 样 规定 的 rgb(red, green, blue)。 每 个 参数 (red, green LAR 
blue) 定义 颜色 的 强度 ， 可 以 是 介 于 0 与 255 之 间 的 整数 ， 或 者 是 百分比 值 (M 
0% 到 10096) 。 


举例 说 ，rgb(0,0,255) 值 显示 为 蓝 色 ， 这 是 因为 blue 参数 被 设置 为 最 高 值 
(255) ， 而 其 他 被 设置 为 0。 


同样 地 ， 下 面 的 值 定义 了 相同 的 颜色 : rgb(0,0,255) 和 rgb(0%,0%, 100%). 


实例 


p 


{ 
background-color: rgb(255,0,0); 
} 


RGBA 颜色 
RGBA 颜色 值得 到 以 下 浏览 器 的 支持 : IE9+、Firefox 3+、Chrome、Safari 以 及 
Opera 10+。 


RGBA 颜色 值 是 RGB 颜色 值 的 扩展 ， 带 有 一 个 alpha 通道 - 它 规定 了 对 象 的 不 透 
明度 。 


RGBA 颜色 值 是 这 桩 规定 的 : rgba(red, green, blue, alpha), alpha BREN F 
0.0 (完全 透明 ) 与 1.0 (完全 不 透明 ) 的 数字 。 


实例 
p 
{ 
background-color:rgba(255,0,0,0.5); 
j 

HSL 颜色 


HSL 颜色 值得 到 以 下 浏览 器 的 支持 : IEQ+, Firefox; Chrome, Safari 以 及 Opera 
10+。 


HSL 指 的 是 hue (色调 ) 、saturation 〈 饱 和 度 ) 、lightness (38/8) - 表示 颜色 柱 
面 坐标 表示 法 。 


HSL 颜色 值 是 这 样 规定 的 : hsl(hue, saturation, lightness)。 


Hue 是 色 盘 上 的 度数 (从 0 到 360) - 0 (或 360) 是 红色 ，120 是 绿色 ，240 是 蓝 
色 。Saturation 是 百分比 值 ; 0% 意味 着 上 灰色， 而 100% 是 全 彩 。Lightness AE 
百分比 值 ; 0% 是 黑色 ，100% 是 和 白色。 


实例 


p 


{ 
background-color :hs1(120, 65%, 75%) ; 
j 


HSLA 颜色 

HSLA 颜色 值得 到 以 下 浏览 器 的 支持 : IE9+、Firefox 3+, Chrome, Safari 以 及 
Opera 10+。 

HSLA 颜色 值 是 HSL 颜色 值 的 扩展 ， 带 有 一 个 alpha 通道 - 它 规定 了 对 象 的 不 透明 


2o 


HSLA 颜色 值 是 这 样 规定 的 : hsla(hue, saturation, lightness, alpha)， 其 中 的 alpha 
参数 定义 不 透明 度 。alpha 参数 是 介 于 0.0 (完全 透明 ) 与 1.0 (完全 不 透明 ) 的 数 
字 。 


实例 


p 


{ 
background-color :hsla(120, 65%, 75%, 0.3); 
} 


CSS 颜色 名 


CSS 颜色 名 
所 有 浏览 器 都 支持 的 颜色 名 。 


HTML 和 CSS 颜色 规范 中 定义 了 147 中 颜色 名 (17 种 标准 颜色 加 130 种 其 他 颜 
色 ) 。 下 面 的 表格 中 列 出 了 所 有 这 些 颜色 ， 以 及 它们 的 十 六 进 制 值 。 


提示 : 17 种 标准 色 是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, 
olive, orange, purple, red, silver, teal, white, yellow. 


点 击 颜色 名 (或 十 六 进 制 值 ) 来 查看 这 种 颜色 作为 


以 颜色 名 排序 


根据 十 六 进 制 值 排序 的 相同 列表 
颜色 名 


AliceBlue 
AntiqueWhite 
Aqua 
Aquamarine 
Azure 

Beige 

Bisque 

Black 
BlanchedAlmond 
Blue 
BlueViolet 
Brown 
BurlyWood 
CadetBlue 


Chartreuse 


ab eS 
月 s 


色 拱 配 不 同 的 文本 颜色 : 


十 六 进 制 颜色 值 颜色 


#FOF8FF 
ZFAEBD?7 
#OOFFFF 
#7FFFD4 
#FOFFFF 
#F5F5DC 
#FFE4C4 
#000000 
#FFEBCD 
#0000FF 
#8A2BE2 
#A52A2A 
#DEB887 
#5F9EAO 
#7FFFOO 
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Chocolate 
Coral 


CornflowerBlue 


Cornsilk 
Crimson 

Cyan 

DarkBlue 
DarkCyan 
DarkGoldenRod 
DarkGray 


DarkGreen 
DarkKhaki 
DarkOliveGreen 
Darkorange 
DarkOrchid 
DarkRed 
DarkSalmon 
DarkSeaGreen 
DarkSlateBlue 
DarkSlateGray 
DarkTurquoise 
DarkViolet 
DeepPink 
DeepSkyBlue 
DimGray 
DodgerBlue 
Feldspar 
FireBrick 
FloralWhite 





CSS 颜色 名 


#D2691E 
#FF7F50 
#6495ED 
#FFF8DC 
#DC143C 
#00FFFF 
#00008B 
#008B8B 
#B8860B 
#A9A9A9 
#006400 
#BDB76B 
#8B008B 
#556B2F 
#FF8C00 
#9932CC 
#8B0000 
#E9967A 
#8FBC8F 
#483D8B 
#2F4F4F 
#00CED1 
#9400D3 
#FF1493 
#00BFFF 
#696969 
#1E90FF 
#D19275 
#B22222 
#FFFAFO 


1401 
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ForestGreen #228B22 

GhostWhite 
GreenYellow 
LavenderBlush 
LightGoldenRodYellow 
LightSalmon 
LightSeaGreen 





LightSlateBlue #8470FF 


CSS 颜色 名 
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LightSlateGray 
LightSteelBlue 
LightYellow 

Lime 

Linen 

Magenta 

Maroon 
MediumAquaMarine 
MediumBlue 
MediumOrchid 
MediumPurple 
MediumSeaGreen 
MediumSlateBlue 
MediumSpringGreen 
MediumTurquoise 
MediumVioletRed 
MidnightBlue 
MintCream 
MistyRose 
Moccasin 
NavajoWhite 
Navy 

OldLace 

Olive 

OliveDrab 

Orange 
OrangeRed 
Orchid 





CSS 颜色 名 


#778899 
#BOC4DE 
#FFFFEO 
#00FF00 
#32CD32 
#FAFOE6 
#FFOOFF 
#800000 
#66CDAA 
#0000CD 
#BA55D3 
#9370D8 
#3CB371 
#7B68EE 
#00FA9A 
#48D1CC 
#C71585 
#191970 
#FOFFFA 
#FFE4E1 
#FFE4B5 
#FFDEAD 
#000080 
#FDF5E6 
#808000 
#6B8E23 
#FFA500 
#FF4500 
#DA70D6 


1403 
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PaleGoldenRod 
PaleGreen 
PaleTurquoise 
PapayaWhip 
PeachPuff 
Peru 

Plum 
PowderBlue 
Purple 

Red 
RosyBrown 
RoyalBlue 
SaddleBrown 
Salmon 
SandyBrown 
SeaGreen 
SeaShell 
Sienna 

Silver 
SkyBlue 
SlateBlue 
SlateGray 
Snow 
SpringGreen 
SteelBlue 
Tan 

Teal 


Thistle 





CSS 颜色 名 


#EEE8AA 
#98FB98 
#AFEEEE 
#D87093 
#FFEFDS 
#FFDAB9 
#CD853F 
#FFCOCB 
#DDAODD 
#BOEOE6 
#800080 
#FF0000 
#BC8F8F 
#4169E1 
#8B4513 
#FA8072 
#F4A460 
#2E8B57 
#FFFSEE 
#A0522D 
#COCOCO 
#87CEEB 
#6A5ACD 
#708090 
#FFFAFA 
#00FF7F 
#4682B4 
#D2B48C 
#008080 
#D8BFD8 


1404 


W3School 前 端 教程 合集 


Tomato #FF6347 
Turquoise #40E0D0 
Violet #EE82EE 
VioletRed #D02090 
Wheat #F5DEB3 
White #FFFFFF 
WhiteSmoke #F5F5F5 
Yellow #FFFF00 
YellowGreen #9ACD32 
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CSS 颜色 十 八进制 值 


根据 十 六 进 制 值 排序 


所 有 浏览 器 都 支持 的 颜色 名 
根据 颜色 名 排序 的 相同 列表 


颜色 名 十 六 进 制 颜色 值 颜色 
Black #000000 
Navy #000080 
DarkBlue #00008B 
MediumBlue #0000CD 
Blue #0000FF 
DarkGreen #006400 
Green #008000 
Teal #008080 
DarkCyan #008B8B 
DeepSkyBlue #OOBFFF 
DarkTurquoise 200CED1 
MediumSpringGreen 400FA9A 
Lime #00FF00 
SpringGreen #00FF7F 
Aqua #00FFFF 
Cyan #00FFFF 
MidnightBlue #191970 
DodgerBlue #1E90FF 
LightSeaGreen #20B2AA 
ForestGreen #228B22 
SeaGreen #2E8B57 
DarkSlateGray #2F4F4F 
CSS 颜色 十 六 进 制 值 1406 
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LimeGreen 
MediumSeaGreen 
Turquoise 
RoyalBlue 
SteelBlue 
DarkSlateBlue 
MediumTurquoise 
DarkOliveGreen 
CadetBlue 
CornflowerBlue 
MediumAquaMarine 
DimGray 
SlateBlue 
OliveDrab 
SlateGray 
MediumSlateBlue 
LawnGreen 
Chartreuse 
Aquamarine 
Maroon 

Purple 

Olive 

Gray 

SkyBlue 
LightSkyBlue 
BlueViolet 
DarkRed 





CSS 颜色 十 六 进 制 值 


#32CD32 
#3CB371 
#40E0D0 
#4169E1 
#4682B4 
#483D8B 
#48D1CC 
#4B0082 
#556B2F 
#5F9EAO 
#6495ED 
#66CDAA 
#696969 
#696969 
#6A5ACD 
#6B8E23 
#708090 
#778899 
#7B68EE 
#7CFCOO 
#7FFFOO 
#7FFFD4 
#800000 
#800080 
#808000 
#808080 
#87CEEB 
#87CEFA 
#8A2BE2 
#8B0000 
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DarkMagenta #8B008B 
SaddleBrown #8B4513 
DarkSeaGreen #8FBC8F 
LightGreen #90EE90 
MediumPurple #9370DB 
DarkViolet #9400D3 
PaleGreen #98FB98 
DarkOrchid #9932CC 
YellowGreen #9ACD32 
Sienna #A0522D 
Brown #A52A2A 
DarkGray #A9A9A9 
LightBlue #ADD8E6 
GreenYellow #ADFF2F 
PaleTurquoise #AFEEEE 
LightSteelBlue #B0C4DE 
PowderBlue #B0E0E6 
FireBrick #B22222 
DarkGoldenRod #B8860B 
MediumOrchid #BA55D3 
RosyBrown #BC8F8F 
DarkKhaki #BDB76B 
Silver #COCOCO 
MediumVioletRed #C71585 
IndianRed #CD5C5C 
Peru #CD853F 
Chocolate #D2691E 
Tan #D2B48C 
LightGray #D3D3D3 
Thistle #D8BFD8 








CSS 颜色 十 六 进 制 值 
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Orchid 
GoldenRod 
PaleVioletRed 


Crimson 
Gainsboro 
Plum 
BurlyWood 
LightCyan 





Lavender 
DarkSalmon 
Violet 
PaleGoldenRod 
LightCoral 
Khaki 





AliceBlue 
HoneyDew 
Azure 
SandyBrown 
Wheat 

Beige 
WhiteSmoke 
MintCream 
GhostWhite 
Salmon 
AntiqueWhite 
Linen 
LightGoldenRodYellow 
OldLace 

Red 





CSS 颜色 十 六 进 制 值 


#DA70D6 
#DAA520 
#DB7093 
#DC143C 
#DCDCDC 
#DDAODD 
#DEB887 
#EOFFFF 
#E6E6FA 
#E9967A 
#EE82EE 
#EEE8AA 
#F08080 
#FOE68C 
#FOF8FF 
#FOFFFO 
#FOFFFF 
#F4A460 
#F5DEB3 
#F5F5DC 
#F5F5F5 
#F5FFFA 
#F8F8FF 
#FA8072 
#FAEBD7 
#FAFOE6 
#FAFAD2 
#FDF5E6 
#FF0000 
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Fuchsia 
Magenta 
OrangeRed 
Tomato 
HotPink 
Coral 
Darkorange 
Orange 
LightPink 
Pink 

Gold 
PeachPuff 
NavajoWhite 


Moccasin 
Bisque 
MistyRose 
BlanchedAlmond 
PapayaWhip 
LavenderBlush 
SeaShell 
Cornsilk 
LemonChiffon 
FloralWhite 
Snow 

Yellow 
LightYellow 


Ivory 
White 





CSS 颜色 十 六 进 制 值 


#FFOOFF 
#FFOOFF 
#FF1493 
#FF4500 
#FF6347 
#FF69B4 
#FF7F50 
#FF8C00 
#FFAO7A 
#FFA500 
#FFB6C1 
#FFCOCB 
#FFD700 
#FFDAB9 
#FFDEAD 
#FFE4B5 
#FFE4C4 
#FFE4E1 
#FFEBCD 
#FFEFDS 
#FFFOFS 
#FFFSEE 
#FFF8DC 
#FFFACD 
#FFFAFO 
#FFFAFA 
#FFFFOO 
#FFFFEO 
#FFFFFO 
#FFFFFF 
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Firebug 教程 


Firebug 教程 


什么 是 Firebug ? 


Firebug 是 一 个 开源 的 web 开 发 工具 。 
在 本 章 教 程 我 们 将 讨论 以 下 内 容 : 


e 如 何 安装 Firebug. 

e 使 用 Firebug 检查 和 编辑 HTML. 
使 用 Firebug 检查 和 编辑 CSS。 
使 用 Firebug 调试 JavaScript。 

在 Firebug 中 动态 执行 JavaScript. 
使 用 Firebug 记录 Javascript 日 志 。 
使 用 Firebug 监控 网 络 。 


安装 Firebug 


Firebug 下 载 地 址 : https://addons.mozilla.org/en-US/firefox/addon/1843/ 


使 用 Firefox 浏 览 器 访问 以 上 下 载 地 址 ， 打 开 页 面 后 ， 点 击 下 载 按 钮 后 ， 会 有 个 弹 窗 
页 面 ， 提 示 安 装 的 目录 ， 安 装 后 重启 你 的 Firefox 浏 览 器 。 


重启 后 就 可 以 在 Firefox 浏 览 器 中 看 到 Firebug 的 图 标 。 点 击 Firebug 图 标 (位 于 Firefox 
浏览 器 右上 角 ) 即 可 激活 Firebug 插 件 。 





J c [a] - BE <Ctrl+K> P ~- D- A 多 ~ "ul æl 
Search w3cschool cc: (El 
BS... (QQidi 论 群 : 71358470 ) 


离线 版 下 载 图 on 


Firebug 组 件 


Firebug 选项 


W3School 前 端 教 程 合集 











| 





Firebug UI Location 
Deactivate Firebug for This Site Shift+F12 


Open With Editor 

Text Size 

Options 

Firebug Online 

Inspect Element Ctrl+Shift+C 
Profile JavaScript Ctrl+Shift+P 
Command Line Ctrl+Shift+L 
Search Ctrl+F 
Customize Shortcuts Ctrl+Shift+Alt+B 
About... 1.9.0 


&2Fwww.w3resource.com&xdm c-default5542&xdm p-1&"» 


/body> 


ml> 


在 页 面 上 点 击 检查 元 素 


(9 


"| E «div class="logo"> 








tional//EN" "http://www.w3.org/TR 


bsap"» 


provider" frameborder-"0" 
der" style-"position: 
p://mediacdn.disqus.com 
ps3At2F 








| Edit | a < lilinkz < ul < div#menu < div#main < body < html 


由 «div id-"bsap 1263115" class-"bsap 1263115 bsap"> 
由 «div class="nevber"> 
日 <div id="main"> 


日 <div id="menu"> 
B <ul> 
由 <li class="first"> 
由 <li class="home"> 


<li class="heedlink">VWFirebug</li> 


由 <li> 
B <li class="linkz"> 


<a href="/web-development-tools/inspect-and-edit- 
HIML-with-Firebug.php"» Inspect and edit HTML with 





</li> 





Show command line 


Firebug 教程 


Computed Layout DOM 
-tn { style.css (line 35) ^. 
background- 
color: #404041; 
color: #FFFFFF; | 
margin: auto auto Spx 
-20px; 


padding-bottom- 5px; 
text-align: left; 


m 


} 


ul, html.css (line 569) 
menu, «System» 
dir { 


-moz-padding- 

start: 40px; 

display: block; 
list-style-type: disc; 





mergin: temo; 
} 
address, html.css (line 63) 
article, «System» 
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面板 选择 






Console liv&main < body < html 
HTML NE MEE 














由 «div class-"logo 
由 «div id-"bsap 12 
由 «div class-"navb 
E <div id-"main"» 
<div id-"men 
日 <div id="cont 


63115 bsap"> 


«|[«|[«|«|«|« 


E «div id=" Show All Panels 





Console Panel is disabled 


Use Firebug's status bar icon to enable/disable all panels at once. Use each panel's tab 


menu for individual control. | Consol(*) 


Enable «3 Click here to enable 








HTML 面板 






Show Full Text 
Show White Space 
Show Comments 






€» | Edit | div#writeup < div#content < 
cTYPE html PUBLIC "-//W3C//DTD XHTML 
L xmlns="http: //www.w3.org/1999/xh 
head» 

body» 

lk «script type="text/javascript"> 
由 «script» 

由 <ul class="tn"> 

由 «div class="logo"> 

由 «div id-"bsap 1263115" class-"bsa 
由 «div class-"navbar"» 

J) <div id="main"> 

<div id="menu"> 


CSS 面板 








Show Basic Entities 





Highlight Changes 
Expand Changes 






Scroll Changes Into View 






Shade Box Model 
Show Quick Info Box 
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Expand Shorthand properties 





Source Edit ~ style.css 7 








body { Refresh 
background-color: #FFFFFF; 
font-family: verdanae,helvetica, arial, sans-serif; 
margin: 0; 

padding: 0; 


} 
img { 
border-style: none; 
vertical-align: middle; 
} 


img a:link { 
border: 0 none; 
text-decoration: none; 


img a:visited { 
border: 0 none; 
text-decoration: none; 















i | all | like.php?channel_url=https%3A%2F%... 7 Enabled 
















1 <!DOCTYPE html» Show chrome sources 

2 <html lang="en" id="facebook" class="no 

3 <head><meta charset="utf-8" /><script>< Track Throw/Catch ty 
| 4 hi,h2,h3,h4,h5,hé{font-size: 13px;color v Show Break Notifications 

5, hi{font-size: 14px} 

6 h4,hS{font-size: 11px} 

7. p(margin:lem 0} 

8 a([(cursor:pointer;color:£$3b5998;-moz-outline-style:none;text-decoratior 

35. a:hover[text-decoration-:underline] 

10| img(border:0] 





Show User-defined Properties 
Show User-defined Functions 
Object { userStat Show DOM Properties 
null Show DOM Functions 
"Mozilla/5.0 (W Show DOM Constants 


c——— Show Inline Event Handlers 
Object { chili="v1" 


false Show Own Properties Only 


Object { } Show Enumerable Properties Only 
0 











Refresh 


[ function(), f 
Stoplteration { } 
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网 络 面板 (用 于 网 页 测速 和 优化 ) 








由 GET ql9vukDC« 
由 GET sprite2.pn 
由 GET pqDuxm 1 
由 GET def.htmls 
由 GET reply.html 
由 GET add-imagt 
由 GET upload.htr 
由 GET xd proxy. 
由 GET quant.js 
由 GET beacon.js 
由 GET ga.js 

=Œ GET lib.js 

由 GET lib.js 

由 GET  utm.gif: 
由 GET pixelr=11 
由 GET b?c1-7&c 


static.ak. fbcdn.net 

static.ak. fbcdn.net 

ssl.gstatic.com 
200 C static.ak.fbcdn.net 
200 OK mediacdn.disqus.com 
200 OK mediacdn.disqus.com 
200 OK mediacdn.disqus.com 
200 OK mediacdn.disqus.com 
200 OK s-static.ak.fbcdn.net 
304 Not Modified edge.quantserve.com 


200 OK b.scorecardresearch.com 


google-analytics.com 
200 OK mediacdn.disqus.com 
2 t mediacdn.disqus.com 


200 OK google-analytics.com 
204 No Content pixel.quantserve.com 
204 No Content b.scorecardresearch.com 


e 1 - 最 小 化 Firebug。 
e 2 -在 浏览 器 窗口 安装 Firebug。 
e 3 - 停 用 Firebug。 


Firebug 教程 











Disable Browser Cache 


Show Paint Events 


124. 124.40. 17:80 
124.124.40. 17:80 
124.124.40. 17:80 
124. 124.40. 17:80 
118.214.45.177:443 
96.17.181.8:80 
195.59.44.17:80 


124. 124.40. 17:80 
74.125.236.96:80 


203. 190. 124. 14:80 
195.59.44. 17:80 








Nl 456ms 

MEE 774: 

ll 347ms 

— 488ms 

E 1.235 
má 449ms 
EN 572»: 


END 107: 
a) E 
M 198ms 
MN 557»: 
— 548ms 
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使 用 Firebug 查 看 和 编辑 HTML 和 CSS 
在 本 章节 的 教程 中 ， 我 们 将 讨论 如 何 使 用 Firebug 查 看 和 编辑 HTML 和 CSS。 


使 用 Firebug 查 看 和 编辑 HTML 


在 你 要 查看 的 元 素 上 右 击 鼠标 然后 点 Inspect Element( 查 看 元 素 ). 





The following pictorial shows left hand side of the Firebug when opened. 
Each component is marked with a number and that what that component do 


is described w.r.t. number. 





aa iq > | [| Consolev | HIML CSS Script DOM Net 
PR PE To Om FT ns rp re re ri | 


; S] «| consoie ( m > CSS Script DOM Net 













giis 








$ e 





z3 | Edit | h2.heading < div#writeup < div#content < div#main < body < html 
<p> rou can aowniosd ana install Firepug rrom " 3 
https://addons.mozilla.org/en-US/firefox/addon/1843/. </p> í style.css (line 415) 
B <p> | border-bottom: lpx solid #666666; 
| color: #000000; 

















<p>At this stage firebug is not activited. If you click that icon, Ls] Posrt-f du wardana ee mama 
Firebug will get activated. </p> | d = " z - 
5 up xy x || serif; 
<h2 class="heading">Components of a Firebug h2> | E 
a " — anis m s m | font-size: 13pt; 
<p>The following pictorial shows left hand side of the Firebug when | 
z B 7 | margin-bottom: 8px; 

opened. Each component is marked with a number and that what that | in iatt- dm 
component do is described w.r.t. number. </p> ES] KE RES ARE 

= 本 = M | margin-top: 2px; 

um 一 一 一 一 -一 一 一 ——————M - (ou uve eoo "| padding-bottom: Spx; - 

















<h2 class-"heading"»Components of a Firebug </h2>| 


修改 代码 <h1>Components of Firebug</h1> . 





Components of Firebug 


The following pictorial shows left 上 
Each component is marked with a 
is described w.r.t. number. 


Lk 
ar b | b e | 


i | le ersi 





at zx S$ ? 


=) -| Console | HTML» | CSS Script DOM Net 





<> [east] | Edit || h2.heading < —— diurcontent < divémain < body < html 
*hl»Components of Firebug-c/h1l» 


你 只 要 在 Firebug 窗 口上 修改 代码 就 能 实时 的 查看 修改 后 代码 在 浏览 器 上 的 显示 效 
果 ， 你 也 可 以 复制 代码 到 你 的 HTML 文 件 中 。 


使 用 Firebug 查 看 和 编辑 Css 


-a a aun 百 点 击 Inspect Element( 查 看 元 素 )。 如 下 图 所 示 点 击 样 
文件 





g [zl uen e 
eh) < > I) "| Console | HTML | CSS Script DOM Net (^ - : a ea 
43 | Edit | hl < div#content < divémain < body < html Style | Computed Layout DOM 

z dis  inzmccpavpRE T ^||h1 { Click this to edit CSS code E syleess (line 398) 
border-bottom: 1px solid #666666; 


J <div id="main"> 
color: $2255AA; 
font-family: verdana,helvetica,arial,sans- 
||| serif; 
font-size: 14pt; 
margin-bottom: 15px; 
margin-left: 4px; 

—— es margin-top: -3px; 

Ram ——— "n + || padding-bottom: 5px; ——— —  — ç 


由 «div id="menu"> 
z «div id-"content"» 





由 «div id-" writeup"> 
由 <p> 


EU. Sivas w3resource.com | online web tutorials" src="/images/site.png"> œ 








通过 修改 代码 为 color:red; 来 修改 标题 颜色 
修改 完成 后 你 可 以 马上 看 到 修改 后 的 效果 。 
现在 你 可 以 复制 修改 后 的 样式 ， 取 代 原 有 的 代码 并 保存 ， 使 之 生效 : 
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Home Inspectand edit CSS with Firebug 
¥ Firebug Tutorials 
Firebug Tutorials Right click on the element which you want to inspet 


Inspect Element. 


... Inspect and edit HTML with 
uie > [B] consore HTML ra DOM 





hi 
border-bottom: 1px solid #666666; 
@ color: red; 
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 14pt; 
margin-bottom: 15px; 
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使 用 Firebug 调试 JavaScript 


fe aah 

Firebug 是 一 个 非常 强大 的 工具 ， 可 以 帮助 您 发 现代 码 发 现 错误 的 错误 并 解决 错误 。 
在 此 我 们 使 用 Firebug 来 处 理 Javascript 代 码 。 

首先 我 们 需要 加 载 页 面 并 打开 Firebug。 

有 时 候 您 需要 重新 载 和 页面。 


在 状态 栏 的 错误 数 


© 1 Error 





显示 当前 页 面 的 错误 


"e| € > |= |ia com | HTML CSS Script DOM Net 
ie | Clear Persist Profile on) Errors Warnings Info Debug Info 
€ syntax error 

var b=; 


显示 错误 的 详细 信息 





Watch * | Stack — Breakpoints 


New watch expression... 





| > 


由 this Window for-in-statement-example2.htm! 

由 Components nsXPCComponents { 
interfaces-nsXPCComponents Interfaces , 
interfacesBylD-nsXPCComponents Interfa: 

由 applicationCache 0 items in offline cache 


m 


dosed false 
由 console Object { firebug="1.6.1" } 
constructor Window { } 
由 content Window for-in-statement-example2.html 
由 controllers XULControllers { constructor=XULControll 
由 crypto Crypto { constructor=Crypto, version=": 
enable SmartCardEvents=false } 
defaultStatus "e 
由 directories BarProp { constructor=BarProp, visible= 
由 document Document for-in-statement-example2 html 
frameElement Er] - 





4 | "m | + 





1AA OCOnhanl È 
W3School By 


一 步 步 调试 代码 
你 可 以 一 步 步 的 执行 代码 。 这 对 代码 调试 非常 有 用 。 





























ROSE AT. (CEDERE Tr 
s 3€ |= -| eme: HTML CSS | Script | DOM Net 
| all + | for-in-statement-example2.html - Ee Pa. 
1; <!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" ^ 
2, "http-//www.w3.org/TR/xhtm11/DTD/xhtmll-transitional.dtd"» E 
3, «html xmlns-"http-//www.w3.org/1999/xhtml" xml:lang-"en" lang="en"> 
4. «head» 
S «meta http-equiv-"content-type" content-"text/html; charset=iso-8859-1" /> 
6, «title»JavaScript for in statement : Example-1</title> 4 
7. </head> 三 
3 <body> 
9, «hl style="color: red">JavaScript : for in statement </hi> 
10; <hr /> : 
> 11 <script type-"text/javascript"» E 
12] /* 
13, function demo() 
14! ( 
15 var key, strl - ""; 
16 // Initialize object. 
17, var student = { 
18 name : "David Rayy", 
19 Cinsa : "Y 
2 rolinn - 12 v 
4 t 





使 用 断 点 调试 


断 点 调试 可 以 终止 代码 的 执行 ， 你 可 以 通过 指定 代码 范围 来 查看 错误 是 不 是 在 指定 
代码 范围 内 。 这 对 于 错误 调试 很 有 用 。 


如 果 你 点 击 "Step over ( 单 步 跳 过 ) " 按钮 , Firebug 会 更 新 所 有 变量 直到 你 在 右 侧 
窗口 中 终止 断 点 执行 。 




















ae "| < >|= 1+] | Console HTML CSS | Scripty | DOM Net 
ig | all- VIUERE EN TENNIS for-in-s...le2.html p» 0.1 
1, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ^ 
2, "http://www.w3.org/TR/xhtm11/DTD/xhtmll-transitional.dtd"- 
3, «html xmlns-"http://www.w3.org/1999/xhtml" xml:lang-"en" lang="en"> 
4, <head> 
5, «meta http-equiv-"content-type" content-"text/html; charset-iso-8859-1" /> 
6, <title>JavaScript for in statement :  Example-1-/title» J 
7 </head> ^ 
8 <body> 
9 «hl style="color: red"»JavaScript : for in statement </h1> 
10| <hr /> Step 
(QQ 11 <script type="text/javascript"> Over | | 
124] /* 
3| function demo() 
4i { 
15 var key, stri = ""; 
16 // Initialize object. 


Use BreakPoint to stop execution Step Info 


ES P" 





n rolino - 17 





W3School 前 端 教程 合集 


使 用 表达 式 让 断 点 工作 
你 可 以 写 一 个 表达 式 ， 在 条 件 为 真 时 ， 断 点 会 停止 代码 的 执行 。 










we pq ME Console HTML HE ovi" HOM Net 
aj aly for-in-statemenit-example? html * 


1| «!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" _ 












TERR 


2, "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 

3 <html xmlns-"http-://www.w3.org/1999/xhtml" xml:lang-"en" lang="en"> 

4 <head> 

S «meta http-equiv-"content-type" content-"text/html; charset-iso-8859-1" /> 
6 <title>JavaScript for in statement : Example-1</title> 








] ; <script. type-"text/javascript"» 


12] /* 

13! function demo() 

14! i 

15 var key, strl - ""; 
16 // Initialize object. 


17. var student = { 
18 name : "David Rayy", 





19 class - " V*, 
20!  rollno - 12 T 
ea ee dad a | 


搜索 
你 可 以 使 用 快速 搜索 来 查找 代码 中 的 关键 字 。 
B —— .— .— 0 x] 
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Firebug 页 面 概况 查看 


使 用 Firebug 的 概况 ， 你 可 以 测试 Web 页 面 导 致 延迟 加 载 的 文件 。 
通过 打开 页 面 Firebug > Console (控制 台 ) > Profile (概况 ) 。 
你 需要 重新 加 载 页 面 ， 然 后 点 击 " 概 况 "查看 页 面 载 人 情况 。 


最 全 的 WEB 技 术 在 线 教 和 
W3SCSCHOOL.CC 
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Firebug 动 态 执行 JavaScript 


您 可 以 使 用 Firebug 来 编写 并 实时 执行 一 个 JavaScript。 


这 是 为 了 测试 ， 并 确保 该 脚本 工作 正常 ， 这 是 将 JavaScript 代 码 部 署 在 生产 环境 前 
的 好 方法 。 


打开 Firebug > Script( 脚 本 ) > 显示 命 信行， 代码 如 下 所 示 : 


alert("w3cschool.cc") 












<html xmlns4 http://waw. w3. org/1999/xhtml" lang-"zh-CN'» 


<head> 





E <meta hame-"keywords" content=""3cschool, HTML, CSS, PHP, DOM, JavaScr 
4 | " | 


® Warning: Enabling the Script panel causes a Firefox slow-down due to a pls 


3 >>> alert ("wScschool. cc”) 


按 Enter 键 后 ， 马 上 你 就 能 看 到 代码 的 输出 。 如 图 所 示 : 
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w3cschool. cc 








wR < > Bl- eua HTML css |MÁ - | DOM 网 络 Cookies 
i| 所 有 -| em - e 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www. w3. org/ TR/xhtml1/DTD/xhtmli-trs 
<html xmins-" http://www. w3. org/1999/xhtml" lang-"zh-CN^» 
<head> 

«meta charset-"UIF-8^» 

«title»3cschool3E S E fg /title» 

«meta name-"keywords / content- w3cschool, HTML, CSS, PHP, DOM, JavaScript, jQuery, XML, AJAX, ASP. NET, W3C, SQL, j 





nok 6€) h m 








- Enahling the SCript panel causes a Firefox slow-down due to a platform bug. This will be fixed with tl 


>>> alert ("w3cschool. cc”) 
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Firebug 记 录 Javascript 日 志 


你 可 以 使 用 Firebug 来 生成 日 志 。 
这 有 助 于 我 们 调试 web 页 面 并 发 现 页 面 的 错误 。 
在 Firefox 浏 览 器 中 执行 以 下 代码 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.o1 
«html» 

«head» 

«meta http-equiv-"Content-Type" content-"text/html; charset=UTF-8": 
<title>Firefox 测 试 页 面 - w3cschool3E &axfe«/title» 


</head> 

<body> 

<script type="text/javascript"> 
var a = "w3cschool"; 

var b = "Ce 


document.write(a,b); 
console.log(a + b); 
</script> 

</body> 

</html> 





使 用 Firefox 浏 览 器 打开 以 上 代码 文件 firefox-test.html, 执 行 结果 及 日 志 记 录 如 下 : 


访问 最 多 O 火狐 官方 站 点 ; 新 手 上 路 Ñ 815603 -JSD.pause .… _) SAMH 国 Ras 


wocschool. cc 


& |< >》 | 三 | -| ees | HTML css B4 DOM 网 络 Cookies 
(e| ṣe Ge mum [Al] SR SS 消息 WEB Cookies 
® Warning: Enabling the Script panel causes a Firefox slow-down due to a platform bug. This will be fixed with the 


w3cschool. cc 


W3School 前 端 教程 合 


Firebug 4 $2257 


Firebug 可 以 监控 网 页 中 每 个 文件 加 载 的 时 间 。 


打开 Firebug。 上 点击" 网络 "， 然 后 确定 已 经 启用 ， 重 新 裁 人 当前 页 面 。Firebug 显 示 


如 下 所 示 : 


最 全 的 WEB 技 术 在 线 教程 


W3CSCHOOL.CC 








a qe € > Bl eae HTML css 脚本 DOM | 网 络 | Cookies p 
dc 


清除 ”保持 |[ 全 部 | HTML CSS JavaScript XHR 图 片 插件 媒体 字体 








由 GET www.w3cschool.cc 200 OK w3cschool.cc 
由 GET home.css 1 f w3cschool.cc 
由 GET common.js [ t Modifiec w3cschool.cc 
由 GET jquery.min.js 304 fie w3cschool.cc 
由 GET stat.php?id=55780068 t Modified sii.cnzz.com 
由 GET icon book.gif 3 fie w3cschool.cc 
由 GET icon cut.gif f w3cschool.cc 
由 GET icon  doc.gif 304 Not Modified w3cschool.cc 
由 GET w3c.jpg 304 f w3cschool.cc 


6.9 KB 
OB 
0B 
OB 
OB 
0B 
OB 
OB 
OB 


42.120.45.233:80 |J 53ms 
42.120.45.233:80 
42.120.45.233:80 
42.120.45.233:80 
42.156.140. 11:80 
42.120.45.233:80 
42.120.45.233:80 
42.120.45.233:80 
42.120.45.233:80 
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W3School Bootstrap 教程 


来 源 : Bootstrap 教程 
整理 : 飞龙 


Bootstrap 简介 


Bootstrap 简介 


什么 是 Bootstrap ? 


Bootstrap 是 一 个 用 于 快速 开发 Web 应 用 程序 和 网 站 的 前 端 框架 。Bootstrap 是 基 
于 HTML、CSS、JAVASCRIPT 的 。 


历史 


Bootstrap 是 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发 的 。Bootstrap 是 
2011 年 八 月 在 GitHub 上 发 布 的 开源 产品 。 


为 什么 使 用 Bootstrap ? 


e 移动 设备 优先 : E Bootstrap 3 起 ， 框 架 包 含 了 贯穿 于 整个 库 的 移动 设备 优先 
的 样式 。 
e 浏览 器 支持 : 所 有 的 主流 浏览 器 都 支持 Bootstrap. 


ceoce 


e 容易 上 手 : 只 要 您 具备 HTML 和 CSS 的 基础 知识 ， 您 就 可 以 开始 学 习 
Bootstrap。 


e 响应 式 设计 : Bootstrap 的 响应 式 CSS 能 够 自 适 应 于 台式 机 、 平 板 电 脑 和 手 
机 。 更 多 有 关 响 应 式 设 计 的 内 容 详 见 Bootstrap 响应 式 设 计 。 





e 它 为 开发 人 员 创建 接口 提供 了 一 个 简洁 统一 的 解决 方案 。 


e 它 包含 了 功能 强大 的 内 置 组 件 ， 易 于 定制 。 
它 还 提供 了 基于 Web 的 定制 。 
e. 它 是 开源 的 。 


Bootstrap 包 的 内 容 


e 基本 结构 : Bootstrap 提供 了 一 个 带 有 网 格 系统 、 链 接 样 式 、 背 景 的 基本 结 
构 。 这 将 在 Bootstrap 基本 结构 部 分 详细 讲解 。 

e CSS : Bootstrap 自 带 以 下 特性 : 全 局 的 CSS 设置 、 定 义 基 本 的 HTML 元 素 
样式 、 可 扩展 的 class， 以 及 一 个 先进 的 网 格 系统 。 这 将 在 Bootstrap CSS 部 
分 详细 讲解 。 

e 组 件 : Bootstrap 包含 了 十 几 个 可 重用 的 组 件 ， 用 于 创建 图 像 、 下 拉 菜 单 、 导 

mo ZSE RHES., FE 布局 组 件 部 分 详细 讲解 。 

JavaScript 插件 : Bootstrap 包含 了 十 几 个 自 定义 的 jQuery 插件 。 您 可 以 直接 

包含 所 有 的 插件 ， 也 可 以 逐个 包含 这 些 插件 。 这 将 在 Bootstrap 插件 部 分 详 

细 讲 解 。 

定制 : 您 可 以 定制 Bootstrap 的 组 件 、LESS 变量 和 jQuery 插件 来 得 到 您 自己 

的 版 本 。 


在 线 实 例 
本 站 的 Bootstrap 教程 包含 了 上 百 个 实例 。 
你 可 以 使 用 我 们 的 在 线 编辑 器 在 线 编辑 代码 ， 并 点 击 运 行 按钮 查看 结果 。 


Bootstrap 实例 


«div class="container"> 
<p>Create a responsive table with alternating cell background co: 


«div class="table-responsive"> 
«table class-"table table-striped table-bordered"» 
«thead» 
«tr» 
<th>#</th> 
<th>Name</th> 
<th>Street</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>1</td> 
<td>Anna Awesome</td> 
<td>Broome Street</td> 
</tr> 
<tr> 
<td>2</td> 
<td>Debbie Dallas</td> 
<td>Houston Street</td> 
</tr> 
<tr> 
<td>3</td> 
<td>John Doe</td> 
<td>Madison Street</td> 
</tr> 
</tbody> 
</table> 
</div> 


</div> 
| um s 
点 击 "尝试 一 下 " 按钮 查看 它 是 如 何 工 作 的 。 
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Bootstrap 环境 安装 


Bootstrap 安装 是 非常 容易 的 。 本 章 将 讲解 如 何 下 载 并 安装 Bootstrap， 讨 论 
Bootstrap 文件 结构 ， 并 通过 一 个 实例 演示 它 的 用 法 。 


下 载 Bootstrap 


您 可 以 从 http://getbootstrap.com/ 上 下 载 Bootstrap 的 最 新 版 本 。 当 您 点 击 这 个 链 
接 时 ， 您 将 看 到 如 下 所 示 的 网 页 : 


Bootstrap 


Sleek, intuitive, and powertul mobile first front-end framework 


for faster and easier web development 


ootstrap Download source 





您 会 看 到 两 个 按钮 : 


e Download Bootstrap : 下 载 Bootstrap。 点 击 该 按钮 ， 您 可 以 下 载 Bootstrap 
CSS, JavaScript 和 字体 的 预 编译 的 压缩 版 本 。 不 包含 文档 和 最 初 的 源 代码 文 
件 。 

Download Source : 下 载 源 代 码 。 点 击 该 按钮 ， 您 可 以 直接 从 from 上 得 到 最 
新 的 Bootstrap LESS 和 JavaScript 源 代码 。 


如 果 您 使 用 的 是 未 编译 的 源 代码 ， 您 需要 编译 LESS 文件 来 生成 可 重用 的 CSS x 
件 。 对 于 编译 LESS 文件 ，Bootstrap 官方 只 支持 Recess， 这 是 Twitter 的 基于 
less.js 的 CSS 提示 。 


为 了 更 好 的 了 解 和 更 方便 的 使 用 ， 我 们 将 在 本 教程 中 使 用 Bootstrap 的 预 编译 版 


o 


ee 在 独立 的 功能 开发 中 ， 您 不 必 每 次 都 包含 这 些 独 
立 的 文件 。 


本 教程 编写 时 ， 使 用 的 是 最 新 版 (Bootstrap 3) 。 


文件 结构 
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预 编译 的 Bootstrap 
当 您 下 载 了 Bootstrap 的 已 编译 的 版 本 ， 解 压缩 ZIP 文件 ， 您 将 看 到 下 面 的 文件 / 目 
录 结 构 : 


bootstrap/ 


"in.css 
theme 
theme ,mtn ,cs 


p 
b 
be t 
I— bootst 
b t 
b eJ 
b 


ootst 





g p ( T2 J 
glyphicons-h J 
-一 glyphicons-halflings-regula: 
` glyphicons-h ] 


如 上 图 所 示 ， 可 以 看 到 已 编译 的 CSS 和 JS (bootstrap.) ， 以 及 已 编译 压缩 的 
CSS 和 JS (bootstrap.min.) 。 同 时 也 包含 了 Glyphicons 的 字体 ， 这 是 一 个 可 选 
的 Bootstrap 主题 。 

Bootstrap 源 代 码 


如 果 您 下 载 了 Bootstrap 源 代 码 ， 那 么 文件 结构 将 如 下 所 示 : 


= js/ 
— fonts/ 


docs-assets/ 
-一 examples/ 


-一 * html 
e less/. js/ 和 fonts/ 下 的 文件 分 别 是 Bootstrap CSS, JS 和 图 标 字 体 的 源 代 
码 。 


e dist/ 文件 夹 包含 了 上 面 预 编译 下 载 部 分 中 所 列 的 文件 和 文件 夹 。 
e docs-assets/、examples/ 和 所 有 的 *.html 文件 是 Bootstrap 文档 。 


HTML 模板 


一 个 使 用 了 Bootstrap 的 基本 的 HTML 模板 如 下 所 示 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 模板 </title> 
«meta name="viewport" content="width=device-width, initial-s‘ 
<!-- 引入 Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 


<!-- HTML5 Shim 和 Respond.js 用 于 让 IES 支持 HTML5 元 素 和 媒体 查询 
<!-- 注意 : 如 果 通 过 file:// 引入 Respond.js 文件 ， 则 该 文件 无 法 起 交 
<!--[if lt IE 9]> 
«script srcz"https://oss.maxcdn.com/libs/html5shiv/3.7.0/t 
«script src="https://oss.maxcdn.com/libs/respond.js/1.3.0, 
<![endif]--> 
</head> 
<body> 
<hi>Hello, world!</h1> 


<!-- jQuery (Bootstrap BY JavaScript 插件 需要 引入 jQuery) --> 
<script src="https://code. jquery.com/jquery.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html> 


ja] = s 





在 这 里 ， 您 可 以 看 到 包含 了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 
文件 ， 用 于 让 一 个 常规 的 HTML 文件 变 为 使 用 了 Bootstrap 的 模板 。 


有 关上 面 代 码 段 中 每 个 元 素 的 细节 将 在 Bootstrap CSS 概览 章节 详细 讲解 。 


实例 


现在 让 我 们 尝试 使 用 使 用 Bootstrap 输 出 "Hello, world!" : 


<!DOCTYPE html» 
«html» 
«head» 
<title> 在 线 尝 试 Bootstrap 实例 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<hi>Hello, world!</h1> 


</body> 
</html> 


II 


Bootstrap CDN 推 荐 


本 站 实例 采用 的 是 百度 的 静态 资源 库 (http://cdn.code.baidu.com/) 上 的 Bootstrap 资 
源 。 


百度 的 静态 资源 库 的 CDN 服务 ， 访 问 速度 更 快 、 加 速效 果 更 明显 、 没 有 速度 和 
宽 限制 、 永 久 人 免费 ,引入 代码 如 下 : 


3 


<!-- 新 Bootstrap 核心 CSS 文件 --> 
«link hrefz"http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstr: 


<!-- 可 选 的 gootstrap 主 题 文件 (一 般 不 使 用 ) --> 
«script src="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootst! 


<!-- jQuery 文件 。 务 必 在 bootstrap .min.js 之 前 引入 --> 
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js' 


«!-- 最 新 的 Bootstrap 核心 JavaScript 文件 --> 
«script srcz"http://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstr: 


[EE 器 





Bootstrap CSS 


Bootstrap CSS 概览 


在 这 一 章 中 ， 我 们 将 讲解 Bootstrap 底层 结构 的 关键 部 分 ， 包 括 我 们 让 web 开发 变 
得 更 好 、 更 快 、 更 强壮 的 最 佳 实践 。 


HTML 5 文档 类 型 (Doctype) 


Bootstrap 使 用 了 一 些 HTML5 元 素 和 CSS 属性 。 为 了 让 这 些 正常 工作 ， 您 需要 使 
用 HTML5 文档 类 型 (Doctype) 。 因此 ， 请 在 使 用 Bootstrap 项 目的 开头 包含 下 
面 的 代码 段 。 


<!DOCTYPE html» 
<html> 
nimis 
如 果 在 Bootstrap 创建 的 网 页 开头 不 使 用 HTML5 的 文档 类 型 (Doctype) ， 您 可 能 


会 面临 一 些 浏览 器 显示 不 一 致 的 问题 ， 其 至 可 能 面临 一 些 特定 情境 下 的 不 一 致 ， 以 
致 于 您 的 代码 不 能 通过 W3C 标准 的 验证 。 


移动 设备 优先 
移动 设备 优先 是 Bootstrap 3 的 最 显著 的 变化 。 


在 之 前 的 Bootstrap 版 本 中 (直到 2.x) ， 您 需要 手动 引用 另 一 个 CSS， 才 能 让 整 
个 项 目 友 好 的 支持 移动 设备 。 


现在 不 一 样 了 ，Bootstrap 3 默认 的 CSS 本 身 就 对 移动 设备 友好 支持 。 


Bootstrap 3 的 设计 目标 是 移动 设备 优先 ， 然 后 才 是 桌面 设备 。 这 实际 上 是 一 个 非常 
及 时 的 转变 ， 因 为 现在 越 来 越 多 的 用 户 使 用 移动 设备 。 

为 了 让 Bootstrap 开发 的 网 站 对 移动 设备 友好 ， 确 保 适 当 的 绘制 和 触 屏 缩放 ， 需 要 
在 网 页 的 head 之 中 添加 viewport meta 标签 ， 如 下 所 示 : 


«meta name="viewport" content="width=device-width, initial-scale=1 
El = ue 
width 属性 控制 设备 的 宽度 。 假 设 您 的 网 站 将 被 带 有 不 同 屏幕 分 辩 率 的 设备 浏览 ， 
那么 将 它 设置 为 device-width 可 以 确保 它 能 正确 呈现 在 不 同 设备 上 。 
initial-scale=1.0 确保 网 页 加 载 时 ， 以 1:1 的 比例 呈现 ， 不 会 有 任何 的 缩放 。 





在 移动 设备 浏览 器 上 ， 通 过 为 viewport meta 标签 添加 user-scalable=no 可 以 禁 
用 其 缩放 Gooming) 功能 。 


通常 情况 下 ，maximum-scale=1.0 a user-scalable=no 一 起 使 用 。 这 样 禁 用 缩放 
功能 后 ， 用 户 只 能 滚动 屏幕 ， 就 能 让 您 的 网 站 看 上 去 更 像 原 生 应 用 的 感觉 。 


注意 ， 这 种 方式 我 们 并 不 推荐 所 有 网 站 使 用 ， 还 是 要 看 您 自己 的 情况 而 定 ! 


<meta name="viewport" content="width=device-width, 
initial-scale=1.0, 
maximum-scale=1.0, 
user -scalable=no"> 


响应 陈 图 像 


<img src="..." class="img-responsive" alt=" 响 应 式 图 像 "> 


通过 添加 img-responsive class 可 以 让 Bootstrap 3 中 的 图 像 对 响应 式 布 局 的 支持 
更 友好 。 


接 下 来 让 我 们 看 下 这 个 class 包含 了 哪些 css 属性 。 
在 下 面 的 代码 中 ， 可 以 看 到 img-responsive class 为 图 像 赋予 了 max-width: 100%; 
和 height: auto; 属性 ， 可 以 让 图 像 按 比 例 缩放 ， 不 超过 其 父 元 素 的 尺寸 。 


.img-responsive { 
display: inline-block; 
height: auto; 
max-width: 100%; 

} 


这 表明 相关 的 图 像 呈 现 为 inline-block。 当 您 把 元 素 的 display 属性 设置 为 inline- 
block， 元 素 相 对 于 它 周 围 的 内 容 以 内 联 形式 呈现 ， 但 与 内 联 不 同 的 是 ， 这 种 情况 下 
我 们 可 以 设置 宽度 和 高 度 。 


设置 height:auto， 相 关 元 素 的 高 度 取 决 于 浏览 器 


设置 max-width 4 100% 会 重 写 任 何 通 过 width 属性 指定 的 宽度 。 这 让 图 片 对 响应 
式 布局 的 支持 更 友好 。 


全 局 显示 、 排 版 和 链接 
基本 的 全 局 显示 


Bootstrap 3 使 用 body (margin: 0;} 来 移 除 body 的 边 距 。 
请 看 下 面 有 关 body 的 设置 


body { 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 14px; 
line-height: 1.428571429; 
color: #333333; 
background-color: #ffffff; 


第 一 条 规则 设置 body 的 默认 字体 样式 为 "Helvetica Neue", Helvetica, Arial, sans- 
Serif, 


第 二 条 规则 设置 文本 的 默认 字体 大 小 为 14 像素 。 
第 三 条 规则 设置 默认 的 行 高 度 为 1.428571429。 
第 四 条 规则 设置 默认 的 文本 颜色 为 #333333。 
最 后 一 条 规则 设置 默认 的 背景 颜色 为 白色 。 


排版 


使 用 @font-family-base、 @font-size-base 和 @line-height-base 属性 作为 排版 祥 
式 。 


链接 样式 


通过 属性 @link-color 设置 全 局 链接 的 颜色 。 
对 于 链接 的 默认 样式 ， 如 下 设置 


a:hover, 

a:focus { 
color: #2a6496; 
text-decoration: underline; 


} 


a:focus { 
outline: thin dotted #333; 
outline: 5px auto -webkit-focus-ring-color; 
outline-offset: -2px; 


} 


MA "ABUS ES EREREE, 或 者 点 击 过 的 链接 ， 颜 色 会 被 设置 为 #2a6496。 同 
时 ， 会 呈现 一 条 下 划 线 。 


除 此 之 外 ， 点 击 过 的 链接 ， 会 呈现 一 个 颜色 码 为 4333 的 细 的 虚线 轮廓。 另 一 条 规 
则 是 设置 轮廓 为 5 像素 宽 ， webkit 浏览 器 有 一 个 -webkit-focus-ring- 
color 的 浏览 器 扩展 。 轮 廓 偏 移 设置 为 -2 像素 。 


以 上 所 有 这 些 样式 都 可 以 在 scaffolding.less 中 找到 。 


避免 跨 浏览 器 的 不 一 致 


Bootstrap 使 用 Normalize 来 建立 跨 浏 览 器 的 一 致 性 。 


Normalize.css 是 一 个 很 小 的 CSS 文件 ， 在 HTML 元 素 的 默认 样式 中 提供 了 更 好 
AES A] 4 览 1 器 一 致 性 。 


容器 (Container) 


<div class="container"> 


</div> 


Bootstrap 3 的 container class 用 于 包 襄 页 面 上 的 内 容 。 让 我 们 一 起 来 看 看 
bootstrap.css 文件 中 的 这 个 .container class。 


.container { 
padding-right: 15px; 
padding-left: 15px; 
margin-right: auto; 
margin-left: auto; 


面 的 代码 ， 把 container 的 左右 外 按 距 (margin-right, margin-left) 交 由 浏 
决定 


意 ， 由 于 内 边 距 (padding) 是 固定 宽度 ， 默 认 情 况 下 容器 是 不 可 铸 套 的 。 


ik 
Bt 
eat 


.container:before, 
.container:after ( 
display: table; 
content: “ "> 


} 


这 会 产生 伪 元 素 。 设 置 display 7; table， 会 创建 一 个 匿名 的 table-cell 和 一 个 新 的 
块 格式 化 上 下 文 。:before 伪 元 素 防 止 上 边 距 崩塌 ，:after 伪 元 素 清除 浮动 。 


如 果 conteneditable 属性 出 现在 HTML 中 ， 由 于 一 些 Opera bug， 围 绕 上 述 元 素 创 
建 一 个 空格 。 这 可 以 通过 使 用 content: ”" 来 修复 。 


.container:after ( 
clear: both; 


j 


它 创 建 了 一 个 伪 元 素 ， 并 确保 了 所 有 的 容器 包含 所 有 的 浮动 元 素 。 
Bootstrap 3 CSS 有 一 个 申请 响应 的 媒体 查询 ， 在 不 同 的 媒体 查询 六 值 范围 内 都 为 
container 设置 了 max-width， 用 以 匹配 网 格 系统 。 


@media (min-width: 768px) { 
.container { 
width: 750px; 


Bootstrap 浏览 器 /设备 支持 

Bootstrap 可 以 在 最 新 的 桌面 系统 和 移动 端 浏览 器 中 很 好 的 工作 。 
旧 的 浏览 器 可 能 无 法 很 好 的 支持 。 

FRA Bootstrap 支持 最 新 版 本 的 浏览 器 和 平台 : 


Chrome Firefox IE Opera Safari 
Android YES YES 不 适用 NO 不 适用 
iOS YES 不 适用 不 适用 NO VES 
Mac OS X YES YES 不 适用 YES YES 
Windows YES YES MES MES NO 


e Bootstrap 支持 Internet Explorer 8 及 更 高 版 本 的 IE 浏览 器 。 


Bootstrap 网 格 系统 


本 章节 我 们 将 讲解 Bootstrap 的 网 格 系统 (Grid System) 。 


Bootstrap 提供 了 一 套 响 应 式 、 移 动 设 各 优先 的 流 式 网 格 系统 ， 随 着 屏幕 或 视 口 
(viewport) 尺寸 的 增加 ， 系 统 会 自动 分 为 最 多 12 列 。 


什么 是 网 格 (Grid) ? 


摘自 维基 百科 : 


在 平面 设计 中 ， 网 格 是 一 种 由 一 系列 用 于 组 织 内 容 的 相交 的 直线 (BBN, 
水 平 的 ) 组 成 的 结构 (通常 是 二 维 的 ) 。 它 广泛 应 用 于 打印 设计 中 的 设计 布局 
和 内 容 结构 。 在 网 页 设计 中 ， 它 是 一 种 用 于 快速 创建 一 致 的 布局 和 有 效 地 使 用 
HTML 和 CSS 的 方法 。 


简单 地 说 ， 网 页 设计 中 的 网 格 用 于 组 织 内 容 ， 让 网 站 易于 浏览 ， 并 降低 用 户 端的 负 


o 


什么 是 Bootstrap 网 格 系统 (Grid System) ? 


Bootstrap 官方 文档 中 有 关 网 格 系统 的 描述 : 


Bootstrap 包含 了 一 个 响应 式 的 、 移 动 设备 优先 的 、 不 固定 的 网 格 系统 ， 可 以 
随 着 设备 或 视 口 大 小 的 增加 而 适当 地 扩展 到 12 列 。 它 包含 了 用 于 简单 的 布局 
选项 的 预定 义 类 ， 也 包含 了 用 于 生成 更 多 语义 布局 的 功能 强大 的 混合 类 。 


让 我 们 来 理解 一 下 上 面 的 语句 。Bootstrap 3 是 移动 设备 优先 的 ， 在 这 个 意义 上 ， 
Bootstrap 代码 从 小 屏幕 设备 〈 比 如 移动 设备 、 平 板 电脑 ) 开始 ， 然 后 扩展 到 大 屏 
幕 设 备 (比如 笔记 本 电脑 、 台 式 电 脑 ) 上 的 组 件 和 网 格 。 


移动 设备 优先 策略 


e 内 容 

o 决定 什么 是 最 重要 的 。 
e 布局 

o 优先 设计 更 小 的 宽度 。 

o 基础 的 CSS 是 移动 设备 优先 ， 媒 体 查询 是 针对 于 平板 电脑 、 台 式 电 脑 。 
e 渐进 增强 

o 随 着 屏幕 大 小 的 增加 而 添加 元 素 。 


相应 式 的 网 格 系统 随 着 屏幕 或 视 口 (viewport) 尺寸 的 增加 ， 系 统 会 自动 分 为 最 多 
1251, 


Bootstrap 网 格 系统 (Grid System) 的 工作 原理 


网 格 系统 通过 一 系列 包含 内 容 的 行 和 列 来 创建 页 面 布局 。 下 面 列 出 了 Bootstrap 网 
格 系统 是 如 何 工作 的 : 


行 必须 放置 在 .container class 内 ， 以 便 获 得 适当 的 对 齐 (alignment) P335 
距 (padding) 。 

使 用 行 来 创建 列 的 水 平 组 。 

内 容 应 该 放置 在 列 内 ， 且 唯 有 列 可 以 是 行 的 直接 子 元 素 。 

预定 义 的 网 格 类 ， 比 如 .row 和 .col-xs-4， 可 用 于 快速 创建 网 格 布 局 。LESS 
混合 类 可 用 于 更 多 语义 布局 。 

列 通 过 内 边 距 (padding) 来 创建 列 内 容 之 间 的 间隙。 该 内 边 距 是 通过 .rows 
上 的 外 边 距 (margin) 取 负 ， 表 示 第 一 列 和 最 后 一 列 的 行 偏 移 。 

网 格 系 统 是 通过 指定 您 想 要 横 跨 的 十 二 个 可 用 的 列 来 创建 的 。 例 如 ， 要 创建 三 
个 相等 的 列 ， 则 使 用 三 个 .col-xs-4。 


媒体 查询 
媒体 查询 是 非常 别致 的 "有 条 件 的 CSS 规则 "。 它 只 适用 于 一 些 基于 某 些 规定 条 件 的 
CSS。 如 果 满 足 那些 条 件 ， 则 应 用 相应 的 样式 。 


Bootstrap 中 的 媒体 查询 允许 您 基于 视 口 大 小 移动 、 显 示 并 隐藏 内容。 下 面 的 媒体 
查询 在 LESS 文件 中 使 用 ， 用 来 创建 Bootstrap 网 格 系统 中 的 关键 的 分 界 点 阔 值 。 


/* 超 小 设备 〈 手 机 ， 小 于 768px) */ 
/* Bootstrap 中 默认 情况 下 没有 媒体 查询 */ 


/* 小 型 设备 (平板 电脑 ，768px 起 ) */ 
@media (min-width: @screen-sm-min) { ... } 


/* 中 型 设备 (台式 电脑 ，992px 起 ) */ 
@media (min-width: @screen-md-min) { ... } 


/* 大 型 设备 (大 台式 电脑 ，1200px 起 ) */ 
@media (min-width: @screen-lg-min) { ... } 


我 们 有 时 候 也 会 在 媒体 查询 代码 中 包含 max-width， 从 而 将 CSS 的 影响 限制 在 更 
小 范围 的 屏幕 大 小 之 内 。 


@media (max-width: @screen-xs-max) { ... } 
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) 
@media (min-width: @screen-lg-min) { ... } 
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媒体 查询 有 两 个 部 分 ， 先 是 一 个 设备 规范 ， 然 后 是 一 个 大 小 规则 。 在 上 面 的 案例 
中 ， 设 置 了 下 列 的 规则 : 


让 我 们 来 看 下 面 这 行 代 码 : 





@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) 
1 un 


xt FPR #4 min-width: @screen-sm-min 的 设备 ， 如 果 屏 幕 的 宽度 小 于 
@screen-sm-max， 则 会 进行 一 些 处 理 。 





网 格 选项 


下 表 总 结 了 Bootstrap 网 格 系统 如 何 跨 多 个 设备 工作 : 


超 小 设备 收集 
(<768px) 
3 —ERJCEUS 
最 大 
容器 None (auto) 
宽度 
Class dokis: 
BUR o 
列 # 12 
最 大 
Bil Auto 
ms | 30px- C421 
TR Bun 
a 15px) 
BIER 
= Yes 
fth Yes 
量 
列 排 
序 Yes 
基本 的 网 格 结构 


小 型 设备 平板 
电脑 
(2768px) 


以 折 和 开始 ， 
断 点 以 上 是 水 
平 的 


750px 


.col-sm- 

12 

60px 

30px (—7 9 
的 每 边 分 别 
15px) 


Yes 
Yes 


Yes 


下 面 是 Bootstrap 网 格 的 基本 结构 : 


«div class="container"> 


«div class="row"> 
«div class="col-*-*"></div> 
«div class="col-*-*"></div> 


«/div» 
«div class="row">. ..</div> 


</div> 


<div class="container">.... 


让 我 们 来 看 几 个 简单 的 网 格 实例 : 
e 实例 : HA BIKE 


e 实例 : 中 型 和 大 型 设备 


中 型 设备 台式 
电脑 
(2992px) 


以 折 各 开始 ， 
断 点 以 上 是 水 
平 的 


970px 


.col-md- 

12 

78px 

30px (— 7l 
的 每 边 分 别 
15px) 


Yes 
Yes 


Yes 


大 型 设备 台式 
电脑 
(21200px) 


以 折 各 开始 ， 
断 点 以 上 是 水 
平 的 


1170px 


.col-lg- 

12 

95px 

30px (一 个 列 
的 每 边 分 别 
15px) 


Yes 
Yes 


Yes 


e 实例 : 手机 、 平 板 电 脑 、 台 式 电 脑 


响应 陈 的 列 重 置 


以 下 实例 包含 了 4 个 网 格 ， 但 是 我 们 在 小 设备 浏览 时 无 法 确定 网 格 显示 的 位 置 。 


为 了 解决 这 个 问题 ， 使 用 可 以 使 用 .clearfix class 和 响应 式 实用 工具 来 解决 ， 如 下 
面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 响应 式 的 列 重 置 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="container"> 
<div class="row" > 
<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #: 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
</div> 
<div class="col-xs-6 col-sm-3" 
style-"background-color: #dedef8;box-shadow: 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
eiusmod tempor incididunt ut labore et dolore magna al: 
enim ad minim veniam, quis nostrud exercitation ullamc: 
nisi ut aliquip ex ea commodo consequat. 
</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
eiusmod tempor incididunt ut. 
</p> 
</div> 


<div class="clearfix visible-xs"></div> 


<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #4: 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullé 
laboris nisi ut aliquip ex ea commodo consequat. 
</p> 
</div> 
<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8;box-shadow: 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 


<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
eiusmod tempor incididunt ut labore et dolore magna al: 
enim ad minim 
</p> 
</div> 
</div> 
</div> 


</body> 
</html> 
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浏览 器 上 调整 窗口 大 小 查看 变化 ， 或 在 您 手机 上 查看 效果 。 


偏 移 列 


偏 移 是 一 个 用 于 更 专业 的 布局 的 有 用 功能 。 它 们 可 用 来 给 列 腾 出 更 多 的 空间 。 例 
如 ，.col-xs=* 类 不 支持 偏 移 ， 但 是 它们 可 以 简单 地 通过 使 用 一 个 空 的 单元 格 来 实 
现 该 效果 。 


为 了 在 大 屏幕 显示 器 上 使 用 偏 移 ， 请 使 用 .col-md-offset-* 类 。 这 些 类 会 把 一 个 列 
的 左 外 边 距 (margin) 增加 * 列 ， 其 中 * 范 围 是 从 1 到 11。 


在 下 面 的 实例 中 ， 我 们 有 «div class="col-md-6">..</div>， 我 们 将 使 用 .col-md- 
offset-3 class 来 居中 这 个 div。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 偏 移 列 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="container"> 
<hi>Hello, world!</h1> 


<div class="row" > 

<div class="col-xs-6 col-md-offset-3" 
style-"background-color: #dedef8;box-shadow: 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 

elit. 

</p> 

</div> 


</div> 
</div> 


</body> 
</html> 


i | 
结果 如 下 所 示 : 


Hello, world! 


Lorem ipsum dolor sf amet. consectetur adipisicing ef 


PE Fl 


为 了 在 内 容 中 府 套 默认 的 网 格 ， 请 添加 一 个 新 的 .row， 并 在 一 个 已 有 的 .col-md-* 
列 内 添加 一 组 .col-md-* 列 。 被 藤 套 的 行 应 包含 一 组 列 ， 这 组 列 个 数 不 能 超过 
12 (其 实 ， 没 有 要 求 你 必须 占 满 12 列 ) 。 


在 下 面 的 实例 中 ， 布 局 有 两 个 列 ， 第 二 列 被 分 为 两 行 四 个 盒子 。 


<!DOCTYPE html» 

<html> 

<head> 
<title>Bootstrap 实例 - Bu&ESI«/title» 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 


<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="container"> 
<hi>Hello, world!</h1> 
«div class="row"> 


«div class="col-md-3" style="background-color: #dedef8;box-st 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
<h4> 第 一 列 </h4> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 

</div> 


<div class="col-md-9" style="background-color: #dedef8;box-st 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
<h4> 第 二 列 - 分 为 四 个 盒子 </h4> 
<div class="row"> 
«div class="col-md-6" style="background-color: #B18904, 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
<p>Consectetur art party Tonx culpa semiotics. Pinte 
assumenda minim organic quis. 
</p> 
</div> 
<div class="col-md-6" style="background-color: #B18904, 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
<p> sed do eiusmod tempor incididunt ut labore et dı 
aliqua. Ut enim ad minim veniam, quis nostrud exe 
ullamco laboris nisi ut aliquip ex ea commodo cor 
</p> 
</div> 
</div> 


<div class="row"> 
<div class="col-md-6" style="background-color: #B18904, 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
<p>quis nostrud exercitation ullamco laboris nisi ul 
aliquip ex ea commodo consequat. 
</p> 
</div> 
<div class="col-md-6" style="background-color: #B18904, 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
<p>Lorem ipsum dolor sit amet, consectetur adipisic: 
sed do eiusmod tempor incididunt ut labore et do- 
aliqua. Ut enim ad minim.</p> 
</div> 
</div> 


</div> 


</div> 
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</div> 


</body> 
</html> 





图 
结果 如 下 所 示 : 


Hello, world! 
第 一 列 第 二 列 - 分 为 四 个 盒子 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 





列 排序 


Bootstrap 网 格 系统 另 一 个 完美 的 特性 ， 就 是 您 可 以 很 容易 地 以 一 种 顺序 编写 列 ， 
然后 以 另 一 种 顺序 显示 列 。 


您 可 以 很 轻易 地 改变 带 有 .col-md-push-* 和 .col-md-pull-* 类 的 内 置 网 格 列 的 顺 
序 ， 其 中 * 范围 是 从 1 到 11。 


在 下 面 的 实例 中 ， 我 们 有 两 列 布局 ， 左 列 很 窒 ， 作 为 侧 边栏 。 我 们 将 使 用 .col-md- 
push-* 和 .col-md-pull-* 类 来 互 换 这 两 列 的 顺序 。 


Bootstrap 网 格 系统 1452 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 列 排序 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="container"> 
<hi>Hello, world!</h1> 


<div class="row"> 
<p> 排 序 前 </p> 
<div class="col-md-4" style="background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px £ 
我 在 左边 
</div> 
<div class="col-md-8" style="background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #: 
我 在 右边 
</div> 
</div><br> 
<div class="row"> 
<p> 排 序 后 </p> 
<div class="col-md-4 col-md-push-8" 
style="background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, 
inset -1px 1px 1px #444;"> 
我 在 左边 
</div> 
«div class="col-md-8 col-md-pull-4" 
style-"background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, 
inset -1px 1px 1px #444;"> 
我 在 右边 
</div> 
</div> 


</div> 


</body> 
</html> 


E : 
结果 如 下 所 示 : 
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Hello, world! 
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Bootstrap 排版 


Bootstrap 使 用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为 其 默认 的 字 
体 栈 。 


使 用 Bootstrap 的 排版 特性 ， 您 可 以 创建 标题 、 段 落 、 列 表 及 其 他 内 联 元 素 。 


标题 
Bootstrap 中 定义 了 所 有 的 HTML 标题 (h1 到 h6) 的 样式 。 请 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 标题 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h1> 我 是 标题 1 h1</h1> 
<h2> 我 是 标题 2 h2</h2> 
<h3> 我 是 标题 3 h3</h3> 
<h4> 我 是 标题 4 h4</h4> 
<h5> 我 是 标题 5 h5</h5> 
<h6> 我 是 标题 6 h6</h6> 


</body> 
</html> 


二 ë ëO 
结果 如 下 所 示 : 

我 是 标题 1 h1 

我 是 标题 2 h2 

我 是 标题 3 h3 

我 是 标题 4 h4 


我 是 标题 3 h5 
我 是 标题 6 h6 


内 联 子 标题 


如 果 需 要 向 任何 标题 添加 一 个 内 联 子 标题 ， 只 需要 简单 地 在 元 素 两 旁 添加 
<small>， 或 者 添加 .small class， 这 样子 您 就 能 得 到 一 个 字号 更 小 的 颜色 更 浅 的 文 
本 ， 如 下 面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 内 联 子 标题 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h1> 我 是 标题 1 hi\，<small> 我 是 副标题 1 h1</small></hi> 
<h2> 我 是 标题 2 h2\，<small> 我 是 副标题 2 h2</small></h2> 
<h3> 我 是 标题 3 h3N. <small> 我 是 副标题 3 h3</small></h3> 
<h4> 我 是 标题 4 h4\， <small> 我 是 副标题 4 h4</small></h4> 
<h5> 我 是 标题 5 h5N. <small> 我 是 副标题 5 h5</small></h5> 
<h6> 我 是 标题 6 h6N. <small> 我 是 副标题 6 h6</small></h6> 


</body> 
</html> 


e ——————————————————G3À8&] 
结果 如 下 所 示 : 


我 是 标题 2 h2. 


我 是 标题 3 h3. 
我 是 标题 4 h4. 
我 是 标题 5 h5. 

我 是 标题 6 h6. ss 


引导 主体 副本 


为 了 给 段落 添加 强调 文本 ， 则 可 以 添加 class="lead"， 这 将 得 到 更 大 更 粗 、 行 高 更 
高 的 文本 ， 如 下 面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 引导 主体 副本 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
<hr> 
<h2> 引 导 主 体 副本 </h2> 
<p class="lead"> 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 | 


</body> 
</html> 


ei __ J8 
结果 如 下 所 示 : 


引导 主体 副本 

这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 
引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 
用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 

这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 
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HTML 的 默认 强调 标签 «small» (设置 文本 为 父 文本 大 小 的 85%) . <strong> Gk 
冒 文本 为 更 粗 的 文本 ) 、<em> (设置 文本 为 斜体 ) 。 


Bootstrap 提供 了 一 些 用 于 强调 文本 的 类 ， 如 下 面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 强调 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<small> 本 行内 容 是 在 标签 内 </small><br> 

<strong> 本 行内 容 是 在 标签 内 </strong><br> 

<em> 本 行内 容 是 在 标签 内 ， 并 呈现 为 斜体 </em><br> 

«p class="text-left"> 向 左 对 齐 文本 </p> 

<p class="text-center"> 居 中 对 齐 文本 </p> 

<p class="text-right"> 向 右 对 齐 文本 </p> 

<p class="text-muted"> 本 行内 容 是 减弱 的 </p> 

<p class="text-primary"> 本 行内 容 带 有 一 个 warning class</p> 
<p class="text-success"> 本 行内 容 带 有 一 个 success class</p> 
<p class="text-info"> 本 行内 容 带 有 一 个 info class</p> 

<p class="text-warning"> 本 行内 容 带 有 一 个 warning class</p> 
<p class="text-danger"> 本 行内 容 带 有 一 个 danger class</p> 


</body> 
</html> 


Rb 车 "| 
结果 如 下 所 示 : 
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HTML <abbr> 元 素 提 供 了 用 于 缩写 的 标记 ， 比 如 WWW 或 HTTP. Bootstrap 定义 
«abbr» 元 素 的 样式 为 显示 在 文本 底部 的 一 条 虚线 边框 ， 当 鼠标 悬 停 在 上 面 时 会 显 

示 完 整 的 文本 (只 要 您 为 «abbr» title 属性 添加 了 文本 ) 。 为 了 得 到 一 个 更 小 字体 

的 文本 ， 请 添加 .initialism 到 «abbr», «/abbr» 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 缩写 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«abbr title="World Wide Web">Www</abbr><br> 
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr: 


</body> 
</html> 


RR 
结果 如 下 所 示 : 


WWW 
RSS 


地 址 (Address) 


使 用 «address» 标签 ， 您 可 以 在 网 页 上 显示 联系 信息 。 由 于 «address? 默认 为 
display:block;， 您 需要 使 用 标签 来 为 封闭 的 地 址 文本 添加 换行 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 地 址 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<address> 

<strong>Some Company, Inc.</strong><br> 

007 street<br> 

Some City, State XXXXX«br» 

«abbr title="Phone">P:</abbr> (123) 456-7890 
</address> 


<address> 

<strong>Full Name</strong><br> 

<a href="mailto:#">mailto@somedomain.com</a> 
</address> 


</body> 
</html> 


i Ra 
结果 如 下 所 示 : 


Some Company, Inc. 
007 street 

Some City, State XXXXX 
P: (123) 456-7890 


Full Name 


maillo@somedomai 


引用 (Blockquote) 


您 可 以 在 任意 的 HTML 文本 旁 使 用 默认 的 <blockquote>。 其 他 选项 包括 ， 添 加 一 
个 «small» 标签 来 标识 引用 的 来 源 ， 使 用 class .pull-right 向 右 对 齐 引 用 。 下 面 的 实 
例 演示 了 这 些 特 性 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 引用 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<blockquote><p> 
这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 


<blockquote> 这 是 一 个 带 有 源 标题 的 引用 。<small>Someone famous in <cite ti 
«blockquote class="pull-right"> 这 是 一 个 向 右 对 齐 的 引用 。<small>Someone 1 


</body> 
</html> 


aj | CE 
结果 如 下 所 示 : 





这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 
这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 
这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 


这 是 一 个 带 有 源 标 题 的 引用 .。 


这 是 一 个 向 右 对 齐 的 引用 |。 


列表 


Bootstrap 支持 有 序列 表 、 无 序列 表 和 定义 列表。 


e 有 序列 表 : 有 序列 表 是 指 以 数字 或 其 他 有 序 字 符 开头 的 列表 。 

e 无 序列 表 : 无 序列 表 是 指 没 有 特定 顺序 的 列表 ， 是 以 传统 风格 的 着 重 号 开头 的 
列表 。 如 果 您 不 想 显示 这 些 着 重 号 ， 您 可 以 使 用 class .list-unstyled 来 移 除 祥 
式 。 您 也 可 以 通过 使 用 class .list-inline 把 所 有 的 列表 项 放 在 同一 行 中 。 

e 定义 列表 : 在 这 种 类 型 的 列表 中 ， 每 个 列表 项 可 以 包含 <dt> 和 <dd> 元 素 。 
<dt> 代表 定义 术语 ， 就 像 字 典 ， 这 是 被 定义 的 属于 (或 短语 ) 。 接 着 ，<dd> 
是 <dt> 的 描述 。 您 可 以 使 用 class dl-horizontal 把 «dl» 行 中 的 属于 与 描述 并 
排 显 示 。 


下 面 的 实例 演示 了 这 些 类 型 的 列表 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 列表 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h4> 有 序列 表 </h4> 

<ol> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ol» 

<h4> 无 序列 表 </h4> 

<ul> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ul» 

<h4> 未 定义 样式 列表 </h4> 

<ul class="list-unstyled"> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ul» 

<h4> 内 联 列 表 </h4> 

<ul class="list-inline"> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ul» 

<h4> 定 义 列表 </h4> 

<dl> 
<dt>Description 1</dt> 
<dd>Item 1</dd> 
<dt>Description 2</dt> 
<dd>Item 2</dd> 

«/dl» 

<h4> 水 平 的 定义 列表 </h4> 

«dl class-"dl-horizontal"» 
<dt>Description 1</dt> 
<dd>Item 1</dd> 
<dt>Description 2</dt> 
<dd>Item 2</dd> 

«/dl» 
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</body> 
</html> 


TU Hl 


结果 如 下 所 示 : 
有 序列 表 


1. Item 1 
2. Item 2 
3. Item 3 
4. Item 4 


无 序列 表 


e Item 1 
e Item 2 
e Item 3 
e Item 4 


未 定义 样式 列表 
Item 1 
Item 2 
Item 3 
Item 4 


内 联 列表 

Item1 Item2 Item3 Item4 
定义 列表 

Description 1 

Item 1 


Description 2 
Item 2 


水 平 的 定义 列表 


Description 1 Item1 
Description 2 Item 2 


更 多 排版 类 


下 表 提 供 了 Bootstrap 更 多 排版 类 的 实例 : 


HK 
ay 


lead 使 段落 突出 显示 
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SUB 
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.text-left 


.text-center 


text-right 


.text-justify 


.text- 
nowrap 


.text- 
lowercase 


.text- 
uppercase 


.text- 
capitalize 


.Initialism 


.blockquote- 
reverse 


设 定 文本 左 对 齐 


设 定 文本 居中 对 齐 


设 定 文本 右 对 齐 


设 定 文本 对 齐 , 段 落 中 超出 屏幕 部 分 文字 自动 换行 


段落 中 超出 屏幕 部 分 不 换行 


设 定 文本 小 写 


设 定单 词 首 字母 大 写 


显示 在 <abbr> 元 素 中 的 文本 以 小 号 字体 展示 


设 定 引 用 右 对 齐 
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.list- 
unstyled 


.list-inline 


.dl- 
horizontal 


.pre- 
scrollable 


移 除 默认 的 列表 样式 ， 列 表 项 中 左 对 齐 ( <ul> 和 <ol> 
中 )。 这 个 类 仅 适 用 于 直接 子 列表 项 (如 果 需 要 移 除 艇 套 的 
列表 项 ， 你 需要 在 散 套 的 列表 中 使 用 该 样式 ) 


将 所 有 列表 项 放置 同一 行 


该 类 设置 了 浮动 和 偏 移 ， 应 用 于 <d> 元 素 和 «dt» 元 素 


使 <pre> 元 素 可 滚动 scrollable 
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Bootstrap 代码 


Bootstrap 人 允许 您 以 两 种 方式 显示 代码 : 


e 第 一 种 是 <code> 标签 。 如 果 您 想 要 内 联 显 示人 代码， 那么 您 应 该 使 用 <code> 
e 第 二 种 是 <pre> 标签 。 如 果 代 码 需 要 被 显示 为 一 个 独立 的 块 元 素 或 者 代码 有 多 
行 ， 那 么 您 应 该 使 用 <pre> 标签 。 


请 确保 当 您 使 用 <pre> 和 «code» 标签 时 ， 开 始 和 结束 标签 使 用 了 unicode 变 体 : 
< 和 >。 


让 我 们 来 看 看 下 面 的 实例 : 
实例 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 代码 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«p»«code»&lt;header&gt;«/code» 作为 内 联 元 素 被 包围 。</p> 
<p> 如 果 需 要 把 代码 显示 为 一 个 独立 的 块 元 素 ， 请 使 用 «pre» 标签 : </p> 
<pre> 

&lt;article&gt; 

&lt;hi1&gt;Article Heading&lt;/h1&gt; 

&lt;/article&gt; 
</pre> 
</body> 
</html> 


加 
实例 展示 如 下 图 : 


«header» 作为 内 联 元 素 被 包围 。 
如 果 需 要 把 代码 显示 为 一 个 独立 的 块 元 素 ， 请 使 用 «pre» 标签 : 
<article> 


<h1>Article Heading</h1> 
</article> 


Bootstrap 表格 


Bootstrap 提供 了 一 个 清晰 的 创建 表格 的 布局 。 下 表 列 出 了 Bootstrap 支持 的 一 些 表 
格 元 素 : 


标签 描 
<table> 容纳 以 表格 形式 显示 数据 的 元 素 。 
<thead> — 表格 标题 行 的 容器 元 素 («tr») ， 用 来 标识 表格 列 。 
«tbody» ”表格 主体 中 的 表格 行 的 容器 元 素 (<tr>) 。 


学 


<tr> 一 组 出 现在 单行 上 的 表格 单元 格 的 容器 元 素 (<td> 或 <th>) 。 
<td> 默认 的 表格 单元 格 。 
ETE 特殊 的 表格 单元 格 ， 用 来 标识 列 或 行 (取决 于 范围 和 位 置 ) 。 必 


须 在 <thead> 内 使 用 。 
<caption> ”关于 表格 存储 内 容 的 描述 或 总 结 。 


基本 的 表格 


如 果 您 想 要 一 个 只 带 有 内 边 距 (padding) 和 水 平分 割 的 基本 表 ， 请 添加 class 
.table， 如 下 面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 基本 的 表格 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<table class="table"> 
<caption> 基 本 的 表格 布局 </caption> 
<thead> 
<tr> 
<th> 名 称 </th> 
<th> 城 市 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
</tr> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


i e 
结果 如 下 所 示 : 


基本 的 表格 布局 
名 称 城市 


Tanmay Bangalore 


Sachin Mumbai 


可 选 的 表格 类 


除了 基本 的 表格 标记 和 .table class， 还 有 一 些 可 以 用 来 为 标记 定义 样式 的 类 。 下 面 
将 向 您 介绍 这 些 类 。 


条 纹 表格 


通过 添加 .table-striped class， 您 将 在 <tbody> 内 的 行 上 看 到 条 纹 ， 如 下 面 的 实例 
所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 条 纹 表格 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<table class="table table-striped"> 
<caption> 条 纹 表格 布局 </caption> 
<thead> 
<tr> 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
</tr> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
</tr> 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


o REI 
结果 如 下 所 示 : 


杀 纹 表格 布局 


BFF 城市 密码 

Tanmay Bangalore 560001 

Sachin Mumbai 400003 

Uma Pune 411027 
边框 表格 


通过 添加 .table-bordered class， 您 将 看 到 每 个 元 素 周围 都 有 边框 ， 且 占 整 个 表格 
是 圆 角 的 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 边框 表格 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<table class="table table-bordered"> 
<caption> 边 框 表格 布局 </caption> 
<thead> 
<tr> 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
</tr> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
</tr> 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


E REI 
结果 如 下 所 示 : 


边框 表格 布局 


AP 城市 密码 

Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 


BPR 


通过 添加 .table-hover class, SHHARPETLNSHRARKEARS, MPFR 
例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - £í4ezxfd&c/title» 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«table class="table table-hover"> 
<caption>& (FR fi la</caption> 
<thead> 

<tr> 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
</tr> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
</tr> 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


E RE" 
结果 如 下 所 示 : 


悬 停 表 格 布局 


BFF 城市 密码 
Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 
Æ x 
精简 表格 


通过 添加 .table-condensed class， 行 内 边 距 (padding) 被 切 为 两 半 ， 以 便 让 表 看 
起 来 更 Bm, 如 下 面 的 实例 所 示 。 3 这 在 想 让 信 息 看 起 来 更 紧凑 时 非常 有 用 。 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 精简 表格 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<table class="table table-condensed"> 
<caption> 精 简 表 格 布 局 </caption> 
<thead> 
<tr> 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
</tr> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
</tr> 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


E RE 
结果 如 下 所 示 : 


精简 表格 布局 


BFF 城市 密码 

Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 


上 下 文 类 
下 表 中 所 列 出 的 上 下 文 类 人 允许 您 改变 表格 行 或 单个 单元 格 的 背景 颜色 。 


类 描述 
.active 对 某 一 特定 的 行 或 单元 格 应 用 悬 停 颜 色 
.Success 表示 一 个 成 功 的 或 积极 的 动作 
.Warning 表示 一 个 需要 注意 的 警告 
.danger 表示 一 个 危险 的 或 潜在 的 负面 动作 


这 些 类 可 被 应 用 到 <tr>, <td> 或 <th>, 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 上 下 文 类 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<table class="table"> 
<caption> 上 下 文 表格 布局 </caption> 
<thead> 
<tr> 
<th> 产 品 </th> 
<th> 付 款 日 期 </th> 
<th> 状 态 </th> 
</tr> 
</thead> 
<tbody> 
<tr class="active"> 
<td> 产 品 1</td> 
<td>23/11/2013</td> 
<td> 待 发 货 </td> 
</tr> 
<tr class="success"> 
<td> 产 品 2</td> 
<td>10/11/2013</td> 
<td> 发 货 中 </td> 
</tr> 
<tr class="warning"> 
<td> 产 品 3</td> 
<td>20/10/2013</td> 
<td> 待 确认 </td> 
</tr> 
<tr class="danger"> 
<td> 产 品 4</td> 
<td>20/10/2013</td> 
<td> 已 退货 </td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


boo UC -= AA 
结果 如 下 所 示 : 


上 下 文 表格 布局 


产品 付款 日 期 状态 
产品 1 23/11/2013 待 发 货 
产品 2 10/11/2013 发 货 
产品 3 20/10/2013 待 确认 
产品 4 20/10/2013 已 退货 


响应 式 表 格 


通过 把 任意 的 table 包 在 .table-responsive class 内 ， 您 可 以 让 表格 水 平 滚动 以 适 
应 小 型 设备 (小 于 768px) 。 当 在 大 于 768px 宽 的 大 型 设备 上 查看 时 ， 您 将 看 不 到 
任何 的 差别 。 


Ei 


<!DOCTYPE html> 
<html> 
<head> 


<title>Bootstrap 实例 - 响应 式 表格 </title> 


<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 


</head> 
<body> 


<div class="table-responsive"> 
<table class="table"> 
<caption> 响 应 式 表格 布局 </caption> 
<thead> 
<tr> 
<th> 产 品 </th> 
<th> 付 款 日 期 </th> 
<th> 状 态 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 产 品 1</td> 
<td>23/11/2013</td> 
<td> 待 发 货 </td> 
</tr> 
<tr> 
<td> 产 品 2</td> 
<td>10/11/2013</td> 
<td> 发 货 中 </td> 
</tr> 
<tr> 
<td> 产 品 3</td> 
<td>20/10/2013</td> 
<td> 待 确认 </td> 
</tr> 
<tr> 
<td> 产 品 4</td> 
<td>20/10/2013</td> 
<td> 已 退货 </td> 
</tr> 
</tbody> 
</table> 
</div> 


</body> 
</html> 








结果 如 下 所 示 : 


W3School 前 端 教程 合 


Bootstrap 表格 


付款 日 期 
23/11/2013 
10/11/2013 
20/10/2013 


20/10/2013 


响应 式 表 格 布局 


1480 


Bootstrap 表单 


在 本 章 中 ， 我 们 将 学 习 如 何 使 用 Bootstrap 创建 表单 。Bootstrap 通过 一 些 简单 的 
HTML 标记 和 扩展 的 类 即 可 创建 出 不 同样 式 的 表单 。 


表单 布局 


Bootstrap 提供 了 下 列 类 型 的 表单 布局 : 


e 垂直 表单 (Rid) 
e 内 联 表单 
e 水 平 表单 


垂直 或 基本 表单 


基本 的 表单 结构 是 Bootstrap 自 带 的 ， 个 别 的 表单 控件 自动 接收 一 些 全 局 样式 。 下 
面 列 出 了 创建 基本 表单 的 步骤 : 


e 向 父 «form» 元 素 添加 rolez"form", 

e. 把 标签 和 控件 放 在 一 个 带 有 class .form-group 的 «div» 中 。 这 是 获取 最 佳 间 距 
所 必需 的 。 

e 向 所 有 的 文本 元 素 <input>、<textarea> 和 «select» 添加 class .form- 
control, 


<!DOCTYPE html» 

«html» 

«head» 
<title>Bootstrap 实例 - 基本 表单 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 


<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 


<body> 


«form role="form"> 
<div class="form-group"> 
«label for="name">4#h</label> 


<input type="text" class="form-control" id="name" 
placeholder=" 请 输入 名 称 "> 
</div> 


<div class="form-group"> 
«label for="inputfile"> 文 件 输入 </label> 
<input type="file" id="inputfile"> 


<p class="help-block"> 这 里 是 块 级 帮助 文本 的 实例 。</p> 
</div> 


<div class="checkbox"> 
<label> 


«input type="checkbox"> 请 打 勾 
</label> 
</div> 
«button type="submit" class="btn btn-default">#23</button> 
</form> 


</body> 
</html> 


Rb C RI 
结果 如 下 所 示 : 
名 称 


文件 输入 
选择 文件 | 未 选择 文件 
这 里 是 块 级 帮助 文本 的 实例 。 


iBITIS 
提交 


内 联 表 单 


如 果 需 要 创建 一 个 表单 ， 它 的 所 有 元 素 是 内 联 的 ， 向 左 对 齐 的 ， 标 签 是 并 排 的 ， 请 


向 <form> 标签 添加 class .form-inline。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 内 联 表单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«form class="form-inline" role="form"> 
<div class="form-group"> 
«label class="sr-only" for="name">4#\</label> 
<input type="text" class="form-control" id="name" 
placeholder=" 请 输入 名 称 "> 
</div> 
<div class="form-group"> 
<label class="sr-only" for="inputfile"> 文 件 输入 </label> 
<input type="file" id="inputfile"> 
</div> 
<div class="checkbox"> 
<label> 
<input type="checkbox"> 请 打 勾 
</label> 
</div> 
«button type="submit" class="btn btn-default">#23</button> 
</form> 


</body> 
</html> 


a -A 
结果 如 下 所 示 : 











浏览 … | 未 选择 文件 。 请 打 勾 ”提交 





e 默认 情况 下 ，Bootstrap 中 的 input, select 和 textarea 有 10096 宽度 。 在 使 用 
内 联 表 单 时 ， 您 需要 在 表单 控件 上 设置 一 个 宽度 。 
e 使 用 class .sr-only， 您 可 以 隐藏 内 联 表 单 的 标签 。 


水 平 表单 


水 平 表单 与 其 他 表单 不 仅 标 记 的 数量 上 不 同 ， 而 且 表 单 的 呈现 形式 也 不 同 。 如 需 创 
建 一 个 水 平 布局 的 表单 ， 请 按 下 面 的 几 个 步骤 进行 : 


e 向 父 «form» 元 素 添加 class .form-horizontal, 


e. 把 标签 和 控件 放 在 一 个 带 有 class .form-group 的 «div» P., 
e 向 标签 添加 class .control-label. 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 水 平 表 单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<form class="form-horizontal" role="form"> 
<div class="form-group"> 
«label for="firstname" class="col-sm-2 control-label">4¥</1 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="firstname" 
placeholder=" 请 输入 名 字 "> 
</div> 
</div> 
<div class="form-group"> 
«label for="lastname" class="col-sm-2 control-label"»7t«/labe 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="lastname" 
placeholder=" 请 输入 姓 "> 
</div> 
</div> 
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10"> 
<div class="checkbox"> 
<label> 
«input type="checkbox"> 请 记 住 我 
</label> 
</div> 
</div> 
</div> 
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10"> 
«button type="submit" class="btn btn-default">&#</button 
</div> 
</div> 
</form> 


</body> 
</html> 





结果 如 下 所 示 : 











请 记 住 我 





登录 


文 持 的 表单 控件 


Bootstrap XF Ra LIRA, ZÆ input, textarea, checkbox, radio 和 
select, 


输入 框 (Input) 


最 常见 的 表单 文本 字段 是 输入 框 input。 用 户 可 以 在 其 中 输入 大 多 数 必要 的 表单 数 
据 。Bootstrap 提供 了 对 所 有 原生 的 HTML5 的 input 类 型 的 支持 ， 包 括 : text, 
password, datetime, datetime-local, date, month, time, week, number, 
email, url, search, tel 和 color。 适 当 的 type 声明 是 必需 的 ， 这 样 才 能 让 input 
获得 完整 的 样式 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 输入 框 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«form role="form"> 
<div class="form-group"> 
«label for="name">#7 4&</label> 
<input type="text" class="form-control" placeholder=" 文 本 输入 "> 
</div> 
</form> 


</body> 
</html> 


EY 
结果 如 下 所 示 : 


文本 框 (Textarea) 


当 您 需要 进行 多 行 输入 的 时 ， 则 可 以 使 用 文本 框 textarea。 必 要 时 可 以 改变 rows 
属性 ( 较 少 的 行 = 较 小 的 盒子 ， 较 多 的 行 = 较 大 的 盒子 ) 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 文本 框 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«form role="form"> 
<div class="form-group"> 
«label for="name">XAE</label> 
«textarea class="form-control" rows="3"></textarea> 


</div> 
</form> 


</body> 
</html> 


EA el 
结果 如 下 所 示 : 
文本 框 


复 选 框 (CheckBoxe) 和 单 选 框 (Radio) 


复 选 框 和 单 选 按 钮 用 于 让 用 户 从 一 系列 预 设置 的 选项 中 进行 选择 。 


e 当 创 建 表单 时 ， 如 果 您 想 让 用 户 从 列表 中 选择 若干 个 选项 时 ， 请 使 用 
checkbox。 如 果 您 限制 用 户 只 能 选择 一 个 选项 ， 请 使 用 radio。 

e 对 一 系列 复 选 框 和 单 选 框 使 用 .checkbox-inline 或 .radio-inline class， 控 制 它 
们 显示 在 同一 行 上 。 


下 面 的 实例 演示 了 这 两 种 类 型 (默认 和 内 联 ) 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 复 选 框 和 单 选 按钮 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«label for="name"> 默 认 的 复 选 框 和 单 选 按钮 的 实例 </Labe1> 
<div class="checkbox"> 

<label><input type="checkbox" value=""> 选 项 1</label> 
</div> 
<div class="checkbox"> 

<label><input type="checkbox" value="">i%m 2</label> 
</div> 


<div class="radio"> 
<label> 
<input type="radio" name="optionsRadios" id="optionsRadiosi" 
value="optioni" checked» 选项 1 
</label> 
</div> 
<div class="radio"> 
<label> 
<input type="radio" name="optionsRadios" id="optionsRadios2" 
value="option2"> 
选项 2 - 选择 它 将 会 取消 选择 选项 1 
</label> 
</div> 
«label for="name"> 内 联 的 复 选 框 和 单 选 按 钮 的 实例 </labe1l> 
<div> 
<label class="checkbox-inline"> 
<input type="checkbox" id="inlineCheckbox1" value="option1"> 
</label> 
<label class="checkbox-inline"> 
<input type="checkbox" id="inlineCheckbox2" value="option2"> 
</label> 
<label class="checkbox-inline"> 
<input type="checkbox" id="inlineCheckbox3" value="option3"> 
</label> 
<label class="checkbox-inline"> 
<input type="radio" name-"optionsRadiosinline" id="optionsRac 
value="optioni" checked» 选项 1 
</label> 
<label class="checkbox-inline"> 
<input type="radio" name="optionsRadiosinline" id="optionsRac 
value="option2"> 选项 2 
</label> 
</div> 


</body> 
</html> 


‘| 








结果 如 下 所 示 : 


战 让 的 复 选 框 和 单 选 按钮 的 实例 
选项 1 
选项 2 
选项 1 
选项 2 - 选择 它 将 会 取消 选择 选项 1 
内 联 的 复 选 框 和 单 选 按钮 的 实例 
选项 1 加 选项 2 O 选项 3 9 选项 1 选项 2 


选择 框 (Select) 


当 您 想 让 用 户 从 多 个 选项 中 进行 选择 ， 但 是 默认 情况 下 只 
用 选择 框 。 

e 使 用 «select? 展示 列表 选项 ， 通 常 是 那些 用 户 很 熟悉 
数字 。 


e 使 用 multiple="multiple" 允许 用 户 选 择 多 个 选项 。 


下 面 的 实例 演示 了 这 两 种 类 型 (select 和 multiple) 


55. 
H 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 选择 框 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<form role="form"> 
<div class="form-group"> 

«label for="name"> 选 择 列表 </1Labe1> 

«select class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 

</select> 


«label for="name"> 可 多 选 的 选择 列表 </1Labe1> 

«select multiple class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 

</select> 

</div> 
</form> 


</body> 
</html> 


eu RE" 
结果 如 下 所 示 : 
选择 列表 


1 Y 


可 多 选 的 选择 列表 


Co N 一 


n5. 
4 


静态 控件 


当 您 需要 在 一 个 水 平 表单 内 的 表单 标签 后 放置 纯 文 本 时 ， 请 在 <p> 上 使 用 class 
.form-control-static. 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 静态 控件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«form class="form-horizontal" role="form"> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Email</label> 
<div class="col-sm-10"> 
«p class="form-control-static">email@example.com</p> 
</div> 
</div> 
<div class="form-group"> 
«label for="inputPassword" class="col-sm-2 control-label"2Xsj« 
<div class="col-sm-10"> 
<input type="password" class="form-control" id="inputPasswor¢ 
placeholder=" 请 输入 密码 "> 
</div> 
</div> 
</form> 


</body> 
</html> 


[E] 
结果 如 下 所 示 : 





Email email@example.com 


密码 


表单 控件 状态 


除了 :fcus 状态 〈 即 ， 用 户 点 击 input 或 使 用 tab RES] input 上 ) , Bootstrap 
还 为 禁用 的 输入 框 定义 了 样式 ， 并 提供 了 表单 验证 的 class. 


输入 框 焦点 


当 输 入 框 input 接收 到 focus 时 ， 输 入 框 的 轮廓 会 被 移 除 ， 同 时 应 用 box- 
shadow, 


共用 的 输入 框 input 


如 果 您 想 要 禁用 一 个 输入 框 input， 只 需要 简单 地 添加 disabled 属性 ， 这 不 仅 会 禁 
i t BANS dp ACE BATTRE SLE 2 B E BR HR I ETUSR E 8 TBH AE 
工 vo 


禁用 的 字段 集 fieldset 
对 <fieldset> 添加 disabled 属性 来 禁用 <fieldset> 内 的 所 有 控件 。 


仿 证 状态 


Bootstrap 包含 了 错误 、 和 警告 和 成 功 消息 的 验证 样式 。 只 需要 对 父 元 素 简 单 地 添加 
适当 的 class (.has-warning、 .has-error 或 .has-success) 即 可 使 用 验证 状态 。 


下 面 的 实例 演示 了 所 有 控件 状态 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 表单 控件 状态 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«form class="form-horizontal" role="form"> 
<div class="form-group"> 
«label class="col-sm-2 control-label">®&</label> 
<div class="col-sm-10"> 
«input class="form-control" id="focusedInput" type="text" 
Value=" 该 输入 框 获得 焦点 . , ,"> 
</div> 
</div> 
<div class="form-group"> 
«label for="inputPassword" class="col-sm-2 control-label"> 
RA 
AR HH 
</label> 
<div class="col-sm-10"> 
«input class="form-control" id="disabledInput" type="text' 
placeholder=" 该 输入 框 禁止 输入 ..." disabled» 
</div> 
</div> 
<fieldset disabled> 
<div class="form-group"> 


«label for="disabledTextInput" class="col-sm-2 control-l: 
禁用 输入 (Fieldset disabled) 
</label> 
<div class="col-sm-10"> 
<input type="text" id="disabledTextInput" class="form-¢ 
placeholder=" 禁 止 输入 "> 
</div> 
</div> 
<div class="form-group"> 
«label for="disabledSelect" class="col-sm-2 control-labe: 
禁用 选择 菜单 (Fieldset disabled) 
</label> 
<div class="col-sm-10"> 
<select id="disabledSelect" class="form-control"> 
<option> 禁 止 选择 </option> 
</select> 
</div> 
</div> 
</fieldset> 
<div class="form-group has-success"> 
«label class="col-sm-2 control-label" for="inputSuccess"> 
输入 成 功 
</label> 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="inputSuccess": 
</div> 
</div> 
<div class="form-group has-warning"> 
<label class="col-sm-2 control-label" for="inputWarning"> 
输入 警告 
</label> 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="inputWarning": 
</div> 
</div> 
«div class="form-group has-error"> 
«label class="col-sm-2 control-label" for="inputError"> 
输入 错误 
</label> 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="inputError"> 
</div> 
</div> 
</form> 


</body> 
</html> 





结果 如 下 所 示 : 


聚焦 该 输入 框 获得 焦点 … 


禁用 输入 
(Fieldset 
disabled ) 


禁用 选择 菜单 禁止 选择 


(Fieldset 
disabled ) 


输入 成 功 a 


输入 警告 | 

















输入 错误 | 





表单 控件 大 小 


您 可 以 分 别 使 用 class .input-Ig 和 .col-Ig-* 来 设置 表单 的 高 度 和 宽度 。 下 面 的 实例 
演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 表单 控件 大 小 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«form role="form"> 
<div class="form-group"> 
<input class="form-control input-lg" type="text" 
placeholder=".input-1lg"> 
</div> 


<div class="form-group"> 
<input class="form-control" type="text" placeholder=" 默 认输 入 " 
</div> 


<div class="form-group"> 
<input class="form-control input-sm" type="text" 
placeholder=".input-sm"> 
</div> 
<div class="form-group"> 
</div> 


<div class="form-group"> 
«select class="form-control input-lg"> 
«option value="">. input -lg</option> 
</select> 
</div> 
<div class="form-group"> 
<select class="form-control"> 
«option value=" "> 默认 选择 </option> 
</select> 
</div> 
<div class="form-group"> 
«select class="form-control input-sm"> 
«option value="">.input-sm</option> 
</select> 
</div> 


<div class="row"> 
«div class="col-lg-2"> 
<input type="text" class="form-control" placeholder=".col- 
</div> 
<div class="col-lg-3"> 
<input type="text" class="form-control" placeholder=".col- 
</div> 
«div class="col-lg-4"> 
<input type="text" class="form-control" placeholder=".col- 
</div> 
</div> 
</form> 


</body> 
</html> 


El == 8 
结果 如 下 所 示 : 





input-lg | 
里 上 选择 | 


input-sm = 


表单 帮助 文本 


Bootstrap 表单 控件 可 以 在 输入 框 input 上 有 一 个 块 级 帮助 文本 。 为 了 添加 一 个 占用 
整个 宽度 的 内 容 块 ， 请 在 «input» 后 使 用 .help-block。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 表单 帮助 文本 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<form role="form"> 
<span> 帮 助 文本 实例 </span> 
<input class="form-control" type="text" placeholder=""> 
<span class="help-block"> 一 个 较 长 的 帮助 文本 块 ， 超 过 一 行 ， 
需要 扩展 到 下 一 行 。 本 实例 中 的 帮助 文本 总 共有 两 行 。</span> 
</form> 


</body> 
</html> 
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结果 如 下 所 示 : 
帮助 文本 交 例 


一 个 较 长 的 帮助 文本 块 ， 超 过 一 行 ， 需要 扩展 到 下 一 行 。 本 实例 中 的 帮助 文本 总 共有 两 行 。 
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Bootstrap 按钮 


本 章 将 通过 实例 讲解 如 何 使 用 Bootstrap 按钮 。 任 何 带 有 class .btn 的 元 素 都 会 继 
承 圆 角 灰色 按钮 的 默认 外 观 。 但 是 Bootstrap 提供 了 一 些 选项 来 定义 按钮 的 祥 式 ， 
具体 如 下 表 所 示 : 


Class 描述 
btn 默认 的 /标准 的 按钮 。 
btn- EI +t 3 Nan 2 a = >Q — m 的 去 
primary 提供 额外 的 视觉 效果 ， 标识 组 按钮 中 的 原始 动作 。 
btn- — Are Ty Aaa to $B GA = 
Scenes 表示 一 个 成 功 的 或 积极 的 动作 。 
btn-info 信息 警告 消息 的 上 下 文 按 钮 。 
btn- — p oue E BV daz 
warning 表示 应 谨慎 采取 的 动作 。 


btn-danger ”表示 一 个 危险 的 或 潜在 的 负面 动作 。 
ii 并 不 强调 是 一 个 按钮 ， 看 起 来 像 一 个 链接 ， 但 同时 保持 按钮 的 行 


o 


下 面 的 实例 演示 了 上 面 所 有 的 按钮 class : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 选项 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<!-- 标准 的 按钮 - -> 
«button type="button" class="btn btn-defau1lLt"> 默 认 按钮 </button> 


<!-- 提供 额外 的 视觉 效果 ， 标 识 一 组 按钮 中 的 原始 动作 --> 
«button type="button" class="btn btn-primary"> 原 始 按 钮 </button> 


«1-- 表示 一 个 成 功 的 或 积极 的 动作 - -> 
«button type="button" class="btn btn-success"> 成 功 按钮 </button> 


<! s 信息 警告 消息 的 上 下 文 按钮 = 二 之 
«button type="button" class="btn btn-info"> 信 息 按 钮 </button> 


«1-- 表示 应 谨慎 采取 的 动作 --> 
«button type="button" class="btn btn-warning"> 警 告 按钮 </button> 


<!-- 表示 一 个 危险 的 或 潜在 的 负面 动作 --> 
«button type="button" class="btn btn-danger"> 危 险 按 钮 </button> 


<!-- 并 不 强调 是 一 个 按钮 ， 看 起 来 像 一 个 链接 ， 但 同时 保持 按钮 的 行为 - -> 
«button type="button" class="btn btn-1ink"> 链 接 按钮 </button> 





</body> 

</html> 

了 RR 
结果 如 下 所 示 : 

默认 按钮 RIISI a i 广 接 按钮 





按钮 大 小 
下 表 列 出 了 获得 各 种 大 小 按钮 的 class : 


Class 描述 


.btn-lg 这 会 让 按钮 看 起 来 比较 大 。 
.btn-sm 这 会 让 按钮 看 起 来 比较 小 。 
.btn-xs 这 会 让 按钮 看 起 来 特别 小 。 
.btn-block 这 会 创建 块 级 的 按钮 ， 会 横 跨 父 元 素 的 全 部 宽度 。 


下 面 的 实例 演示 了 上 面 所 有 的 按钮 class : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 大 小 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 


<body> 
<p> 
«button type="button" class="btn btn-primary btn-1lg"> 
大 的 原始 按钮 
«/button» 
«button type="button" class="btn btn-default btn-lg"> 
大 的 按钮 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary"> 
默认 大 小 的 原始 按钮 
«/button» 
«button type="button" class="btn btn-default"> 
默认 大 小 的 按钮 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-sm"> 
小 的 原始 按钮 
«/button» 
«button type="button" class="btn btn-default btn-sm"> 
小 的 按钮 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-xs"> 
特别 小 的 原始 按钮 
«/button» 


«button type="button" class="btn btn-default btn-xs"> 
特别 小 的 按钮 
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</button> 
</p> 
<p> 
«button type="button" class="btn btn-primary btn-lg btn-block"> 
块 级 的 原始 按钮 
</button> 
«button type="button" class="btn btn-default btn-lg btn-block"> 
块 级 的 按钮 
</button> 
</p> 


</body> 
</html> 


4 = D 
结果 如 下 所 示 : 


KÉRT DE 


默认 太 小 的 按钮 








‘PRA BR el 





Pal BET SED FEDERE 


RR AS E S cH 


AR AA 


按钮 状态 

Bootstrap 提供 了 激活 、 禁 用 等 按钮 状态 的 class， 下 面 将 进行 详细 讲解 。 
激活 状态 

按钮 在 激活 时 将 呈现 为 被 按压 的 外 观 〈 深 色 的 背景 、 深 色 的 边框 、 阴 影 ) 。 
下 表 列 出 了 让 按钮 元 素 和 锚 元 素 呈 激活 状态 的 class : 


元 素 Class 
按钮 元 素 添加 .active class 来 显示 它 是 激活 的 。 
锚 元 素 添加 .active class 到 «a» 按钮 来 显示 它 是 激活 的 。 


下 面 的 实例 演示 了 这 点 : 
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<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 激活 状态 </tit1le> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 
<button type="button" class="btn btn-default btn-lg "> 
默认 按钮 
«/button» 
«button type="button" class="btn btn-default btn-lg active"> 
激活 按钮 
«/button» 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-lg "> 
原始 按钮 
«/button» 
«button type="button" class="btn btn-primary btn-lg active"> 
激活 的 原始 按钮 
«/button» 
</p> 


</body> 
</html> 


El RE | 
结果 如 下 所 示 : 





PUR | suai 


原始 按钮 | 激活 的 原始 按钮 


禁用 状态 
当 您 禁用 一 个 按钮 时 ， 它 的 颜色 会 变 淡 50%， 并 失去 渐变 。 
下 表 列 出 了 让 按钮 元 素 和 锚 元 素 呈 禁用 状态 的 class : 





Class 


it ell 


添加 disabled 属性 到 «button» #242. 


Se IST SE 


添加 disabled class 到 <a> ee 注意 : 该 class 只 会 改变 <a> 的 外 
观 ， 不 会 改变 它 的 功能 。 在 这 里 ， 您 需要 使 用 自 定义 的 JavaScript 来 禁 
用 链接 。 
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下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 禁用 状态 </tit1le> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 
«button type="button" class="btn btn-default btn-lg"> 
默认 按钮 
«/button» 
«button type="button" class="btn btn-default btn-lg" disabled="¢ 
茶 用 按钮 
«/button» 
«/p» 
«p» 
«button type="button" class="btn btn-primary btn-lg "> 
原始 按钮 
«/button» 
«button type="button" class="btn btn-primary btn-lg" disabled-'t 
茶 用 的 原始 按钮 
</button> 
</p> 
<p> 
«a href="#" class="btn btn-default btn-lg" role="button"> 
链接 
</a> 
«a href="#" class="btn btn-default btn-lg disabled" role="buttor 
禁用 链接 
</a> 
</p> 
<p> 
<a href="#" class="btn btn-primary btn-lg" role="button"> 
原始 链接 
</a> 
<a href="#" class="btn btn-primary btn-lg disabled" role="buttor 
禁用 的 原始 链接 
</a> 
</p> 


</body> 
</html> 


ne ETE 
结果 如 下 所 示 : 











—À 


按钮 标签 


您 可 以 在 «a». «button» 或 «input» 元 素 上 使 用 按钮 class。 但 是 建议 您 在 
«button» 元 素 上 使 用 按钮 class， 避 免 跨 浏览 器 的 不 一 致 性 问题 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 标签 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<a class="btn btn-default" href="#" role="button">###</a> 
«button class="btn btn-default" type="Submit">#42</button> 
«input class="btn btn-default" type="button" value=" 输 入 "> 
«input class="btn btn-default" type="submit" value=" 提 交 "> 


</body> 
</html> 


| 
结果 如 下 所 示 : 


链接 按钮” 输入 | $23 


Bootstrap 图 像 


在 本 章 中 ， 我 们 将 学 习 Bootstrap 对 图 像 的 支持 。Bootstrap 提供 了 三 个 可 对 图 像 应 
用 简单 样式 的 class : 


e .img-rounded : 添加 border-radius:6px 来 获得 图 像 圆 角 。 
e .img-circle : 添加 border-radius:500px 来 让 整个 图 像 变 成 圆 形 。 
e .img-thumbnail : 添加 一 些 内 边 距 (padding) 和 一 个 灰色 的 边框 。 


请 看 下 面 的 实例 演示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 图 像 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<img src="img/download.png" 
class="img-rounded"> 

<img src="img/download.png" 
class="img-circle"> 

<img src="img/download.png" 
class="img-thumbnail"> 


</body> 
</html> 


o0 EI 
结果 如 下 所 示 : 


Bootstrap 帮助 器 类 


本 章 将 讨论 Bootstrap 中 的 一 些 可 能 会 派 上 用 场 的 帮助 器 类 。 


关闭 图 标 
使 用 通用 的 关闭 图 标 来 关闭 模 态 框 和 警告 框 。 使 用 class close 得 到 关闭 图 标 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 关闭 图 标 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 关 闭 图 标 实例 
<button type="button" class="close" aria-hidden="true"> 
&times; 
«/button» 
</p> 


</body> 
</html> 


LIEN L 
结果 如 下 所 示 : 


Close icon Example 


插入 符 


使 用 插入 符 表示 下 拉 功 能 和 方向 。 使 用 带 有 class caret 的 «span» 元 素 得 到 该 功 


4b 
Abo 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 插入 符 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 插 入 符 实例 
<span class="caret"></span> 
</p> 


</body> 
</html> 


| 


结 


插入 符 实例 > 


快速 浮动 


人 尔 
/LN 


例 


E 


可 以 分 别 使 用 class pull-left 或 pull-right 来 把 元 素 向 左 或 向 右 浮动 。 下 面 的 实 
演示 了 这 点 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 快速 浮动 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 


<body> 

«div class="pull-left"> 
向 左 快速 浮动 

</div> 


<div class="pull-right"> 
向 右 快速 浮动 
</div> 


</body> 
</html> 








结果 如 下 所 示 : 


Quick Float to left Quick Float to right 


如 需 对 齐 导航 栏 中 的 组 件 ， 请 使 用 .navbar-left 或 .navbar-right 代替 。 请 查看 
Bootstrap 导航 栏 。 


居中 内 容 块 


使 用 class center-block 来 居中 元 素 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 居中 内 容 块 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="row"> 
<div class="center-block" style="width: 200px; background-color :#¢ 
这 是 center-block 实例 
</div> 
</div> 


</body> 
</html> 


LEN EM 
结果 如 下 所 示 : 





这 是 center-block 实 倒 


清除 浮动 


如 需 清除 元 素 的 浮动 ， 请 使 用 .clearfix class. 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 清除 浮动 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="clearfix" style="background: #D8D8D8;border: 1px solic 
<div class="pull-left" style="background:#58D3F7;"> 





向 左 快速 浮动 
</div> 
<div class="pull-right" style="background: #DA81F5;"> 
向 右 快速 浮动 
</div> 
</div> 
</body> 
</html> 
E 
结果 如 下 所 示 : 





EMABRAR 


您 可 以 通过 使 用 class .show 和 .hidden 来 强行 设置 元 素 显示 或 隐藏 (包括 屏幕 阅 
ER). 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 显示 和 隐藏 内 容 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="row" style="padding: 91px 100px 19px 50px;"> 
<div class-"show" style="left-margin:10px;width:300px;backgroun 
这 是 show class 的 实例 
</div> 
«div class="hidden" style="width: 200px; background-color :#ccc;"> 
这 是 hide class 的 实例 
</div> 
</div> 


</body> 
</html> 


ES 
结果 如 下 所 示 : 





This is an example for show class 


屏幕 阅读 器 


您 可 以 通过 使 用 class .sr-only 来 把 元 素 对 所 有 设备 隐藏 ， 除 了 屏幕 阅读 器 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 屏幕 阅读 器 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="row" style="padding: 91px 100px 19px 50px;"> 
<form class="form-inline" role="form"> 
<div class="form-group"> 
«label class="sr-only" for="email">Email thik</label> 
<input type-"email" class="form-control" placeholder="Enter t 
</div> 
<div class="form-group"> 
«label class="sr-only" for="pass"> 密 码 </label> 
<input type="password" class="form-control" placeholder="Pas: 
</div> 
</div> 


</body> 
</html> 





结果 如 下 所 示 : 


在 这 里 ， 我 们 看 到 两 个 input 类 型 的 label 标签 都 带 有 class sr-only， 因 此 标签 将 
只 对 屏幕 阅读 器 可 见 。 


Bootstrap 响应 陈 实 用 工具 
Bootstrap 提供 了 一 些 帮 助 器 类 ， 以 便 更 快 地 实现 对 移动 设备 友好 的 开发 。 这 些 可 
以 通过 媒体 查询 结合 大 型 、 小 型 和 中 型 设备 ， 实 现 内 容 对 设备 的 显示 和 隐藏 。 


需要 说 愤 使 用 这 些 工 具 ， 避 免 在 同一 个 站 点 创建 完全 不 同 的 版 本 。 唤 应 式 实用 工具 
目前 只 适用 于 块 和 表 切 换 。 


Class 设备 
visible-xs 额外 的 小 设备 (小 于 768px) FT N 
.visible-sm 小 型 设备 (768 px 起 ) SIX, 
.Visible-md 中 型 设备 (768 px 到 991 px) 可 见 
.Visible-lg 大 型 设备 (992 px RAE) AH 
.hidden-xs 额外 的 小 设备 (小 于 768px) 隐藏 
.hidden-sm 小 型 设备 (768 px 起 ) 隐藏 
.hidden-md 中 型 设备 (768 px 到 991 px) 隐藏 
.hidden-lg 大 型 设备 (992 px RAE) 隐藏 

打印 类 
下 表 列 出 了 打印 类 。 使 用 这 些 切换 打印 内 容 。 
Class 打印 
.Visible-print 可 见 ， 可 打印 
.hidden-print 只 对 浏览 器 可 见 ， 不 可 打印 


实例 


下 面 的 实例 演示 了 上 面 所 列举 的 帮助 器 类 的 用 法 。 调 整 浏 览 器 的 窗口 大 小 ， 或 者 在 
不 同 的 设备 上 加 载 实 例 ， 测 试 响应 式 实用 工具 类 。 


<!DOCTYPE html> 


<html> 
<head> 
<ti 


tle>Bootstrap 实例 - 响应 式 实用 工具 </title> 


<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


<SC 
<SC 
</head 
<body> 


«div c 
«di 


«/div» 


«/body 
«/html 


4 ay 


ript src="/scripts/jquery.min.js"></script> 
ript src="/bootstrap/js/bootstrap.min.js"></script> 
> 


lass="container" style="padding: 40px;"> 
v class="row visible-on"> 


<div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 

«span class="hidden-xs"> 特 别 小 型 </span> 

<span class="visible-xs">? 在 特别 小 型 设备 上 可 见 </span> 
</div> 


<div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
«span class="hidden-sm">/)\#/</span> 
<span class-"visible-sm"»? 在 小 型 设备 上 可 见 </span> 
</div> 
<div class="clearfix visible-xs"></div> 


<div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 

«span class="hidden-md">#/</span> 

<span class="visible-md">? 在 中 型 设备 上 可 见 </span> 
</div> 


<div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 

«span class="hidden-1lg">X#/</span> 

<span Class="visible-lg">? 在 大 型 设备 上 可 见 </span> 
</div> 


> 
> 


#dede 
1px #: 


#dede 
1px #: 


#dede 
1px #: 


#dede 
1px #: 

















结果 如 下 所 示 : 
Tana Es Lem | ve See EUR 
QS (?) 表示 元 素 在 当前 视 口中 可 见 。 


Bootstrap 字形 图 标 (Glyphicons) 


本 章 将 讲解 字形 图 标 (Glyphicons) ， 并 通过 一 些 实例 了 解 它 的 使 用 。Bootstrap 
捆绑 了 200 多 种 字体 格式 的 自行 。 首 先 让 我 们 先 来 理解 一 下 什么 是 字形 图 标 
(Glyphicons) 。 


什么 是 字形 图 标 (Glyphicons) ? 


字形 图 标 (Glyphicons) 是 在 Web 项 目 中 使 用 的 图 标 字体 。 BP, Glyphicons 
Halflings 需要 商业 许可 ， 但 是 您 可 以 通过 基于 项 目的 Bootstrap 来 免费 使 用 这 些 图 
标 。 


为 了 表示 对 图 标 作 者 的 感谢 ， 和 希望 您 在 使 用 时 加 上 GLYPHICONS 网 站 的 链接 。 


获取 字形 图 标 (Glyphicons) 


我 们 已 经 在 环境 安装 章节 下 载 了 Bootstrap 3.x 版 本 ， 并 理解 了 它 的 目录 结构 。 在 
fonts 文件 夹 内 可 以 找到 字形 图 标 (Glyphicons) ， 它 包含 了 下 列 这 些 文件 : 


e glyphicons-halflings-regular.eot 
e glyphicons-halflings-regular.svg 
e glyphicons-halflings-regular.ttf 

e glyphicons-halflings-regular.woff 


相关 的 CSS 规则 写 在 dist 文件 夹 内 的 css 文件 夹 内 的 bootstrap.css 和 bootstrap- 
min.css 文件 上 。 


字形 图 标 (Glyphicons) 列表 
点 击 这 里 ， 查 看 可 用 的 字形 图 标 (Glyphicons) 列表 。 
CSS 规则 解释 


下 面 的 CSS 规则 构成 glyphicon class。 


@font-face { 
font-family: 'Glyphicons Halflings'; 
src: url('../fonts/glyphicons-halflings-regular.eot'); 
src: url('../fonts/glyphicons-halflings-regular.eot?Ziefix') forr 


} 


.glyphicon { 
position: relative; 
top: 1px; 
display: inline-block; 
font-family: 'Glyphicons Halflings'; 
-webkit-font-smoothing: antialiased; 
font-style: normal; 
font-weight: normal; 
line-height: 1; 
-moz-osx-font-smoothing: grayscale; 


4d 5 


所 以 font-face 规则 实际 上 是 在 找到 glyphicons 地 方 声明 font-family 和 位 置 。 


.glyphicon class 声明 一 个 从 顶部 偏 移 1px 的 相对 位 置 ， 呈 现 为 inline-block, PBH 
字体 ， 规 定 font-style 和 font-weight 为 normal， 设 置 行 高 为 1。 除 此 之 外 ， 使 用 - 
webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得 跨 


浏览 器 的 一 致 性 。 
然后 ， 这 里 的 





.glyphicon:empty { 
width: 1em; 
} 


是 空 的 glyphicon。 
这 里 有 200 个 class， 每 个 class 针对 一 个 图 标 。 这 些 class 的 常见 格式 如 下 : 


.glyphicon-keyword:before { 
content: "hexvalue"; 


} 


比如 ， 使 用 的 user 图 标 ， 它 的 class 如 下 : 


.glyphicon-user:before { 
content: "\ed08"; 
} 


用 法 


如 需 使 用 图 标 ， 只 需要 简单 地 使 用 下 面 的 代码 即 可 。 请 在 图 标 和 文本 之 间 保 留 适 当 
的 空间 。 


<span class="glyphicon glyphicon-search"></span> 


下 面 的 实例 演示 了 如 何 使 用 字形 图 标 (Glyphicons) 


a 


<!DOCTYPE html» 

«html» 

«head» 
<title>Bootstrap 实例 - 如 何 使 用 字形 图 标 (Glyphicons) </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


<p> 
<button type="button" class="btn btn-default"> 
<span class="glyphicon glyphicon-sort-by-attributes"></span> 
</button> 
<button type="button" class="btn btn-default"> 
«span class="glyphicon glyphicon-sort-by-attributes-alt"></s; 
</button> 
<button type="button" class="btn btn-default"> 
<span class="glyphicon glyphicon-sort-by-order"></span> 
</button> 
<button type="button" class="btn btn-default"> 
<span class="glyphicon glyphicon-sort-by-order-alt"></span> 
</button> 
</p> 
«button type="button" class="btn btn-default btn-1lg"> 
«span class="glyphicon glyphicon-user"></span> User 
</button> 
<button type="button" class="btn btn-default btn-sm"> 
<span class="glyphicon glyphicon-user"></span> User 
«/button» 
«button type="button" class-"btn btn-default btn-xs"> 
«span class="glyphicon glyphicon-user"></span> User 
«/button» 


«/body» 
«/html» 








gx 


吉 果 如 下 所 示 : 


A User User £ User 


带 有 导航 栏 的 字形 图 标 (Glyphicons) 


<!DOCTYPE html» 
<html> 
<head> 
<title> 导 航 栏 的 字形 图 标 </title> 
«meta name="viewport" content="width=device-width, initial-sca: 


<!-- Bootstrap --> 

«link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/boot 
<style> 

body { 


padding-top: 50px; 
padding-left: 50px; 
} 
</style> 
<!--[if lt IE 9]» 
«script src-'"http://apps.bdimg.com/libs/html5shiv/3.7/htmls5sl 
<! [endif] --> 
</head> 
<body> 
«div class="navbar navbar-fixed-top navbar-inverse" role="navic 
«div class="container"> 
«div class="navbar -header'"> 
<button type="button" class="navbar-toggle" data-toggle=' 
<span class-"sr-only"»Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar'"></span> 
</button> 
<a class="navbar-brand" href="#">Project name</a> 
</div> 
<div class="collapse navbar-collapse"> 
«ul class="nav navbar-nav"> 
«li class="active"><a href="#"><span class="glyphicon ( 
<li><a href="#shop"><span class="glyphicon glyphicon-st 
<li><a href="#support"><span class="glyphicon glyphicor 


</ul> 
</div><!-- /.nav-collapse --> 
</div><!-- /.container --> 
</div> 


<!-- jQuery (Bootstrap 插件 需要 引入 ) --> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.mir 
<!-- 包含 了 所 有 编译 插件 - -> 
«script src-"http://apps.bdimg.com/libs/bootstrap/3.2.0/js/boot 
«/body» 
«/html» 





E | 


定制 字形 图 标 (Glyphicons) 


我 们 已 经 看 到 如 何 使 用 字形 图 标 (Glyphicons) ， 接 下 来 我 们 看 看 如 何 定制 字形 图 
标 (Glyphicons) 。 
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我 们 将 以 上 面 的 实例 开始 ， 并 通过 改变 字体 尺寸 、 颜 色 和 应 用 文本 阴影 来 进行 定制 
图 标 。 
下 面 是 开始 的 代码 : 


«button type="button" class="btn btn-primary btn-lg"> 
</button> 


<span class="glyphicon glyphicon-user"></span> User 


效果 如 下 所 示 : 





定制 字体 尺寸 


通过 增加 或 减少 图 标的 字体 尺寸 ， 您 可 以 让 图 标 看 起 来 更 大 或 更 小 。 


<button type="button" class="btn btn-primary btn-lg" style="font-s: 
<span class="glyphicon glyphicon-user"></span> User 
</button> 

K 





) User 


定制 字体 颜色 


«button type="button" class="btn btn-primary btn-lg" style="color: 
<span class="glyphicon glyphicon-user"></span> User 
</button> 

Ei 
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应 用 文本 阴影 


«button type="button" class="btn btn-primary btn-lg" style="text-sl 
<span class="glyphicon glyphicon-user"></span> User 
</button> 


E 





在 线 定制 字形 图 标 (Glyphicons) 


点 击 这 里 ， 在 线 定制 字形 图 标 (Glyphicons) 。 


Bootstrap 下 拉 0 菜单 (Dropdowns) 


本 
接 


实 
如 


N= 
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章 将 重点 介绍 Bootstrap 下 拉 菜 单 。 下 拉 菜 单 是 可 切换 的 ， 是 以 列表 格式 显示 链 
的 上 下 文 菜单 。 这 可 以 通过 与 下 拉 菜 单 (Dropdown) JavaScript 插件 的 互动 来 
现 。 


需 使 用 下 列 菜单 ， 只 需要 在 class dropdown 内 加 上 下 拉 菜 单 即 可 。 下 面 的 实例 
示 了 基本 的 下 拉 菜 单 : 


<!DOCTYPE html> 
«html» 
«head» 
<title>Bootstrap 实例 - 下 拉 菜 单 (Dropdowns) </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="dropdown"> 
<button type="button" class="btn dropdown-toggle" id="dropdownMe 
data-toggle="dropdown"> 
主题 
<span class="caret"></span> 
«/button» 
«ul class="dropdown-menu" role="menu" aria-labelledby="dropdownh 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
«a role="menuitem" tabindex="-1" href="#"> 数 据 挖掘 </a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
数据 通信 /网 络 
</a> 
</li> 
«li role="presentation" class="divider"></1li> 
<li role="presentation"> 
«a role-"menuitem" tabindex="-1" href="#"> 分 离 的 链接 </a> 
</li> 
</ul> 
</div> 


</body> 
</html> 











结果 如 下 所 示 : 


主题 ~ 


Java 
数据 挖掘 
数据 通信 /网 络 


分 高 的 链接 


B 
sy 


JE, 


54 
Pes 


通过 向 een 添加 class .pull-right 来 向 右 对 齐 下 拉 菜 单 。 下 面 的 实例 
演示 了 这 


Hf [i 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 向 右 对 齐 下 拉 菜 单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="dropdown"> 
<button type="button" class="btn dropdown-toggle" id="dropdownMe 
data-toggle="dropdown">= si 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu pull-right" role="menu" 
aria-labelledby="dropdownMenui"> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
«a role="menuitem" tabindex="-1" href="#"> 数 据 挖掘 </a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
数据 通信 /网 络 
</a> 
</li> 
<li role="presentation" class="divider"></li> 
<li role="presentation"> 
«a role="menuitem" tabindex="-1" href="#"> 分 离 的 链接 </a> 





</li> 
</ul> 
</div> 
</body> 
</html> 
[E 
结果 如 下 所 示 : 
主题 ~ 
Java 
数据 挖掘 
数据 通信 /网 络 





IL. 


标题 


您 可 以 使 用 class dropdown-header 向 下 拉 菜 单 的 标签 区 域 添 加 标题 。 下 面 的 实 
例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 下 拉 菜 单 标题 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="dropdown"> 
<button type="button" class="btn dropdown-toggle" id="dropdownMe 
data-toggle="dropdown"> 
主题 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownh 
«li role="presentation" class="dropdown-header"> 下 拉 菜 单 标题 </: 
<li role="presentation" > 
«a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 数 据 挖 握 </a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
数据 通信 /网 络 
</a> 
</li> 
<li role="presentation" class="divider"></li> 
«li role="presentation" class="dropdown-header"> 下 拉 菜 单 标题 </: 
<li role="presentation"> 
«a role-"menuitem" tabindex="-1" href="#"> 分 离 的 链接 </a> 
</li> 
</ul> 
</div> 


</body> 
</html> 


DESE = eT 
结果 如 下 所 示 : 





W3School 前 端 教程 合 


主题 ~ 


下 拉 荣 单 标题 
Java 

数据 挖掘 
数据 通信 /网 络 


下 拉 菜 单 标题 
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Bootstrap 按钮 组 


按钮 组 允许 多 个 按钮 被 堆 生 在 同一 行 上 。 当 你 想 要 把 按钮 对 齐 在 一 起 时 ， 这 就 显得 
非常 有 用 。 您 可 以 通过 Bootstrap 按钮 (Button) 插件 添加 可 选 的 JavaScript 单 
选 框 和 复 选 框 样式 行为 。 


下 面 的 表格 总 结 了 Bootstrap 提供 的 使 用 按钮 组 的 一 些 重要 的 class : 


.btn-group 


该 class 用 于 形成 基本 的 按钮 组 。 在 .btn-group 中 放置 一 系列 带 有 class .btn 的 按 
钮 。 


&lt;div class="btn-group"&gt; 
&lt;button type="button" class="btn btn-default'&gt;Buttoni&lt;/l 
&lt;button type="button" class="btn btn-default"&gt;Button2&lt;, 
&lt;/div&gt; 


El — B 





.btn-toolbar 


该 class 有 助 于 把 几 组 «div class="btn-group"> 结合 到 一 个 <div class="btn- 
toolbar"> 中 ， 一 般 获 得 更 复杂 的 组 件 。 


&lt;div class="btn-toolbar" role="toolbar"&gt; 
&lt;div class="btn-group"&gt;...&lt;/div&agt; 
&lt;div class-'btn-group'&gt;...&lt;/div&gt; 

&lt;/div&gt; 


.btn-group-lg, .btn-group-sm, .btn-group-xs 


这 些 class 可 应 用 到 整个 按钮 组 的 大 小 调整 ， 而 不 需要 对 每 个 按钮 进行 大 小 调整 。 


&lt;div class="btn-group btn-group-lg"&gt;...&lt;/div&agt; 
&lt;div class="btn-group btn-group-sm"&gt;...&lt;/div&gt; 
&lt;div class="btn-group btn-group-xs"&gt;...&lt;/div&gt; 


.btn-group-vertical 


该 Class 让 一 组 按钮 垂直 堆 登 显示 ， 而 不 是 水 平 堆 登 显 示 。 


&lt;div class="btn-group-vertical"&gt; 


&lt;/div&gt; 


基本 的 按钮 组 
下 面 的 实例 演示 了 上 面 表 格 中 讨论 到 的 class .btn-group 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 基本 的 按钮 组 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="btn-group"> 
«button type="button" class="btn btn-default"»iZ4z 1</button> 
«button type="button" class="btn btn-default"»iZ4z 2</button> 
«button type="button" class="btn btn-default"»iZ4z 3</button> 
</div> 


</body> 
</html> 


e 了 | 
结果 如 下 所 示 : 


按钮 1 按钮 2 按钮 3 


按钮 工具 栏 


下 面 的 实例 演示 了 上 面 表格 中 讨论 到 的 class .btn-toolbar 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 工具 栏 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="btn-toolbar" role="toolbar"> 
<div class="btn-group"> 
«button type="button" class="btn btn-default">#42 1</button> 
«button type="button" class="btn btn-default"»iZ4z 2</button> 
«button type="button" class="btn btn-default">#42 3</button> 
</div> 
<div class="btn-group"> 
«button type="button" class="btn btn-default"»1Z4z 4</button> 
«button type="button" class="btn btn-default">#42 5</button> 
«button type="button" class="btn btn-default"»iZ4z 6</button> 
</div> 
<div class="btn-group"> 
«button type="button" class="btn btn-default">#42 7</button> 
«button type="button" class="btn btn-default"»iZ4z 8</button> 
«button type="button" class="btn btn-default">#42 9</button> 
</div> 
</div> 


</body> 
</html> 


i ER" 
结果 如 下 所 示 : 


按钮 1 按钮 2 | 按钮 3 按钮 4 iS 按钮 6 按钮 7 按钮 8 按钮 9 


按钮 的 大 小 


下 面 的 实例 演示 了 上 面 表格 中 讨论 到 的 class .btn-group-* 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 组 的 大 小 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="btn-group btn-group-1lg"> 
«button type="button" class="btn btn-default"»iZ4z 1</button> 
«button type="button" class="btn btn-default">#42 2</button> 
«button type="button" class="btn btn-default"»iZ4z 3</button> 
</div> 
<div class="btn-group btn-group-sm"> 
«button type="button" class="btn btn-default">#42 4</button> 
«button type="button" class="btn btn-default"»1Z4z 5</button> 
«button type="button" class="btn btn-default">#42 6</button> 
</div> 
<div class="btn-group btn-group-xs"> 
«button type="button" class="btn btn-default">#42 7</button> 
«button type="button" class="btn btn-default">#42 8</button> 
«button type="button" class="btn btn-default"»iZ4z 9</button> 
</div> 


</body> 
</html> 


i | 
结果 如 下 所 示 : 


按钮 1 按钮 2 按钮 3 按钮 4 按钮 5  ddHo | 按钮 7 按钮 8 HO 


RE 


您 可 以 在 一 个 按钮 组 内 柑 套 另 一 个 按钮 组 ， 即 ， 在 一 个 .btn-group ARE 3—* 
.btn-group 。 当 您 向 让 下 拉 菜 单 与 一 系列 按钮 组 合 使 用 时 ， 就 会 用 到 这 个 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - REN 2</title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group"> 
«button type="button" class="btn btn-default">#42 1</button> 
«button type="button" class="btn btn-default"»iZ4z 2</button> 


<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
Tl 
«span class="caret"></span> 
«/button» 
«ul class="dropdown-menu"> 
<li><a href="#"> 下 拉链 接 1«/a»«/li» 
<li><a href="#"> 下 拉链 接 2</a></1i> 
</ul> 
</div> 
</div> 


</body> 
</html> 


EE] 
结果 如 下 所 示 : 
按钮 1 | 按钮 2 | 下列 


下 拉链 接 1 
PHBE 2 


垂直 的 按钮 组 


下 面 的 实例 演示 了 上 面 表格 中 讨论 到 的 class .btn-group-vertical 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 垂直 的 按钮 组 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group-vertical"> 
«button type="button" class="btn btn-default"»iZ4z 1</button> 
«button type="button" class="btn btn-default">#42 2</button> 


«div class="btn-group-vertical"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
下 拉 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href="#"> 下 拉链 接 1</a></1i> 
<li><a href="#"> 下 拉链 接 2</a></1i> 
</ul> 
</div> 
</div> 


</body> 
</html> 


EE] 
结果 如 下 所 示 : 

按钮 1 

按钮 2 

下 拉 ~ 


下 拉链 接 1 
Tin 2 
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本 
单 
用 
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章 将 讲解 如 何 使 用 Bootstrap class 向 按钮 添加 下 拉 菜 单 。 如 需 向 按钮 添加 下 拉 菜 
， 只 需要 简单 地 在 在 一 个 .btn-group 中 放置 按钮 和 下 拉 菜 单 即 可 。 您 也 可 以 使 
<span class="caret"></span> 来 指示 按钮 作为 下 拉 菜 单 。 


面 的 实例 演示 了 一 个 基本 的 简单 的 按钮 下 拉 菜 单 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 基本 的 按钮 下 拉 菜 单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
默认 <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-primary dropdown-toggle" 
data-toggle="dropdown"> 
原始 <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div> 


</body> 
</html> 








结果 如 下 所 示 : 





分 割 的 按钮 下 拉 菜 单 


分 割 的 按钮 下 拉 菜 单 使 用 与 下 拉 菜 单 按钮 大 致 相同 的 样式 ， 但 是 对 下 拉 菜 单 添 加 了 
原始 的 功能 。 分 割 按钮 的 左边 是 原始 的 功能 ， 右 边 是 显示 下 拉 菜 单 的 切换 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 分 割 的 按钮 下 拉 菜 单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group"> 
«button type="button" class="btn btn-default">%iA\</button> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
<span class="caret"></span> 
<span class="sr-only">tWiz FHI €«/span» 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class-'divider"»«/li» 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div> 
<div class="btn-group"> 
«button type="button" class="btn btn-primary"> 原 始 </button> 
<button type="button" class="btn btn-primary dropdown-toggle" 
data-toggle="dropdown"> 
<span class="caret"></span> 
«span class="sr-only"> 切 换 下 拉 菜 单 </span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class-'divider"»«/li» 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div> 


</body> 
</html> 


sd = gr] 
结果 如 下 所 示 : 





按钮 下 拉 菜 单 的 大 小 
您 可 以 使 用 带 有 各 种 大 小 按钮 的 下 拉 菜 单 : .btn-large、.btn-sm 或 .btn-xs。 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 按钮 下 拉 菜 单 的 大 小 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group"> 

<button type="button" class="btn btn-default dropdown-toggle btr 
data-toggle="dropdown"> 
默认 «span class="caret"></span> 

</button> 

<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 

</ul> 

</div> 
<div class="btn-group"> 

<button type="button" class="btn btn-primary dropdown-toggle btr 
data-toggle="dropdown"> 
原始 <span class="caret"></span> 

«/button» 

«ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 

</ul> 

</div> 
<div class="btn-group"> 

<button type="button" class="btn btn-success dropdown-toggle btr 
data-toggle="dropdown"> 
成 功 <span class="caret"></span> 

</button> 

<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 


</ul> 
</div> 


</body> 
</html> 


ad | i 
结果 如 下 所 示 : 








按钮 上 拉 菜 单 


菜单 也 可 以 往 上 拉 伸 的 ， 只 需要 简单 地 向 父 .btn-group 容器 添加 .dropup 即 可 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 上 拉 菜 单 </tit1le> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="row" style="margin-left:50px; margin-top:200px"> 
<div class="btn-group dropup"> 
<button type="button" class="btn btn-default dropdown-toggle' 
data-toggle="dropdown"> 
默认 «span class="Ccaret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div> 
<div class="btn-group dropup"> 
<button type="button" class="btn btn-primary dropdown-toggle' 
data-toggle="dropdown"> 
原始 «span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div> 
</div> 


</body> 
</html> 





结果 如 下 所 示 : 


W3School 前 端 教程 合 
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分 离 的 链接 
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Bootstrap 输入 框 组 


本 章 将 讲解 Bootstrap 支持 的 另 一 个 特性 ， 输 入 框 组 。 输 入 框 组 扩展 自 表单 控件 。 
使 用 输入 框 组 ， 您 可 以 很 容易 地 向 基于 文本 的 输入 框 添 加 作为 前 级 和 后 级 的 文本 或 
按钮 。 
通过 向 输入 域 添加 前 级 和 后 级 的 内 容 ， 您 可 以 向 用 户 输入 添加 公共 的 元 素 。 例 如 ， 
您 可 以 添加 美元 符号 ， 或 者 在 Twitter 用 户 名 前 添加 @， 或 者 上 应 用 程序 接口 所 需要 
的 其 他 公共 的 元 素 。 
向 .form-control 添加 前 级 或 后 级 元 素 的 步骤 如 下 : 
e 把 前 级 后 后 级 元 素 放 在 一 个 带 有 class .input-group 的 «div» 中 。 
e 接着 ， 在 相同 的 <div> 内 ， 在 class 为 .input-group-addon 的 <span> 内 放 
置 额外 的 内 容 。 
e 把 该 <span> 放置 在 <input> 元 素 的 前 面 或 者 后 面 。 
为 了 保持 跨 浏 览 器 的 兼容 性 ， 请 避免 使 用 <select> 元 素 ， 因 为 它们 在 
WebKit 浏览 器 中 不 能 完全 泻 染 出 效果 。 也 不 要 直接 向 表单 组 应 用 输入 框 组 的 
class， 输 入 框 组 是 一 个 孤立 的 组 件 。 


基本 的 输入 框 组 


下 面 的 实例 演示 了 基本 的 输入 框 组 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 基本 的 输入 框 组 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
«div class="input-group"> 
<span class="input-group-addon">@</span> 
<input type="text" class="form-control" placeholder="twitt 
</div> 
<br> 


«div class="input-group"> 
<input type="text" class="form-control"> 
«span class="input-group-addon">.00</span> 

</div> 

<br> 

«div class="input-group"> 
<span class="input-group-addon">$</span> 
<input type="text" class="form-control"> 
«span class="input-group-addon">.00</span> 





</div> 
</form> 
</div> 
</body> 
</html> 
E E) 
结果 如 下 所 示 : 
@ 
00 
$ 00 


输入 框 组 的 大 小 


您 可 以 通过 向 .input-group 添加 相对 表单 大 小 的 class (比如 .input-group-lg、 
input-group-sm, input-group-xs) 来 改变 输入 框 组 的 大 小 。 输 入 框 中 的 内 容 会 
自动 调整 大 小 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 输入 框 组 的 大 小 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="input-group input-group-lg"> 
<span class="input-group-addon">@</span> 
<input type="text" class="form-control" placeholder="Twitt 
</div><br> 


«div class="input-group"> 

<span class="input-group-addon">@</span> 

<input type="text" class="form-control" placeholder="Twitt 
</div><br> 


<div class="input-group input-group-sm"> 
<span class="input-group-addon">@</span> 
<input type="text" class="form-control" placeholder="Twitt 
</div> 
</form> 
</div> 


</body> 
</html> 


CS SSeS Se 
结果 如 下 所 示 : 





@ 


复 选 框 和 单 选 插件 


您 可 以 把 复 选 框 和 单 选 插件 作为 输入 框 组 的 前 级 或 者 后 级 元 素 ， 如 下 面 的 实例 所 


小 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 输入 框 组 的 复 选 框 和 单 选 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div style="padding: 100px 100px 10px;"> 
«form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
«div class="input-group"> 
<span class="input-group-addon"> 
<input type="checkbox"> 


</span> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 


</div><!-- /.col-lg-6 --><br> 
<div class="col-lg-6"> 
«div class="input-group"> 
<span class="input-group-addon"> 
<input type="radio"> 


</span> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 
</div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 
</form> 
</div> 
</body> 
</html> 


EA el 
结果 如 下 所 示 : 


按钮 插件 


您 也 可 以 把 按钮 作为 输入 框 组 的 前 级 或 者 后 级 元 素 ， 这 人 1 dci uu .input- 
group-addon class， 您 需要 使 用 class fe boues EE 是 必需 
的 ， 因 为 默认 的 浏览 器 样式 不 会 被 重 宇 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html> 
«html» 
«head» 
<title>Bootstrap 实例 - 输入 框 组 的 按钮 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
«div class="col-lg-6"> 
«div class="input-group"> 
<span class="input-group-btn"> 
<button class="btn btn-default" type="button"> 


Go! 
</button> 
</span> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 


</div><!-- /.col-lg-6 --><br> 
«div class="col-lg-6"> 
«div class="input-group"> 
<input type="text" class="form-control"> 
<span class="input-group-btn"> 
<button class="btn btn-default" type="button"> 


Go! 
</button> 
</span> 
</div><!-- /input-group --> 
</div><!-- /.col-1g-6 --> 
</div><!-- /.row --> 
</form> 

</div> 
</body> 
</html> 
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结果 如 下 所 示 : 


Go! 


带 有 下 拉 菜 单 的 按钮 


在 输入 框 组 中 添加 带 有 下 拉 菜 单 的 按钮 ， 只 需要 简单 地 在 一 个 .input-group-btn 
class PHRASE, WRAL BATH : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 输入 框 组 的 下 拉 菜 单 按钮 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
«div class="input -group"> 
«div class="input-group-btn"> 

<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown"> 
下 拉 菜 单 
<span class="caret"></span> 

</button> 

<ul class="dropdown-menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 


</ul> 
</div><!-- /btn-group --> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 


</div><!-- /.col-lg-6 --><br> 
«div class="col-lg-6"> 
«div class="input-group"> 
<input type="text" class="form-control"> 
«div class="input-group-btn"> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown"> 
下 拉 菜 单 


<span class="caret"></span> 
</button> 
<ul class="dropdown-menu pull-right"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div><!-- /btn-group --> 
</div><!-- /input-group --> 
</div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 
</form> 
</div> 


</body> 
</html> 


a -A 
结果 如 下 所 示 : 


下 拉 菜 单 < 


下 拉 菜单 


分 割 的 下 拉 菜 单 按钮 


在 输入 框 组 中 添加 带 有 下 拉 菜 单 的 分 割 按钮 ， 使 用 与 下 拉 菜 单 按钮 大 致 相同 的 样 
式 ， 但 是 对 下 拉 菜 单 添加 了 主要 的 功能 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 输入 框 组 中 分 割 的 下 拉 菜 单 按钮 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
«div class="input-group"> 
«div class="input-group-btn"> 


<button type="button" class="btn btn-default" 
tabindex="-1"> FHI» 
</button> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle-"dropdown" tabinc 
«span class="caret"></span> 
«span class="sr-only"> 切 换 下 拉 菜 单 </span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 


</ul> 
</div><!-- /btn-group --> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 


</div><!-- /.col-lg-6 --><br> 
«div class="col-lg-6"> 
«div class="input-group"> 
<input type="text" class="form-control"> 
«div class="input-group-btn"> 
<button type="button" class="btn btn-default" 
tabindex="-1"> FHR% 
</button> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle-"dropdown" tabinc 
«span class="caret"></span> 
«span class="sr-only"> 切 换 下 拉 菜 单 </span> 
</button> 
<ul class="dropdown-menu pull-right"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div><!-- /btn-group --> 
</div><!-- /input-group --> 
</div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 
</form> 
</div> 


</body> 
</html> 





结果 如 下 所 示 : 
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Bootstrap 导航 元 素 


本 章 我 们 将 讲解 Bootstrap 提供 的 用 于 定义 导航 元 素 的 一 些 选项 。 它 们 使 用 相同 的 
标记 和 基 类 .nav。Bootstrap 也 提供 了 一 个 用 于 共享 标记 和 状态 的 帮助 器 类 。 改 变 
修饰 的 class， 可 以 在 不 同 的 样式 间 进 行 切 换 。 


表格 导航 或 标签 


创建 一 个 标签 式 的 导航 菜单 : 


e 以 一 个 带 有 class .nav 的 无 序列 表 开 始 。 
e 添加 class .nav-tabs。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 标签 式 的 导航 菜单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 标 签 式 的 导航 菜单 </p> 
<ul class="nav nav-tabs"> 
«li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i0S</a></1li> 
<li><a href="#">VB.Net</a></1li> 
<li><a href="#">Java</a></1i> 
<li><a href="#">PHP</a></1i> 
</ul> 


</body> 
</html> 


000 -AA 
结果 如 下 所 示 : 
标签 式 的 导航 菜单 


Home SVN iOS VB.Net Java PHP 


AR SES BAT SH SKB 


FEAR AY pic E, Se NSB 


RBS bts SOMA BAT, AREA class .nav-pills 代替 .nav-tabs 即 
可 ， 其 他 的 步骤 与 上 面相 同 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - BAW AMEE S SE ¥</title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 基 本 的 胶 宫 式 导 航 菜单 </p> 
<ul class="nav nav-pills"> 
<li class="active"><a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i10S</a></1i> 
<li><a href="#">VB.Net</a></li> 
<li><a href="#">Java</a></1i> 
<li><a href="#">PHP</a></1i> 
</ul> 


</body> 
</html> 
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结果 如 下 所 示 : 





基本 的 胶囊 式 导 航 菜单 


BAYA E pe LE Žž 


您 可 以 在 使 用 class .nav、.nav-pills 的 同时 使 用 class .nav-stacked, RAEE 
HE & . 


下 面 的 实例 演示 了 这 点 : 


W3School BilmAtE Be 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - sz&jEB Zest Sin *</title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
«p» 3 iE BJ gi SE S, Se ise 4 </p> 
«ul class="nav nav-pills nav-stacked"> 
<li class="active"><a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
<li><a href="#">i0S</a></1i> 
<li><a href="#">VB.Net</a></1li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></1i> 
</ul> 


</body> 
</html> 


LLL A 
结果 如 下 所 示 : 
垂直 的 胶囊 式 导 航 菜 单 


VB.Net 
Java 


PHP 


FR Won] FF BA] Se RU 

您 可 以 在 屏幕 宽度 大 于 768px 时 ， 通 过 在 分 别 使 用 nav, .nav-tabs 或 
.hav、.nav-pills 的 同时 使 用 class .nav-justified， 让 标签 式 或 胶 圳 式 导 航 菜 单 与 
父 元 素 等 帘 。 在 更 小 的 屏幕 上 上， 导航 链接 会 堆 香 


下 面 的 实例 演示 了 这 点 : 
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<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 两 端 对 齐 的 导航 元 素 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 两 端 对 齐 的 导航 元 素 </p> 
<ul class="nav nav-pills nav-justified"> 
<li class="active"><a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i10S</a></1i> 
<li><a href="#">VB.Net</a></1li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></1i> 
</ul><br><br><br> 


<ul class="nav nav-tabs nav-justified"> 
<li class="active"><a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
<li><a href="#">i0S</a></1i> 
<li><a href="#">VB.Net</a></1li> 
<li><a href="#">Java</a></1i> 
<li><a href="#">PHP</a></1li> 
</ul> 


</body> 
</html> 
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结果 如 下 所 示 : 


两 端 对 齐 的 导航 元 素 





Home SVN iOS VB.Net Java PHP 


茶 用 链接 


对 每 个 .nav class， 如 果 添 加 了 .disabled class， 则 会 创建 一 个 灰色 的 链接 ， 同 时 
禁用 了 该 链接 的 hover 状态 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 导航 元 素 中 的 禁用 链接 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 导 航 元 素 中 的 禁用 链接 </p> 
<ul class="nav nav-pills"> 
<li class="active"><a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1li> 
«li class="disabled"><a href="#">i0S (禁用 链接 ) </a></li> 
<li><a href="#">VB.Net</a></li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></1i> 
</ul><br><br> 


<ul class="nav nav-tabs"> 
«li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i0S</a></1li> 
«li class="disabled"><a href="#">VB.Net (禁用 链接 ) «/a»«/li» 
<li><a href="#">Java</a></1i> 
<li><a href="#">PHP</a></1i> 
</ul> 


</body> 
</html> 
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结果 如 下 所 示 : 
导航 元 素 中 的 禁用 链接 





Home SVN = FHUSIZ VB.Net Java PHP 


Home SVN OS 本 FASE Java PHP 


该 class 只 会 改变 «a» 的 外 观 ， 不 会 改变 它 的 功能 。 在 这 里 ， 您 需要 使 用 自 
定义 的 JavaScript 来 禁用 链接 。 


下 拉 有 菜单 


导航 菜单 与 下 拉 菜 单 使 用 相似 的 语法 。 默 认 情 况 下 ， 列 表 项 的 锚 与 一 些 数据 属性 协 
同 合作 来 触发 带 有 .dropdown-menu class 的 无 序列 表 。 


带 有 下 拉 菜 单 的 标签 
向 标签 添加 下 拉 菜单 的 步骤 如 下 : 


e 以 一 个 带 有 class .nav 的 无 序列 表 开 始 。 
e。 添 加 class .nav-tabs。 


。 添加 带 有 .dropdown-menu class 的 无 序列 表 。 


<!DOCTYPE html> 
«html» 
«head» 
<title>Bootstrap 实例 - 带 有 下 拉 菜 单 的 标签 </tit1e> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 带 有 下 拉 菜 单 的 标签 </p> 
<ul class="nav nav-tabs"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i10S</a></1li> 
<li><a href="#">VB.Net</a></1li> 
<li class="dropdown"> 
«a class="dropdown-toggle" data-toggle-"dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">Swing</a></1i> 
<li><a href="#">jMeter</a></1i> 
<li><a href="#">EJB</a></1li> 
<li class="divider"></1li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</li> 
<li><a href="#">PHP</a></li> 
</ul> 


</body> 
</html> 
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结果 如 下 所 示 : 


带 有 下 拉 菜 单 的 标签 
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Swing 
jMeter 
EJB 


分 离 的 链接 


wA PARAIRE 


步骤 与 创建 带 有 下 拉 菜 单 的 标签 相同 ， 只 是 需要 把 .nav-tabs class 改 为 .nav- 
pills， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 带 有 下 拉 菜 单 的 胶 圳 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 带 有 下 拉 菜 单 的 胶 寺 </p> 
<ul class="nav nav-pills"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i10S</a></1li> 
<li><a href="#">VB.Net</a></1li> 
<li class="dropdown"> 
«a class="dropdown-toggle" data-toggle-"dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">Swing</a></1i> 
<li><a href="#">jMeter</a></1li> 
<li><a href="#">EJB</a></1li> 
<li class="divider"></1li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 





</ul> 
</li> 
<li><a href="#">PHP</a></li> 
</ul> 
</body> 
</html> 
了 — h 
结果 如 下 所 示 : 
TE Piste SPAS 
Home SVN iOS VB.Net Java + PHP 
Swing 
jMeter 
EJB 


分 离 的 链接 


Bootstrap 导航 栏 


导航 栏 是 一 个 很 好 的 功能 ， 是 Bootstrap 网 站 的 一 个 突出 特点 。 导 航 栏 是 响应 式 元 
组 件 就 ， 作 为 应 用 程序 或 网 站 的 导航 标题 。 导 航 栏 在 移动 设备 的 视图 中 是 折 和 县 的 ， 

随 着 可 用 视 口 宽度 的 增加 ， 导 航 栏 也 会 水 平展 开 。 在 Bootstrap 导航 栏 的 核心 中 ， 

导航 栏 包括 了 为 站 点 名 称 和 基本 的 导航 定义 样式 。 


默认 的 导航 栏 


创建 一 个 默认 的 导航 栏 的 步骤 如 下 : 


e 向 «nav» 标签 添加 class .navbar、.navbar-default。 

向 上 面 的 元 素 添加 role="navigation"， 有 助 于 增加 可 访问 性 。 

e 向 <div> 元 素 添加 一 个 标题 class .navbar-header， 内 部 包含 了 带 有 class 
navbar-brand 的 <a> 元 素 。 这 会 让 文本 看 起 来 更 大 一 号 。 

e 为 了 向 导航 栏 添 加 链接 ， 只 需要 简单 地 添加 带 有 class .nav、.navbar-nav 的 
无 序列 表 即 可 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 默认 的 导航 栏 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></1li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropd¢ 
Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1i> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1li> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 





结果 如 下 所 示 : 


W3Cschool iOS SVN Java ~ 


响应 式 的 导航 栏 


为 了 给 导航 栏 添加 响应 式 特性 ， 您 要 折 受 的 内 容 必须 包 应 在 带 有 classes 

.collapse, .navbar-collapse 的 <div> 中 。 折 受 起 来 的 导航 栏 实际 上 是 一 个 带 有 

class .navbar-toggle 及 两 个 data- 元 素 的 按钮 。 第 一 个 是 data-toggle， 用 于 告诉 

JavaScript 需要 对 按钮 做 什么 ， 第 二 个 是 data-target， 指 示 要 切换 到 哪 一 个 元 素 。 

三 个 带 有 class .icon-bar 的 <span> 创建 所 谓 的 汉堡 按钮 。 这 些 会 切换 为 .nav- 

collapse «div» 中 的 元 素 。 为 了 实现 以 上 这 些 功能 ， 您 必须 包含 Bootstrap {T 
(Collapse) 插件 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 响应 式 的 导航 栏 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar -header"> 
«button type="button" class="navbar-toggle" data-toggle="col- 
data-target="#example-navbar -collapse"> 
«span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#">W3Cschool</a> 
</div> 
<div class-"collapse navbar-collapse" id="example-navbar -collap: 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">1i10S</a></1li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropdc 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1li> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1i> 
<li class="divider"></1li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 


E : 
结果 如 下 所 示 : 





W3Cschool 


Java v 


导航 栏 中 的 表单 


导航 栏 中 的 表单 不 是 使 用 Bootstrap 表单 章节 中 所 讲 到 的 默认 的 class， 它 是 使 用 
.navbar-form class。 这 确保 了 表单 适当 的 垂直 对 齐 和 在 较 窒 的 视 口中 折 和 县 的 行 


为 
的 


下 


到 


。 使 用 对 章 方式 选项 〈 这 将 在 组 件 对 齐 方式 部 分 进行 详细 讲解 ) 来 决定 导航 栏 中 
内 容 放 置 在 哪里 。 


面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 导航 栏 中 的 表单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar -header"> 

<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 

<form class="navbar-form navbar-left" role="search"> 

<div class="form-group"> 
<input type="text" class="form-control" placeholder="Se 


</div> 
«button type="submit" class="btn btn-default">#23</button 
</form> 
</div> 
</nav> 
</body> 
</html> 











结果 如 下 所 示 : 


W3Cschool 提交 


导航 栏 中 的 按钮 


您 可 以 使 用 class .navbar-btn 向 不 在 «form» 中 的 «button» 元 素 添加 按钮 ， 按 钮 
在 导航 栏 上 垂直 居中 。.navbar-btn 可 被 使 用 在 <a> 和 «input» 元 素 上 。 


不 要 在 .navbar-nav 内 的 <a> 元 素 上 使 用 .navbar-btn， 因 为 它 不 是 标准 的 
button class。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 导航 栏 中 的 按钮 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar -header"> 
«a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<form class="navbar-form navbar-left" role="search"> 
<div class="form-group"> 
<input type="text" class="form-control" placeholder="Se 
</div> 
«button type="submit" class="btn btn-default"> 提 交 按 钮 </but 
</form> 
<button type="button" class="btn btn-default navbar-btn"> 
导航 栏 按钮 
</button> 
</div> 
</nav> 


</body> 
</html> 


Sc 人 
结果 如 下 所 示 : 





W3Cschool 提交 按钮 导航 栏 按钮 


导航 栏 中 的 文本 


如 果 需 要 在 导航 中 包含 文本 字符 串 ， 请 使 用 class .navbar-text。 这 通常 与 <p> 标 
签 一 起 使 用 ， 确 保 适 当 的 前 导 和 颜色 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 导航 栏 中 的 文本 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar -header"> 
«a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<p class="navbar-text">Signed in as Thomas</p> 
</div> 
</nav> 


</body> 
</html> 


4 LLL C Bib 
结果 如 下 所 示 : 


/3Cschool Signed in as Thomas 


非 导 航 链 接 


如 果 您 不 想 在 常规 的 导航 栏 导航 组 件 内 使 用 标准 的 链接 ， 那 么 请 使 用 class 
navbar-link 来 为 默认 的 和 倒转 的 导航 栏 选 项 添加 适当 的 颜色 ， 如 下 面 的 实例 所 
小 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 非 导 航 链接 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<p class="navbar-text navbar-right">Signed in as 
<a href="#" class="navbar -link">Thomas</a> 
</p> 
</div> 
</div> 


</body> 
</html> 


二 -= 
结果 如 下 所 示 : 


W3Cschool Signed in as Thomas 


组 件 对 齐 方式 


您 可 以 使 用 实用 工具 class .navbar-left 或 .navbar-right 向 左 或 向 右 对 齐 导航 栏 中 
的 导航 链接 、 表 单 、 按 钮 或 文本 这 些 组 件 。 这 两 个 class 都 会 在 指定 的 方向 上 添加 
CSS 浮动 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 组 件 对 齐 方式 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
«div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 


</div> 
<div> 
<! - -向 左 对 齐 --> 
<ul class="nav navbar-nav navbar-left"> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropdc 
Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1li> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
<form class="navbar-form navbar-left" role="search"> 
<button type="submit" class="btn btn-default"> 
FA Ar xt FF -提交 按钮 
</button> 
</form> 
<p class="navbar-text navbar-left">[A xt # -文本 </p> 
<!- -向 右 对 齐 - -> 
«ul class="nav navbar-nav navbar-right"> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropd¢ 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1li> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1i> 
«li class="divider"></1li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
<form class="navbar-form navbar-right" role="search"> 
<button type="submit" class="btn btn-default"> 
向 右 对 齐 -提交 按钮 


</button> 
</form> 
«p class-"navbar-text navbar-right"> 向 右 对 齐 -文本 </p> 
</div> 
</nav> 


</body> 


</html> 














mm 
结果 如 下 所 示 : 
W3Cschool Java ~ 向 左 对 齐 -提交 按钮 向 左 对 齐 -文本 向 右 对 齐 - 文 本 向 右 对 齐 - 提 交 按 钮 Java ~ 
ra 7x xr 
固定 到 顶部 


Bootstrap 导航 栏 可 以 动态 定位 。 默 认 情 况 下 ， 它 是 块 级 元 素 ， 它 是 基于 在 HTML 
中 放置 的 位 置 定位 的 。 通 过 一 些 帮 助 器 类 ， 您 可 以 把 它 放 置 在 页 面 的 顶部 或 者 底 
部 ， 或 者 您 可 以 让 它 成 为 随 着 页 面 一 起 滚动 的 静态 导航 栏 。 


如 果 您 想 要 让 导航 栏 固 定 在 页 面 的 顶部 ， 请 向 .navbar class 添加 class .navbar- 
fixed-top。 下 面 的 实例 演示 了 这 点 : 


为 了 防止 导航 栏 与 页 面 主体 中 的 其 他 内 容 的 顶部 相交 错 ， 请 向 <body> 标签 
添加 至 少 50 像素 的 内 边 距 (padding) ， 内 边 距 的 值 可 以 根据 您 的 需要 进行 设 


/ 


En 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 固定 到 顶部 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default navbar-fixed-top" role="navigatic 
<div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></1li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropd¢ 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1li> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1li> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 


[E E) 
结果 如 下 所 示 : 





W3Cschool iOS SVN Java ~ 


固定 到 底部 


如 果 您 想 要 让 导航 栏 固 定 在 页 面 的 底部 ， 请 向 navbar class 添加 class .navbar- 
fixed-bottom。 下面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 固定 到 底部 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«nav class-"navbar navbar-default navbar-fixed-bottom" role="navigé 
«div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">10S</a></1i> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropdc 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1i> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1li> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 


[i| E) 
结果 如 下 所 示 : 





W3Cschool iOS SVN Java a 


静态 的 顶部 


如 需 创建 能 随 着 页 面 一 起 滚动 的 导航 栏 ， 请 添加 .navbar-static-top class, 该 
class 不 要 求 向 <body> 添加 内 边 距 (padding) 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 静态 的 顶部 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default navbar-static-top" role="navigat: 
<div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></1li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropd¢ 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1li> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1li> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 





结果 如 下 所 示 : 


W3Cschool iOS SVN Java ~ 


倒置 的 导航 栏 


为 了 创建 一 个 带 有 黑色 背景 白色 文本 的 倒置 的 导航 栏 ， 只 需要 简单 地 向 .navbar 
class 添加 .navbar-inverse class 即 可 ， 如 下 面 的 实例 所 示 : 


为 了 防止 导航 栏 与 页 面 主 体 中 的 其 他 内 容 的 顶部 相交 错 ， 请 向 «body» 标签 
添加 至 少 50 像素 的 内 边 距 (padding) ， 内 边 距 的 值 可 以 根据 您 的 需要 进行 设 
En 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 倒置 的 导航 栏 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-inverse" role="navigation"> 
<div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></1li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropdc¢ 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1i> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1li> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 


AO ooo YO 
结果 如 下 所 示 : 








Bootstrap H@E Sint (Breadcrumbs) 


面包 屑 导航 (Breadcrumbs) 是 一 种 基于 网 站 层次 信息 的 显示 方式 。 以 博客 为 例 ， 
面包 层 导 航 可 以 显示 发 布 日 期 、 类 别 或 标签 。 它 们 表示 当前 页 面 在 导航 层次 结构 内 
的 位 置 。 


Bootstrap 中 的 面包 导 导 航 (Breadcrumbs) 是 一 个 简单 的 带 有 .breadcrumb class 
的 无 序列 表 。 分 隔 符 会 通过 CSS (bootstrap.min.css) 中 下 面 所 示 的 class 自动 被 
添加 : 


.breadcrumb > li + li:before { 
color: #CCCCCC; 
content: "/ "; 
padding: © 5px; 


下 面 的 实例 演示 了 面包 屑 导航 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - MAB$in</title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<ol class="breadcrumb"> 
<li><a href="#">Home</a></1i> 
<li><a href="#">2013</a></1li> 
<li class="active"> 十 一 月 </1i> 
</ol> 


</body> 
</html> 


bo -= AA 
结果 如 下 所 示 : 


Home / 2013 


Bootstrap 分 页 


本 章 将 讲解 Bootstrap 支持 的 分 页 特性 。 分 页 (Pagination) ， 是 一 种 无 序列 表 ， 
Bootstrap 像 处 理 其 他 界面 元 素 一 样 义理 分 页 。 


分 页 (Pagination) 


下 表 列 出 了 Bootstrap 提供 的 义理 分 页 的 class. 


.pagination 


添加 该 class 来 在 页 面 上 显示 分 页 。 


&lt;ul class="pagination"&gt; 
&lt;li&gt;&lt;a href="#"8gt;&laquo;&lt; /a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"8gt;1&1t;/a&gt;&lt;/li&gt; 


&lt;/ul&gt; 


.disabled, .active 


您 可 以 自 定义 链接 ， 通 过 使 用 disabled 来 定义 不 可 点 击 的 链接 ， 通 过 使 用 .active 
来 指示 当前 的 页 面 。 


&lt;ul class="pagination"&gt; 
&lt;li class="disabled"&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&li 
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;span class="sr-or 


&lt;/ul&gt; 
a| MEME SE 





.pagination-lg, .pagination-sm 


使 用 这 些 class 来 获取 不 同 大 小 的 项 。 


&lt;ul class="pagination pagination-lg"&gt;...&lt;/ul&gt; 
&lt;ul class-"pagination"&gt;...&lt;/ul&gt; 
&lt;ul class="pagination pagination-sm"&gt;...&lt;/ul&gt; 


默认 的 分 页 


下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .pagination 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 默认 的 分 页 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<ul class="pagination"> 
<li><a href="#">&laquo; </a></1i> 
<li><a href="#">1</a></1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
<li><a href="#">&raquo; </a></1i> 

</ul> 


</body> 
</html> 


:| 
结果 如 下 所 示 : 


分 页 的 状态 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .disabled、.active 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 分 页 的 状态 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<ul class="pagination"> 
<li><a href="#">&laquo; </a></1i> 
«li class="active"><a href="#">1</a></1i> 
«li class="disabled"><a href="#">2</a></1li> 
<li><a href="#">3</a></1li> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
<li><a href="#">&raquo; </a></1i> 
</ul> 


</body> 
</html> 


El uM :gd 
结果 如 下 所 示 : 


E] 


分 页 的 大 小 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .pagination-* 的 用 法 : 





<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 分 页 的 大 小 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«ul class-"pagination pagination-1lg"> 
<li><a href="#">&laquo; </a></1i> 
<li><a href="#">1</a></1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
<li><a href="#">&raquo; </a></1i> 

</ul><br> 

<ul class="pagination"> 
<li><a href="#">&laquo; </a></1i> 
<li><a href="#">1</a></1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1li> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
<li><a href="#">&raquo; </a></1i> 

</ul><br> 

<ul class="pagination pagination-sm"> 

<li><a href="#">&laquo; </a></1i> 
<li><a href="#">1</a></1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1li> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1li> 
<li><a href="#">&raquo; </a></1i> 

</ul> 


</body> 
</html> 


E RE 
结果 如 下 所 示 : 


翻 页 (Pager) 


如 果 您 想 要 创建 一 个 简单 的 分 页 链接 为 用 户 提供 导航 ， 可 通过 翻 页 来 实现 。 和 与 分 页 
链接 一 样 ， 翻 页 也 是 无 序列 表 。 黑 认 情 况 下 ， 链 接 是 居中 显示 。 下 表 列 出 了 
Bootstrap 义理 翻 页 的 class. 


.pager 


添加 该 class 来 获得 翻 页 链接 。 


&lt;ul class="pager"&gt; 
&lt;li&gt;&lt;a hrefz'"Z"&gt;Previous&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href="#"8gt;Next&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 


.previous, .next 


使 用 class .previous 把 链接 向 左 对 齐 ， 使 用 .next 把 链接 向 右 对 齐 。 


&lt;ul class="pager"&gt; 
&lt;li class="previous"&gt;&lt;a href="#"&gt;&larr; Older&lt;/a&t 
&lt;li class="next"&gt;&lt;a href="#"&gt;Newer &rarr;&lt; /a&gt;&- 
&lt;/ul&gt; 


Aoo o ëO 





.disabled 


添加 该 class 来 获得 一 个 颜色 变 淡 的 外 观 。 


&lt;ul class="pager"&gt; 
&lt;li class="previous disabled"&gt;&lt;a href="#"8gt;&larr; Olde 
&lt;li class="next"&gt;&lt;a href="#"&gt;Newer &rarr;&lt; /a&gt;&- 
&lt;/ul&gt; 


m Ă— p 
默认 的 翻 页 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .pager 的 用 法 : 








<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 默认 的 翻 页 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«ul class="pager"> 
<li><a href="#">Previous</a></1li> 
<li><a href="#">Next</a></1li> 
</ul> 


</body> 
</html> 


二 
结果 如 下 所 示 : 


Previous Next 


对 齐 的 链接 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .previous、.next 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 翻 页 中 对 齐 的 链接 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«ul class="pager"> 
<li class="previous"><a href="#">&larr; Older</a></1li> 
«li class="next"><a href="#">Newer &rarr;«/a»«/li» 
</ul> 


</body> 
</html> 


Rb =- A 
结果 如 下 所 示 : 


ider Newer 


翻 页 的 状态 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .disabled 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 翻 页 的 状态 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«ul class="pager"> 
«li class="previous disabled"><a href="#">&larr; Older</a></1li> 
«li class="next"><a href="#">Newer &rarr;«/a»«/li» 

</ul> 


</body> 
</html> 
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结果 如 下 所 示 : 


— Older Newer — 
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Bootstrap 标签 


本 章 将 讲解 Bootstrap 标签 。 标 签 可 用 于 计数 、 提 示 或 页 面 上 其 他 的 标记 显示 。 使 


用 class .label 来 显示 标签 ， 


<!DOCTYPE html» 
<html> 
<head> 


如 下 面 的 实例 所 示 : 


<title>Bootstrap 实例 - 标签 </title> 

«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 

«script src="/bootstrap/js/bootstrap.min.js"></script> 


«/head» 
<body> 


<hi>Example Heading 
<h2>Example Heading 
<h3>Example Heading 
<h4>Example Heading 


</body> 
</html> 


本 — 


结果 如 下 所 示 : 


<span 
<span 
<span 
<span 


class-"label label-default">Label</span>: 
class-"label label-default">Label</span>: 
class-"label label-default">Label</span>: 
class-"label label-default">Label</span>: 





Example Heading || 


Example Heading | 


Example Heading 
Example Heading 


您 可 以 使 用 修饰 的 class label-default, label-primary, label-success, label- 
info, label-warning, label-danger 来 改变 标签 的 外 观 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 标签 的 变 体 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«span class="label label-default"> 默 认 标 签 </span> 
<span class="label label-primary"> 主 要 标签 </span> 
<span class="label label-success"> 成 功 标 签 </span> 
«span class="label label-info"> 信 息 标签 </span> 

<span class="label label-warning"»€ Zi &«/span» 
«span class="label label-danger">fermiz &«/span» 


«/body» 
«/html» 


oL 
结果 如 下 所 示 : 


Bootstrap 徽章 (Badges) 


本 章 将 讲解 Bootstrap 徽章 (Badges) 。 徽 章 与 标签 相似 ， 主 要 的 区 别 在 于 徽章 的 
边 角 更 加 圆滑 。 


徽章 (Badges) RE Aui 如 需 使 用 徽章 ， 只 需要 把 
<span class="badge"> 添加 到 链接 、Bootstrap 导航 等 这 些 元 素 上 即 可 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 徽章 (Badges) </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<a href="#">Mailbox <span class="badge">50</span></a> 


</body> 
</html> 


af 
结果 如 下 所 示 : 

Mailbo» 

当 没 有 新 的 或 未 读 的 项 时 ， 通 过 CSS 的 :empty #472, WEARER, mn 
里 边 没 有 内 容 。 

激活 导航 状态 


您 可 以 在 激活 状态 的 胶囊 式 导 航 和 列表 导航 中 放置 徽章 。 通 过 使 用 <span 
class="badge"> 来 激活 链接 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 激活 导航 状态 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«h4» gi SEX Se LR ETC TA A</h4> 
«ul class-"nav nav-pills"> 
«li class="active"><a href="#"> ñn «span class="badge">42</span 
<li><a href="#"> 简 介 </a></1i> 
<li><a href="#"> 消 息 «span class="badge">3</span></a></1i> 
</ul> 
<br> 
<h4> 列 表 导 航 中 的 激活 状态 </h4> 
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> 
<li class="active"> 
<a href="#"> 
«span class="badge pull-right">42</span> 
首页 
</a> 
</li> 
<li><a href="#">%Jt</a></li> 
<li> 
<a href="#"> 
<span class-"badge pull-right">3</span> 


消息 
</a> 
</li> 
</ul> 
</body> 
</html> 





结果 如 下 所 示 : 
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胶 圳 式 导航 中 的 激活 状态 
er 
列表 导航 中 的 激活 状态 

自 
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消 息 e 
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Bootstrap 超大 屏幕 (Jumbotron) 


本 章 将 讲解 Bootstrap 支持 的 另 一 个 特性 ， 超 大 屏幕 (Jumbotron) 。 顾名思义 该 
组 件 可 以 增加 标题 的 大 小 ， 并 为 登陆 页 面 内 容 添 加 更 多 的 外 边 距 (margin) 。 使 用 
超大 屏幕 (Jumbotron) 的 步 又 如 下 : 


e 创建 一 个 带 有 class .jumbotron. 的 容器 <div>. 
e 除了 更 大 的 <h1>， 字 体 粗细 font-weight 被 减 为 200px。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 超大 屏幕 (Jumbotron) </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="container"> 
<div class="jumbotron"> 
<h1> 欢 迎 登 陆 页 面 ! </hi> 
<p> 这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 。</p> 
<p><a class="btn btn-primary btn-lg" role="button"> 
学 习 更 多 </a> 
</p> 
</div> 
</div> 


</body> 
</html> 


boo 车 "| 
结果 如 下 所 示 : 


欢迎 登陆 负面! 


这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 .- 


为 了 获得 占用 全 部 宽度 且 不 带 圆 角 的 超大 屏幕 ， 请 在 所 有 的 .container class 外 使 
用 .jumbotron class， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 超大 屏幕 (Jumbotron) </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="jumbotron"> 
«div class="container'"> 
<h1> 欢 迎 登 陆 页 面 ! </hi> 
<p> 这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 。</p> 
<p><a class="btn btn-primary btn-lg" role="button"> 
学 习 更 多 </a> 
</p> 
</div> 
</div> 


</body> 
</html> 


LEN ———— uu 
结果 如 下 所 示 : 
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欢迎 登陆 页 面 ! 
这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 .。 
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Bootstrap 页 面 标题 (Page Header) 


页 面 标题 (Page Header) 是 个 不 错 的 功能 ， 它 会 在 网 页 标题 四 周 添加 适当 的 间 
距 。 当 一 个 网 页 中 有 多 个 标题 且 每 个 标题 之 间 需 要 添加 一 定 的 间距 时 ， 页 面 标题 这 
个 功能 就 显得 特别 有 用 。 如 需 使 用 页 面 标 题 (Page Header) ， 请 把 您 的 标题 放置 
在 带 有 class .page-header 的 <div> 中 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 页 面 标题 </tit1le> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="page-header"> 
<h1> 页 面 标题 实例 
<small> 子 标题 </small> 
«/hi» 
«/div» 
<p> 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 


</body> 
</html> 


E) 
结果 如 下 所 示 : 





页 面 标题 实例 


这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 


Bootstrap 缩 略 


本 章 将 讲解 Bootstrap 缩 略 图 。 大 多 数 站 点 都 需要 在 网 格 中 布局 图 像 、 视 频 、 文 本 
等 。 Bootstrap 通过 缩 略 图 为 此 提供 了 一 种 简便 的 方式 。 使 用 Bootstrap 创建 缩 略图 
的 步骤 如 下 : 

e 在 图 像 周 围 添加 带 有 class .thumbnail 的 «a» 标签 。 

e 这 会 添加 四 个 像素 的 内 边 距 (padding) 和 一 个 灰色 的 边框 。 

e 当 饥 标 荐 停 在 图 像 上 时 ， 会 动画 显示 出 图 像 的 轮廓 。 


下 面 的 实例 演示 了 默认 的 缩 略 图 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 缩 略 图 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="row"> 
<div class="col-sm-6 col-md-3"> 
<a href="#" class="thumbnail"> 
<img src="img/kittens. jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</a> 
</div> 
<div class="col-sm-6 col-md-3"> 
<a href="#" class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略图 "> 
</a> 
</div> 
<div class="col-sm-6 col-md-3"> 
<a href="#" class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</a> 
</div> 
<div class="col-sm-6 col-md-3"> 
<a href="#" class="thumbnail"> 
<img src="img/kittens. jpg" 
alt=" 通 用 的 占 位 符 缩 略图 "> 
</a> 
</div> 
</div> 


</body> 
</html> 


EJ = ee | 
结果 如 下 所 示 : 








添加 E 定义 的 内 容 


现在 我 们 有 了 一 个 基本 的 缩 略图 ， 我 们 可 以 向 缩 略 图 添加 各 种 HTML 内 容 ， 比 如 标 
题 、 段 落 或 按钮 。 具 体 步骤 如 下 : 


e。 把 带 有 class .thumbnail 的 «a» 标签 改 为 <div>。 

@ 在 该 <div> A, 您 可 以 添加 任何 您 想 要 要 添加 的 东西 。 由 于 这 是 
们 可 以 使 用 默认 的 基于 span 的 命名 规则 来 调整 大 小 。 

e 如 果 您 想 要 给 多 个 图 像 进行 分 组 ， 请 把 它们 放置 在 一 个 无 序列 表 中 ， 且 每 个 列 
表 项 向 左 浮动 。 


下 面 的 实例 演示 了 这 点 : 


一 个 <div>， 我 


<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 实例 - 自 定义 缩 略图 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="row"> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略图 "> 
</div> 
<div class="caption"> 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
按钮 
</a> 
<a href="#" class="btn btn-default" role="button"> 
按钮 
</a> 
</p> 
</div> 
</div> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</div> 
<div class="caption"> 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 


<p> 


E 


结 


吉 果 如 下 所 示 : 


<a href="#" class="btn btn-primary" 
按钮 
</a> 
<a href="#" class="btn btn-default" 
按钮 
</a> 
</p> 
</div> 
</div> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</div> 
<div class="caption"> 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 
<p> 
<a href="#" class="btn btn-primary" 
按钮 
</a> 
<a href="#" class="btn btn-default" 
按钮 
</a> 
</p> 
</div> 
</div> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
«img src="img/kittens. jpg" 
alt=" 通 用 的 占 位 符 缩 略图 "> 
</div> 
<div class="caption"> 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 


<p> 
<a href="#" class="btn btn-primary" 
按钮 
</a> 
<a href="#" class="btn btn-default" 
按钮 
</a> 
</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


role="button"> 


role="button"> 


role="button"> 


role="button"> 


role="button"> 


role="button"> 
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Bootstrap 缩 略 图 1593 


Bootstrap 警告 (Alerts ) 


本 章 将 讲解 警告 (Alerts) 以 及 Bootstrap 所 提供 的 用 于 警告 的 class。 和 警告 


a C 种 定义 消息 样式 的 方式 。 它 们 为 典型 的 用 户 操作 提供 了 
上 下 文 信息 PI 


WDR UR 为 了 创建 一 个 内 联 的 可 取消 的 警告 框 ， 
请 使 用 警告 (Alerts) jQuery 插件 。 


您 可 以 通过 创建 一 个 <div>， 并 向 其 添加 一 个 .alert class 和 四 个 上 下 文 class (BD 
.alert-success, .alert-info, Er g .alert-danger) 之 一 ， 来 添加 一 个 
基本 的 警告 框 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - € (Alerts) </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 


<body> 

<div class="alert alert-success"> 成 功 ! 很 好 地 完成 了 提交 。</div> 
«div class="alert alert-info"> 信 息 ! 请 注意 这 个 信息 。</div> 
«div class="alert alert-warning">2& !; 不 要 提交 </div> 

<div class-"alert alert-danger"> 错 误 ! 请 进行 一 些 更 改 。 </div> 
</body> 

</html> 


Aoo SSS 


结果 如 下 所 示 : 


成 功 ! 很 好 地 完成 了 提交 。 


错误 ! 请 进行 一 些 更 改 。 


可 取消 的 警告 (Dismissal Alerts) 


创建 一 个 可 取消 的 警告 (Dismissal Alert) 步骤 如 下 : 


e 通过 创建 一 个 <div>， 并 向 其 添加 一 个 .alert class 和 四 个 上 下 文 class (BD 
.alert-success, .alert-info, .alert-warning, .alert-danger) 之 一 ， 来 添加 
一 个 基本 的 警告 框 。 


向 上 面 的 <div> class 添加 可 选 的 .alert-dismissable。 
e XJ 一 个 关闭 按钮 。 


下 面 的 实例 演示 了 这 点 


<!DOCTYPE html» 

«html» 

«head» 
<title>Bootstrap 实例 - 可 取消 的 警告 (Dismissal Alerts) </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


<div class="alert alert-success alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 


&times; 
</button> 
成 功 ! 很 好 地 完成 了 提交 。 
</div> 


<div class="alert alert-info alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 


&times; 
</button> 
信息 ! 请 注意 这 个 信息 。 
</div> 


<div class="alert alert-warning alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 


&times; 
</button> 
警告 ! 请 不 要 提交 。 
</div> 


<div class="alert alert-danger alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 
&times; 
</button> 
Six | 请 进行 一 些 更 改 。 
</div> 


</body> 
</html> 


| 
请 人 确保 使 用 带 有 data-dismiss-"alert" data 属性 的 «button» 元 素 。 
结果 如 下 所 示 : 


成 功 ! 很 好 地 完成 了 提交 


错误 ! 请 进行 一 些 更 改 。 


警告 (Alerts) 中 的 链接 


在 警告 (Alerts) 中 创建 链接 的 步骤 如 下 : 


e 通过 创建 一 个 <div>， 并 向 其 添加 一 个 .alert class 和 四 个 上 下 文 class (Bl 
.alert-success, .alert-info, .alert-warning. .alert-danger) 之 一 ， 来 添加 
一 个 基本 的 警告 框 。 

。 使 用 .alert-link 实体 类 来 快速 提供 带 有 匹配 颜色 的 链接 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 警告 (Alerts) 中 的 链接 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="alert alert-success"> 

«a href="#" class="alert-link">Agh ! 很 好 地 完成 了 提交 。</a> 
</div> 
<div class="alert alert-info"> 

«a href="#" class="alert-link"> 信 息 ! 请 注意 这 个 信息 。</a> 
</div> 
<div class="alert alert-warning"> 

«a href="#" class="alert-1Link"> 和 警告 
</div> 
<div class="alert alert-danger"> 

«a href="#" class="alert-link">#i% 1 请 进行 一 些 更 改 。</a> 
</div> 


请 不 要 提交 。</a> 


</body> 
</html> 


Rb -= AA 
结果 如 下 所 示 : 


信息 ! 请 注意 这 个 信息 。 


警告 ! 请 不 要 提交 。 


iix! 请 进行 一 些 更 改 。 


Bootstrap 进度 条 


本 章 将 讲解 Bootstrap 进度 条 。 在 本 教程 中 ， 您 将 看 到 如 何 使 用 Bootstrap 创建 加 
载 、 重 定向 或 动作 状态 的 进度 条 。 


Bootstrap 进度 条 使 用 CSS3 过 渡 和 动画 来 获得 该 效果 。lnternet Explorer 9 
及 之 前 的 版 本 和 旧版 的 Firefox 不 支持 该 特性 ，Opera 12 不 支持 动画 。 


默认 的 进度 条 


创建 一 个 基本 的 进度 条 的 步骤 如 下 : 


e 添加 一 个 带 有 class .progress 的 pe 

e HE, FLAN <div> 内 ， 添 加 一 个 带 有 class .progress-bar M2284 <div>. 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 属性 ， 例 如 style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 进度 条 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="progress"> 
<div class="progress-bar" role="progressbar" aria-valuenow="60" 
aria-valuemin="0" aria-valuemax="100" style="width: 40%; "> 
<span class="sr-only">40% 完成 </span> 
</div> 
</div> 


</body> 
</html> 


El MEN ———— IL 
结果 如 下 所 示 : 


创建 不 同样 式 的 进度 条 的 步 又 如 下 : 


e 添加 一 个 带 有 class .progress 的 «div», 

e 接着 ， 在 上 面 的 <div> 内 ， 添 加 一 个 带 有 class .progress-bar 和 class 
progress-bar-* 89228) «div», HA, ALA “success, info. warning, 
danger. 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 style BY, PIX style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 交替 的 进度 条 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="progress"> 
<div class-"progress-bar progress-bar-success" role="progressba) 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 90%;"> 
<span class="sr-only">90% 完成 (成功) </span> 
</div> 
</div> 
<div class="progress"> 
<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 30%;"> 
<span class="sr-only">30% 完成 (信息 ) </span> 
</div> 
</div> 
<div class="progress"> 
<div class-"progress-bar progress-bar-warning" role="progressba) 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20%; "> 
<span class="sr-only">20% 完成 (警告 ) </span> 
</div> 
</div> 
<div class="progress"> 
<div class="progress-bar progress-bar-danger" role="progressbar' 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 10%; "> 
<span class="sr-only">10% 完成 (危险 ) </span> 
</div> 
</div> 


</body> 
</html> 


" 一 一 一 一 
结果 如 下 所 示 : 





条 纹 的 进度 条 
创建 一 个 条 纹 的 进度 条 的 步骤 如 下 : 


e 添加 一 个 带 有 class .progress 和 .progress-striped 的 «div», 

e 接着 ， 在 上 面 的 <div> 内 ， 添 加 一 个 带 有 class .progress-bar 和 class 
progress-bar-* 89228) «div», HA, 可 以 是 *success、info、warning、 
danger. 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 style 属性 ， 例 如 style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 条 纹 的 进度 条 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="progress progress-striped"> 
<div class-"progress-bar progress-bar-success" role="progressba) 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 90%; "> 
<span class="sr-only">90% 完成 (成功) </span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 30%;"> 
<span class="sr-only">30% 完成 (信息 ) </span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class-"progress-bar progress-bar-warning" role="progressba) 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20%;"> 
<span class="sr-only">20% 完成 (警告) </span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-danger" role="progressbar' 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 10%; "> 
<span class="sr-only">10% 完成 (危险 ) </span> 
</div> 
</div> 


</body> 
</html> 
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结果 如 下 所 示 : 


动画 的 进度 条 
创建 一 个 动画 的 进度 条 的 步骤 如 下 : 


e 添加 一 个 带 有 class .progress 和 .progress-striped 的 <div>。 同 时 添加 
class ative. 

e HE, FLAN <div> 内 ， 添 加 一 个 带 有 class .progress-bar M2284 <div>. 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 style 属性 ， 例 如 style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


这 将 会 使 条 纹 具 有 从 右 向 左 的 运动 感 。 
让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 动画 的 进度 条 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="progress progress-striped active"> 
<div class="progress-bar progress-bar-success" role="progressba) 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 40%; "> 
<span class="sr-only">40% 完成 </span> 
</div> 
</div> 


</body> 
</html> 





结果 如 下 所 示 : 
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<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - ME&BgjsJE«/title» 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="progress"> 
<div class-"progress-bar progress-bar-success" role="progressba) 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 40%; "> 
<span class="sr-only">40% 完成 </span> 
</div> 
<div class-"progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 30%;"> 
<span class="sr-only">30% 完成 (信息 ) </span> 
</div> 
<div class-"progress-bar progress-bar-warning" role="progressba) 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20%; "> 
<span class="sr-only">20% 完成 (警告 ) </span> 
</div> 
</div> 


</body> 
</html> 
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结果 如 下 所 示 : 





Bootstrap 多 媒体 对 象 (Media Object) 


本 章 我 们 将 讲解 Bootstrap 中 的 多 媒体 对 象 (Media Object) 。 这 些 抽 象 的 对 象 祥 
式 用 于 创建 各 种 类 型 的 组 件 (比如 : 博客 评论 ) ， 我 们 可 以 在 组 件 中 使 用 图 文 混 
排 ， S E E 媒体 对 象 可 以 用 更 少 的 代码 来 实现 媒体 对 象 与 文 
字 的 混 排 。 


媒体 对 象 轻 量 标记 、 易 于 扩展 的 特性 是 通过 向 简单 的 标记 应 用 class 来 实现 的 。 你 
可 以 在 HTML 标签 中 添加 以 下 两 种 形式 来 设置 媒体 对 象 : 


e media : 该 class 人 允许 将 媒体 对 象 里 的 多 媒体 (BR. Min, Gm) 浮动 到 内 
容 区 块 的 左边 或 者 右边 。 

e .media-list : 如 果 你 需要 一 个 列表 ， 各 项 内 容 是 无 序列 表 的 一 部 分 ， 可 以 使 用 
该 class。 可 用 于 评论 列表 和 与 文章 列表 。 


让 我 们 来 看 看 下 面 这 个 有 关 默 认 的 媒体 对 象 media 的 实例 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 默认 的 媒体 对 象 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="media"> 

<a Class="pull-left" href="#"> 
<img class="media-object" src="img/64.jpg" 
alt=" 媒 体 对 象 "> 

</a> 

<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标 题 </h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
</div> 
</div> 


<div class="media"> 

«a class="pull-left" href="#"> 
«img class="media-object" src="img/64.jpg" 
alt=" 媒 体 对 象 "> 

</a> 

<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 


这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 


<div class="media"> 
<a class="pull-left" href="#"> 
<img class="media-object" src="img/64. jpg" 
alt=" 媒 体 对 象 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
</div> 
</div> 
</div> 
</div> 


</body> 
</html> 


图 





结果 如 下 所 示 : 


媒体 标题 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 


些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例 
文本 。 这 是 一 些 示例 文本 。 


媒体 标题 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 


些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 
文本 。 这 是 一 些 示例 文本 。 





媒体 标题 

这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 广 
本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 
例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
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让 我 们 来 看 看 下 面 这 个 有 关 媒 体 对 象 列 表 .media-list 的 实例 : 


<!DOCTYPE html» 

«html» 

«head» 
<title>Bootstrap 实例 - 媒体 对 象 列表 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 


<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<ul class="media-list"> 
<li class="media"> 
«a class-"pull-left" href="#"> 
«img class="media-object" src="img/64. jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
<p> 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。</p> 
<!-- 揪 套 的 媒体 对 象 --> 
<div class="media"> 
«a Class="pull-left" href="#"> 
<img class="media-object" src="img/64. jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 巾 套 的 媒体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
«1-- PREVA xt Be --> 
<div class="media"> 
«a Class="pull-left" href="#"> 
<img class="media-object" src="img/64. jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 巾 套 的 媒体 标题 </h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
</div> 
</div> 
</div> 


</div> 
<!-- PREM A tR - -> 
<div class="media"> 
«a Cclass="pull-left" href="#"> 
<img class="media-object" src="img/64. jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 


<div class="media-body"> 
«h4 class="media-heading">#rE Ay Wels tp BA</h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
</div> 
</div> 
</div> 


</li> 
<li class="media"> 
<a class="pull-right" href="#"> 
<img class="media-object" src="img/64.jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
</div> 
</li> 
</ul> 
</body> 
</html> 


E = -AA 


结果 如 下 所 示 : 
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媒体 标题 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 


EXER Pen 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 


示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 
本 。 这 是 一 些 示 例文 本 。 


UM 充 套 的 媒体 标题 

ME 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 
本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 

文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 


RENE eR 


示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 
本 。 这 是 一 些 示 例文 本 。 














媒体 标题 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
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Bootstrap 列表 组 


本 章 我 们 将 讲解 列表 组 。 列 表 组 件 用 于 以 列表 形式 呈现 复杂 的 和 自 定 义 的 内 容 。 创 
建 一 个 基本 的 列表 组 的 步骤 如 下 : 


e 向 元 素 <ul> 添加 class .list-group。 
e 向 <li> 添加 class .list-group-item. 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 基本 的 列表 组 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
<ul class="list-group"> 
<li class='"1ist-group-item"> 免 费 域名 注册 </1i> 
«li class="1ist-group-item"> 免 费 Window 空间 托管 </1i> 
«li class="1list-group-item"> 图 像 的 数量 </1i> 
<li class="list-group-item">24*7 支持 </1i> 
«li class="1list-group-item"> 每 年 更 新 成 本 </1i> 
</ul> 


</body> 
</html> 


二 = -LA 
结果 如 下 所 示 : 

免费 域名 注册 

免费 Window 空间 托管 

图 像 的 数量 

24*7 支持 


每 年 更 新 成 本 


向 列表 组 添加 徽章 


我 们 可 以 向 任意 的 列表 项 添加 徽章 组 件 ， 它 会 自动 定位 到 右边 。 只 需要 在 <li> TH 
中 添加 <span class="badge"> 即 可 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 向 列表 组 添加 徽章 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«ul class="list-group"> 

<li class="list-group-item"> 免 费 域名 注册 </1i> 
«li class="list-group-item"> 免 费 Window 空间 托管 </1i> 
«li class="1list-group-item"> 图 像 的 数量 </1i> 
<li class="list-group-item"> 

«span class="badge">#1</span> 

24*7 支持 
</li> 
«li class="1list-group-item"> 每 年 更 新 成 本 </1i> 
<li class="list-group-item"> 

<span class="badge">#1</span> 


折扣 优惠 
</li> 
</ul> 
</body> 
</html> 


LEN -A 
结果 如 下 所 示 : 

免费 域名 注册 

免费 Window 空间 托管 

图 像 的 数量 

24*7 支持 

每 年 更 新 成 本 

折扣 优惠 


向 列表 组 添加 链接 


\AI2Qnhan | En 
W3School RII 





er uiua 我 们 需要 使 用 «div» fX 
<ul> 元 素 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 向 列表 组 添加 链接 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 


<body> 

<a href="#" class="list-group-item active"> 
免费 域名 注册 

</a> 


<a href="#" class="list-group-item">24*7 支持 </a> 

<a href="#" class="list-group-item">& # Window 空间 托管 </a> 
«a href="#" class="lLlist-group-item"> 图 像 的 数量 </a> 

<a href="#" class="1list-group-item"> 每 年 更 新 成 本 </a> 


</body> 
</html> 


ay | 
结果 如 下 所 示 : 





24*7 支持 


免费 Window 空间 托管 
图 像 的 数量 
每 年 更 新 成 本 


癌 列 表 组 添加 目 定义 内 容 


我 们 可 以 向 上 面 已 添加 链接 的 列表 组 添加 任意 的 HTML. 内 容 。 下 面 的 实例 演示 了 


. 
VAN 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 向 列表 组 添加 自 定义 内 容 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


«script src="/scripts/jquery.min.js"></script> 

<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="list-group"> 
<a href="#" class="list-group-item active"> 
<h4 class="list-group-item-heading"> 
AT ua 
«/h4» 
</a> 
«a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
免费 域名 注册 
</h4> 
«p class="list-group-item-text"> 
您 将 通过 网 页 进行 免费 域名 注册 。 
</p> 
</a> 
«a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
24*7 支持 
</h4> 
«p class="list-group-item-text"> 
我 们 提供 24*7 支持 。 
</p> 
</a> 
</div> 
<div class="list-group"> 
<a href="#" class="list-group-item active"> 
<h4 class="list-group-item-heading"> 
商务 网 站 包 
</h4> 
</a> 
<a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
免费 域名 注册 
</h4> 
«p class="list-group-item-text"> 
您 将 通过 网 页 进行 免费 域名 注册 。 
</p> 
</a> 
«a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading">24*7 支持 </h4> 
<p class="1ist-group-item-text"> 我 们 提供 24*7 HH. </p> 
</a> 
</div> 


</body> 
</html> 
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结果 如 下 所 示 : 
入 门 网 站 包 


免费 域名 注册 

您 将 通过 网 页 进行 免费 域名 注册 。 
24*7 支持 
， 我们 提供 247 支持 。 











免费 域名 注册 
您 将 通过 网 页 进行 免费 域名 注册 。 


| 24*7 支持 
我们 提供 24°7 支持 。 
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Bootstrap 面板 (Panels) 


本 章 将 讲解 Bootstrap 面板 (Panels) 。 面 板 组 件 用 于 把 DOM 组 件 插入 到 一 个 盒 
子 中 。 创 建 一 个 基本 的 面板 ， 只 需要 向 <div> 元 素 添加 class .panel 和 class 
.panel-default 即 可 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 默认 的 面板 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="panel panel-default"> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 


</body> 
</html> 


Sp Bii 
结果 如 下 所 示 : 


面板 标题 


我 们 可 以 通过 以 下 两 种 方式 来 添加 面板 标题 : 


e 使 用 .panel-heading class 可 以 很 简单 地 向 面板 添加 标题 容器 。to easily add 
a heading container to your panel. 
e 使 用 带 有 .panel-title class 的 <h1>-<h6> 来 添加 预定 义 样式 的 标题 。 


下 面 的 实例 演示 了 这 两 种 方式 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 面板 标题 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="panel panel-default"> 
<div class="panel-heading"> 
不 带 title 的 面板 标题 
</div> 
<div class="panel-body"> 
面板 内 容 
</div> 
</div> 


<div class="panel panel-default"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 
带 有 title 的 面板 标题 
</h3> 
</div> 
<div class="panel-body"> 
面板 内 容 
</div> 
</div> 


</body> 
</html> 


C00 EI 
结果 如 下 所 示 : 
不 带 title 的 面板 标题 


面板 内 容 


75 title 的 面板 标题 


面板 内 容 


面板 脚注 


我 们 可 以 在 面板 中 添加 脚注 ， 只 需要 把 按钮 或 者 副 文本 放 在 带 有 class .panel- 
footer 的 <div> 中 即 可 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 面板 脚注 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="panel panel-default"> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
<div class="panel-footer"> 面 板 脚 注 </div> 
</div> 


</body> 
</html> 


| 
结果 如 下 所 示 : 


这 是 一 个 基本 的 面板 
面板 脚注 


面 版 脚注 不 会 从 带 语 境 色彩 的 面板 中 继承 颜色 和 边框 ， 因 为 它 不 是 前 景 中 的 
内 容 。 


带 语 境 色彩 的 面板 


使 用 语 境 状 态 类 panel-primary、panel-success、panel-info、panel-warning、 
panel-danger， 来 设置 带 语 境 色 彩 的 面板 ， 实 例如 下 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 带 语 境 色 彩 的 面板 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="panel panel-primary"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
<div class="panel panel-success"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
<div class="panel panel-warning"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
<div class="panel panel-danger"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 


</body> 
</html> 


ER AA 
结果 如 下 所 示 : 
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这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


带 表格 的 面板 


为 了 在 面板 中 创建 一 个 无 边框 的 表格 ， 我 们 可 以 在 面板 中 使 用 class .table。 假 设 
有 个 <div> 包含 .panel-body， 我 们 可 以 向 表格 的 顶部 添加 额外 的 边框 用 来 分 隔 。 
如 果 没 有 包含 .panel-body 的 <div>， 则 组 件 会 无 中 断 地 从 面板 头 部 移动 到 表格 。 


下 面 的 实例 演示 了 这 点 : 
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<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 带 表 格 的 面板 </tit1Le> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="panel panel-default"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
<table class="table"> 
<th> 产 品 </th><th> 价 格 </th> 
<tr><td> 产 品 A</td><td>200</td></tr> 
<tr><td> 产 品 B</td><td>400</td></tr> 
</table> 
</div> 
<div class="panel panel-default"> 
«div class="panel-heading"> 面 板 标题 </div> 
<table class="table"> 
<th> 产 品 </th><th> 价 格 «/th» 
<tr><td> 产 品 A</td><td>200</td></tr> 
<tr><td> 产 品 B</td><td>400</td></tr> 
</table> 
</div> 


</body> 
</html> 


i :| 
结果 如 下 所 示 : 


面板 标题 
这 是 一 个 基本 的 面板 


带 列表 组 的 面板 


我 们 可 以 在 任何 面板 中 包含 列表 组 ， 通 过 在 <div> 元 素 中 添加 .panel 和 .panel- 
default 类 来 创建 面板 ， 并 在 面板 中 添加 列表 组 。 您 可 以 从 列表 组 一 章 中 学 习 如 何 


创建 列表 组 。 


价格 
200 


400 


价格 
200 


400 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 带 列表 组 的 面板 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="panel panel-default"> 
<div class="panel-heading"> 面 板 标题 </div> 
«div class="panel-body"> 
<p> 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
</p> 
</div> 
«ul class="list-group"> 
«li class="list-group-item"> 免 费 域名 注册 </1i> 
«li class="list-group-item">%%# Window 空间 托管 </1i> 
<li class="1list-group-item"> 图 像 的 数量 </1i> 
<li class="list-group-item">24*7 支持 </1i> 
«li class="1list-group-item"> 每 年 更 新 成 本 </1i> 
</ul> 
</div> 


</body> 
</html> 


i ER" 
结果 如 下 所 示 : 
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面板 标题 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 


的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 


免费 域名 注册 

免费 Window 空间 托管 
图 像 的 数量 

24*7 支持 
每 年 更 新 成 本 
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Bootstrap Wells 


Well 是 一 种 会 引起 内 容 凹 陷 显 示 或 插图 效果 的 容器 <div>。 为 了 创建 Well， 只 需 
简单 地 把 内 容 放 在 带 有 class .well 的 <div> 中 即 可 。 下 面 的 实例 演示 了 一 个 默认 的 
Well : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 默认 的 Well</title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
«/head» 
<body> 


«div class="wel1"> 您 好 ， 我 在 Well Hm! </div> 


</body> 
</html> 


i -= 
结果 如 下 所 示 : 


您 好 , 我 在 Well 中 ! 


尺寸 大 小 


您 可 以 使 用 可 选 的 class well-lg or well-lg 来 改变 Well 的 尺寸 大 小 。 这 两 个 类 是 与 
well 类 结合 使 用 的 。 这 两 个 类 会 影响 内 边 距 (padding) ， 根 据 使 用 的 类 ，Well 会 
显示 得 更 大 或 者 更 小 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - Well 的 尺寸 大 小 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="well well-1g"> 您 好 ， 我 在 大 的 Well #! </div> 
<div class="well well-sm"> 您 好 ， 我 在 小 的 well 中 1</div> 


</body> 
</html> 


a 1 
结果 如 下 所 示 : 


您 好 ， 我 在 大 的 Well 中 ! 


您 好 ， 我 在 小 的 Well A! 


Bootstrap 插件 


Bootstrap 插件 概览 


在 前 面 布局 组 件 章节 中 所 讨论 到 的 组 件 仅仅 是 个 开始 。Bootstrap 自 带 12 种 
jQuery 插件 ， 扩 展 了 功能 ， 可 以 给 站 点 添加 更 多 的 互动 。 即 使 您 不 是 一 名 高 级 的 
JavaScript 开发 人 员 ， 您 也 可 以 着 手 学 习 Bootstrap 的 JavaScript 插件 。 利 用 
Bootstrap 数据 API (Bootstrap Data API) ， 大 部 分 的 插件 可 以 在 不 编写 任何 代码 
的 情况 被 触发 。 


站 点 引用 Bootstrap 插件 的 方式 有 两 种 : 


e 单独 引用 : 使 用 Bootstrap 的 个 别 的 “js 文件 。 一 些 插件 和 CSS 组 件 依赖 于 其 
他 插件 。 如 果 您 单独 引用 插件 ， 请 先 确 保 弄 请 这 些 插件 之 间 的 依赖 关系 。 
e 编译 (同时) 引用 : 使 用 bootstrap.js 或 压缩 版 的 bootstrap.min.js。 


不 要 尝试 同时 引用 这 两 个 文件 ， 因 为 bootstrap.js 和 bootstrap.min.js 都 
包含 了 所 有 的 插件 。 


所 有 的 插件 依赖 于 jQuery。 所 以 必须 在 插件 文件 之 前 引用 jQuery。 请 访问 
bower.json 查看 Bootstrap 当前 支持 的 jQuery 版 本 。 


data 属性 


e 你 可 以 仅仅 通过 data 属性 API 就 能 使 用 所 有 的 Bootstrap 插件 ， 无 需 写 一 行 
JavaScript 代码 。 这 是 Bootstrap 中 的 一 等 API， 也 应 该 是 你 的 首选 方式 。 

e 话 又 说 回来 ， 在 某 些 情况 下 可 能 需要 将 此 功能 关闭 。 因 此 ， 我 们 还 提供 了 关闭 
data 属性 API 的 方法 ， 即 解除 以 data-api 为 命名 空间 并 绑 定 在 文档 上 的 事 
件 。 就 像 下 面 这 样 : 


$(document).off('.data-api') 


。 如 需 关 闭 一 个 特定 的 插件 ， 只 需要 在 data-api 命名 空间 前 加 上 该 插件 的 名 称 作 
为 命名 空间 即 可 ， 如 下 所 示 : 


$(document).off('.alert.data-api') 


编程 方式 的 API 


我 们 为 所 有 Bootstrap 插件 提供 了 纯 JavaScript 方式 的 API。 所 有 公开 的 API 都 是 
Bu anms 并 且 返 回 其 所 操作 的 元 素 集合 GE: 和 jQuery 的 调用 形 
式 一 致 ) 。 例 如 : 


$(".btn.danger").button("toggle").addClass("fat") 


所 有 的 方法 都 可 以 接受 一 个 可 选 的 选项 对 象 作 为 参数 ， 或 者 一 个 代表 特定 方法 的 字 
符 串 ， 或 者 不 带 任何 参数 (这 种 情况 下 ， 将 会 初始 化 插件 为 默认 行为 ) ， 如 下 所 
7: 


// 初始 化 为 默认 行为 

$("4myModal").modal() 

// 初始 化 为 不 支持 键盘 
$("#myModal").modal({ keyboard: false }) 
// 初始 化 并 立即 调用 show 
$("4myModal").modal('show') 


每 个 插件 在 Constructor RELER T E i E 
数 : $.fn.popover.Constructor。 如 果 您 想 获 取 某 个 特定 插件 的 实例 ， 可 以 直接 通过 
页 面 元 素 获 取 : 


$('[rel=popover]').data('popover'). 


避免 命名 空间 冲突 


某 些 时 候 Bootstrap 插件 可 能 需要 与 其 他 UI 框架 一 起 使 用 。 在 这 种 情况 下 ， 可 能 会 
发 生命 名 空间 冲突 。 如 果 不 幸 发 生 了 这 种 情况 ， 你 可 以 通过 调用 插件 的 
.noConflict 方法 恢复 其 原始 值 。 


// 返回 $.fn.button 之 前 所 赋 的 值 

var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能 
$.fn.bootstrapBtn = bootstrapButton 


二 


事件 


9 为 大 多 数 插件 的 独特 行为 提供 了 自 定义 事件 。 一 般 来 说 ， 这 些 事件 有 两 
种 形式 : 
e 动词 不 定式 : 这 会 在 事件 开始 时 被 触发 。 例 如 ex: show. 动词 不 定式 事件 提供 
了 preventDefault 功能 。 这 使 得 在 事件 开始 前 可 以 停止 操作 的 执行 。 


$('4myModal').on('show.bs.modal', function (e) { 
// 阻止 模 态 框 的 显示 
if (!data) return e.preventDefault() 


;) 


e 过 去 分 词 形式 : 这 会 在 动作 执行 完毕 之 后 被 触发 。 例 如 ex: shown. 


Bootstrap 过 涛 效果 (Transition) 插件 


过 渡 效 果 (Transition) 插件 提供 了 简单 的 过 渡 效 果 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 除了 其 他 的 JS 文件 ， 您 还 需要 引 
用 transition.js。 或 者 ， 正 如 Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 
bootstrap.js 或 压缩 版 的 bootstrap.min.js。 


Transition.js 是 transitionEnd 事件 和 CSS 过 渡 效 果 模 拟 器 的 基本 帮助 器 类 。 它 被 
其 他 插件 用 来 检查 CSS 过 渡 效 果 支 持 ， 并 用 来 获取 过 渡 效 果 。 


使 用 案例 


过 渡 效 果 (Transition) 插件 的 使 用 案例 : 


e 具有 幻灯 片 或 淡 入 效果 的 模 态 对 话 框 。 具 体 实例 参见 Bootstrap HAN 
(Modal) 插件 。 

e 具有 淡出 效果 的 标签 页 。 具 体 实例 参见 Bootstrap 标签 页 (Tab) 插件 。 

e 具有 淡出 效果 的 警告 框 。 具体 实例 参见 Bootstrap 警告 框 (Alert) 插件 。 

e 具有 幻灯 片 效 果 的 轮 播 板 。 具 体 实 例 参 见 Bootstrap 轮 播 (Carousel) 插件 。 


Bootstrap 模 态 框 (Modal) 插件 


模 态 框 (Moda) 是 覆盖 在 父 窗 体 上 的 子 窗 体 。 通 常 ， 目 的 是 显示 来 自 一 个 单独 的 
源 的 内 容 ， 可 以 在 不 离开 父 窗 体 的 情况 下 有 一 些 互 动 。 子 窗 体 可 提供 信息 、 交 互 


o 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 modal.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 

用 法 
您 可 以 切换 模 态 框 (Modal) 插件 的 隐藏 内 容 : 
e 通过 data 属性 : 在 控制 器 元 素 〈 比 如 按钮 或 者 链接 ) 上 设置 属性 data- 
toggle="modal"， 同 时 设置 data-target="#identifier" 或 href="#identifier" 
来 指定 要 切换 的 特定 的 模 态 框 ( 带 有 id="identifier") 。 


。 通过 JavaScript : 使 用 这 种 技术 ， 您 可 以 通过 简单 的 一 行 JavaScript 来 调用 
带 有 id="identifier" 的 模 态 框 : 


$('#identifier').modal(options) 


实例 


一 个 静态 的 模 态 窗口 实例 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 模 态 框 (Modal) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h2> 创 建 模 态 框 (Modal) </h2> 

<!-- 按钮 触发 模 态 框 - -> 

«button class="btn btn-primary btn-lg" data-toggle="modal" 
data-target="#myModal"> 
开始 演示 模 态 框 

</button> 


<!-- 模 态 框 (Modal) --» 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
«div class="modal-header"> 
<button type="button" class="close" 
data-dismiss="modal" aria-hidden="true"> 
&times; 
</button> 
<h4 class="modal-title" id="myModalLabel"> 
模 态 框 (Modal) 标题 
</h4> 
</div> 
<div class="modal-body"> 
在 这 里 添加 一 些 文 本 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" 
data-dismiss-"modal"»X ijj 


«/button» 
«button type="button" class="btn btn-primary"> 
提交 更 改 
</button> 
</div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal --> 
</body> 
</html> 
sj RR 








结果 如 下 所 示 : 


J/A3Q e 
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模 态 框 ( Modal ) 标题 


在 这 里 添加 一 些 文 本 





代码 讲解 : 


e 使 用 模 态 窗口 ， 您 需要 有 某 种 触发 器 。 您 可 以 使 用 按钮 或 链接 。 这 里 我 们 使 用 
的 是 按钮 。 

e 如 果 您 仔细 查看 上 面 的 代码 ， 您 会 发 现在 <button> 标签 中 ，data- 
target="#myModal" 是 您 想 要 在 页 面 上 加 载 的 模 态 框 的 目标 。 您 可 以 在 页 面 
上 创建 多 个 模 态 框 ， 然 后 为 每 个 模 态 框 创建 不 同 的 触发 器 。 现 在 ， 很 明显 ， 您 
不 能 在 同一 时 间 加 载 多 个 模块 ， 但 您 可 以 在 页 面 上 创建 多 个 在 不 同时 间 进 行 加 


载 。 
e 在 模 态 框 中 需要 注意 两 点 : 
o 第 一 是 .modal， 用 来 把 <div> 的 内 容 识 别 为 模 态 框 。 
o 第 二 是 .fade class。 当 模 态 框 被 切换 时 ， 它 会 引起 内 容 淡 入 淡出 。 
e aria-labelledby="myModalLabel"， 该 属性 引用 模 态 框 的 标题 。 
。 属 性 aria-hidden="true" 用 于 保持 模 态 窗口 不 可 见 ， 直 到 触发 器 被 触发 为 止 
(比如 点 击 在 相关 的 按钮 上 ) 。 
。<div class="modal- header">, modal-header 是 为 模 态 窗口 的 头 部 定义 样式 的 
e class="close", close 是 一 个 CSS class， 用 于 为 模 态 窗口 的 关闭 按钮 设置 样 
式 。 
e data-dismiss="modal"， 是 一 个 自 定 义 的 HTML5 data 属性 。 在 这 里 它 被 用 
于 关闭 模 态 窗口 。 
e class="modal-body"， 是 Bootstrap CSS 的 一 个 CSS class， 用 于 为 模 态 窗 


口 的 主体 设置 样式 。 
e class="modal-footer"， 是 Bootstrap CSS 的 一 个 CSS class， 用 于 为 模 态 窗 
口 的 底部 设置 祥 式 。 
e data-toggle="modal"，HTML5 自 定义 的 data 属性 data-toggle 用 于 打开 模 
ABO. 
选项 
有 一 些 选 项 可 以 用 来 定制 模 态 窗口 (Modal Window) 它们 是 通过 


data mm JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选 


选项 名 称 


backdrop 


keyboard 


Show 


remote 


方法 


类 型 / 默 
认 值 


boolean 
或 
string 
‘static’ 
默认 
值 : 
true 


boolean 
默认 
4G: 
true 


boolean 
默认 
值 : 
true 


path ER 
认 值 : 
false 


Data & 
性 名 称 


data- 
backdrop 


data- 
keyboard 


data- 
Show 


data- 
remote 


指定 一 个 静态 的 背景 ， 


当 用 户 点 击 模 态 框 外 


当 按 下 escape 键 时 关闭 模 态 框 ， 设 置 为 fal 


当初 始 化 时 显示 模 态 框 。 


使 用 jQuery .load 方法 ， 为 模 态 框 的 主体 注 ， 
容 。 如 下 面 的 实例 所 


me: &lt;a data-toggle="modal" href=' 


下 面 是 一 些 可 与 modal() 一 起 使 用 的 有 用 的 方法 。 


zs 描述 实例 


Options: ms mm — | 
oe 接受 $('#identifier').modal({keyboard: false}) 


Toggle: 切换 PUTATIS, syst 
modal('toggle) #4 $('sidentifier').modal('toggle') 


Show: 打开 


modal('show') 模 太 $( '£identifier' ) .modal( 'show! ) 


Hide: 隐藏 


modal(‘hide’) 模 太 $( '#identifier ! ) .modal( 'hide' ) 


实例 
下 面 的 实例 演示 了 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 模 态 框 (Modal) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h2> 模 态 框 (Modal) 插件 方法 </h2> 
<!-- 按钮 触发 模 态 框 --> 


«button class="btn btn-primary btn-lg" data-toggle-"modal" data-tal 
开始 演示 模 态 框 


W3School 前 端 教程 合集 


</button> 


<!-- 模 态 框 (Modal) --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
«div class="modal-header'"> 
«button type="button" class="close" data-dismiss="moda- 
aria-hidden="true">x 
</button> 
<h4 class="modal-title" id="myModalLabel"> 
模 态 框 (Modal) 标题 
</h4> 
</div> 
<div class="modal-body"> 
按 下 ESC 按钮 退出 。 
</div> 
«div class="modal-footer"> 
<button type="button" class="btn btn-default" 
data-dismiss="modal">X ij] 
</button> 
«button type="button" class="btn btn-primary"> 
提交 更 改 
</button> 
</div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
<script> 
$(function () { $('#myModal').modal({ 
keyboard: true 


})}); 


</script> 


</body> 
</html> 


BJE EE) 





结果 如 下 所 示 : 


模 态 框 ( Modal ) 标题 


按 下 ESC 按钮 退出 。 





只 需要 点 击 ESC 键 ， 模 态 窗口 即 会 退出 。 
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事件 


下 表 列 出 了 模 态 框 中 要 用 到 事件 。 这 些 事件 可 在 函数 中 当 钩 子 使 用 。 


事件 描述 


在 调用 
Show 
方法 后 
触发 。 


当 模 态 
框 对 用 
户 可 见 
时 触发 
shown.bs.modal as 
CSS 
过 渡 效 


BX) e 


show.bs.modal $('#identifier'). 


$('#identifier'). 


hide.bs.modal 实例 方 $('#identifier'). 
法 时 触 
发 。 
当 模 态 
框 完全 

hidden.bs.modal ”对 用 户 $('#identifier'). 
隐藏 时 
Bb x. 


实例 
下 面 的 实例 演示 了 事件 的 用 法 : 


<!DOCTYPE html» 
<html> 
<head> 


实例 


on('show.bs.modal', func 


on('shown.bs.modal', fun 


on('hide.bs.modal', func 


on('hidden.bs.modal', fu 


<title>Bootstrap 实例 - 模 态 框 (Modal) 插件 事件 </title> 

<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 

<script src="/bootstrap/js/bootstrap.min.js"></script> 


</head> 
<body> 


<h2> 模 态 框 (Modal) 插件 事件 </h2> 


<!-- 按钮 触发 模 态 框 --> 

«button class="btn btn-primary btn-lg" data-toggle-"modal" data-tal 
开始 演示 模 态 框 

</button> 


<!-- 模 态 框 (Modal) --» 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
«div class="modal-header"> 
«button type="button" class="close" data-dismiss="moda- 
aria-hidden="true">x 
</button> 
<h4 class="modal-title" id="myModalLabel"> 
模 态 框 (Modal) 标题 
</h4> 
</div> 
<div class="modal-body"> 
点 击 关 闭 按钮 检查 事件 功能 。 
</div> 
«div class="modal-footer"> 
<button type="button" class="btn btn-default" 
data-dismiss="modal"> 


关闭 
</button> 
<button type="button" class="btn btn-primary"> 
是 交 更 改 
</button> 
</div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
<script> 
$(function () { $('#myModal').modal('hide')})}); 
</script> 
<script> 


$(function () { $('#myModal').on('hide.bs.modal', function () { 
alert(' 咖 ， 我 听 说 您 喜欢 模 态 框 ...');}) 
3); 


«/script» 


«/body» 
«/html» 


B] ———————————X————— — (E 
结果 如 下 所 示 : 
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正如 上 面 实例 所 示 ， 如 果 您 点 击 了 关闭 按钮 ， 即 hide 事件 ， 则 会 显示 一 个 警告 消 


=| 
^o 
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Bootstrap FH% (Dropdown) 插件 


Bootstrap 下 拉 菜 单 这 一 章 讲 解 了 下 拉 菜 单 ， 但 是 没有 涉及 到 交互 部 分 ， 本 章 将 具 
体 讲解 下 拉 菜 单 的 交互 。 使 用 下 拉 菜 单 (Dropdown) 插件 ， 您 可 以 向 任何 组 件 
(roan Sine, AR. MESH. Hes) 添加 下 拉 菜 单 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 dropdown.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


用 法 
您 可 以 切换 下 拉 菜 单 (Dropdown) 插件 的 隐藏 内 容 : 
e 通过 data 属性 : 向 链接 或 按钮 添加 data-toggle="dropdown" 来 切换 下 拉 菜 
单 ， 如 下 所 示 : 


&lt;div class="dropdown"&gt; 
&lt;a data-toggle="dropdown" href="#"&gt ;下拉 菜单 (Dropdown) fih 
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLé 


&lt;/ul&gt; 
&lt;/div&gt; 
E "I 


如 果 您 需要 保持 链接 完整 〈 在 浏览 器 不 启用 JavaScript 时 有 用 ) ， 请 使 用 
data-target 属性 代替 href="#" : 





&lt;div class="dropdown"&gt; 

&lt;a id-"dLabel" role="button" data-toggle-"dropdown" data-t 

下 拉 菜 单 (Dropdown) &lt;span class-"caret"&gt;&lt;/span&gt; 
&lt;/a&gt; 


&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLé 


&lt;/ul&gt; 
&lt;/div&gt; 


eee 
e 通过 JavaScript : 通过 JavaScript 调用 下 拉 菜 单 切换 ， 请 使 用 下 面 的 方法 : 





$('.dropdown-toggle').dropdown() 


实例 


在 导航 栏 内 
下 面 的 实例 演示 了 在 导航 栏 内 的 下 拉 菜 单 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 默认 的 导航 栏 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«nav class="navbar navbar-default" role="navigation"> 
«div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></1li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropd¢ 
Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1i> 
<li><a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report</a></1li> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 





结果 如 下 所 示 : 


W3Cschool iOS SVN Java ~ 


在 标签 页 内 
下 面 的 实例 演示 了 在 标签 页 内 的 下 拉 菜 单 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 带 有 下 拉 菜 单 的 标签 页 </tit1Le> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<p> 带 有 下 拉 菜 单 的 标签 页 </p> 
<ul class="nav nav-tabs"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">10S</a></1li> 
<li><a href="#">VB.Net</a></1li> 
<li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">Swing</a></1i> 
<li><a href="#">jMeter</a></1li> 
<li><a href="#">EJB</a></1li> 
<li class="divider"></1li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</li> 
<li><a href="#">PHP</a></1i> 
</ul> 


</body> 
</html> 


aaa ees 
结果 如 下 所 示 : 


带 有 下 拉 菜 单 的 标签 


Home SVN iOS VB.Net Java ~ PHP 


Swing 





jMeter 
EJB 


分 离 的 链接 


方法 
下 拉 菜 单 切换 有 一 个 简单 的 方法 用 来 显示 或 隐藏 下 拉 菜 单 。 
$().dropdown('toggle') 


实例 


下 面 的 实例 演示 了 下 拉 菜 单 (Dropdown) 插件 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 下 拉 菜 单 (Dropdown) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
«div class="navbar -header"> 
<a class="navbar-brand" href="#">w3Cschool</a> 
</div> 


<div id="myexample"> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></1li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle">Java <b 
class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a id="action-1" href="#"> 
jmeter</a> 
</li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
</div> 
<script> 
$(function(){ 
$(".dropdown-toggle").dropdown('toggle'); 
31); 


</script> 


</body> 
</html> 


e = rl 
结果 如 下 所 示 : 


W3School 前 端 教程 合 


W3Cschool iOS SVN  Java- 





jmeter 
EJB 
Jasper Report 


分 高 的 链接 


另 一 个 分 高 的 链接 
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Bootstrap 滚动 监听 (Scrollspy) 插件 


滚动 监听 (Scrollspy) 插件， 即 自动 更 新 导航 插件 ， 会 根据 滚动 条 的 位 置 自 动 更 新 
对 应 的 导航 目标 。 其 基本 的 实现 是 随 着 您 的 滚动 ， 基 于 滚动 条 的 位 置 向 导航 栏 添加 
.active class。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 scrollspy.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


用 法 
您 可 以 向 顶 部 导 航 添加 深 滚动 动 监 监听 行 为 : 


过 data 属性 : 向 您 想 要 监听 的 元 素 (通常 是 body) 添加 data- 
dé 'scroll"。 然 后 添加 带 有 Bo av ae es ID 或 class 的 
属性 data-target。 为 了 它 能 正常 工作 ， 您 必须 确保 页 面 主体 中 有 匹配 您 所 要 
监听 链接 的 ID 的 元 素 存 在 。 


&lt;body data-spy="scroll" data-target=".navbar-example"&gt; 


&lt;div class="navbar -example"&gt; 
&lt;ul class="nav nav-tabs"&gt; 


&lt;/ul&gt; 
&lt;/div&gt; 


&lt;/body&gt; 


e 通过 JavaScript : 您 可 以 通过 JavaScript 调用 滚动 监听 ， 选 取 要 监听 的 元 
素 ， 然 后 调用 .scrollspy() HX : 


$('body').scrollspy(( target: '.navbar-example' }) 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 滚动 监听 (Scrollspy) 插件 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 滚动 监听 (Scrollspy) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


<script src="/scripts/jquery.min.js"></script> 

<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«nav id="navbar-example" class="navbar navbar-default navbar-static 
«div class="navbar -header'"> 
«button class="navbar-toggle" type="button" data-toggle="col- 
data-target=".bs-js-navbar-scrollspy"> 
«span class="sr-only">t) + $fit</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
«span class="icon-bar "></span> 
</button> 
«a class-"navbar-brand" href="#"> 教 程 名 称 </a> 
</div> 
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
<ul class="nav navbar-nav"> 
<li><a href="#i0s">10S</a></1i> 
<li><a href="#svn">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" id-"navbarDropi" class="dropdown- toggle" 
data-toggle="dropdown">Java 
«b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDropi"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></1li> 
<li><a href="#ejb" tabindex="-1">ejb</a></1li> 
<li class="divider"></1li> 
<li><a href="#spring" tabindex="-1">spring</a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
<div data-spy="scroll" data-target="#navbar-example" data-offset="( 
style="height :200px;overflow:auto; position: relative;"> 
«h4 id="i0s">i0S</h4> 
<p>i0S 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首次 发 布 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 茶 果 电 
</p> 
<h4 id="svn">SVN</h4> 
<p>Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。Suk 
</p> 
<h4 id="jmeter">jMeter</h4> 
«p»jMeter 是 一 款 开源 的 测试 软件 。 它 是 100% ż Java 应 用 程序 ， 用 于 负载 和 性 
</p> 
<h4 id="ejb">EJB</h4> 
<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 用 程 
</p> 
<h4 id="Sspring">Spring</h4> 
<p>Spring 框架 是 一 个 开源 的 Java 平台 ， 为 快速 开发 功能 强大 的 Java 应 用 程序 


</p> 
<p>Spring 框架 最 初 是 由 Rod Johnson 编写 的 ， 在 2003 年 6 月 首次 发 布 于 / 
</p> 

</div> 


</body> 
</html> 


4 | — —cEm 

















结果 如 下 所 示 : 


iOS 
iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FERAT iPhone, iPod 


Touch 和 Apple TV. iOS 派生 自 OS X, 它们 共享 Darwin Bat. OS X 操作 系统 是 用 在 苹果 电脑 
+, iOS 是 苹果 的 移动 版 本 。 


SVN 


Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。Subversion H CollabNet 
公司 在 2000 年 创建 。 但 是 现在 它 已 经 发 展 为 Apache Software Foundation 的 一 个 项 目 ， 因 此 拥有 
丰 语 的 开发 人 员 和 用 户 社区 。 = 


选项 


N 


通过 data 属性 或 JavaScript 来 传递 。 下 表 列 出 了 这 些 选 项 


n 类 型 /默认 什 uc ous 描述 
number 默认 f Staaten, RA Wasa ta 
offset 值 : 10 data-offset Bs. 


方法 


.scrollspy('refresh") : 当 通 过 JavaScript 调用 scrollspy 方法 时 ， 您 需要 调用 
.refresh 方法 来 更 新 DOM。 这 在 DOM 的 任意 元 素 发 生变 更 ( 即 ， 您 添加 或 移 除 
了 某 些 元 素 ) 时 非常 有 用 。 下 面 是 使 用 该 方法 的 语法 。 


$('[data-spy="scroll"]').each(function () { 
var $spy = $(this).scrollspy('refresh' ) 
3) 


实例 
下 面 的 实例 演示 了 .scrollspy('refresh') 方法 的 用 法 : 


<!DOCTYPE html» 

<html> 

<head> 
<title>Bootstrap 实例 - 滚动 监听 (Scrollspy) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


«nav id="myScrollspy" class="navbar navbar-default navbar-static" | 
«div class="navbar -header'"> 
<button class="navbar-toggle" type="button" data-toggle="col- 
data-target=".bs-js-navbar-scrollspy"> 
<span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#"> 教 程 名 称 </a> 
</div> 
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#i0sS">10S</a></1i> 
<li><a href="#svn">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" id-"navbarDropi" class="dropdown- toggle" 
data-toggle="dropdown">Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDropi"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></1li> 
<li><a href="#ejb" tabindex="-1">ejb</a></1i> 
«li class="divider"></1i> 
<li><a href="#spring" tabindex="-1">spring</a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
style="height :200px;overflow:auto; position: relative;"> 
<div class="section"> 
<h4 id="i10s">10S<small><a href="#" onclick="removeSection(th: 
&times; 删除 该 部 分 </a></small> 
</h4> 
<p>i0S 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FAR: 


TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 荣 果 电 
</div> 
<div class="section"> 

«h4 id="svn">SVN<small></small></h4> 

<p>Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。 
</div> 
<div class="section"> 

<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSect: 

&times; 删除 该 部 分 </a></small> 

</h4> 

<p>jMeter 是 一 款 开 源 的 测试 软件 。 它 是 100% 纯 Java 应 用 程序 ， 用 于 负载 
</div> 
<div class="section"> 

<h4 id="ejb">EJB</h4> 

<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 . 
</div> 
<div class="section"> 

<h4 id="spring">Spring</h4> 

<p>Spring 框架 是 一 个 开源 的 Java 平台 ， 为 快速 开发 功能 强大 的 Java 应 用 : 

<p>Spring 框架 最 初 是 由 Rod Johnson 编写 的 ， 在 2003 年 6 月 首次 发 布 


</div> 

</div> 

<script type="text/javascript"> 
$(function(){ 


removeSection = function(e) { 
$(e).parents(".section").remove(); 
$('[data-spyz"scroll"]').each(function () { 

var $spy = $(this).scrollspy('refresh' ) 

3); 

} 

$("4myScrollspy").scrollspy(); 

3): 


«/script» 


«/body» 
«/html» 


E — B 
结果 如 下 所 示 : 





IOS x 删除 该 部 分 

iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 站 ;次 发 布 iPhone、iPod 

Touch 和 Apple TV. iOS 派生 自 OS X, 它们 共享 Darwin 基础 。OS X 操作 系统 是 用 在 苹果 电脑 

+, iOS 是 苹果 的 移动 版 本 。 

SVN 

Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。Subversion 由 CollabNet 
公司 在 2000 年 创建 。 但 是 现在 它 已 经 发 展 为 Apache Software Foundation 的 一 个 项 目 ， 因 此 拥有 
丰富 的 开发 人 员 和 用 户 社区 。 = 


事件 


下 表 列 出 了 滚动 监听 中 要 用 到 事件 。 这 些 事件 可 在 函数 中 当 钩 子 使 用 。 


事件 描述 


每 当 
= 
新 项 
目 被 
滚动 
activate.bs.scrollspy ”监听 $('#myScrollspy').on('activate.bs.scroll 


激活 


将 


实例 
下 面 的 实例 演示 了 activate.bs.scrollspy 事件 的 用 法 : 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 滚动 监听 (Scrollspy) 插件 事件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


«nav id-"myScrollspy" class="navbar navbar-default navbar-static" | 
«div class="navbar -header"> 
<button class="navbar-toggle" type="button" data-toggle="col- 
data-target=".bs-js-navbar-scrollspy"> 
«span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class-"navbar-brand" href="#"> 教 程 名 称 </a> 
</div> 
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#i0s">10S</a></1i> 
<li><a href="#svn">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" id-"navbarDropi" class="dropdown- toggle" 
data-toggle="dropdown"> 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDropi"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></1li> 
<li><a href="#ejb" tabindex="-1">ejb</a></1i> 
«li class="divider"></1i> 
<li><a href="#spring" tabindex="-1">spring</a></1i> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
style="height :200px;overflow:auto; position: relative;"> 
<div class="section"> 
<h4 id="i10s">10S<small><a href="#" onclick="removeSection(th: 
&times; 删除 该 部 分 </a></small> 
</h4> 
<p>i0S 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FAR: 
TV. iOS 派生 自 OS X， 它 们 共享 Darwin Hak, OS X 操作 系统 是 用 在 茶 果 电 
</div> 
<div class="section"> 
<h4 id="svn">SVN<small></small></h4> 
<p>Apache Subversion, 285% SVN， 是 一 款 开源 的 版 本 控制 系统 软件 。 
</div> 
<div class="section"> 
<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSect: 
&times; 删除 该 部 分 </a></small> 
</h4> 
<p>jMeter 是 一 款 开源 的 测试 软件 。 它 是 100% 纯 Java 应 用 程序 ， 用 于 负载 
</div> 
<div class="section"> 
<h4 id="ejb">EJB</h4> 
<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 


</div> 

<div class="section"> 
<h4 id="spring">Spring</h4> 
<p>Spring 框架 是 一 个 开源 的 Java 平台 ， 为 快速 开发 功能 强大 的 Java fW: 
<p>Spring 框架 最 初 是 由 Rod Johnson 编写 的 ， 在 2003 年 6 月 首次 发 布 


</div> 

</div> 

<script type="text/javascript"> 
$(function(){ 


removeSection = function(e) { 

$(e).parents(".section").remove(); 

$('[data-spyz"scroll"]').each(function () { 
var $spy = $(this).scrollspy('refresh' ) 


}); 


} 
$("4myScrollspy").scrollspy(); 
$('#myScrollspy').on('activate.bs.scrollspy', function () { 
var currentItem = $(".nav li.active > a").text(); 
$("#activeitem").html(" 目 前 您 正在 查看 - " + currentItem); 
}) 
3); 


«/script» 


«/body» 
«/html» 


a] __&§ 
结果 如 下 所 示 : 
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IOS x 删除 该 部 分 

iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首 ;次 发 布 Phone、iPod 

Touch 和 Apple TV. iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。OS X 操作 系统 是 用 在 苹果 电脑 

+, iOS 是 苹果 的 移动 版 本 。 

SVN 

Apache Subversion， 通 常 缩写 为 SVN, 是 一 款 开 源 的 版 本 皖 制 系统 软件 。Subversion 由 CollabNet 
公司 在 2000 年 创建 。 但 是 现在 它 已 经 发 展 为 Apache Software Foundation 的 一 个 项 目 ， 因 此 拥有 

丰 语 的 开发 人 员 和 用 户 社区 。 > 


Bootstrap 标签 页 (Tab) 插件 


标签 页 (Tab) 在 Bootstrap ae 一 章 中 介绍 过 。 通 过 结合 一 些 data 属性 ， 
可 以 轻松 地 创建 一 个 标签 页 界面 。 通过 这 
胶 吉 式 标 签 页 其 至 是 下 拉 菜 单 标 签 页 中 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 tab.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js. 


用 法 
您 可 以 通过 以 下 两 种 方式 启用 标签 页 : 


。 通 过 data 属性 : 您 需要 添加 data-toggle="tab" 或 data-toggle="pill" 到 锚 
文本 链接 中 。 


添加 nav 和 nav-tabs 类 到 ul 中 ， 将 会 占用 Bootstrap 标签 样式 ， 添 加 nav 
和 nav-pills 类 到 ul 中 ， 将 会 应 用 Bootstrap RERA. 
&lt;ul class="nav nav-tabs"&gt; 
&lt;li&gt;&lt;a href="#identifier" data-toggle="tab"&gt ; Home 
&lt;/ul&gt; 
E = B 





a 


e 通过 JavaScript : 您 可 以 使 用 Javscript 来 启用 标签 页 ， 如 下 所 示 : 
$('#myTab a').click(function (e) { 
e.preventDefault() 


$(this).tab('show' ) 
3) 


下 面 的 实例 演示 了 以 不 同 的 方式 来 激活 各 个 标签 页 : 


// 通过 名 称 选 取 标 签 页 
$('#myTab a[href="#profile"]').tab('show' ) 


// 选取 第 一 个 标签 页 
$('#myTab a:first').tab('show') 


// 选取 最 后 一 个 标签 页 
$('#myTab a:last').tab('show' ) 


// 选取 第 三 个 标签 页 (从 9 开始 索引 ) 
$('#myTab li:eq(2) a').tab('show' ) 


淡 和 淡出 效果 


如 果 需 要 为 标签 页 设置 淡 人 淡出 效果 ， 请 添加 fade 到 每 个 .tab-pane 后 面 。 第 一 
个 标签 页 必须 添加 .in 类 ， 以 便 淡 入 显示 初始 内 容 ， 如 下 面 实例 所 示 : 


<div class="tab-content"> 
«div class="tab-pane fade in active" id="home">...</div> 
«div class="tab-pane fade" id="svn">...</div> 
«div class="tab-pane fade" id="ios">...</div> 
«div class="tab-pane fade" id="java">...</div> 
</div> 


实例 


下 面 的 实例 演示 了 使 用 data 属性 的 标签 页 (Tab) 揪 件 及 其 淡 和 人 淡出 的 效果 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 标签 页 (Tab) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<ul id="myTab" class="nav nav-tabs"> 
<li class="active"> 
<a href="#home" data-toggle="tab"> 
W3Cschool Home 
</a> 
</li> 
<li><a href="#ios" data-toggle="tab">i0S</a></li> 
<li class="dropdown"> 
<a href="#" id="myTabDropi" class="dropdown-toggle" 
data-toggle="dropdown">Java 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu" role="menu" aria-labelledby="myTabl 
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmet 
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a: 
</ul> 
</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>W3CschooolX & X fee — T be Ets webi Riia, Aube Riek T Eh 
</div> 
<div class="tab-pane fade" id="ios"> 
<p>i0S 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FAR: 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin Bak, OS X 操作 系统 是 用 在 茶 果 电 
</div> 
«div class="tab-pane fade" id="jmeter"> 
«p»jMeter 是 一 款 开源 的 测试 软件 。 它 是 100% 24 Java 应 用 程序 ， 用 于 负载 
</div> 
<div class="tab-pane fade" id="ejb"> 
<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 
</p> 
</div> 
</div> 


</body> 
</html> 


«| =e 
结果 如 下 所 示 : 











W3C ^ 


3Cschool Home iOS Java v 


W3Cschoool 荣 鸟 教程 是 一 个 提供 最 新 的 web 技术 站 点 ， 本 站 免费 提供 了 建站 相关 的 技术 文档 ,帮助 广 
大 web 技 术 爱 好 者 快速 入 | 并 建立 自己 的 网 站 。 菜 乌 先 飞 早 信行 一 学 的 不 促 是 技术 ， 更 是 梦想 。 


方法 


.$().tab : 该 方法 可 以 激活 标签 页 元 素 和 内 容 容器 。 标 签 页 需要 用 一 个 data-target 
或 者 一 个 指向 DOM 中 容器 节点 的 href。 


<ul class="nav nav-tabs" id="myTab"> 
<li class="active"><a href="#identifier" data-toggle="tab">Home<, 


</ul> 
<div class="tab-content"> 
«div class="tab-pane active" id="home">...</div> 


<script> 
$(function () { 
$('#myTab a:last').tab('show') 
3) 


«/script» 


ee 


实例 


下 面 的 实例 演示 了 标签 页 (Tab) 插件 方法 .tab 的 用 法 。 在 本 实例 中 ， 第 二 个 标签 
页 iOS 是 激活 的 : 





<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 标签 页 (Tab) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<ul id="myTab" class="nav nav-tabs"> 
<li class="active"><a href="#home" data-toggle="tab"> 
W3Cschool Home</a> 
</li> 
<li><a href="#ios" data-toggle="tab">i10S</a></1i> 
<li class="dropdown"> 
<a href="#" id="myTabDropi" class="dropdown-toggle" 


data-toggle="dropdown">Java <b class="caret"></b> 
</a> 
«ul class="dropdown-menu" role="menu" aria-labelledby="myTabl 
<li><a href="#jmeter" tabindex="-1" data-toggle="tab"> 
jmeter</a> 
</1i> 
<li><a href="#ejb" tabindex="-1" data-toggle="tab"> 
ejb</a> 
</li> 
</ul> 
</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>W3Cschoool¥% & AiE T be Eis webi Riia, Aube Riek T E 
</div> 
<div class="tab-pane fade" id="ios"> 
<p>i0S 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FAR: 
TV. iOS 派生 自 OS X， 它 们 共享 Darwin Hak. OS X 操作 系统 是 用 在 茶 果 电 
</div> 
<div class="tab-pane fade" id="jmeter"> 
«p»jMeter 是 一 款 开 源 的 测试 软件 。 它 是 100% 4 Java 应 用 程序 ， 用 于 负载 
</div> 
<div class="tab-pane fade" id="ejb"> 
<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 
</p> 
</div> 
</div> 
<script> 
$(function () { 
$('#myTab li:eq(1) a').tab('show'); 
3); 


«/script» 


«/body» 
«/html» 





结果 如 下 所 示 : 


W3Cschool Home iOS Java ~v 


IOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FERAT iPhone, iPod Touch 
和 Apple TV. iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。OS X 操作 系统 是 用 在 苹果 电脑 上 ，iOS EH 


果 的 移动 版 本 。 


事件 


下 表 列 出 了 标签 页 (Tab) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 钧 子 使 


o 


事件 描述 


该 事件 在 标签 页 显示 
时 触发 ， 但 是 必须 在 
新 标签 页 被 显示 之 
前 。 分 别 使 用 
show.bs.tab event.target 和 $('a[data-toggle="tab"]').on('sh 
event.relatedTarget 
来 定位 到 激活 的 标签 
页 和 前 一 个 激活 的 标 
签 页 。 


该 事件 在 标签 页 显示 

时 触发 ， 但 是 必须 在 

某 个 标签 页 已 经 显示 

之 后 。 分 别 使 用 

shown.bs.tab event.target 和 $('a[data-toggle="tab"]').on('sh 

event.relatedTarget 

来 定位 到 激活 的 标签 

页 和 前 一 个 激活 的 标 

签 页 。 


实例 


下 面 的 实例 演示 了 标签 页 (Tab) 插件 事件 的 用 法 。 在 本 实例 中 ， 将 显示 当前 和 前 
一 个 访问 过 的 标签 页 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 标签 页 (Tab) 插件 事件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<hr> 

«p class="active-tab"><strong> 激 活 的 标签 页 </strong> : <span></span> 

<p class="previous-tab"><strong> 前 一 个 激活 的 标签 页 </strong> : <span> 
<hr> 
<ul id="myTab" class="nav nav-tabs"> 

<li class="active"><a href="#home" data-toggle="tab"> 

W3Cschool Home</a></1i> 
<li><a href="#ios" data-toggle="tab">i0S</a></1i> 
<li class="dropdown"> 


<a href="#" id="myTabDropi" class="dropdown-toggle" 
data-toggle="dropdown"> 
Java <b class="caret"></b></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabl 
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmet 
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a: 
</ul> 
</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>W3CschooolX SAtze—Metmaihwebiktinm, Aube Riek D Enh 
</div> 
«div class="tab-pane fade" id="i0s"> 
<p>i0S 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FAR: 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin Hak, OS X 操作 系统 是 用 在 茶 果 电 
</div> 
<div class-"tab-pane fade" id="jmeter"> 
<p>jMeter 是 一 款 开源 的 测试 软件 。 它 是 100% 4 Java 应 用 程序 ， 用 于 负载 
</div> 
<div class="tab-pane fade" id="ejb"> 
<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 . 
</p> 
</div> 
</div> 
<script> 
$(function(){ 
$('a[data-toggle-"tab"]').on('shown.bs.tab', function (e) { 
// 获取 已 激活 的 标签 页 的 名 称 
var activeTab = $(e.target).text(); 
// 获取 前 一 个 激活 的 标签 页 的 名 称 
var previousTab = $(e.relatedTarget).text(); 
$(".active-tab span").html(activeTab) ; 
$(".previous-tab span").html(previousTab); 


+); 
3); 


«/script» 


«/body» 
«/html» 


JM 
结果 如 下 所 示 : 





W3School 前 端 教程 合集 


激活 的 标签 页 : iOS 
前 一 个 激活 的 标签 页 : W3Cschool Home 


W3Cschool Home iOS Java + 


iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FEA iPhone, iPod Touch 


#0 Apple TV. iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。OSX 操 作 系统 是 用 在 苹果 电脑 上 ，iOS EH 
果 的 移动 版 本 。 


Bootstrap 标签 页 (Tab) 插件 1662 


Bootstrap 工具 提示 (Tooltip) 插件 


当 您 想 要 描述 一 个 链接 的 时 候 ， 工 具 提 示 (Tooltip) 就 显得 非常 有 用 。 工 具 提 示 
(Tooltip) 插件 是 受 Jason Frame 写 的 jQuery.tipsy 的 和 启发。 工具 提示 (Tooltip) 
插件 做 了 很 多 改进 ， 例 如 不 需要 依赖 图 像 ， 而 是 改 用 CSS 实现 动画 效果 ， 用 data 
属性 存储 标题 信息 。 
如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 tooltip.js。 或 者 ， 正 如 
Bootstrap 插件 概 洛 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap js 或 正 缩 版 的 
bootstrap.min.js. 


用 法 


工具 提示 (Tooltip) 插件 根据 需求 生成 内 容 和 标记 ， 上 默认 情况 下 是 把 工具 提示 
(tooltip) 放 在 它们 的 触发 元 素 后 面 。 您 可 以 有 以 下 两 种 方式 添加 工具 提示 
(tooltip) 


e 通过 data 属性 : 如 需 添加 一 个 工具 提示 (tooltip) , REE 一 个 锚 标 签 添加 
data-toggle="tooltip" 即 可 。 锚 的 tite 即 为 工具 提示 (tooltip) 的 文本 。 默 认 
情况 下 ， 插 件 把 工具 提示 (tooltip) 设置 在 顶部 。 


&lt;a href="#" data-toggle="tooltip" title="Example tooltip"&gt 
Ei _ 


e 通过 JavaScript : 通过 JavaScript 触发 工具 提示 (tooltip) 





$('#identifier').tooltip(options) 


工具 提示 (Tooltip) 插件 不 像 之 前 所 讨论 的 下 拉 菜 单 及 其 他 插件 那样 ， 它 不 
是 纯 CSS 插件 。 如 需 使 用 该 插件 ， 您 必须 使 用 jquery 激活 它 GER 
javascript) 。 使 用 下 面 的 脚本 来 启用 页 面 中 的 所 有 的 工具 提示 (tooltip) 


$(function () { $("[data-toggle='tooltip']").tooltip(); }); 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 工具 提示 (Tooltip) 插件 的 用 法 。 


«IDOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 工具 提示 (Tooltip) 插件 </title> 


<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


<h4> 工 具 提 示 (Tooltip) 插件 - 锚 </h4> 

这 是 一 个 <a href="#" class="tooltip-test" data-toggle="tooltip" 
tit1le=" 默 认 的 Tooltip"> 
默认 的 Tooltip 

</a>. 

这 是 一 个 <a href="#" class="tooltip-test" data-toggle="tooltip" 
data-placement="left" title=" ÆW] Tooltip"» 
左 侧 的 Tooltip 

</a>. 

这 是 一 个 <a href="#" data-toggle="tooltip" data-placement="top" 
tit1e=" 顶 部 的 Tooltip"> 
顶部 的 Tooltip 

</a>. 

这 是 一 个 <a href="#" data-toggle="tooltip" data-placement="bottom" 
title=" 底 部 的 Tooltip"> 
底部 的 Tooltip 

</a>. 

这 是 一 个 <a href="#" data-toggle="tooltip" data-placement="right" 
title=" 右 侧 的 Tooltip"> 
右 侧 的 Tooltip 

</a> 


<br> 


<h4> 工 具 提 示 (Tooltip) 插件 - 按钮 </h4> 

<button type="button" class="btn btn-default" data-toggle="tooltip' 
title=" 上 默认 的 Tooltip"> 
默认 的 Tooltip 

</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip' 
data-placement="left" title=" 左 侧 的 Tooltip"> 
左 侧 的 Tooltip 

</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip' 
data-placement="top" title=" 顶 部 的 Tooltip"> 
顶部 的 Tooltip 

«/button» 

«button type="button" class="btn btn-default" data-toggle="tooltip' 
data-placement="bottom" title=" 底 部 的 Tooltip"> 
底部 的 Tooltip 

</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip' 
data-placement="right" tit1le=" 右 侧 的 Tooltip"> 
右 侧 的 Tooltip 

«/button» 

«script» 
$(function () { $("[data-toggle-'tooltip']").tooltip(); }); 


</script> 


</body> 
</html> 


| 
结果 如 下 所 示 : 


TREND ue 
这 是 一 个 默认 的 Tooltip . 这 是 一 个 左 侧 的 Tooltip . 这 是 一 个 顶部 的 Tooltip . 这 是 一 个 底部 的 Tooltip . 这 是 一 个 右 侧 的 Tooltip 
工具 提示 (Tooltip ) 插件 - 按钮 


SAR Tooltip ^ 左 侧 的 Tooltip ”顶部 的 Tooltip — 底部 的 Tooltip 右 侧 的 Tooltip 


选项 


有 一 些 选项 是 通过 Bootstrap 数据 API (Bootstrap Data API) 添加 或 通过 
JavaScript 调用 的 。 下 表 列 出 了 这 些 选项 : 


选项 名 称 


animation 


html 


placement 


selector 


title 


trigger 


content 


delay 


container 


方法 


类 型 /默认 值 


boolean 默认 
值 : true 


boolean 默认 
值 : false 


string|function 
默认 值 : top 


string 默认 
值 : false 


string | 
function 默认 
值 :" 


string 默认 
值 : hover 
focus' 


string | 
function 默认 
值 :" 


number | 
object 默认 
值 :0 


string | false 
默认 值 : false 


Data 属性 
名 称 


data- 
animation 


data-html 


data- 
placement 


data- 
selector 


data-title 


data- 
trigger 


data- 
content 


data- 
delay 


data- 
container 


ip 


iE 


工具 提示 使 用 CSS 渐变 滤 镜 效果 。 


向 工具 提示 插入 HTML。 如 果 为 fals 
jQuery 的 text 方法 将 被 用 于 向 dom 
容 。 如 果 您 担心 XSS 攻击 ， 请 使 用 


规定 如 何 定位 工具 提示 (BD 
top|bottomlleft|right|jauto) 。 当 指定 
时 ， 会 动态 调整 工具 提示 。 例 如 ， 妇 
placement 是 "auto left", TREHET’ 
可 能 显示 在 左边 ， 在 情况 不 允许 的 悍 
才 会 显示 在 右边 。 


如 果 提 供 了 一 个 选择 器 ， 工 具 提 未 
委派 到 指定 的 目标 。 


如 果 未 指定 title 属性 ， 则 title zb sm 
的 title 值 。 


定义 如 何 触 发 工具 提示 : click| hov 
focus | manual, {KA LL SM B 
每 个 触发 器 之 间 用 空格 分 隔 。 


如 果 未 指定 data-content 属性 ， 则 人 
认 的 content 值 。 


延迟 显示 和 隐藏 工具 提示 的 毫秒 数 - 
manual 手动 触发 类 型 不 适用 。 如 果 : 
是 一 个 数字 ， 那 么 延迟 将 会 应 用 于 显 
藏 。 如 果 提 供 的 是 对 象 ， 结 构 如 下 表 
JK: delay:{ show: 500, hide: 


向 指定 元 素 追 加 工具 提示 。 实 例 : 
container: 'body' 


下 面 是 一 些 工具 提示 (Tooltip) 插件 中 有 用 的 方法 : 


方法 描述 实例 


inden $().tooltip(options) 

MENS Sdn d $('#element').tooltip('toggle' ) 
eu ene ndo. $('£element').tooltip('show') 
Quum em $('#element').tooltip('hide' ) 
phi PUR RARI $('Zelement').tooltip('destroy') 
实例 


下 面 的 实例 演示 了 工具 提示 (Tooltip 插件 方法 的 用 法 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 工具 提示 (Tooltip) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div style="padding: 100px 100px 10px;"> 
这 是 一 个 <a href="#" class="tooltip-show" data-toggle="tooltip" 
title="show">Tooltip 方法 show 
</a>. 


这 是 一 个 «a href="#" class="tooltip-hide" data-toggle="tooltip" 
data-placement="left" title="hide">Tooltip 方法 hide 
</a>. 


这 是 一 个 «a href="#" class="tooltip-destroy" data-toggle-"tooltip 
data-placement="top" title="destroy">Tooltip 方法 destroy 
</a>. 


这 是 一 个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" 
data-placement="bottom" title="toggle">Tooltip 方法 toggle 
</a>. 
<br><br><br><br><br><br> 
<p class="tooltip-options" > 
这 是 一 个 <a href="#" data-toggle="tooltip" title="<h2>'am Head 
</h2>">Tooltip 方法 options 
</a>. 
</p> 


<script> 
$( function 
$( function 


() { $('.tooltip-show').tooltip('show');}); 
() { $( 
$(function () { $( 
() t $( 
O { $( 


' . tooltip-hide').tooltip('hide');)); 

'. tooltip-destroy').tooltip('destroy');}); 
' , tooltip-toggle').tooltip('toggle');}); 
".tooltip-options a").tooltip({html : true 


$( function 
$( function 


+); 
</script> 
<div> 


</body> 
</html> 


BOU U 
结果 如 下 所 示 : 





这 是 一 个 Tooltip 方法 show . 这 是 一 个 Tooltip 方法 hide . 这 是 一 个 Tooltip 方法 destroy . 这 是 一 个 Tooltip 方法 toggle . 


‘am Header2 


这 是 一 个 Tooltip 方法 options . 





事件 


E Temm (Tooltip) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 画 数 中 当 钩 子 
用 。 


事件 描述 


当 调 用 
Show 
实例 方 

show.bs.tooltip 法 时 立 
即 触发 
该 事 
件 。 


当 工 具 
提示 对 
用 户 可 
见 时 触 
发 该 事 
shown.bs.tooltip — fF (将 
SER 
CSS 


BX) . 


实例 方 

hide.bs.tooltip 法 时 立 
即 触发 
该 事 
件 。 


当 工 具 
提示 对 
APT 
藏 时 触 
发 该 事 
hidden.bs.tooltip — fF (将 
SERE 


实例 


$('#myTooltip' ). 


$('#myTooltip'). 


$('#myTooltip'). 


$('#myTooltip'). 


实例 


on('show.bs.tooltip', fun 


on('shown.bs.tooltip', fu 


on('hide.bs.tooltip', fun 


onc shuddencbsxtoo T td post 


下 面 的 实例 演示 了 工具 提示 (Tooltip 插件 事件 的 用 法 。 
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<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 工具 提示 (Tooltip) 插件 事件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h4> 工 具 提示 (Tooltip) 插件 - #</h4> 

这 是 一 个 <a href="#" class="tooltip-show" data-toggle="tooltip" 
tit1le=" 默 认 的 Tooltip"> 上 默认 的 Tooltip 

</a>. 


<script> 

$(function () ( $('.tooltip-show').tooltip('show');]); 

$(function () ( $('.tooltip-show').on('show.bs.tooltip', function | 
alert("Alert message on show"); 


3)1); 


</script> 


</body> 
</html> 


加 == E 
结果 如 下 所 示 : 





Alert message on show 
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Bootstrap 弹出 框 (Popover) 插件 


弹出 框 (Popover) 与 工具 提示 (Tooltip) 类 似 ， 提 供 了 一 个 扩展 的 视图 。 如 需 激 
活 弹 出 框 ， 用 户 只 需 把 鼠标 基 停 在 元 素 上 即 可 。 漳 出 框 的 内 容 完全 可 使 用 
Bootstrap 数据 API (Bootstrap Data API) 来 填充 。 该 方法 依赖 于 工具 提示 
(tooltip) 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 popoverjs， 它 依赖 于 工具 
提示 (Tooltip) 插件 。 或 者 ， 正 如 Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 
bootstrap.js 或 压缩 版 的 bootstrap.min.js。 


用 法 


弹出 框 (Popover) 插件 根据 需求 生成 内 容 和 标记 ， 默 认 情 况 下 是 把 弹出 框 
i EE R 
popover 


。 通过 data 属性 : 如 需 添加 一 个 弹出 框 (popover) ， 只 需 向 一 个 锚 / 按 钮 标签 
添加 data-toggle="popover" 即 可 。 锚 的 title 即 为 弹出 框 (popover) 的 文 
本 。 默 认 情 况 下 ， 插 件 把 弹出 框 (popover) 设置 在 顶部 。 


&lt;a href="#" data-toggle-"popover" title="Example popover"&gt 
Th EHE E TR 
&lt;/a&gt; 


LN, US LU 
通过 JavaScript : 通过 JavaScript & A## WHE (popover) 


$('4identifier').popover(options) 


弹出 框 (Popover) 仓 的 下 拉 菜 单 及 其 他 插件 那样 ， 它 不 是 纯 
CSS 插件 。 如 需 使 用 该 插件 ， 您 必须 使 用 jquery 激活 它 GzHXjavascript) 。 使 用 
TRUE Eum NS NLE (popover) : 


$(function () { $("[data-toggle='popover']").popover(); }); 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 弹出 框 (Popover) 插件 的 用 法 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 弹出 框 (Popover) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="container" style="padding: 100px 50px 10px;" > 

«button type="button" class="btn btn-default" title="Popover til 
data-container="body" data-toggle="popover" data-placement="- 
data-content=" 左 侧 的 Popover 中 的 一 些 内 容 "> 
左 侧 的 Popover 

</button> 

«button type="button" class="btn btn-primary" title="Popover til 
data-container="body" data-toggle="popover" data-placement="1 
data-content=" 顶 部 的 Popover 中 的 一 些 内 容 "> 
顶部 的 Popover 

«/button» 

«button type="button" class="btn btn-success" title="Popover til 
data-container="body" data-toggle-"popover" data-placement="t 
data-content=" 底 部 的 Popover 中 的 一 些 内 容 "> 
底部 的 Popover 

«/button» 

«button type="button" class="btn btn-warning" title="Popover til 
data-container="body" data-toggle-"popover" data-placement="1 
data-content="4 m8) Popover 中 的 一 些 内 容 "> 
右 侧 的 Popover 

</button> 

</div> 


<script>$(function () 
{ $("[data-toggle='popover']").popover(); 
3); 


«/script» 
«/div» 


«/body» 
«/html» 


Ej = E 
结果 如 下 所 示 : 





Popover title 


左 侧 的 Popover 中 的 一 些 内 容 


选项 


有 一 


Popovertitle 


顶部 的 Popover 中 的 一 些 内 容 


左 侧 的 Popover 底部 的 Popover 右 侧 的 Popover 


Popovertitle 


Popover title 


右 侧 的 Popover 中 的 一 些 内容 


底部 的 Popover 中 的 一 些 内 容 


JavaScript 调用 的 。 下 表 列 出 了 这 些 选项 : 


选项 名 称 


animation 


html 


placement 


selector 


title 


trigger 


delay 


container 


类 型 /默认 值 


boolean 默认 
值 : true 


boolean 默认 
值 : false 


string|function 
默认 值 : top 


string 默认 
值 : false 


string | 
function 默认 
值 ! "n 


string 默认 
fà : 'hover 
focus' 


number | 
object 默认 
值 : 0 


string | false 
默认 值 : false 


Data 属性 
名 称 


data- 
animation 


data-html 


data- 
placement 


data- 
selector 


data-title 


data- 
trigger 


data- 
delay 


data- 
container 


些 选项 是 通过 Bootstrap 数据 API (Bootstrap Data API) 添加 或 通 


描述 


向 弹出 框 应 用 CSS 褪色 过 渡 效果 。 

向 弹出 框 插入 HTML。 如 果 为 false, 

的 text 方法 将 被 用 于 向 dom 
。 如 果 您 担心 XSS 攻击 ， 请 使 用 


规定 如 何 定 位 弹出 框 ( 即 
top|bottomlleft|right|jauto) 。 当 指定 


时 ， 会 动态 调整 弹出 框 。 例 如 ， i5 
placement Æ "auto left", 2€ HUE RE 
能 显示 在 左边 ， 在 情况 不 允许 的 情 次 
会 显示 在 右边 。 

如 果 提 供 了 一 个 选择 器 ， 弹 出 框 对 务 
派 到 指定 的 目标 。 

如 果 未 指定 title 属性 ， 则 title 选项 
的 title 值 。 

定义 如 何 触发 弹出 框 : click| hover 
focus | manual, {KALA Si 
每 个 触发 器 之 间 用 空格 分 隔 。 


延迟 显示 和 隐藏 弹出 框 的 毫秒 数 - 
manual 手动 触发 类 型 不 适用 。 如 果 : 
是 一 个 数字 ， 那 么 延迟 将 会 应 用 于 显 
藏 。 如 果 提 供 的 是 对 象 ， 结 构 如 下 月 
4A: delay:{ show: 500, hide: 


向 指定 元 素 追 加 弹出 框 。 实 例 : 
'body' 


方法 


下 面 是 一 些 弹 出 框 (Popover) 插件 中 有 用 的 方法 : 


A 描述 实例 
"e 向 元 素 集合 
Peron. 附加 弹出 框  $() .popover (options) 


.popover(options) AR 


切换 显示 / 

Toggle: es ; : ; 
i ’ 隐藏 元 素 的 $('#element').popover('toggle') 

.popover('toggle") m HE. 


Show: 显示 元 素 的 mem " S 
.popover('show") ae HIKE, $('#element').popover('show' ) 
Hide: 隐藏 元 素 的 | mn 
" #element'). h 
.popover('hide") 弹出 框 。 $('#element').popover('hide') 
. 隐藏 并 销毁 
aad 元 素 的 弹出 $('#element').popover('destroy') 


.popover('destroy') 框 


实例 
下 面 的 实例 演示 了 漳 出 框 (Popover) 插件 的 方法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 弹出 框 (Popover) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="container" style="padding: 100px 50px 10px;" > 

«button type="button" class="btn btn-default popover-show" 
title-"Popover title" data-container="body" 
data-toggle-"popover" data-placement="left" 
data-content=" 左 侧 的 Popover 中 的 一 些 内 容 — show 方法 "> 
左 侧 的 Popover 

</button> 

«button type="button" class="btn btn-primary popover-hide" 
title="Popover title" data-container="body" 
data-toggle="popover" data-placement="top" 
data-content=" 顶 部 的 Popover 中 的 一 些 内 容 一 hide 方法 "> 
顶部 的 Popover 


</button> 
«button type="button" class="btn btn-success popover-destroy" 
title="Popover title" data-container="body" 
data-toggle-"popover" data-placement="bottom" 
data-content=" 底 部 的 Popover 中 的 一 些 内 容 一 destroy 方法 "> 
底部 的 Popover 
</button> 
«button type="button" class="btn btn-warning popover-toggle" 
title-"Popover title" data-container="body" 
data-toggle-"popover" data-placement="right" 
data-content=" 右 侧 的 Popover 中 的 一 些 内 容 一 toggle 方法 "> 
右 侧 的 Popover 
</button><br><br><br><br><br><br> 
<p class="popover-options"> 
«a href="#" type="button" class="btn btn-warning" title-'«h2: 
data-container="body" data-toggle="popover" data-content=' 
<h4>Popover 中 的 一 些 内 容 一 options 方法 </h4>"> 


Popover 
</a> 
</p> 
<script> 
$(function () { $('.popover-show').popover('show');3); 
$(function () ( $('.popover-hide').popover('hide');}); 
$(function () { $('.popover-destroy').popover('destroy');}); 
$(function () { $('.popover-toggle').popover('toggle');}); 
$(function () ( $(".popover-options a").popover({html : true ` 
«/script» 
«/div» 
«/body» 
«/html» 


Aoo ë ëp 
结果 如 下 所 示 : 
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Popover title 


顶部 的 Popover 中 的 一 些 内 容 一 一 





hide 方法 
Popover 
左 侧 的 Popover PRR aR ve di Micah ze ev ome ETE id 

右 侧 的 
— Popover 

| 中 的 一 

些 内 容 

Title — 


toggle 
Popover z 
| Popover | Pa 


Popover 中 的 一 些 内 容 一 一 
options 方法 








事件 


FRIJE T EHE (Popover) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 匆 子 


o 
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事件 


show.bs.popover 


shown.bs.popover 


hide.bs.popover 


hidden.bs.popover 


实例 


描述 


当 调 用 
Show 
实例 方 
法 时 立 
即 触发 
该 事 
件 。 
当 弹 出 
框 对 用 
户 可 见 
时 触发 
该 事件 
(将 等 
fF 
CSS 


EX) s 


实例 方 
法 时 立 
即 触发 
该 事 
件 。 

当 工 具 
提示 对 
FAP 
藏 时 触 


实例 


$('#mypopover').on('show.bs.popover', f 


$('Zmypopover').on('shown.bs.popover', 


$('4mypopover').on('hide.bs.popover', f 


$('Zmypopover').on('hidden.bs.popover', 


下 面 的 实例 演示 了 弹出 框 (Popover) 插件 的 事件 : 
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<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 弹出 框 (Popover) 插件 事件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div clas="container" style="padding: 100px 50px 10px;" > 
<button type="button" class="btn btn-primary popover-show" 
title="Popover title" data-container="body" 
data-toggle="popover" 
data-content=" 左 侧 的 Popover 中 的 一 些 内 容 一 show 方法 "> 
左 侧 的 Popover 
</button> 


</div> 

<script> 
$(function () ( $('.popover-show').popover('show');}); 
$(function () { $('.popover-show').on('shown.bs.popover', fur 
alert(" 当 显示 时 警告 消息 " ) ; 

DH; 

</script> 

</div> 


</body> 
</html> 


El m E: 
结果 如 下 所 示 : 
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Bootstrap 警告 框 (Alert) 插件 
ERE (Alert) 消息 大 多 是 用 来 想 终端 用 户 显示 诸如 警告 或 确认 消息 的 信息 。 使 用 
告 框 (Alert) 插件 ， 您 可 以 向 所 有 的 警 告 框 消息 添加 可 取消 (dismiss) 功能 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 alert.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js. 


用 法 
您 可 以 有 以 下 两 种 方式 启用 警告 框 的 可 取消 (dismissal) 功能 : 


@ 通过 data 属性 : 通过 数据 API (Data API) 添加 可 取消 功能 ， 只 逢 要 向 关闭 
按钮 添加 data-dismiss="alert"， 就 会 自动 为 警告 框 添加 关闭 功能 。 


b Dna 


&lt;a class="close" data-dismiss-"alert" href="#" aria-hidden=" 
&times; 
&lt;/a&gt; 


CO —————————— 





e 通过 JavaScript : 通过 JavaScript 添加 可 取消 功能 


$(".alert").alert() 


实例 
下 面 的 实例 演 过 data 属性 使 用 警告 框 (Alert) 插件 的 用 法 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - BAG (Alert) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="alert alert-warning"> 
<a href="#" class="close" data-dismiss="alert"> 


&times; 
</a> 
<strong> ! </strong> 您 的 网 络 连接 有 问题 。 
</div> 
</body> 
</html> 


结果 如 下 所 示 : 


警告 ! 您 的 网 络 连接 有 问题 。 


下 面 是 一 些 警 告 框 (Alert) 插件 中 有 用 的 方法 : 


方法 描述 实例 
ee 
.alert() 的 警告 框 都 带 $('#identifier').alert(); 
有 关闭 功能 。 
Close Method ”关闭 所 有 的 警 re anami | 
Pieri 证 告 框 。 $('#identifier').alert('close'); 


如 需 在 关闭 时 启用 动画 效果 ， 请 确保 添加 了 .fade 和 .in class. 


实例 


下 面 的 实例 演示 了 .alert() 方法 的 用 法 : 


<!DOCTYPE html» 

«html» 

«head» 
<title>Bootstrap 实例 - BAH (Alert) 插件 alert() 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


<h3> 警 告 框 (Alert) 插件 alert() 方法 </h3> 

<div id="myAlert" class="alert alert-success"> 
<a href="#" class="close" data-dismiss="alert">&times; </a> 
<strong> 成 功 ! </strong> 结 果 是 成 功 的 。 

</div> 

<div id="myAlert" class="alert alert-warning"> 
<a href="#" class="close" data-dismiss="alert">&times; </a> 
«strong» €& ! ! </strong> 您 的 网 络 连接 有 问题 。 

</div> 


<script type="text/javascript"> 
$(function(){ 
$(".close").click(function(){ 
$("#myAlert").alert(); 
3); 
3); 


«/script» 


«/body» 
«/html» 


[aig ——————————————Éá Br] 
下 面 的 实例 演示 了 .alert('close') 方法 的 用 法 : 


<!DOCTYPE html» 

«html» 

«head» 
<title>Bootstrap 实例 - 警告 框 (Alert) 插件 alert('close') 方法 </ti 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


<h3> 和 警告 框 (Alert) 插件 alert('close') 方法 </h3> 

<div id="myAlert" class="alert alert-success"> 
<a href="#" class="close" data-dismiss="alert">&times; </a> 
<strong> 成 功 ! </strong> 结 果 是 成 功 的 。 

</div> 

<div id="myAlert" class="alert alert-warning"> 
<a href="#" class="close" data-dismiss="alert">&times; </a> 
«strong» €& ! ! </strong> 您 的 网 络 连接 有 问题 。 

</div> 


<script type="text/javascript"> 
$(function(){ 
$(".close").click(function()( 
$("#myAlert").alert('close'); 
3); 
3); 


«/script» 


«/body» 
«/html» 





您 可 以 看 到 所 有 的 警告 框 都 应 用 了 关闭 功能 ， 即 关闭 任意 的 警告 框 ， 其 他 剩余 的 警 
告 框 也 会 被 关闭 。 


事件 
下 表 列 出 了 警告 框 (Alert) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 醒 数 中 当 约 子 使 


o 


事件 描述 实例 


当 调 用 
close 
实例 方 
close.bs.alert 法 时 立 $('#myalert').bind('close.bs.alert', functi 
即 触发 
该 事 
件 。 


框 被 天 
闭 时 触 
发 该 事 
closed.bs.alert 等 竺 $('#myalert').bind('closed.bs.alert', funct 


实例 


下 面 的 实例 演示 了 和 警告 框 (Alert) 插件 的 事件 : 


W3School 前 端 教 程 合集 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - BA (Alert) 插件 事件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div id="myAlert" class="alert alert-success"> 
<a href="#" class="close" data-dismiss="alert">&times;</a> 
<strong> 成 功 ! </strong> 结 果 是 成 功 的 。 

</div> 


<script type="text/javascript"> 
$(function(){ 
$("#myAlert").bind('closed.bs.alert', function () { 
alert(" 警 告 消息 框 被 关闭 。" ) ; 
3): 
3); 


</script> 


</body> 
</html> 


a 


结果 如 下 所 示 : 
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Bootstrap #242 (Button) 插件 


按钮 (Button) 在 Bootstrap 按钮 一 章 中 介绍 过 。 通 过 按钮 (Button) 插件 ， 您 可 
以 添加 进 一 些 交互 ， 比 如 控制 按钮 状态 ， 或 者 为 其 他 组 件 〈 如 工具 栏 ) 创建 按钮 
组 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 button.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js. 


加 载 状 态 


如 需 向 按钮 添加 加 载 状态 ， 只 需要 简单 地 向 button 元 素 添 加 data-loading- 
text="Loading..." 作为 其 属性 即 可 ， 如 下 面 实 例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 (Button) 插件 加 载 状态 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«button id="fat-btn" class="btn btn-primary" data-loading-text="Loé 
type="button"> 加 载 状 态 
</button> 
<script> 
$(function() { 
$(".btn").click(function(){ 
$(this).button('loading').delay(1000).queue(function() { 
// $(this).button('reset'); 
}); 
3); 
3); 


«/script» 


«/body» 
«/html» 


了 
结果 如 下 所 示 : 





单个 切换 


如 需 激活 单个 按钮 的 切换 ( 即 改变 按钮 的 正常 状态 为 按压 状态 ， 反 之 亦 然 ) ， 只 需 
向 button 元 素 添 加 data-toggle="button" 作为 其 属性 即 可 ， 如 下 面 实 例 所 示 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - $247 (Button) 插件 单个 切换 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<button type="button" class="btn btn-primary" 
data-toggle="button"> 单个 切换 
«/button» 


«/body» 
«/html» 


:| 
结果 如 下 所 示 : 





复 选 框 (Checkbox) 


您 可 以 创建 复 选 框 组 ， 并 通过 向 btn-group 添加 data 属性 data- 
toggle="buttons" 来 添加 复 选 框 组 的 切换 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 (Button) 插件 复 选 框 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary"> 
«input type="Checkbox"> 选项 1 
</label> 
<label class="btn btn-primary"> 
<input type="checkbox"> 选项 2 
</label> 
<label class="btn btn-primary"> 
<input type="checkbox"> 选项 3 
</label> 
</div> 


</body> 
</html> 


El -=A 
结果 如 下 所 示 : 


选项 1 ”选项 2 选项 3 





单 选 按钮 (Radio) 


类 似 地 ， 您 可 以 创建 单 选 按钮 组 ， 并 通过 向 btn-group 添加 data 属性 data- 
toggle="buttons" 来 添加 单 选 按钮 组 的 切换 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 (Button) 插件 单 选 按钮 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary"> 
<input type="radio" name="options" id="optioni"> 选项 1 
</label> 
<label class="btn btn-primary"> 
<input type="radio" name="options" id="option2"> 选项 2 
</label> 
<label class="btn btn-primary"> 
<input type="radio" name-"options" id="option3"> 选项 3 
</label> 
</div> 


</body> 
</html> 


| ER EY 
结果 如 下 所 示 : 


选项 1 选项 2 选项 3 





用 法 
您 可 以 通过 JavaScript 启用 按钮 (Button) 插件 ， 如 下 所 示 : 


$('.btn').button() 


方法 


下 面 是 一 些 按钮 (Button) 插件 中 有 用 的 方法 : 


方法 描述 实例 


Ax oum 

激活 的 外 观 。 您 可 以 使 用 
data-toggle 属性 启用 按钮 人 
的 自动 切换 。 


当 加 载 时 ， 按 钮 是 禁用 的 ， 
AMA 3j button 元 素 的 
data-loading-text 属性 的 
值 。 


HORAK, LAN 
= y =] 人 A 当 您 想 | 
cya airtel RSG et) 
时 ， 该 方法 非常 有 用 。 


该 方法 中 的 字符 串 是 指 由 用 
户 声明 的 任何 字符 串 。 使 用 50) button(string) 


button('toggle") 
$().button('loading') 


.button('loading") 


.button('reset') 


.button(string) 该 方法 ， 重 冒 按钮 状态 ， 
添加 新 的 内 容 。 
实例 


下 面 的 实例 演示 了 上 面 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 按钮 (Button) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h2> 点 击 每 个 按钮 查看 方法 效果 </h2> 
<h4> 演 示 .button('toggle') 方法 </h4> 
<div id="myButtonsi" class="bs-example"> 
<button type="button" class="btn btn-primary"> 原 始 </button> 
</div> 


<h4> 演 示 .button('loading') 方法 </h4> 
<div id="myButtons2" class="bs-example"> 
<button type="button" class="btn btn-primary" 
data-loading-text="Loading...">IR#8 
«/button» 
«/div» 


<h4> 演 示 .button('reset') 方法 </h4> 


<div id="myButtons3" class="bs-example"> 
<button type="button" class="btn btn-primary" 
data-loading-text="Loading...">IR#8 
«/button» 
«/div» 


<h4> 演 示 .button(string) 方法 </h4> 
<button type="button" class="btn btn-primary" id="myButton4" 

data-complete-text="Loading finished"> 请 点 击 我 
</button> 
<script type="text/javascript"> 

$(function () { 

$("#myButtons1 .btn").click(function(){ 

$(this).button('toggle'); 
3); 
3); 
$(function() { 

$("#myButtons2 .btn").click(function()( 
$(this).button('loading').delay(1000).queue(function() { 
3); 
3); 


); 
$(function() { 
$("#myButtons3 .btn").click(function(){ 
$(this).button('loading').delay(1000).queue(function() { 
$(this).button('reset'); 
H; 
1); 
1); 
$(function() { 
$("#myButton4").click(function(){ 
$(this).button('loading').delay(1000).queue(function() { 
$(this).button('complete'); 
3); 
1); 
1); 


«/script» 


«/body» 
«/html» 


boo =- 
结果 如 下 所 示 : 
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点 击 每 个 按钮 查看 方法 效果 
滨 示 .button(‘toggle') 方法 
PIA 


演示 .button('loading') 方法 


| E 
üt 


滨 示 .button(reset') 方法 


=i 
ir 


演示 .button(string) 方法 
请 点 击 找 


Bootstrap 按钮 (Button) 插件 
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Bootstrap 1 & (Collapse) 插件 


it (Collapse) fafFOLURA iir RMR AER, DHEA CR OEM de 
导航 还 是 内 容 面板 ， 它 都 允许 很 多 内 容 选项 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 collapse.js。 同 时 ， 也 
需要 在 您 的 Bootstrap 版 本 中 引用 Transition (过 渡 ) 插件 。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


您 可 以 使 用 折 受 (Collapse) 插件 : 
e 创建 可 折 县 的 分 组 或 折 且 面板 (accordion) ， 如 下 所 示 : 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;title&gt;Bootstrap 实例 - HAMMR1t;/titleagt; 
&lt;link href="/bootstrap/css/bootstrap.min.css" rel="styles 
&lt;script src="/scripts/jquery.min.js"&gt;&lt;/scripté&gt; 
&lt;script src="/bootstrap/js/bootstrap.min.js"&gt;&lt;/scri 
&lt;/head&gt; 
&lt;body&gt; 


&lt;div class-"panel-group" id="accordion"é&gt; 
&lt;div class="panel panel-default"&gt; 
&lt;div class="panel-heading"&gt; 
&lt;h4 class="panel-title"&gt; 
&lt;a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne"&gt; 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 1 部 分 
&lt;/a&gt; 
&lt;/h4&gt; 
&lt;/div&gt; 
&lt;div id-"collapseOne" class="panel-collapse collapse in" 
&lt;div class="panel-body"&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. Ad vegan excepteur 
vice lomo. 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;div class="panel panel-default"&gt; 
&lt;div class="panel-heading"&gt; 
&lt;h4 class="panel-title"&gt; 
&lt;a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo"&gt; 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 2 部 分 
&lt;/a&gt; 


&lt;/h4&gt; 
&lt;/div&gt; 
&lt;div id-"collapseTwo" class="panel-collapse collapse"&gt 
&lt;div class-"panel-body"&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. Ad vegan excepteur 
vice lomo. 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;div class="panel panel-default"&gt; 
&lt;div class="panel-heading"&gt; 
&lt;h4 class="panel-title"&gt; 
&lt;a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree"&gt; 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 3 部 分 
&lt;/a&gt; 
&lt;/h4&gt; 
&lt;/div&gt; 
&lt;div id="collapseThree" class-"panel-collapse collapse"s 
&lt;div class="panel-body"&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. Ad vegan excepteur 
vice lomo. 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





结果 如 下 所 示 : 


点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 1 部 分 





Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 3 部 分 


1. data-toggle="collapse" 添加 到 您 想 要 展开 或 折 受 的 组 件 的 链接 上 。 
2. href 或 data-target 属性 添加 到 父 组 件 ， 它 的 值 是 子 组 件 的 id, 
3. data-parent 属性 把 折 咎 面板 (accordion) 的 id WIFI RAK SMe 
件 的 链接 上 。 
e 创建 不 带 accordion 标记 的 简单 的 可 折 壹 组件 (collapsible) ， 如 下 所 示 : 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 
&lt;title&gt;Bootstrap 实例 - 简单 的 可 折 受 组 件 &Lt;/title&gt; 
&lt; link href="/bootstrap/css/bootstrap.min.css" rel="styles 
&lt;script src="/scripts/jquery.min.js"&gt;&lt;/scripté&gt; 
&lt;script src="/bootstrap/js/bootstrap.min.js"&gt;&lt;/scri 

&lt;/head&gt; 

&lt;body&gt; 


&lt;button type="button" class="btn btn-primary" data-toggle="c 
data-target="#demo"&gt; 
简单 的 可 折 受 组 件 

&lt;/button&gt; 


&lt;div id="demo" class-"collapse in"&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes andersor 
cred nesciunt sapiente ea proident. Ad vegan excepteur butche 
vice lomo. 

&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 
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结果 如 下 所 示 : 


简单 的 可 折 人 组 件 





Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad 
vegan excepteur butcher vice lomo 


正如 您 在 实例 中 看 到 的 ， 我 们 创建 了 一 个 可 折 受 的 组 件 ， 与 折 受 面板 
(accordion) 不 同 ， 我 们 没有 添加 属性 data-parent。 


用 法 


FRIIM SHA (Collapse) 插件 用 于 处 理 繁重 的 伸缩 的 class : 


Class 描述 
.collapse 隐藏 内 容 。 
.collapse.in 显示 内 容 。 


.collapsing 当 过 渡 效 果 开 始 时 被 添加 ， 当 过 渡 效 果 完 成 时 被 移 除 。 
您 可 以 通过 以 下 两 种 方式 使 用 折 受 (Collapse) 插件 : 


e 通过 data 属性 : 向 元 素 添 加 data-toggle="collapse" 和 data-target， 自 动 
SEAT ATH, data-target 属性 接受 一 个 CSS 选择 器 ， 并 会 对 其 应 
用 折 重 效果 。 请 确保 向 可 折 生 元 素 添 加 class .collapse。 如 果 您 希望 它 默 认 情 
况 下 是 打开 的 ， 请 添加 额外 的 class .in。 


为 了 向 可 折 受 控件 添加 类 似 折 彼 面板 的 分 组 管理 ， 请 添加 data 属性 data- 
parent="#selector", 


e 通过 JavaScript : 可 通过 JavaScript 激活 collapse 方法 ， 如 下 所 示 : 


$('.collapse').collapse() 


有 一 些 选项 是 通过 data 属性 或 JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选项 : 


Data 


选项 3e FURR E 
名 称 
selector 如 果 提 供 了 一 个 选择 器 ， 当 可 折 党 项 目 显示 时 ， 
parent 默认 data- ， 指 定 父 元 素 下 的 所 有 可 折 且 的 元 素 将 被 关闭 。 这 
fü: parent ”与 创 痛 的 折 受 面板 (accordion) 的 行为 类 似 - 
false 这 依赖 于 accordion-group 类 。 
boolean 
默认 data- ayes 
T t Je: E. 
toggle je OE Dea FH RTT & 7638. 
true 


方法 


Tta} (Colapse) 插件 中 有 用 的 方法 : 


方法 描述 实例 


Options: 素 。 接 me "m 

ET dentif : 

.collapse(options) ， 受 一 个 $('#identifier ) 
可 选 的 


对 象 。 


collapse({ toggle: fal: 


Toggle: 


.collapse('toggle') 藏 可 折 $('#identifier').collapse('toggle') 


yı | 


Show: 


Ht SA ko 
pis 


o 


Hide: 


collapse(‘hide') $('£identifier').collapse('hide') 


B Bit 
本 | 加 


实例 
下 面 的 实例 演示 了 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - #1# (Collapse) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne"> 
RbRTIRA, BAERT. B1 部 分 - -hide A 
</a> 
</h4> 
</div> 
«div id-"collapseOne" class="panel-collapse collapse in"> 


<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-success"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo"> 
点 击 我 进行 展开 ， 表 次 点 击 我 进行 折合 。 第 2 部 分 - -show 方法 
</a> 
</h4> 
</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree"> 
MRiReTARA, BRAERUTRS. A 3 部 分 - -toggle A 
</a> 
</h4> 
</div> 
<div id="collapseThree" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-warning"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseFour"> 
RiRHARA, BAA t RATIA. 9B 4 部 分 - -options 方法 
</a> 
</h4> 
</div> 
<div id="collapseFour" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 


nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
«/div» 
«/div» 
«/div» 
«/div» 
«script type="text/javascript"> 
$(function () ( $('#collapseFour' ).collapse({ 
toggle: false 


$(function () ( $('#collapseTwo').collapse('show')}); 

$(function () { $('£ZcollapseThree').collapse('toggle'))); 

$(function () ( $('#collapseOne').collapse('hide')}); 
«/script» 


«/body» 
«/html» 


B _ 





结果 如 下 所 示 : 
点 击 我 进行 展开 ， 表 次 点 击 我 进行 折合 。 第 1 部 分 --hide 方法 
态 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 2 部 分 --Show 方法 


Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


点 击 我 进行 展开 ， 再 次 点 击 我 进行 折 登 。 第 3 部 分 --toggle 方法 


Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


点击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 4 部 分 -options 方法 


事件 


FRI TAS (Collapse) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 匆 子 使 
用 。 


事件 


show.bs.collapse 


shown.bs.collapse 


hide.bs.collapse 


hidden.bs.collapse 


实例 


描述 


在 调用 
Show 

方法 后 
触发 该 
事件 。 

ume 
元 素 对 
用 户 可 
见 时 触 


CSS 


下 面 的 实例 演示 了 事件 的 用 法 : 


$('#identifier'). 


$('#identifier'). 


$('#identifier'). 


$('#identifier'). 


x6 


on('show.bs.collapse', 


on('shown.bs.collapse' 


on('hide.bs.collapse', 


on('hidden.bs.collapse 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - #1# (Collapse) 插件 事件 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="panel-group" id="accordion"> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseexample"> 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。- -Shown 事件 
</a> 
</h4> 
</div> 
<div id="collapseexample" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. 
Ad vegan excepteur butcher vice lomo. 
</div> 
</div> 
</div> 
</div> 


<script type="text/javascript"> 
$(function () { 
$('Zcollapseexample').on('show.bs.collapse', function () { 
alert( ' 嘿 ， 当 您 展开 时 会 提示 本 警告 ' ) ; } ) 
3); 


«/script» 


«/body» 
«/html» 





结果 如 下 所 示 : 
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Bootstrap 轮 播 (Carousel) 插件 


Bootstrap 轮 播 (Carousel) 插件 是 一 种 灵活 的 响应 式 的 向 站 点 添加 滑 块 的 方式 。 
除 此 之 外 ， 内 容 也 是 足够 灵活 的 ， 可 以 是 图 像 、 内 馈 框 架 、 视 频 或 者 其 他 您 想 要 放 
置 的 任何 类 型 的 内 容 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 carouseljs。 或 者 ， 正 
如 Bootstrap 插件 概览 一 章 中 所 提 Fl, 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js. 


实例 


下 面 是 一 个 简单 的 幻灯 片 ， 使 用 Bootstrap 4648 (Carousel) 插件 显示 了 一 个 循环 
播放 元 素 的 通用 组 件 。 为 了 实现 轮 播 ，1 您 只 需要 添加 带 市 有 该 标记 的 代码 即 可 。 不 需 
要 使 用 data 属性 ， 只 需要 简单 的 基于 class 的 开发 即 可 。 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 简单 的 轮 播 (Carousel) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div id="myCarousel" class="carousel slide"> 
<!-- 4¢#8 (Carousel) 指标 --> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class="active 
<li data-target="#myCarousel" data-slide-to="1"></1li> 
<li data-target="#myCarousel" data-slide-to="2"></1li> 
</ol> 
<!-- 4¢#8 (Carousel) mB --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="img/slide1.png" alt="First slide"> 
</div> 
<div class="item"> 
<img src="img/slide2.png" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="img/slide3.png" alt="Third slide"> 
</div> 
</div> 
<!-- 轮 播 (Carousel) 导航 --> 
«a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo; </a> 
<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; </a> 
</div> 


</body> 
</html> 


4 
结果 如 下 所 示 : 
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可 选 的 标题 


您 可 以 通过 .item 内 的 .carousel-caption 元 素 向 幻灯 片 添加 标题 。 
放置 任何 可 选 的 HTML 即 可 ， 它 会 自动 对 齐 并 格式 化 。 下 面 的 实例 演示 了 
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<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 轮 播 (Carousel) 插件 的 标题 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div id="myCarousel" class="carousel slide"> 
<!-- 4¢#8 (Carousel) 指标 --> 
«ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class="active 
<li data-target="#myCarousel" data-slide-to="1"></1li> 
<li data-target="#myCarousel" data-slide-to="2"></1li> 
</ol> 
<!-- 4¢#8 (Carousel) mB --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="img/slide1.png" alt="First slide"> 
«div class="carousel-caption">t7a@ 1</div> 
</div> 
<div class="item"> 
<img src="img/slide2.png" alt="Second slide"> 
«div class="carousel-caption">t7a@ 2</div> 
</div> 
<div class="item"> 
<img src="img/slide3.png" alt="Third slide"> 
«div class="carousel-caption">t7m@ 3</div> 
</div> 
</div> 
<!-- 轮 播 (Carousel) 导航 --> 
«a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo; </a> 
<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; </a> 
</div> 


</body> 
</html> 


| 
结果 如 下 所 示 : 
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用 法 


。 通过 data Blt : 使 用 data 属性 可 以 很 容易 控制 轮 播 (Carousel) 的 位 置 。 
o 属性 data-slide 接受 关键 字 prev 或 next， 用 来 改变 幻灯 片 相 对 于 当前 位 
置 的 位 置 。 
o 使 用 data-slide-to 来 向 轮 播 床 底 一 个 原始 滑动 索引 ，data-slide-to="2" 
将 把 滑 块 移动 到 一 个 特定 的 索引 ， 索 引 从 0 开始 计数 。 
o data-ride="carousel" 属性 用 于 标记 轮 播 在 页 面 加 载 时 就 开始 动画 播放 。 
e 通过 JavaScript: 轮 播 (Carousel) 可 通过 JavaScript 手动 调用 ， 如 下 所 
人 小: 


$('.carousel').carousel() 


有 一 些 选项 是 通过 data 属性 或 JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选项 
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机 i Data 
选项 x IRA; 
选项 名 类 型 /默认 属性 名 


称 值 称 


number EX data- 


interval | 4 : 5000 | interval 
string 默认 data- 

rs [à : "hover" pause 
gy - 
wrap boolean 2 . data 


认 值 : true wrap 


方法 


学 


描 


自动 循环 每 个 项 目 之 间 延 迟 的 时 间 量 。 如 
RH false， 轮 播 将 不 会 自动 循环 。 

妃 标 进入 时 暂停 轮 播 循环 ， 妃 标 离 开 时 恢 
复 轮 播 循环 。 


下 面 是 一 些 轮 播 (Carousel) 插件 中 有 用 的 方法 : 


方法 描述 实例 


初始 化 
轮 播 为 
可 选 的 
.carousel(options) Rose $('#identifier').carousel({ interval: 2 
并 开始 
循环 项 
目 。 


从 左 到 
右 循环 
轮 播 项 
目 。 


停止 轮 
.carousel('pause") 播 循 环 $('#identifier')..carousel( 'pause') 
mA. 


循环 轮 

播 到 某 

个 特定 

的 帧 

.carousel(number) (从 0 $('#identifier') .carousel(number ) 

开始 计 

数 ， 与 

数组 类 

似 ) 。 


循环 轮 
播 到 上 
一 个 项 
目 。 

循环 轮 
播 到 下 
人 


目 。 


.carousel('cycle") $('4identifier').carousel('cycle') 


.carousel('prev") $('#identifier').carousel('prev') 


.carousel('next') $('#identifier').carousel('next') 


实例 
下 面 的 实例 演示 了 方法 的 用 法 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 实例 - 448 (Carousel) 插件 方法 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


«script src="/scripts/jquery.min.js"></script> 

<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div id="myCarousel" class="carousel slide"> 
«!-- 轮 播 (Carousel) 指标 --> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" 
class="active"></1li> 
«li data-target="#myCarousel" data-slide-to="1"></1li> 
«li data-target="#myCarousel" data-slide-to="2"></1li> 
</ol> 
<!-- 4¢#8 (Carousel) mB --> 
«div class="carousel-inner"> 
<div class="item active"> 
<img src="img/slide1.png" alt="First slide"> 
</div> 
<div class="item"> 
<img src="img/slide2.png" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="img/slide3.png" alt="Third slide"> 
</div> 
</div> 
«!-- 轮 播 (Carousel) 导航 --> 
<a class-"carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo; </a> 
«a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; </a> 
<!-- 控制 按钮 --> 
<div style="text-align:center;"> 
<input type="button" class="btn start-slide" value="Start"> 
<input type="button" class="btn pause-slide" value="Pause"> 
<input type="button" class="btn prev-slide" value="Previous : 
<input type="button" class="btn next-slide" value="Next Slide 
<input type="button" class="btn slide-one" value="Slide 1"> 
<input type="button" class="btn slide-two" value="Slide 2"> 
«input type="button" class="btn slide-three" value="Slide 3": 
</div> 
</div> 
<script> 
$(function(){ 
// 初始 化 轮 播 
$(".start-slide").click(function(){ 
$("4myCarousel").carousel('cycle'); 
3); 
// 停止 轮 播 
$(".pause-slide").click(function(){ 
$("4myCarousel").carousel('pause'); 
3); 
// 循环 轮 播 到 上 一 个 项 目 
$(".prev-slide").click(function(){ 
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$("ZmyCarousel").carousel('prev'); 


3); 

// 循环 轮 播 到 下 一 个 项 目 

$(".next-slide").click(function(){ 
$("#myCarousel").carousel('next'); 


3); 

// 循环 轮 播 到 某 个 特定 的 帧 

$(".slide-one").click(function(){ 
$("ZmyCarousel").carousel(0); 


1); 

$(".slide-two").click(function()( 
$("#myCarousel").carousel(1); 

1); 

$(".slide-three").click(function()( 
$("#myCarousel").carousel(2); 

p); 

3); 


</script> 


</body> 
</html> 


结果 如 下 所 示 : 








Start Pause Previous Slide Next Slide Slide 1 Slide 2 Slide 3 


事件 


下 表 列 出 了 轮 播 (Carousel) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 钧 子 使 


o 
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事件 描述 实例 


slide.bs.carousel $('#identifier').on('slide.bs.carousel', fi 


slid.bs.carousel $('#identifier').on('slid.bs.carousel', fur 


实例 


下 面 的 实例 演示 了 事件 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Bootstrap 实例 - 轮 播 (Carousel) 插件 事件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div id="myCarousel" class="carousel slide"> 
<!-- 4¢#8 (Carousel) 指标 --> 
«ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" 
class="active"></1li> 
<li data-target="#myCarousel" data-slide-to="1"></1li> 
<li data-target="#myCarousel" data-slide-to="2"></li> 
</ol> 
<!-- 4¢#8 (Carousel) mB --> 
«div class="carousel-inner"> 
<div class="item active"> 
<img src="img/slide1.png" alt="First slide"> 
</div> 
<div class="item"> 
<img src="img/slide2.png" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="img/slide3.png" alt="Third slide"> 
</div> 
</div> 
<!-- 48 (Carousel) 导航 --> 
«a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo; </a> 
<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; </a> 
</div> 
<script> 
$(function(){ 
$('ZmyCarousel').on('slide.bs.carousel', function () { 
alert(" 当 调用 slide 实例 方法 时 立即 触发 该 事件 。" ) ; 
3); 
3); 


«/script» 


«/body» 
«/html» 


e = rl 
结果 如 下 所 示 : 
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当 调用 slide 实例 方法 时 立即 触发 该 事件 。 
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Bootstrap 附加 导航 (Affix) 插件 


附加 导航 (Affix) 插件 允许 某 个 «div» 固定 在 页 面 的 某 个 位 置 。 您 也 可 以 在 打开 或 
关闭 使 用 该 插件 之 间 进 行 切换 。 一 个 常见 的 例子 是 社交 图 标 。 它 们 将 在 某 个 位 置 开 
ES 页 面 点 击 某 个 标记 ， 该 <div 会 锁定 在 某 个 位 置 ， 不 会 随 着 页 面 其 他 部 分 
一 起 滚动 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 affix.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.jso 


用 法 
您 可 以 通过 data 属性 或 者 通过 JavaScript 来 使 用 附加 导航 (Affix) 插件 。 


e 通过 data 属性 : 如 需 向 元 素 添加 附加 导航 (Affix) 行为 ， 只 需要 向 需要 监听 
ee data-spy="affix" 即 可 。 请 使 用 偏 移 来 定义 何 时 切换 元 素 的 锁定 和 
动 。 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 附加 导航 (Affix) 插件 的 用 法 : 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;meta charset="UTF-8"&gt; 

&lt;title&gt;Bootstrap 附加 导航 (Affix) $&ft&lt;/title&gt; 

&lt; link href="/bootstrap/css/bootstrap.min.css" rel-"stylesheet"&t 
&lt;script src="/scripts/jquery.min.js"&gt;&lt;/scripté&gt; 
&lt;script src="/bootstrap/js/bootstrap.min.js"&gt;&lt;/scriptégt; 


&lt;style type="text/css"&gt; 

/* Custom Styles */ 

ul.nav-tabs{ 
width: 140px; 
margin-top: 20px; 
border-radius: 4px; 
border: 1px solid #ddd; 
box-shadow: © 1px 4px rgba(0, ©, ©, 0.067); 


ul.nav-tabs li{ 
margin: 0; 
border-top: 1px solid #ddd; 


ul.nav-tabs li:first-child{ 


border-top: none; 


ul.nav-tabs li af 
margin: 0; 
padding: 8px 16px; 
border-radius: 0; 


ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover( 
color: #fff; 
background: £Z0088cc; 
border: 1px solid #0088cc; 


ul.nav-tabs li:first-child af 
border-radius: 4px 4px O 0; 


ul.nav-tabs li:last-child a( 
border-radius: © © 4px 4px; 


ul.nav-tabs.affix{ 
top: 30px; /* Set the top position of pinned element */ 
} 


&lt;/style&gt; 
&lt;/head&gt; 
&lt;body data-spy="scroll" data-target="#myScrollspy"&gt; 
&lt;div class="container"&gt; 
&lt;div class="jumbotron"&gt; 
&lt;hi&gt;Bootstrap Affix&lt;/h1&gt; 
&lt;/div&gt; 
&lt;div class="row"&gt; 
&lt;div class="col-xs-3" id="myScrollspy"&gt; 
&lt;ul class="nav nav-tabs nav-stacked" data-spy-"affi» 
&lt;li class="active"&gt;&lt;a href="#section-1"&g1 
&lt;li&gt;&lt;a href="#section-2"&gt; H—MBAalt; /aé 
&lt;li&gt;&lt;a href="#section-3"&gt; 第 三 部 分 &1t;/ag 
&lt;li&gt;&lt;a href="#section-4"&gt ;第 四 部 分 &Lt;/ae& 
&lt;li&gt;&lt;a href="#section-5"&gt; 第 五 部 分 &1t;/ag 
&lt;/ul&gt; 
&lt;/div&gt; 
&lt;div class="col-xs-9"&gt; 
&lt;h2 id="section-1"&gt; 第 一 部 分 &1t;/h28&gt; 
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipi: 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;hr&gt; 
&lt;h2 id="section-2"&gt; 第 二 部 分 &lt;/h2&gt; 
&lt;p&gt;Nullam hendrerit justo non leo aliquet imperd: 
&lt;p&gt;Vestibulum consectetur scelerisque lacus, ac 1 
&lt;hr&gt; 
&lt;h2 id="section-3"&gt; 第 三 部 分 &1lt;/h2&gt; 
&lt;p&gt;Integer pulvinar leo id risus pellentesque ve: 
&lt;p&gt;Phasellus vitae suscipit justo. Mauris pharett 
&lt;p&gt;Quisque pharetra velit id velit iaculis pretii 
&lt;hr&gt; 
&lt;h2 id="section-4"&gt ;第 四 部 分 &lLt,;,/h2&gt， 


&lt;p&gt;Suspendisse a orci facilisis, dignissim tortoi 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;p&gt;Phasellus fermentum, neque sit amet sodales te 
&lt;p&gt;Ut ut risus nisl. Fusce porttitor eros at magr 
&lt;hr&gt; 
&lt;h2 id="section-5"&gt; 第 五 部 分 &1lt;/h2&gt; 
&lt;p&gt;Nam eget purus nec est consectetur vehicula. i 
&lt;p&gt;Vivamus mattis accumsan erat, vel convallis r: 
&lt;p&gt;Suspendisse a orci facilisis, dignissim tortoi 
&lt;p&gt;Morbi sed fermentum ipsum. Morbi a orci vulput 
&lt;p&gt;Sed vitae lobortis diam, id molestie magna. A: 
&lt;/div&gt; 
&lt;/div&gt; 

&lt;/div&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


so m 
结果 如 下 所 示 : 





Bootstrap Affix 


第 一 部 分 





第 二 部 分 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem 
tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis 
第 三 部 分 vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum 
scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In 
第 四 部 分 tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in 
aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at 
第 五 部 分 bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 


interdum neque porttitor. Integer faucibus ligula 


e 383i JavaScript : 您 可 以 通过 JavaScript 手动 为 某 个 元 素 添加 附加 导航 
(Affix) ， 如 下 所 示 : 


$('#myAffix').affix({ 
offset: { 
top: 100, bottom: function () { 
return (this.bottom = 
$('.bs-footer').outerHeight(true) ) 


} 
}) 


实例 
下 面 的 实例 演示 了 通过 JavaScript 使 用 附加 导航 (Affix) 插件 的 用 法 : 


&lt; IDOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset="UTF-8"&gt; 
&lt;title&gt;Bootstrap 附加 导航 (Affix) $&ft&lt;/title&gt; 
&lt;link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet "& 
&lt;script src="/scripts/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script src="/bootstrap/js/bootstrap.min.js"&gt;&lt;/scripté&gt; 
&lt;style type="text/css"&gt; 
/* Custom Styles */ 
ul.nav-tabs{ 
width: 140px; 
margin-top: 20px; 
border-radius: 4px; 
border: 1px solid #ddd; 
box-shadow: © 1px 4px rgba(0, ©, ©, 0.067); 


ul.nav-tabs li( 
margin: 0; 
border-top: 1px solid #ddd; 


ul.nav-tabs li:first-child( 
border-top: none; 


ul.nav-tabs li a( 
margin: 0; 
padding: 8px 16px; 
border-radius: 0; 


ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover( 
color: #fff; 
background: £Z0088cc; 
border: 1px solid #0088cc; 


ul.nav-tabs li:first-child af 
border-radius: 4px 4px O 0; 


ul.nav-tabs li:last-child a( 
border-radius: 0 9 4px 4px; 


ul.nav-tabs.affix( 
top: 30px; /* Set the top position of pinned element */ 


j 


&lt;/style&gt; 

&lt;script type="text/javascript"&gt; 
$(document) .ready(function(){ 
$("#myNav") .affix({ 

offset: { 


T): 


3): 


j 


top: 125 


&lt;/script&gt; 

&lt;/head&gt; 

&lt;body data-spy-"scroll" data-target="#myScrollspy"&gt; 
&lt;div class="container"&gt; 

&lt;div class="jumbotron"&gt; 

&lt;hi&gt;Bootstrap Affix&lt;/h1&gt; 

&lt;/div&gt; 

&lt;div class="row"&gt; 

&lt;div class="col-xs-3" id="myScrollspy"&gt; 


&lt;ul class="nav nav-tabs nav-stacked" id="myNav"&gt; 
&lt;li class="active"&gt;&lt;a href="#section-1"&g1 
&lt;li&gt;&lt;a href="#section-2"&gt; H—MBA&lt; /aé 
&lt;li&gt;&lt;a href="#section-3"&gt; 第 三 部 分 &1t;/ag 
&lt;li&gt;&lt;a href="#section-4"&gt ;第 四 部 分 &Lt;/ae& 
&lt;li&gt;&lt;a href="#section-5"a&gt; BAMD&1t;/aés 

&lt;/ul&gt; 


&lt;/div&gt; 
&lt;div class="col-xs-9"&gt; 


&lt;h2 id="section-1"&gt; 第 一 部 分 &1lt;/h28&gt; 
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipi: 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;hr&gt; 

&lt;h2 id="section-2"&gt; 第 二 部 分 &lt;/h2&gt; 
&lt;p&gt;Nullam hendrerit justo non leo aliquet imperd: 
&lt;p&gt;Vestibulum consectetur scelerisque lacus, ac 1 
&lt;hr&gt; 

&lt;h2 id="section-3"&gt ; H=MAalt ;/h2agt; 

&lt;p&gt; Integer pulvinar leo id risus pellentesque ve: 
&lt;p&gt;Phasellus vitae suscipit justo. Mauris phareti 
&lt;p&gt;Quisque pharetra velit id velit iaculis pretii 
&lt;hr&gt; 

&lt;h2 id="section-4"&gt ;第 四 部 分 &lLt;/h2&gt， 
&lt;p&gt;Suspendisse a orci facilisis, dignissim torto! 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;p&gt;Phasellus fermentum, neque sit amet sodales te 
&lt;p&gt;Ut ut risus nisl. Fusce porttitor eros at magr 
&lt;hr&gt; 

&lt;h2 id="section-5"&gt ; HAMDA&lt ; /h2egt; 


&lt;p&gt;Nam eget purus nec est consectetur vehicula. 
&lt;p&gt;Vivamus mattis accumsan erat, vel convallis r: 
&lt;p&gt;Suspendisse a orci facilisis, dignissim tortoi 
&lt;p&gt;Morbi sed fermentum ipsum. Morbi a orci vulput 
&lt;p&gt;Sed vitae lobortis diam, id molestie magna. A: 
&lt;/div&gt; 
&lt;/div&gt; 

&lt;/div&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


dp o m 
结果 如 下 所 示 : 





Bootstrap Affix 





— 1 
—3i ^r 

第 二 部 分 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem 

tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis 
第 三 部 分 vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum 

scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In 
第 四 部 分 tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in 

aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at 
第 五 部 分 bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 





interdum neque porttitor. Integer faucibus ligula 


通过 CSS 定位 


在 上 面 两 种 使 用 附加 导航 (Affix) 插件 的 方式 中 ， 您 都 必须 通过 CSS 定位 内 容 。 
附加 导航 (Affix) 插件 在 三 种 class 之 间 切 换 ， 每 种 class 都 呈现 了 特定 的 状态 : 
.affix、.affix-top 和 .affix-bottom。 请 按照 下 面 的 步骤 ， 来 为 这 三 种 状态 设置 您 自己 
的 CSS (不 依赖 此 插件 ) 。 


e 在 开始 时 ， 揪 件 添加 .affix-top 来 指示 元 素 在 它 的 最 顶端 位 置 。 这 个 时 候 不 需 
要 任何 的 CSS 定位 。 

e 当 滚动 经 过 添加 了 附加 导航 (Affix) 的 元 素 时 ， 应 触发 实际 的 附加 导航 
(Affix) 。 此 时 .affix 会 替代 .affix-top， 同 时 设置 position: fixed; (由 
Bootstrap 的 CSS 代码 提供 ) 。 

。 如 果 定 义 了 底部 偏 移 ， 当 滚动 到 达 该 位 置 时 ， 应 把 affix 替换 为 affix- 
a d Roda DR E ie 则 要 求 同 时 设置 适当 的 
CSS。 在 这 种 情况 下 ， 请 在 必要 的 时 候 添加 position: absolute;。 


offset 


number 
| 
function 
| object 
默认 

值 : 10 


过 data 属性 或 JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选项 


Data 
属性 
名 称 


data- 
offset 


描述 


当 计 算 滚 动 位 置 时 ， 距 离 项 部 的 偏 移 像素 。 如 果 
设置 了 一 个 数字 ， 则 该 偏 移 量 的 值 业 被 应 用 在 顶 
部 和 底部 。 如 果 设 置 了 一 个 对 象 偏 黎 ， 则 其 值 形 
如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 
}。 如 果 需 要 动态 计算 偏 移 ， 请 使 用 函数 。 


Bootstrap 其 它 
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Bootstrap UI 编辑 器 
以 下 是 15 款 最 好 的 Bootstrap 编辑 器 或 者 是 在 线 编辑 工具 。 


1. Bootstrap Magic 


这 是 一 个 Bootstrap 主题 生成 器 ， 使 用 最 新 的 Bootstrap 3 版 本 和 Angular JS 版 
本 ， 提 供 一 个 鲜 活 的 用 户 修改 预览 。 它 包括 了 各 种 各 样 的 导 人 ， 一 个 颜色 选择 器 和 
智能 的 预先 输入 。 更 神奇 的 是 ，Bootstrap 会 根据 用 户 的 每 个 选择 来 重新 简历 框 
架 ， 方 便 用 户 的 下 载 和 使 用 。 - 


Create professional website all by yourself 


Try it out 


30 days ee trial - no oredit cand required 





2. BootSwatchr 
BootSwatchr 是 由 Drew Strickiand 独立 开发 和 维护 的 ， 是 唯一 支持 从 右 到 左 语言 


显示 的 Bootstrap 自 定义 构建 工具 ， 这 也 是 它 的 特色 之 一 。BootSwatchr 是 个 可 视 
化 的 工具 ， 可 以 从 底层 开始 创建 Bootstrap 主题 。 


BootSwatchr 
ThemeRoier for Twitter Gootstrar 







>x 
% More Features 


a^guage discury. Tria feature is not nciuded in any version of 
Mary thanks b eras for developing and supporting tha 


^d use ^^ 


à BootSwatchr? X How it Works 


Pe same techeugue Dut mares sure t0 give you a preview of the Changes you mae, as y 


X Stay Informed 
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3. Bootstrap Live Editor 


Bootstrap Live Editor 是 个 所 见 即 所 得 的 构建 Bootstrap 的 编辑 器 。 在 Bootstrap 准 
备 好 的 内 容 和 代码 片段 的 基础 上 提供 一 个 又 好 又 优雅 的 方法 来 编辑 和 美化 html， 也 
因此 它 是 个 明智 的 选择 。 除 此 之 外 ， 它 还 包括 高 级 的 选项 比如 按钮 配置 ， 自 定义 标 
签 和 为 用 户 做 最 明智 最 有 益 的 选择 。 


wrap}bootstrap Bootstrap Live Editor 





Bootstrap Live Editor ———— - 


4. Fancy Boot 


Fancyboot 是 个 非常 有 用 的 Bootstrap 自 定义 工具 ， 人 允许 用 户 编 辑 Bootstrap 的 配 

置 ， 自 动 预览 他 们 的 修改 结果 。 通 过 滑动 菜单 可 以 选择 需要 使 用 的 插件 和 组 件 。 当 
用 户 做 好 了 相应 的 修改 ， 可 以 下 载 一 个 包含 用 户 所 使 用 的 jQuery 插件 的 编译 好 的 

和 简化 后 的 CSS 文件 。 





Fancyboot 


5. Style Bootstrap 
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6. Lavish 


Lavish 是 个 帮助 用 户 从 一 个 图 像 中 定制 自己 喜欢 的 Bootstrap 配色 方案 。 用 户 可 以 
从 图 像 中 选择 各 种 颜色 用 在 body 背景 ， 链 接 ， 头 部 ， 菜 单 ， 标 签 ， 文 本 ， 下 拉 菜 
单 等 等 元 素 上 。 一 旦 你 确定 了 Bootstrap 配色 方案 ， 就 可 以 很 方便 的 下 载 相 应 的 
Boostrap.css 文件 。 


Lavish Home 


Github Page Live Preview 





Step 1: Provide an image 





https //sphotos-a-sic xx fbodn net/hphotos-prn1/163026 481734701986 7179594 nipg 


NABABAT SAAGASG (874934 #577492 #67655D #332C2F 





Step 2: Customize everything 


7T. Bootstrap ThemeRoller 
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7.Bootstrap ThemeRoller 


Bootstrap ThemeRoller 是 个 直观 的 web 应 用 程序 ， 提供 一 个 可 视 化 的 界面 让 用 户 
按照 自己 的 风格 创建 属于 自己 的 Bootstrap 主题 。 有 了 这 个 工具 ， 用 户 可 以 自 定 义 
颜色 ， 大 小 ， 字 体 ， 格 式 ， 表 ， 按 钮 ， 警 告 信 息 ， 导 航 条 ， 菜 单 等 等 元 素 。 这 个 应 
用 还 会 帮 用 户 创 建 的 每 种 风格 都 生成 唯一 的 一 个 URL ， 这 样 就 可 以 保存 用 户 所 有 
的 设置 。 更 不 可 思议 的 是 ， 当 用 户 离开 的 时 候 ， 用 户 可 以 停止 或 者 恢复 自己 定制 的 
| 


Bootstrap ThemeRoller 


A handy and intuitive application that provides a visual interface to customize 
your favorite Bootstrap from Twitter. 


Start rolling your Bootstrap theme 
LI " 


页 面 。 


8. Layoutit! 


Layoutlt ! 拥有 拖 搜 接口 的 功能 ， 能 简单 迅速 的 构建 一 个 Bootstrap 前 端 代码 。 
Layoutlt ! 兼容 任何 的 编程 语言 ， 人 允许 用 户 下 载 HTML ， 在 这 里 自由 的 进行 编码 设 


8 Layoutlt! - 


Create your frontend code simple and quickly with Bootstrap 
using our Drag & Drop Interface Builder. 


Start Now! Watch the live demo © 





9. Pingendo 
Pingendo 是 个 可 视 化 的 桌面 应 用 程序 ， 人 允许 用 户 给 予 流行 的 Twitter Bootstrap HE 


架 创 建 响 应 式 web 页面 原型 。Pingendo 还 提供 大 量 的 现成 的 布局 ， 拖 搜 元 素 的 位 
置 ， 调 整 大 小 和 自 定义 的 功能 。 用 户 可 以 自行 优化 他 们 的 页 面 ， 插 入 他 们 自己 的 内 
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Pingendo 
The simplest app to prototype with 





10. Kickstrap 


Kickstrap 是 个 Bootstrap Ul 编辑 器 ， 使 用 Firebase 作为 一 个 后 台 服 务 。 它 无 颖 的 
接合 了 Bootstrap 和 项 级 的 web 技术 。 更 厉害 的 是 ， 它 可 以 运行 一 个 已 验证 的 ， 不 
需要 本 地 后 台 支 持 ， 数 据 库 驱动 的 web 应 用 。 


HEP ox New Pree " - 








Integrated with Angular.js 


11. Bootply 


Bootply 是 一 款 很 棒 的 Bootstrap Ul 编辑 工具 ， 尽 可 能 简单 的 让 用 户 编辑 Bootstrap 
友好 的 CSS, HTML 和 Javascript 。 同 时 也 是 一 个 可 拖 搜 的 可 视 化 编辑 器 ， 用 来 
设计 ， 创 建 原型 和 测试 Bootstrap 框架 。Bootply 有 个 代码 存储 库 ， 里 面包 括 了 
Bootstrap 代码 片段 ， 示 例 和 模板 。 除 了 以 上 这 些 ， 更 吸引 人 的 是 它 有 个 非常 活跃 
的 Bootply 社区 ， 用 户 可 以 很 方便 的 发 现 ， 分 享 和 展示 相关 的 代码 和 片段 。 


Boopy CE oe a 





12. X-editable 


X-Editable 是 一 个 扩展 库 ， 人 允许 用 户 创建 可 编辑 的 元 素 ， 上 比如 页 面 弹 出 和 内 联 模 
式 。 她 提供 本 地 的 Bootstrap，jQuery UI 或 者 是 纯 jQuery 编辑 功能 。 此 Bootstrap 
Ul 编辑 器 拥有 许多 很 强大 的 功能 ， 包 括 客户 端 ， 服 务 辣 验证， 支持 键盘 ，live 事 
件 ， 可 定制 的 容器 空间 等 等 。 总 而 言 之 ， 它 提供 非常 快速 的 开发 功能 ， 易 于 删除 字 
段 ， 一 个 用 来 更 新 数据 的 简 简 单 后 台 脚 本 。 

X-editable 


Bootstrap jQuery UI jQuery 


13. Jetstrap 


不 要 错误 的 以 为 Jetstrap 只 是 个 简单 的 实体 模型 工具 ， 它 是 100% BF web 接口 
的 Twitter Bootstrap 构建 工具 。 用 户 不 需要 下 载 任 何 类 型 的 软件 就 可 以 使 用 
Jetstrap。 用 户 只 需要 登录 ， 然 后 构建 自己 的 项 目 ， 就 可 以 随时 随地 进行 访问 了 。 


构建 功能 主要 是 提供 给 开发 者 和 设计 者 的 ， 用 户 很 容易 就 可 以 通过 Jetstrap 生成 漂 
亮 的 网 站 ， 而 且 运 行 速度 非常 快 





* jetstrap 


THE BOOTSTRAP 3 BUILDER 


Not just a mock-up tool, Jetstrap is the premier interface-building tool for Bootstrap 3, 


GET STARTED NOW 


» OR TRY THE DEMO 


14. 


DivShot 是 个 快速 的 ， 可 视 化 的 前 端 开 发 文本 编辑 器 ， 跟 工具 一 样 的 简单 
整洁 。 包 括 各 种 框架 需要 的 各 种 定制 的 组 件 库 ， 这 是 它 提供 的 最 好 的 工具 之 一 。 除 
此 之 外 还 包括 了 一 个 主题 转换 器 ， 人 允许 用 户 修改 主题 。 试 验 版 本 是 免费 的 ， 过 了 试 
验 期 就 需要 自己 付费 维持 原来 的 服务 了 。 


> DIVSHOT 





15. 


PaintStrap 使 用 Adobe kuler/COLOURIovers 颜色 组 合 来 生成 漂亮 的 Twitter 
Bootstrap 主题 。 这 个 工具 特别 容易 安装 ， 同 时 很 容易 下 载 CSS 文件 并 且 也 很 容易 
蔡 换 成 另 一 个 标准 的 文件 。 
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PaintStrap Home Gattery e~ fh 


PaintStrap 


Generate beautiful Twitter Bootstrap themes using the Adobe kuler / COLOURIovers color scheme 


Step 1 input a color scheme Step È Set colors Step } Download CSS fies 


Step 1: Input a color scheme 


f^ Use an Adobe kuier color schwme(Color Theme) 
Pease roA a feme ID or a permalink URL 


Eg 1084168, 1006374, 2043016 
O Use a COLOURIOvers color schemejPalette| 


Pase cout à paiete ID or a permalink URL 


Eg 694737, 675929, 71121 
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Bootstrap HTML 编 码 规范 


语法 


。 用 两 个 空格 来 代替 制 表 符 (tab) -- 这 是 唯一 能 保证 在 所 有 环境 下 


现 的 方法 。 
e RETR SHR (MADE) 。 
e 对 于 属性 的 定义 ， 确 保全 部 使 用 双 引 号 ， 绝 不 要 使 用 单 引 号 。 


号 一 致 展 


e 不 要 在 自 闭合 (self-closing) 元 素 的 尾部 添加 斜 线 -- HTML5 规范 中 明确 说 明 


这 是 可 选 的 。 


e 不 要 省 上 略 可 选 的 结束 标签 (closing tag) (例如 ，  &1t;/li&gt; 


&lt;/body&gt; ) 。 


实例 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Page title</title> 
</head> 
<body> 
<img src="images/company-logo.png" alt="Company"> 
«hi class="hello-world">Hello, world!</h1> 
</body> 
</html> 


HTML5 doctype 


为 每 个 HTML 页 面 的 第 一 行 添 加 标准 模式 (standard mode) 的 声明 ， 这 


保 在 每 个 浏览 器 中 拥有 一 致 的 展现 。 


实例 : 
<!DOCTYPE html» 
<html> 
<head> 


</head> 
</html> 


语言 属性 


根据 HTML5 规范 : 


EB 


E45 Ff 


强烈 建议 为 html 根 元 素 指定 lang 属性 ， 从 而 为 文档 设置 正确 的 语言 。 这 将 有 助 于 
语音 合成 工具 确定 其 所 应 该 采用 的 发 音 ， 有 助 于 翻译 工具 确定 其 翻译 时 所 应 遵守 的 
规则 等 等 。 

更 多 关于 lang 属性 的 知识 可 以 从 此 规范 FR T f. 


这 里 列 出 了 语言 代码 表 。 
«html lang="zh-CN"> 
<!-- --> 


</html> 


IE 兼容 模式 


IE 支持 通过 特定 的 &lt;meta&gt; 标签 来 确定 绘制 当前 页 面 所 应 该 采用 的 IE 版 
本 。 除 非 有 强烈 的 特殊 需求 ， 否 则 最 好 是 设置 为 edge mode， 从 而 通知 IE 采用 其 
所 支持 的 最 新 的 模式 。 


<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 


字符 编码 


通过 明确 声明 字符 编码 ， 能 够 确保 浏览 器 快速 并 容易 的 判断 页 面 内 容 的 泻 染 方式 。 
这 样 做 的 好 处 是 ， 可 以 避免 在 HTML 中 使 用 字符 实体 标记 (character entity) , M 
而 全 部 与 文档 编码 一 致 (一般 采用 UTF-8 编码 ) o 


<head> 
<meta charset="UTF-8"> 
</head> 


引入 CSS 和 JavaScript 文件 


根据 HTML5 规范 ， 在 引入 CSS 和 JavaScript 文件 时 一 般 不 需要 指定 type 属 
性 ， 因 为 text/css 和 text/javascript 分 别 是 它们 的 默认 值 。 


HTML5 spec links 


e Using link 
e Using style 
e Using script 


<!-- External CSS --> 
<link rel="stylesheet" href="code-guide.css"> 


<!-- In-document CSS --> 
<style> 
| Somer ora 
</style> 
<!-- JavaScript --> 


<script src="code-guide.js"></script> 


实用 为 王 


尽量 遵循 HTML 标准 和 语义 ， 但 是 不 要 以 牺牲 实用 性 为 代价 。 任 何 时 候 都 要 尽量 使 
用 最 少 的 标签 并 保持 最 小 的 复杂 度 。 


属性 顺序 
HTML 属性 应 当 按照 以 下 给 出 的 顺序 依次 排列 ， 确 保 代 码 的 易 读 性 。 


e class 

e id=, name 

e data-* 

e src, for , type , href 
e title , alt 

e aria-* , role 


class 用 于 标识 高 度 可 复 用 组 件 ， 因 此 应 该 排 在 首位 。id 用 于 标识 具体 组 件 ， 应 当 
谨慎 使 用 〈 例 如， 页 面 内 的 书签 ) ， 因 此 排 在 第 二 位 。 


«a classz"..." id="..." data-modal-"toggle" href="#"> 
Example link 
</a> 


<input class="form-control" type="text"> 


<img src="..." alt="..."> 


布尔 (boolean) 型 属性 


布尔 型 属 高 性 可 以 在 声明 时 不 赋值 。 XHTML 规范 要 求 为 其 赋值 ， 但 是 HTML5 规范 


更 多 信息 请 参考 WhatWG section on boolean attributes : 


元 素 的 布尔 型 属性 如 果 有 值 ， 就 是 true， 如 果 没 有 值 ， 就 是 false。 
如 果 一 定 要 为 其 赋值 的 话 ， 请 参考 WhatWG 规范 : 


如 果 属性 存在 ， 其 值 必 须 是 空 字符 串 或 […] 属性 的 规范 名 称 ， 并 且 不 要 再 收尾 添加 
空白 符 。 


简单 来 说 ， 就 是 不 用 赋值 。 
<input type="text" disabled> 
<input type="checkbox" value="1" checked> 
<select> 


<option value="1" selected>1</option> 
</select> 


减少 标签 的 数量 


编写 HTML 代码 时 ， 尽 量 避 免 多 余 的 父 元 素 。 很 多 时 候 ， 这 需要 和 迭代 和 重 构 来 实 
现 。 请 看 下 面 的 案例 : 


<!-- Not so great --> 
«span class="avatar"> 
<img src="..."> 
</span> 
<!-- Better --> 
<img class="avatar" src="..."> 


JavaScript 生成 的 标签 


通过 JavaScript 生成 的 标签 让 内 容 变 得 不 易 查 找 、 编 辑 ， 并 且 降 低 性 能 。 能 避免 时 
尽量 避免 。 


Bootstrap CSS 编 码 规范 


语法 


e Dd a (tab) -- 这 是 唯一 能 保证 在 所 有 环境 下 获得 一 致 展 

现 的 万 法 。 

为 选择 器 分 组 时 ， 将 单独 的 选择 器 单独 放 在 一 行 。 

为 了 代码 的 易 读 性 ， 在 每 个 声明 块 的 左 花 括 号 前 添加 一 个 空 

声明 块 的 右 花 括号 应 当 单独 成 行 。 

每 条 声明 语句 的 : 后 应 该 插入 一 个 空格 。 

为 了 获得 更 准确 的 错误 报告 ， 每 条 声明 都 应 该 独占 一 行 。 

所 有 声明 语句 都 点 当 以 分 号 结尾 。 最 后 一 条 声明 语句 后 面 的 分 号 是 可 选 的 ， 但 

是 ， 如 果 省 略 这 个 分 号 ， 你 的 代码 可 能 更 易 出 错 。 

e 对 于 以 逗号 分 隔 的 属性 值 ， 每 个 逗号 后 面 都 应 该 插入 一 个 空格 CB 
如 ， box-shadow ) 。 

e 不 要 在 rgb(). rgba(). hsl(). hsla() 或 rect() 值 的 内 部 的 去 
号 后 面 插 和 空格。 这样 利 于 从 多 个 属性 值 〈 既 加 逗号 也 加 空格 ) 中 区 分 多 个 颜 
色 值 (只 加 逗号 ， 不 加 空格 ) 。 

e 对 于 属性 值 或 颜色 参数 ， 省 略 小 于 1 的 小 数 前 面 的 0 (例如 ， ,5 KE 
0.5 ; -.5px 代替 -0.5px ) 。 

十 六 进 制 值 应 该 全 部 小 写 ， 例 如 ， #fff 。 在 扫描 文档 时 ， 小 罕 字符 易于 分 

辨 ， 因 为 他 们 的 形式 更 易于 区 分 。 

e 尽量 使 用 简写 形式 的 十 六 进 制 值 ， 例 如 ， 用 #fff RE #ffffff 。 

e 为 选择 器 中 的 属性 添加 双 引 号 ， 例 如 ，  input[type-"text"] 。 只 有 在 某 些 
情况 下 是 可 选 的 ， 但 是 ， 为 了 代码 的 一 致 性 ， 建 议 都 加 上 双 引 号 。 

e 避免 为 0 值 指定 单位 ， 例 如 ， 用 margin: 0; RÆ margin: Opx; o 


对 于 这 里 用 到 的 术语 有 疑问 吗 ? 请 参考 Wikipedia 上 的 syntax section of the 
Cascading Style Sheets article。 


/* Bad CSS */ 
.selector, .selector-secondary, .selector[type=text] { 
padding:15px; 
margin:Opx Opx 15px; 
background-color:rgba(0, 0, 0, 0.5); 
box-shadow:@px 1px 2px #CCC,inset © 1px © #FFFFFF 
} 


/* Good CSS */ 
.selector, 
.selector-secondary, 
.selector[type="text"] { 
padding: 15px; 
margin-bottom: 15px; 
background-color: rgba(0,0,0,.5); 
box-shadow: © 1px 2px #ccc, inset © 1px © #fff; 
} 


声明 顺序 
相关 的 属性 声明 应 当 必 为 一 组 ， 并 按照 下 面 的 顺序 排列 : 


1. Positioning 
2. Box model 
3. Typographic 
4. Visual 


由 于 定位 (positioning) 可 以 从 正常 的 文档 流 中 移 除 元 素 ， 并 且 还 能 覆盖 爹 模型 
(box model) 相关 的 样式 ， 因 此 排 在 首位 。 盒 模型 排 在 第 二 位 ， 因 为 它 决定 了 组 
件 的 尺寸 和 位 置 。 


其 他 属性 只 是 影响 组 件 的 内 部 (inside) 或 者 是 不 影响 前 两 组 属性 ， 因 此 排 在 后 
面 。 


完整 的 属性 列表 及 其 排列 顺序 请 参考 Recess, 


.declaration-order { 
/* Positioning */ 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
z-index: 100; 


/* Box-model */ 
display: block; 
float: right; 
width: 100px; 
height: 100px; 


/* Typography */ 

font: normal 13px "Helvetica Neue", sans-serif; 
line-height: 1.5; 

color: #333; 

text-align: center; 


/* Visual */ 
background-color: #f5f5f5; 
border: 1px solid #e5e5e5; 
border-radius: 3px; 


7 Mise t/ 
opacity: 1; 


不 要 使 用 @import 


& &lt;link&gt; 标签 相 比 ， @import 指令 要 慢 很 多 ， 不 光 增 加 了 额外 的 请 求 
次 数 ， 还 会 导致 不 可 预料 的 问题 。 蔡 代办 法 有 以 下 几 种 : 


e 使 用 多 个 &lt;link&gt; TOM 
e 通过 Sass 或 Less 类 似 的 CSS 预 处 理 器 将 多 个 CSS 文件 编译 为 一 个 文件 
e 通过 Rails, Jekyll 或 其 他 系统 中 提供 过 CSS 文件 合并 功能 


请 参 者 Steve Souders 的 文章 了 解 更 多 知识 。 


<!-- Use link elements --> 
<link rel="stylesheet" href="core.css"> 


<!-- Avoid @imports --> 
<style> 

@import url("more.css"); 
</style> 


媒体 查询 (Media query) 的 位 置 


将 媒体 查询 放 在 尽 可 能 相关 规则 的 附近 。 不 要 将 他 们 打包 放 在 一 个 单一 样式 文件 中 
或 者 放 在 文档 底部 。 如 果 你 把 他 们 分 开 了 ， 将 来 只 会 被 大 家 次 忘 。 下 面 兴 出 一 个 
型 的 实例 。 


.element { ... } 
.element-avatar { ... } 
.element-selected { ... } 


@media (min-width: 480px) { 
.element { ...} 
.element-avatar { ... } 
.element-selected { ... } 


带 前 级 的 属性 


当 使 用 特定 厂商 的 带 有 前 级 的 属性 时 ， 通 过 缩 进 的 方式 ， 让 每 个 属性 的 值 在 垂直 方 
向 对 齐 ， 这 样 便于 多 行 编辑 。 

在 Textmate 中 ， 使 用 Text 一 Edit Each Line in Selection (??A)。 在 Sublime 
Text 2 中 ， 使 用 Selection — Add Previous Line (??1) 和 Selection — Add 
Next Line (??]). 


/* Prefixed properties */ 
.selector ( 
-webkit-box-shadow: © 1px 2px rgba(0,0,0,.15); 
box-shadow: 0 1px 2px rgba(0,0,0,.15); 


单行 规则 声明 

对 于 只 包含 一 条 声明 的 样式 ， 为 了 易 读 性 和 便于 快速 编辑 ， 建 议 将 语句 放 在 同一 

行 。 对 于 带 有 多 条 声明 的 样式 ， 还 是 应 当 将 声明 分 为 多 行 。 

这 样 做 的 关键 因素 是 为 了 错误 检测 -- 例如 ，CSS 校 验 器 指出 在 183 行 有 语法 错 

误 。 如 果 是 单行 单条 声明 ， 你 就 不 会 忽略 这 个 错误 ; 如 果 是 单行 多 条 声明 的 话 ， 你 
就 要 仔细 分 析 避 免 漏 掉 错 误 了 。 


/* Single declarations on one line */ 
.Shani { width: 60px; } 
.span2 { width: 140px; } 
.span3 { width: 220px; } 


/* Multiple declarations, one per line */ 
.Shrite { 

display: inline-block; 

width: 16px; 

height: 15px; 

background-image: url(../img/sprite.png); 
} 
.icon 1 background-position: © 0; } 
.icon-home { background-position: © -20px; } 
. icon-account { background-position: © -40px; } 


简写 形式 的 属性 声明 


在 需要 显示 地 设置 所 有 值 的 情况 下 ， 应 当 尽 量 限制 使 用 简写 形式 的 属性 声明 。 常 见 
的 滥用 简写 属性 声明 的 情况 如 下 : 


padding 
margin 

font 
background 
border 
border-radius 


大 部 分 情况 下 ， 我 们 不 需要 为 简写 形式 的 属性 声明 指定 所 有 值 。 例 如 ，HTML 的 
heading 元 素 只 需要 设置 上 、 下 边 距 (margin) 的 值 ， 因 此 ， 在 必要 的 时 候 ， 只 需 
覆盖 这 两 个 值 就 可 以 。 过 度 使 用 简写 形式 的 属性 声明 会 导致 代码 混乱 ， 并 且 会 对 属 
性 值 带 来 不 必要 的 覆盖 从 而 引起 意外 的 副作用 。 


MDN (Mozilla Developer Network) 上 一 片 非常 好 的 关于 shorthand properties 的 
文章 ， 对 于 不 太 熟 悉 简 写 属 性 声明 及 其 行为 的 用 户 很 有 用 。 


/* Bad example */ 
.element { 
margin: © © 10px; 
background: red; 
background: url("image.jpg"); 
border-radius: 3px 3px 0 0; 


j 

/* Good example */ 

.element { 
margin-bottom: 10px; 
background-color: red; 
background-image: url("image.jpg"); 
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 

j 


Less 和 Sass rh E 


HERIEVDSNRE, REA SZXMQSDBRHEE, BIJETEDG BR 
套 。 只 有 在 必须 将 样式 限制 在 父 元 素 内 (也 就 是 后 代 选 择 器 ) ， 并 且 存 在 多 个 需要 
RENTREE. 


// Without nesting 
.table > thead > tr > th {.. ) 
.table > thead > tr > td { ... } 


// With nesting 
.table > thead > tr { 


d a h 
2 o 0 o 
} 
注释 


代码 是 由 人 编写 并 维护 的 。 请 确保 你 的 代码 能 够 自 描述 、 注 释 良 好 并 且 易 于 他 人 理 
解 。 好 的 代码 注释 能 够 传达 上 下 文 关系 和 代码 目的 。 不 要 简单 地 重申 组 件 或 class 
名 称 。 


对 于 较 长 的 注释 ， 务 必 书 写 完 整 的 句子 ; 对 于 一 般 性 注解 ， 可 以 书写 简洁 的 短语 。 


/* Bad example */ 
/* Modal header */ 
.modal-header { 


: se 


/* Good example */ 
/* Wrapping element for .modal-title and .modal-close */ 
.modal-header { 


} 


class 命名 


e class 名 称 中 只 能 出 现 小 写字 符 和 破 折 号 (dashe) (不 是 下 划 线 ， 也 不 是 驼峰 
MAE) 。 破 折 号 应 当 用 于 相关 class 的 命名 (类似 于 命名 空间 ) C] 
如 ， .btn 和 .btn-danger ) 。 

e 避免 过 度 任 意 的 简写 。 .btn 代表 button， 但 是 .s 不 能 表达 任何 意思 。 

e class 名 称 应 当 尽 可 能 短 ， 并 且 意 义 明 确 。 

e 使 用 有 意义 的 名 称 。 使 用 有 组 织 的 或 目的 明确 的 名 称 ， 不 要 使 用 表现 形式 
(presentational) 的 名 称 。 

基于 最 近 的 父 class 或 基本 (base) class 作为 新 class 的 前 级 。 

e 使 用 .js-* class 来 标识 行为 (和 与 样式 相对 ) ， 并 且 不 要 将 这 些 cass 包含 
到 CSS 文件 中 。 


在 为 Sass 和 Less 变量 命名 是 也 可 以 参考 上 面 列 出 的 各 项 规范 。 


/* Bad example */ 
Si Coe dee 

neden ccc 
.header { ... } 


/* Good example */ 
.tweet { ... } 

. Important { ... } 
.tweet-header { ... } 


选择 如 


对 于 通用 元 素 使 用 class ， 这 样 利 于 泻 染 性 能 的 优化 。 

e 对 于 经 常 出 现 的 组 件 ， 避 免 使 用 属性 选择 器 (例如 ， [class^="..."] ) 。 
浏览 器 的 性 能 会 受到 这 些 因 素 的 影响 。 

e 选择 器 要 尽 可 能 短 ， 并 且 尽 量 限 制 组 成 选择 器 的 元 素 个 数 ， 建 议 不 要 超过 3 

e 只 有 在 必要 的 时 候 才 将 class 限制 在 最 近 的 父 元 素 内 (也 就 是 后 代 选 择 器 ) 

“(Bil 如 ， 不 使 用 带 前 级 的 class 时 -- 前 级 类 似 于 命名 空间 ) 。 


扩展 阅读 : 


e Scope CSS classes with prefixes 
e Stop the cascade 


/* Bad example */ 


span { ... } 
.page-container #stream .stream-item .tweet .tweet-header .username 
„avatar ( ... } 


/* Good example */ 


„avatar { ... 
.tweet-header .username { ... } 
.tweet .avatar { ... } 


LN» : 





代码 组 织 

e 以 组 件 为 单位 组 织 代 码 段 。 

e 制定 一 致 的 注释 规范 。 

e 使 用 一 致 的 空白 符 将 代码 分 隔 成 块 ， 这 样 利 于 扫描 较 大 的 文档 。 

e 如 果 使 用 了 多 个 CSS 文件 ， 将 其 按照 组 件 而 非 页 面 的 形式 分 拆 ， 因 为 页 面 会 


被 重组 ， 而 组 件 只 会 被 移动 。 


Vas 

* Component section heading 
iD 

.element { ... ) 

VES 


* Component section heading 
* 


* 


“7 


Sometimes you need to include optional context for the entire cc 


.element { ... ) 


/* Contextual sub-component or modifer */ 
.element-heading { ... } 


SSS SSS ex] 
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将 你 的 编辑 器 按照 下 面 的 配置 进行 设置 ， 以 避免 常见 的 代码 不 一 致 和 差异 : 
e 用 两 个 空格 代替 制 表 符 (soft-tab 即 用 空格 代表 tab 符 ) 。 





e 保存 文件 时 ， 删 除 尾部 的 空白 符 。 
。 设置 文件 编码 为 UTF-8。 
e. 在 文件 结尾 添加 一 个 空白 行 。 


参照 文档 并 将 这 些 配置 信息 添加 到 项 目的 .editorconfig 文件 中 。 例 如 : 
Bootstrap 中 的 .editorconfig 实例 。 更 多 信息 请 参考 about EditorConfig. 


W3School Foundation 教程 


作者 : W3School 
来 源 : Foundation 教程 


Foundation A i] 


W3School 前 端 教程 合集 


Foundation 5 简介 





Foundation 用 于 开发 响应 式 的 HTML, CSS and JavaScript 框架 。 
Foundation 是 一 个 易 用 、 强 大 而 且 有 灵活 的 框架 ,用 于 构建 基于 任何 设备 上 的 Web & 


o 


Foundation 是 一 个 以 移动 优先 的 流行 框架 。 


在 线 实例 
8 AAS FEA Foundation 实例 。 
你 可 以 直接 使 用 我 们 的 在 线 编辑 器 ， 并 点 击 "提交 运行 "按钮 查看 结果 : 


Foundation 实例 
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<div class="row"> 
<div class="medium-12 columns"> 
«div class="panel"> 
<hi>Foundation Page</h1i> 
<p>Resize this responsive page to see the effect!</p> 
<button type="button" class="button small">I Like It!</buttor 
</div> 
</div> 
</div> 


<div class="row"> 

<div class="medium-4 columns"> 
<h3>Column 1</h3> 
<p>Lorem ipsum. .</p> 

</div> 

<div class="medium-4 columns"> 
<h3>Column 2</h3> 
<p>Lorem ipsum. .</p> 

</div> 

<div class="medium-4 columns"> 
<h3>Column 3</h3> 
<p>Lorem ipsum. .</p> 

</div> 


</div> 


El 
点 击 "尝试 一 下 "按钮 查看 在 线 实例 。 





Foundation 特性 
以 下 效果 为 在 iframe 标签 中 的 演示 ， 可 以 点 击 "党 试 一 下 "查看 在 线 实例 : 


按钮 


表格 : 


Firstname Lastname Email 


John Doe john@example.com 
Mary Moe mary@example.com 
July Dooley july@example.com 


E Hem: 





span span span span span span span span span span span span 
1 1 1 1 1 1 1 1 1 1 1 1 


span 4 span 4 span 4 
span 4 span 8 
span 6 span 6 


span 12 


` 


HER: 


ird 


面板 : 


Gray Panel Blue Panel 


Panel Text Panel Text 


FAX: 


Dropdown Button ~ 


Link 1 
Link 2 


Link 3 


Accordion 1 
Demo 1 - Lorem ipsum dolor sit amet.... 
Accordion 2 


Accordion 3 


顶部 导航 : 


Home Sign Up Search 


模 态 框 : 


W3School 前 端 教 程 合集 


模 态 框 标题 。 
Beck. 


模 态 框 文本 。 
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Foundation 起 步 


什么 是 Foundation ? 


e Foundation 是 一 个 免费 的 前 端 框 架 ， 用 于 快速 开发 。 

e Foundation 包含 了 HTML 和 CSS 的 设计 模板 ， 提 供 多 种 Web 上 的 UI 组 件 ， 
WRA., a, Tabs 等 等 。 同 时 也 提供 了 多 种 JavaScript 插件 。 

e Foundation 移动 优先 ， 可 创建 响应 式 网 页 。 

e Foundation 适用 于 初学 者 和 专业 人 士 。 

e Foundation 已 使 用 在 Facebook, eBay, Samsung, Amazon, Disney 等 。 
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什么 是 响应 式 网 页 设计 ? 
响应 式 Web 设 计 (Responsive Web design) 的 理念 是 : 页 面 的 设计 与 开发 应 当 


根据 用 户 行为 以 及 设备 环境 (系统 平台 、 屏 幕 尺寸 、 屏 幕 定向 等 ) 进 行 相应 的 响 
应 和 调整 。 


从 哪里 下 载 Foundation? 


你 可 以 通过 以 下 两 种 方式 来 获取 Foundation : 
1、 从 官网 下 载 最 新 版 本 : http://foundation.zurb.com/。 
2、 使 用 菜 乌 教程 官网 提供 的 CDN (推荐 ) 


<!-- css 文件 --> 
<link rel="stylesheet" href="http://static.runoob.com/assets/foundé 


Se ue gas 
«script src="http://static.runoob.com/assets/jquery/2.0.3/jquery.m: 


<!-- JavaScript 文件 --> 
«script srcz"http://static.runoob.com/assets/foundation-5.5.3/js/f« 


<!-- modernizr 文件 --» 
«script src="http://static.runoob.com/assets/foundation-5.5.3/js/ve 


本 站 静态 CDN 基于 阿里 云 服务 。 
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Foundation 使 用 CDN 的 优势 : 


Foundation 使 用 CDN 提高 了 企业 站 点 (尤其 含有 大 量 图 片 和 静态 页 面 站 点 ) 的 
访问 速度 ， 并 大 大 提高 以 上 性 质 站 点 的 稳定 性 


为 什么 使 用 modernizr? 


一 些 Foundation 的 组 件 使 用 了 上 比较 前 前 治 的 HTML5 和 CSS3 特性 ， 但 不 是 
所 有 浏览 器 都 支持 。 Modernizr 是 一 个 用 于 检测 用 户 浏览 器 HTML5 和 CSS3 特 
性 的 JavaScript 库 - 让 组 件 能 在 所 有 浏览 器 上 正常 运行 。 


使 用 Foundation 创建 页 面 


1. 添加 HTML5 doctype 


Foundation 使 用 HTML 元 素 和 CSS 属性 ， 所 以 需要 添加 HTML5 doctype 文档 类 
型 声明 。 


同时 我 们 可 以 设置 文档 的 语言 属性 lang 及 字符 编码 : 


«IDOCTYPE html» 
«html lang="zh-cn"> 
«head» 
«meta charset="utf-8"> 
«/head» 
«/html» 


2. Foundation 5 移动 优先 

Foundation 5 为 移动 设备 的 响应 式 设 计 。 框 架 的 核心 是 移动 优先 。 
为 了 确保 页 面 可 自由 缩放 可 以 在 &lt;head&gt; 元 素 中 添加 以 下 
&lt;meta&gt; 标签 : 


«meta name-"viewport" content="width=device-width, initial-scale=1' 
4| aT 


e width : 控制 viewport 的 大 小 ， 可 以 指定 的 一 个 值 ， 如 果 600， 或 者 特殊 的 
值 ， 如 device-width 为 设备 的 宽度 (单位 为 缩放 为 100% 时 的 CSS BUR 
素 ) 。 

e initial-scale : 初始 缩放 比例 ， 也 即 是 当 页 面 第 一 次 load 的 时 候 缩 放 上 比例 。 


3. 初始 化 组 件 


一 些 Foundation 组 件 是 基于 jQuery 开放 的 ， 如 : 模 态 框 、 下 拉 菜 单 等 。 你 可 以 使 
用 以 下 脚本 来 初始 化 组 件 : 





<script> 
$(document).ready(function() { 
$(document).foundation(); 


;) 


«/script» 


基本 Foundation 页 面 


如 何 创 建 一 个 基本 的 foundation 页 面 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Foundation Example</title> 
<meta charset="utf-8"> 
«meta name="viewport" content="width=device-width, initial-scale: 
<!-- css 文件 --> 
<link rel="stylesheet" href="http://static.runoob.com/assets/four 


<!-- jQuery Æ --> 
<script src="http://static.runoob.com/assets/jquery/2.0.3/jquery 


<!-- JavaScript 文件 --> 
<script src="http://static.runoob.com/assets/foundation-5.5.3/js, 


<!-- modernizr 文件 --> 

«script src="http://static.runoob.com/assets/foundation-5.5.3/js, 
</head> 
<body> 


<div class="row"> 
<div class="medium-12 columns"> 
«div class="panel"> 
<hi>Foundation 页 面 </h1> 
<p> 重 置 窗口 大 小 ， 查 看 效果 ! </p> 
«button type="button" class="button small">I Like It!</buttor 
</div> 
</div> 
</div> 


<div class="row"> 
<div class="medium-4 columns"> 
<h3>Column 1</h3> 
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div> 
<div class="medium-4 columns"> 
<h3>Column 2</h3> 
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div> 
<div class="medium-4 columns"> 
<h3>Column 3</h3> 
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div> 
</div> 


</body> 
</html> 








Foundation 文本 


Foundation 默认 设置 


Foundation 使 用 浏览 器 默认 字体 大 小 ( font-size:100% )。 对 于 大 多 数 桌 面 浏 览 
器 来 说 ， 字 体 默 认为 16px。 对 于 大 多 数 移 动 端 浏览 器 来 说 ， 字 体 默 认为 12px。 默 
认 的 字体 为 "Helvetica Neue" ， line-height 默认 为 1.5 。 


以 上 默认 的 设置 均 是 针对 &lt;body&gt; 元 素 。 


Foundation 文字 排列 设计 


本 章节 我 们 将 讨论 Foundation 的 文字 排列 设计 。 
以 下 实例 的 真实 样式 请 通过 点 击 "党 试 一 下 "按钮 查看 。 


<h1> - <h6> 


Foundation EPI HTML 标题 ( &lt;hl&gt; 到 &lt;h6&gt; ) 如 下 所 示 : 
实例 
头 


«hi»hi 标题 </h1> 
<h2>h2 标题 </h2> 
<h3>h3 标题 </h3> 
<h4>h4 标题 </h4> 
<h5>h5 标题 </h5> 
<h6>h6 标题 </h6> 


提示 : 如 果 需 要 创建 一 个 浅 色 的 标题 ， 可 以 在 元 素 上 添加 .subheader X: 
实例 


«hi class="subheader">h1.subheader</hi> 
<h2 class="subheader">h2.subheader</h2> 
<h3 class="subheader">h3.subheader</h3> 
«h4 class="subheader">h4.subheader</h4> 
<h5 class="subheader">h5.subheader</h5> 
«h6 class="sSubheader">h6.subheader</h6> 


<small> 


在 Foundation FP, HTML &lt;small&gt; 元 素 用 于 创建 一 个 浅 色 的 副标题 : 
实例 
头 


<hi>hi heading <small>secondary text</small></h1> 
<h2>h2 heading <small>secondary text</small></h2> 
<h3>h3 heading <small>secondary text</small></h3> 
<h4>h4 heading <small>secondary text</small></h4> 
<h5>h5 heading <small>secondary text</small></h5> 
<h6>h6 heading <small>secondary text</small></h6> 


<a> 
Foundation &lt;a&gt; 元 素 的 样式 如 下 所 示 : 


实例 


<p> 这 是 一 个 «a class="a" href="#"> 链 接 </a>。</p> 


<abbr> 


Foundation &lt;abbr&gt; ”元素 的 样式 如 下 所 示 : 


实例 


<p>The «abbr title="World Health Organization">WHO</abbr> was founi 





<blockquote> 


Foundation &lt;blockquote&gt; 元 素 的 祥 式 如 下 所 示 : 


实例 


<blockquote> 
<p> 学 的 不 仅 是 技术 ， 更 是 梦想 ! </p> 
<cite> 菜 乌 教 程 </cite> 
</blockquote> 


«dl» 


Foundation &lt;dl&gt; 元 素 的 样式 如 下 所 示 : 


实例 
«dl» 
<dt>Coffee</dt> 
<dd>- black hot drink</dd> 
<dt>Milk</dt> 
<dd>- white cold drink</dd> 
</dl1> 
<code> 


Foundation &lt;code&gt; ”元素 的 样式 如 下 所 示 : 
实例 
头 


<p> 以 下 HTML 元 素 : <code>span</code>, <code>section</code>, #] «code 


a 一 -一 





<kbd> 


Foundation &lt;kbd&gt; 元素 的 样式 如 下 所 示 : 
实例 
头 


<p> 按 下 «kbd»ctrl + p</kbd> 键 打开 打印 窗口 。</p> 


<hr> 


Foundation &lt;hr&gt; 元 素 的 样式 如 下 所 示 : 
实例 


<hr> 


Foundation 表格 
Foundation BY &lt;table&gt; ”元素 样 式 为 灰色 斑马 条 纹 且 包含 四 个 边框 : 


Firstname Lastname Email City Age Country 
John Doe john@example.com New York 35 USA 
Mary Moe mary@example.com Chicago 51 USA 


July Dooley july@example.com San Francisco 38 USA 


实例 


<table> 
<thead> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Doe</td> 
<td>john@example.com</td> 
</tr> 
<tr> 
<td>Mary</td> 
<td>Moe</td> 
<td>mar y@example.com</td> 
</tr> 
<tr> 
<td>July</td> 
<td>Dooley</td> 
<td>july@example.com</td> 
</tr> 
</tbody> 
</table> 


响应 陈 表格 


使 用 CSS 让 表格 支持 响应 式 设计 : 在 表格 外 添加 &lt;div&gt; 元 素 ， 样 式 为 


overflow-x:hidden : 
实例 


<div style="overflow-x:hidden"> 
<table> 
</table> 

</div> 


Foundation 按钮 


按钮 样式 


Foundation 提供 了 6 种 按钮 样式 。 .button 类 创建 了 一 个 蓝 色 的 按钮 并 附 有 内 
边 距 。 不 同 颜色 按钮 类 为 : «secondary , ,success , .info , .warning 或 
,alert : 


实例 


<button type="button" class="button">Default</button> 

«button type="button" class="button secondary">Secondary</button> 
<button type="button" class="button success">Success</button> 
<button type="button" class="button info">Info</button> 

<button type="button" class="button warning">Warning</button> 
<button type="button" class="button alert">Alert</button> 


dmm SS eS ee ee ms] 


按钮 类 可 以 使 用 在 &lt;a&gt; , &lt;button&gt; , X &lt;input&gt; 元 素 : 
实例 
头 


<a href="#" class="button info" role="button">Link Button</a> 
<button type="button" class="button info">Button</button> 
<input type="button" class="button info" value="Input Button"> 
<input type="submit" class="button info" value="Submit Button"> 
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为 什么 将 a 标签 的 href 设置 为 #3 


当 我 们 不 希望 链接 点 击 跳 转 并 得 到 "404" nit, BNL a 标签 的 href 设 
置 为 #。 


按钮 大 小 
我 们 可 以 使 用 .large , .small 或 .tiny 类 来 设置 按钮 大 小 : 


实例 


«button type="button" class="button large">Large</button> 
<button type="button" class="button">Default</button> 
«button type="button" class="button small">Small</button> 
<button type="button" class="button tiny">Tiny</button> 


[3] f8 FR 4H 


可 以 使 用 .radius 和 .round 类 来 设置 圆 角 按 钮 : 
实例 
头 


<button type="button" class="button">Default Button</button> 
<button type="button" class="button radius">Radius Button</button> 
<button type="button" class="button round">Round Button</button> 


LN uU 
延展 按钮 
可 以 使 用 .expand 类 来 设置 按钮 的 宽带 为 10096: 
实例 
<button type="button" class="button">Default Button</button> 
<button type="button" class="button expand">Expanded Button</buttor 


E ES 


RHAH 


可 以 使 用 .disabled 类 来 设置 按钮 不 可 点 击 : 





实例 


<button type="button" class="button">Default Button</button> 
«button type="button" class="button disabled">Disabled Button</butt 


sy 





Foundation 按钮 组 


按钮 组 


Foundation 可 以 在 同一 行内 创建 一 系列 的 按钮 。 
可 以 使 用 &lt;ul&gt; 元 素 并 添加 .button-group 类 来 创建 按钮 组 : 


实例 


<ul class="button-group"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


垂直 按钮 组 


垂直 按钮 组 使 用 stack 类 来 创建 。 注 意 ， 按 钮 会 跨越 父 元 素 的 整个 宽度 : 
实例 


<ul class="button-group stack"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</but ton></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


.stack-for-small AF RUGS, TRA AKEHE Y AEAEE]: 
实例 


«ul class-"button-group stack-for-small"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


[3] £8 T£ 4n 28. 


按钮 组 中 使 用 .radius 和 .round 类 为 按钮 添加 圆 角 效果 : 
实例 


<ul class="button-group radius"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


<ul class="button-group round"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 


<li><button type="button" class="button">Sony</button></1i> 
</ul> 


均匀 延展 按钮 组 


.even-num 类 用 于 在 按钮 组 中 均匀 的 分 配 按钮 的 宽度 并 跨越 父 元 素 100% 宽度 。 
num 为 按钮 组 中 按钮 的 数量 ， 从 1 到 8: 


实例 


<ul class="button-group even-3"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 


</ul> 


<ul class="button-group even-5"> 


<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
<li><button type="button" class="button">HTC</button></1i> 
<li><button type="button" class="button">Huawei</button></1i> 


</ul> 


<ul class="button-group even-8"> 


<li><button type="button" class="button">A</button></1i> 
<li><button type="button" class="button">B</button></1i> 
<li><button type="button" class="button">C</button></1i> 
<li><button type="button" class="button">D</button></1i> 
<li><button type="button" class="button">E</button></1i> 
<li><button type="button" class="button">F</button></1i> 
<li><button type="button" class="button">G</button></1i> 
<li><button type-"button" class="button">H</button></1i> 
</ul> 


下 拉 菜 单 按钮 
下 拉 菜 单 按钮 可 以 让 用 户 选 取 设 定好 的 值 : 


实例 


<!-- Trigger the dropdown --> 
«a href="#" data-dropdown="id01i" class="button dropdown">Dropdown 上 


<!-- The actual dropdown --> 

«ul id-"idO1" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 

</ul> 

<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 

$(document).foundation(); 
3) 


«/script» 


四 Eee 
实例 解析 


.dropdown 类 创建 一 个 下 拉 菜 单 按钮 。 
使 用 带 有 data-dropdown="_id_" 属性 的 按钮 或 链接 打开 下 拉 菜 单 。 


id 值 需要 与 下 拉 菜单 的 内 容 (id01) 匹配 。 


在 &lt;ul&gt; 中 添加 .f-dropdown 类 和 data-dropdown-content 属性 来 
创建 下 拉 菜 单 的 内 容 。 


后 初始 化 Foundation JS。 


分 割 按钮 


我 们 也 可 以 创建 一 个 分 割 按钮 的 下 拉 菜 单 。 只 需要 在 按钮 中 添加 . Split 类 并 使 
用 span 元 素 生 成 一 个 方向 箭 的 按钮 : 


实例 





<button class="button split">Split Button 
«span data-dropdown="id01"></span> 
</button> 


«ul id-"idO1" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 

</ul> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


提示 :后 面 的 教程 中 我 们 将 学 到 更 多 关于 下 拉 菜 单 是 知识 。 


Foundation 图 标 


Foundation 提供 了 283 个 图 标 ， 你 可 以 使 用 css 来 定义 它 的 样式 尺寸 。 
图 标 可 用 于 文本 ， 按 钮 ， 工 具 条 ， 导 航 栏 ， 表 单 等 。 

以 下 是 Foundation 图 标的 实例 : 

刷新 按钮 : 

令 测 图 标 : 


主页 图 标 : 


标语 法 
创建 图 标语 法 格式 如 下 : 


<i class="fi-name"></i> 


name 部 分 替换 为 图 标的 名 字 。 
要 使 用 图 标 我 们 需要 在 «head» 部 分 添加 图 标的 祥 式 文件 : 


<link rel="stylesheet" href="http://static.runoob.com/assets/foundé 





Icon 实例 
以 下 演示 了 使 用 图 标的 实例 : 


实例 


<p>Cloud icon: <i class="fi-cloud"></i></p> 
<p>Cloud icon as a link: 
«a href="#"><1 class="fi-cloud"></i></a> 
</p> 
<p>Styled Cloud icon: «i class="fi-cloud" style="font-size:35px;co- 
<p>Home icon: <i class="fi-home"></i></p> 
<p>Home icon on a button: 
<button type="button" class="button"> 
<i class="fi-home"></i> Home 
«/button» 
</p> 
<p>Home icon on a green button: 
<button type="button" class="button success"> 
<i class="fi-home"></i> Home 
«/button» 
</p> 
<p>Home icon on a large, light blue link button: 
«a href="#" class="button info large"> 
<i class="fi-home"></i> Home 
</a> 
</p> 


LI 





工具 条 图 标 
我 们 可 以 使 用 .icon-bar 类 来 创建 一 个 指定 数量 的 工具 栏 图 标 : 


实例 


<div class="icon-bar five-up"> 
<a href="#" class="item"> 
«i class="fi-home"></i> 
</a> 
<a href="#" class="item"> 
«i class="fi-bookmark"></i> 
</a> 
<a href="#" class="item"> 
<i class="fi-info"></i> 
</a> 
<a href="#" class="item"> 
<i class="fi-mail"></i> 
</a> 
<a href="#" class="item"> 
<i class="fi-like"></i> 
</a> 
</div> 


图 标 描述 使 用 &lt;label&gt; 元 素 : 
实例 
头 


<div class="icon-bar five-up"> 

<a href="#" class="item"> 
<i class="fi-home"></i> 
<label>Home</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-share"></i> 
<label>Share</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-info"></i> 
<label>Info</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-mail"></i> 
<label>Mail</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-magnifying-glass"></i> 
<label>Search</label> 

</a> 

</div> 


disabled 类 可 以 让 图 标 变 成 不 可 点 击 状 态 : 
实例 


<a href="#" class="item disabled"> 
<i class="fi-share"></i> 
</a> 


<a href="#" class="item disabled"> 
<i class="fi-mail"></i> 
</a> 


vertical 类 用 于 创建 一 个 垂直 的 工具 栏 : 


实例 


<div class="icon-bar vertical five-up"> 


</div> 


Foundation 图 标 参 考 手 册 


更 多 关于 图 标的 内 容 ， 可 以 参考 我 们 的 Foundation 图 标 手册 。 


Foundation 标签 
label 类 用 于 提供 一 些 附加 信息 : 


实例 


<h2>Example <span class="label">New</span></h2> 
<h3>Example «span class="label">New</span></h3> 
<h4>Example <span class="label">New</span></h4> 


以 下 类 可 以 设置 标签 的 颜色 : .secondary , .success , .info , .warning 
.alert : 


实例 


<span class="label">Default Label</span> 

<span class="label secondary">Secondary Label</span> 
<span class="label success">Success Label</span> 
<span class="label info">Info Label</span> 

<span class="label warning">Success Label</span> 
<span class="label alert">Alert Label</span> 


圆 角 标 签 
.radius 与 .round 类 可 以 为 标签 添加 圆 角 : 


实例 


<span class="label">Default Label</span> 

<span class="label radius">Radius Label</span> 
<span class="label round">Round Label</span> 
<span class="label success round">5</span> 


标签 大 小 
可 以 使 用 CSS 来 修改 标签 的 大 小 : 


实例 


或 


<hi>Example 
<h2>Example 
<h3>Example 
<h4>Example 


<span 
<span 
<span 
<span 


class-"label" style="font-size:36px; ">New</span>< 
class-"label" style="font-size:30px; ">New</span>< 
class="label" style="font-size:20px; ">New</span>< 
class="label">New</span></h4> 
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Foundation 提醒 框 


Foundation 可 以 很 简单 的 创建 一 个 提醒 框 : 


This is a default alert box. 





This is a secondary alert box. x 
Success! This alert box indicates a successful or positive action. 
Info! This alert box indicates a neutral informative change or action. x 











Warning! This alert box indicates a warning that might need attention. 


Alert! This alert box indicates a dangerous or potentially negative action. 


提醒 框 可 以 使 用 .alert-box 类 创建 , 可 以 添加 可 选 的 类 : .secondary , 


,Success , ,info , .warning 或 .alert 


实例 


Foundation 提醒 框 1774 


<div data-alert class="alert-box"> 
This is a default alert box. 
</div> 


«div data-alert class="alert-box secondary"> 
This is a secondary alert box. 
</div> 


<div data-alert class="alert-box success"> 
<strong>Success!</strong> This alert box indicates a successful « 
</div> 


«div data-alert class="alert-box info"> 
<strong>Info!</strong> This alert box indicates a neutral inform: 
«/div» 


«div data-alert class="alert-box warning"> 
<strong>Warning!</strong> This alert box indicates a warning thai 
«/div» 


«div data-alert class="alert-box alert"> 
<strong>Alert!</strong> This alert box indicates a dangerous or | 
«/div» 


BE] 
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圆 角 提 醒 框 


.radius 和 .round 类 用 于 为 提醒 框 添加 圆 角 : 


D 


实例 


<div data-alert class="alert-box success radius"> 
<strong>Success!</strong> Alert box with a radius. 
</div> 


<div data-alert class="alert-box info round"> 


<strong>Info!</strong> Alert box that is rounded. 
</div> 


关闭 提醒 框 


要 关闭 提醒 框 ， 可 以 在 连接 或 按钮 元 素 上 添加 class-"close" 类 ， 并 初始 化 
Foundation JS: 


实例 


<div data-alert class="alert-box"> 
This is a default alert box with closing functionality. 
«a href="#" class="close">&times; </a> 

</div> 


<script> 

// Initialize Foundation JS For Functionality 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


q 


x (x) 是 一 个 HTML 字符 实体 表示 一 个 关闭 按钮 的 图 标 ， 而 不 


Wes 


GF Xo 
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Foundation 进度 条 


Foundation 进度 条 可 以 作为 程序 处 理 的 程度 来 显示 : 


el 

-—————————— p 
于 | 
我 们 可 以 在 &lt;div&gt; 元素 中 使 用 .progress 类 来 创建 进度 条 ， 


.meter 类 用 于 子 元 素 (<span>)。 我 们 可 以 在 <span> 元 素 中 设置 进度 百分比 ， 
如 下 所 示 : 


实例 


<div class="progress"> 
«span class="meter" style="width: 70%"></span> 
</div> 


进度 条 颜色 


默认 情况 下 ， 进 度 条 颜色 为 蓝 色 。 不 同 颜色 的 类 为 : .secondary , .success , 
或 .alert : 


实例 


<div class="progress"> 
<span class="meter" style="width:50%"></span> 
</div> 


«div class="progress secondary"> 
<span class="meter" style="width: 50%"></span> 
</div> 


<div class="progress success"> 
<span class="meter" style="width: 50%"></span> 
</div> 


<div class="progress alert"> 
«span class="meter" style="width: 50%"></span> 
</div> 


圆 角 进度 条 


.radius 和 .round 类 用 于 为 进度 条 添加 圆 角 效果 : 
实例 


<div class="progress"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress radius"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress rounded"> 
<span class="meter" style="width:50%"></span> 
</div> 


HEART 


可 以 使 用 .small- num 或 .large-_num 来 修改 进度 条 的 宽度 ， 
个 数字 在 1(8.33%) 和 12(default (100%)) 之 间 : 


实例 


«div class="progress large-1"> 
«span class="meter" style="width:50%"></span> 
</div> 


<div class="progress large-6"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress large-9"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress large-11"> 
<span class="meter" style="width: 50%"></span> 
</div> 


<!-- Default width --> 
<div class="progress large-12"> 

«span class="meter" style="width: 50%"></span> 
</div> 


num 是 一 


进度 条 标签 


可 以 使 用 CSS 为 进度 条 添加 标签 。 以 下 实例 中 我 们 添加 了 <span> 元 素来 显示 百 分 
比 : 


实例 


<style> 
.percentage { 
position: absolute; 
top: 50%; 
left: 50%; 
color: white; 
transform: translate(-50%, -50%); 
font-size: 12px; 
j 
</style> 


<div class="progress"> 
«span class="meter" style="position: relative;width: 75%"> 
<span class="percentage">75%</span> 
</span> 
</div> 


<div class="progress success"> 
<span class="meter" style="position: relative;width:50%"> 
<span class="percentage">50%</span> 
</span> 
</div> 


<div class="progress alert"> 
<span class="meter" style="position: relative;width:25%"> 
<span class="percentage">25%</span> 
</span> 
</div> 


Foundation 面板 


Foundation 面板 是 一 个 灰色 边框 ， 内 容 含 有 内 边 距 的 模块 。 可 以 使 用 .panel X 
来 创建 : 


实例 


«div class="panel"> 
<h3> 标 题 </h3> 
<p> 文 本 内 容 . .</p> 

</div> 


面板 颜色 


使 用 .callout 类 将 面板 颜色 修改 为 浅 蓝 : 
实例 


<div class="panel callout"> 
<h3> 标 题 </h3> 
<p> 文 本 内 容 . .</p> 

</div> 


圆 角 面板 
使 用 .radius 类 将 面板 设置 为 圆 角 : 
实例 


<div class="panel radius"> 
<h3> 标 题 </h3> 
<p> 文 本 内 容 , . </p> 

</div> 


目 定义 面板 


可 以 使 用 CSS 来 自 定义 面板 ， 以 下 实例 中 我 们 将 面板 作为 一 个 卡片 : 


实例 


<style> 

.panel { 
padding: 0; 
border: none; 
width: 50%; 


div.container { 
text-align: center; 
padding: 15px; 
margin-top: 20px; 


img { 
width: 100%; 
j 


</style> 


«div class="panel"> 
<img src="img/20121204024112919. jpg" alt="Cinque Terre"> 
«div class="container"> 
<h4> 长 城 </h4> 
<p> 不 到 长 城 非 好 汉 ! ! ! </p> 
</div> 
</div> 


Foundation 图 片 


Foundation 提供 了 响应 式 的 图 片 ， 可 以 创建 缩 略 图 喝 图 片 弹 窗 : 





缩 略图 
在 &lt;img&gt; 元 素 外 添加 &lt;a&gt; 元 素 将 图 片 作为 一 个 锚 链 接 。 


在 &lt;a&gt; 标签 中 添加 .th 类 将 图 片 设置 为 缩 略 图 。 BARS Eme 
示 一 个 浅 蓝 色 外 框 : 


实例 


<a href="paris.jpg" class="th"> 
<img src="paris.jpg" alt="Paris"> 
</a> 


q 


响应 式 图 片 


Foundation 中 图 片 默认 是 响应 式 的 。 我 们 可 以 在 实例 页 面 重 置 浏览 器 大 小 来 查 
看 图 片 缩放 效果 。 


角 图 片 

我 们 可 以 在 .th 类 添加 .radius 类 来 设置 圆 角 缩 略 图 : 
实例 

头 


<a href="paris.jpg" class="th radius"> 
<img src="paris.jpg" alt="Paris"> 
</a> 


简洁 的 弹 窗 
Foundation 可 以 很 容易 实现 图 片 弹 窗 。 


要 创建 一 个 弹 窗 可 以 在 &lt;ul&gt; 元 素 上 添加 .clearing-thumbs 类 及 
data-clearing 属性 。 在 &lt;ul&gt; ”内 添加 图 片 列表 。 


注意 : 图 片 弹 窗 需 要 JavaScript。 所 以 使 用 它 前 需要 初始 化 Foundation JS。 
实例 


<ul class="clearing-thumbs" data-clearing> 
<li><a href="rock600x400. jpg" class="th"><img src="rock200x100. jy 
<li><a href="skies600x400. jpg" class="th"><img src="skies200x100 
<li><a href="lights600x400. jpg" class="th"><img src="lights200x1( 
</ul> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


3) 


«/script» 
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可 以 添加 data-caption 属性 到 每 个 图 片 来 设置 图 片 的 描述 : 
实例 


<ul class="clearing-thumbs" data-clearing> 
<li><a href="rock600x400. jpg" class="th"><img data-caption="The 上 
<li><a href="skies600x400. jpg" class="th"><img data-caption="Sunt 
<li><a href="lights600x400. jpg" class="th"><img data-caption="No! 
</ul> 





提示 : 你 可 以 在 data-caption 属性 中 添加 HTML 元 素 ， 如 data-caption=" 
<h2>Pulpit Rock</h2><p>Located in Norway</p>" 


当 你 需要 实现 只 显示 一 张 缩 略图 时 你 可 以 在 &lt;ul&gt; 中 使 用 
.clearing-feature 类 并 在 &lt;li&gt; 中 使 用 .clearing-featured-img 


米 
Fo 


实例 


<ul class="clearing-thumbs clearing-feature" data-clearing> 
<li><a href="rock600x400. jpg" class="th"><img data-caption="The 上 
<li><a href="skies600x400. jpg" class="th"><img data-caption="Sunt 


«li class="clearing-featured-img"><a href="lights600x400.jpg" cl: 
</ul> 


加 ES 
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Foundation 下 拉 菜 单 
Foundation 下 拉 菜 单 允 许 用 户 从 预定 义 的 下 拉 列 表 中 选取 一 个 值 : 
实例 
<!-- Trigger the Dropdown --> 
<a href="#" data-dropdown="id01i" class="button dropdown">Dropdown 上 
<!-- Dropdown content --> 
«ul id-"idO1" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 
</ul> 
<!-- Initialize Foundation JS --> 
<script> 
$(document).ready(function() { 
$(document).foundation(); 
}) 


</script> 


二 OB 


实例 解析 

.dropdown 类 为 按钮 添加 一 个 向 下 的 箭头 符号 "图 标 。 

使 用 按钮 或 链接 的 data-dropdown-" id " 属性 来 打开 下 拉 菜 单 。 
id 值 需要 与 下 拉 菜 单 的 内 容 (id01) 匹配 。 


在 «div», «nav», &lt;ul&gt; 中 添加 .f-dropdown 类 和 
data-dropdown-content 属性 来 创建 下 拉 菜 单 的 内 容 。 


最 后 初始 化 Foundation JS。 
注意 : 在 小 屏幕 上 ， 所 有 的 下 拉 菜 单 的 宽度 是 100%。 





下 拉 菜 单 尺 二 


使 用 .tiny , .small , .medium , .large 或 .mega 来 修改 下 拉 菜 单 的 宽 
度 。 


注意 : 在 小 屏幕 上 ， 所 有 的 下 拉 菜 单 的 宽度 是 100%。 


实例 
<!-- Tiny Dropdown: max-width is 200px --> 
«ul id="id01" data-dropdown-content class="f-dropdown tiny">.. 


<!-- Small Dropdown: max-width is 300px --> 
«ul id-"id02" data-dropdown-content class="f-dropdown small">.. 


<!-- Medium Dropdown: max-width is 500px --» 
«ul id="id03" data-dropdown-content class-"f-dropdown medium"> 


«!-- Large Dropdown: max-width is 800px --> 
«ul id="id04" data-dropdown-content class-"f-dropdown large">.. 


«!-- Mega Dropdown: 100% width --> 
«ul id="id04" data-dropdown-content class-"f-dropdown mega">.. 


下 拉 有 菜单 边 路 
可 以 使 用 .content 类 为 下 拉 菜 单 添加 内 边 距 : 


实例 


<!-- Default Dropdown --> 
«ul id-"idO1" data-dropdown-content class="f-dropdown">.. 


«!-- Dropdown with padding --> 
«ul id="id02" data-dropdown-content class-"f-dropdown content">.. 


ss 
其 他 实例 
<div> 下 拉 菜 单 中 添加 多 媒体 元 素 : 


实例 


«a href="#" data-dropdown="id01" class="button dropdown">Dropdown 上 
«div id-"idO1" data-dropdown-content class="f-dropdown medium conte 
<h4>Paris Title</h4> 
<p>Some text.. some text..</p> 
<img src="paris.jpg" alt="Paris" width="400" height="300"> 
<p>Paris, je t'aime.</p> 
</div> 
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下 拉 莱 单方 向 


默认 情况 下 下 拉 菜 单 在 底部 ， 可 以 通过 添加 
data-options="align:left|right|top" 来 修改 其 方向 : 


实例 


«a href="#" data-dropdown="id01i" data-options-"align:right" class-' 
«a href="#" data-dropdownz"id02" data-options-"align:top" class="bt 
«a href="#" data-dropdown="id03" data-options-"align:bottom" class: 
«a href="#" data-dropdown="id04" data-options="align:left" class=" 


SSS 
下 拉 菜 单 触发 条 件 


默认 情况 下 ， 下 拉 菜 单 在 点 击 按钮 后 显示 。 如 果 你 需要 在 鼠标 移动 上 去 后 显示 ， 可 
以 在 按钮 上 使 用 data-options-"is hover:true" 属性 : 





实例 


«a href="#" data-dropdown="id01i" data-options-"is hover:true" clas: 
«ul id-"idO1" data-dropdown-content class="f-dropdown"> 

<li><a href="#">Link 1«/a»«/li» 

<li><a href="#">Link 2«/a»«/li» 

<li><a href="#">Link 3«/a»«/li» 
</ul> 


| = m 


分 割 按钮 


我 们 可 以 在 按钮 上 添加 .split 类 来 设置 一 个 分 割 效果 的 按钮 ， 分 割 后 会 在 
<span> 元 素 上 生成 一 个 方向 向 下 的 图 标 按钮 : 





实例 


<button class="button split">Split Button 
<span data-dropdown="id01"></span> 
</button> 


«ul id="id01" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 

</ul> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 
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实例 


«ul class="accordion" data-accordion> 
<li class="accordion-navigation"> 
<a href="#demo">Simple Collapsible</a> 
«div id="demo" class="content"> 
菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 是 梦想 1 ! | 
</div> 
</li> 
</ul> 


<!-- 初始 化 Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


实例 解析 


.accordion 类 和 data-accordion 属性 用 于 创建 一 个 可 折 丢 的 元 素 。 
.accordion-navigation 类 用 于 泻 染 可 折 受 元 素 。 实 际 的 内 容 在 .content 
X («div class="content") 中 ， 点 击 按钮 既 可 以 显示 。 


我 们 在 列表 项 中 添加 &lt;a&gt; 元 素来 控制 (显示 /隐藏 可 折 受 的 内 容 。 然 后 
锚 链 接 使 用 与 可 折 受 内 容 内 容 相同 的 id («a href=#demo" 与 <div id="demo"> 相关 
联 )。 


注意 : 可 折 和 有 登 的 效果 需要 初始 化 Foundation JS. 
默认 情况 下 ， 可 折 受 内 容 是 隐藏 的 。 我 们 可 以 通过 在 &lt;div&gt; 上 添加 
.active 类 让 其 默认 是 显示 的 : 


实例 


<div id="demo" class="content active"> 


手风琴 效果 用 于 延展 与 设置 可 折 秋 内 容 。 
手风琴 效果 通过 使 用 多 个 不 同 的 锚 链 接 与 jd 来 创建 : 


实例 


«ul class="accordion" data-accordion> 
<li class="accordion-navigation"> 
«a href="#demo"> 手 风琴 实例 1</a> 
<div id="demo" class="content active"> 
Demo 1 - 菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 是 梦想 1 | | 
</div> 
</li> 
<li class="accordion-navigation"> 
«a href="#demo2"> 手 风琴 实例 2«/a» 
<div id="demo2" class="content"> 
Demo 2 - Lorem ipsum dolor sit amet.... 
</div> 
</li> 
<li class="accordion-navigation"> 
«a href="#demo3"> 手 风琴 实例 3«/a» 
<div id="demo3" class="content"> 
Demo 3 - 菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 是 梦想 1 |! 
</div> 
</li> 
</ul> 


默认 情况 下 ， 手 风琴 列表 项 有 一 个 是 打开 的 。 如 果 你 想 关 闭 所 有 可 以 使 用 


data-options="multi_expand:true;" 属性 : 
实例 
头 


«ul class-"accordion" data-accordion data-options-"multi expand:tri 


«/ul» 





Foundation 列表 
在 HTML 中 ， 无 序列 表 ( &lt;ul&gt; ) 实例 如 下 : 


<ul> 
<li>List item</1li> 
<li>List item</1li> 
<li>List item</1li> 
<li>List item</1li> 
</ul> 


List item 
List item 
List item 
List item 


圆圈 标识 符 


在 Foundation 中 ， 无 序列 表 ( &lt;ul&gt; ) 的 前 绥 符 号 为 圆圈 ， 使 用 .circle X, 
实例 如 下 : 


<ul class="circle"> 
<li>List item</1li> 


Evins 
方块 标识 符 
方块 标识 符 前 级 使 用 .square X: 


<ul class="Square"> 
<li>List item</1li> 


</ul> 


无 标识 符 
如 果 你 不 需要 标识 符 ， 你 可 以 使 用 .no-bullet 类 : 


<ul class="no-bullet"> 
<li>List item</li> 


</ul> 
米 
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<ul class="inline-list"> 


Fl FEB 


一 些 Web 页 面 可 能 需要 列表 菜单 。 


在 HTML 中 ， 列 表 菜 单 同 无 序列 表 &lt;ul&gt; KEL, PA: 


<ul> 
<li><a href="#">Home</a></1i> 
<li><a href="#">Menu 1«/a»«/li» 
<li><a href="#">Menu 2«/a»«/li» 
<li><a href="#">Menu 3«/a»«/li» 
</ul> 


结果 : 


Home 
Menu 1 
Menu 2 
Menu 3 


米 
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<ul class="inline-list"> 


如 果 你 需要 添加 一 个 水 平 的 列表 ， 可 以 在 &lt;ul&gt; 上 添加 


如 果 你 需要 添加 一 个 水 平 的 菜单 ， 可 以 在 &lt;ul&gt; 上 添加 


.list-inline 


.list-inline 


Foundation 选项 卡 


选项 卡 导 航 可 以 很 好 的 展示 不 同 的 内 容 ， 并 可 以 对 内 容 进行 切换 。 


切换 选项 卡 
Xm O 菜单 f O X82 RAI 


+ 


KA 2 
一 些 文 本 内 容 2 


选项 卡 使 用 &lt;ul class-"tabs" data-tab&gt; 来 创建 , 各 个 选项 使 用 «li» 
元 素 并 加 上 .tab-title 类 来 创建 。 


提示 : 当前 选中 项 可 以 使 用 .active X. 
实例 


<ul class="tabs" data-tab> 
<li class="tab-title active"><a href="#">Home</a></1li> 
«li class="tab-title"><a href="#">Menu 1«/a»«/li» 
«li class="tab-title"><a href="#">Menu 2«/a»«/li» 
«li class="tab-title"><a href="#">Menu 3«/a»«/li» 
</ul> 


垂直 的 选项 卡 


垂直 选项 卡 可 以 使 用 .vertical X: 
实例 
头 


<ul class="tabs vertical" data-tab> 


切换 选项 卡 


如 果 要 设置 切换 标签 ， 可 以 使 用 «div» 元 素 加 上 .content 类 。 每 个 选项 卡 上 加 
上 唯一 的 ID, 并 连接 到 列表 项 (<a href="#menu1" 将 打开 id="menu1" 的 选项 内 
容 )。 最 后 将 所 有 的 选项 内 容 放 在 &lt;div&gt; 元 素 上 ， 该 &lt;div&gt; 元 素 
需要 添加 .tabs-content 类 ， 并 初始 化 Foundation JS。 


注意 active 类 会 自动 添加 到 当前 选中 的 选项 卡 上 : 
实例 


<ul class="tabs" data-tab> 
«li class="tab-title active"><a href="#home">Home</a></1li> 
<li class="tab-title"><a href="#menui">Menu 1«/a»«/li» 
<li class="tab-title"><a href="#menu2">Menu 2«/a»«/li» 
<li class="tab-title"><a href="#menu3">Menu 3«/a»«/li» 
</ul> 
<div class="tabs-content"> 
<div class="content active" id="home"> 
<h3>HOME</h3> 
<p>Home is where the heart is..</p> 
</div> 
«div class="content" id="menui"> 
<h3>Menu 1</h3> 
<p>Some text, blabla</p> 
</div> 
<div class="content" id="menu2"> 
<h3>Menu 2</h3> 
<p>Some other text.</p> 
</div> 
<div class="content" id="menu3"> 
<h3>Menu 3</h3> 
<p>Last tab.</p> 
</div> 
</div> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


选项 卡 淡 人 
使 用 CSS 来 自 定义 选项 卡 淡 入 的 效果 : 


实例 


.tabs-content > .content.active { 
-webkit-animation: fadeEffect 1s; 
animation: fadeEffect 1s; 


} 


Q-webkit-keyframes fadeEffect ( 
from {opacity: 0;} 
to {opacity: 1;} 

j 


Qkeyframes fadeEffect ( 
from {opacity: 0;} 
to {opacity: 1;} 


Foundation 分 页 


如 果 你 的 网 页 有 很 多 内 容 ， 就 需要 使 用 分 页 功能 。 


分 页 - 当前 页 


当前 页 面 需要 添加 current 类 : 


要 创建 一 个 基础 的 分 页 功能 需要 在 &lt;ul&gt; 


实例 


<ul class="pagination"> 
<li><a href="#">1</a></1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
</ul> 


当前 页 面 


元 素 上 加 上 


可 以 在 &lt;li&gt; 加 上 .current 类 来 标注 当前 页 面 : 


实例 


<ul class="pagination"> 


<li class-"current"»«a href="#">1</a></1i> 


<li><a href="#">2</a></1li> 

<li><a href="#">3</a></1i> 

<li><a href="#">4</a></1li> 

<li><a href="#">5</a></1i> 
</ul> 


共用 分 页 


. pagination 


R. 


如 果 需 要 设置 某 个 分 页 不 可 点 击 需 要 使 用 .unavailable X: 
实例 
头 


<ul class="pagination"> 
<li><a href="#">1</a></1li> 
<li><a href="#">2</a></1li> 
«li class="unavailable"><a href="#">3</a></li> 
<li><a href="#">4</a></1li> 
<li><a href="#">5</a></1li> 
</ul> 


分 页 方向 


在 第 一 个 和 最 后 一 个 code><li> 元 素 上 添加 ,arrow 类 插入 HTML 实体 符号 
&laquo; 和 &raquo; 来 创建 分 页 方向 符号 : 


实例 


<ul class="pagination"> 

«li class="arrow"><a href="#">&laquo;</a></1i> 

<li><a href="#">1</a></1i> 

<li><a href="#">2</a></1i> 

<li><a href="#">3</a></1i> 

<li><a href="#">4</a></1i> 

<li><a href="#">5</a></1li> 

«li class="arrow"><a href="#">&raquo;</a></1i> 
</ul> 


分 页 居中 显示 


我 们 可 以 在 <ul> 外 层 添 加 &lt;div&gt; 元 素 ， 并 在 &lt;div&gt; EM 
加 .pagination-centered 类 来 实现 分 页 居中 显示 : 


实例 


<div class="pagination-centered"> 
<ul class="pagination"> 
«li class-"arrow"»«a href="#">&laquo; </a></1i> 
«li class="current"><a href="#">1</a></1li> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
«li class-"arrow"»«a href="#">&raquo; </a></1li> 
</ul> 
</div> 


Hoe sin 


HOS SiAT Rr BU n TU BAT N 


在 &lt;ul&gt; 元 素 上 添加 .breadcrumbs 类 来 实现 面包 导 导 航 。 你 可 以 在 


<li> 上 添加 .current 或 .unavailable 类 设置 当前 页 与 不 可 点 击 效 果 : 
实例 


<ul class="breadcrumbs"> 
<li><a href="#">Home</a></1i> 
<li><a href="#">Private</a></li> 
«li class="unavailable"><a href="#">Pictures</a></li> 
«li class="current">Vacation</li> 
</ul> 


子 导 航 


在 页 面 切换 上 ， 子 导航 是 非常 有 用 的 。 


在 &lt;dl&gt; 元 素 上 添加 .sub-nav 类 来 创建 子 导 航 。 在 &lt;dt&gt; 


素 上 添加 标题 ， 为 选中 的 选项 &lt;dd&gt; 添加 .active X: 


实例 


ell 


<ul class="Sub-nav"> 
<dt>Filter:</dt> 
«dd class="active"><a href="#">All</a></dd> 
<dd><a href="#">Active</a></dd> 
<dd><a href="#">Pending</a></dd> 
<dd><a href="#">Suspended</a></dd> 
</ul> 


Foundation NR 


价格 表 可 用 于 展示 企业 产品 : 


实例 


<ul class="pricing-table"> 


<li 
<li 
<li 
<li 
<li 
<li 
<li 
</ul> 


class="title">Basic</li> 

class="price">$19.99</1li> 

class="description">Great for small business</li> 
class="bullet-item">24/7 Support</1li> 
class="bullet-item">15GB Storage</1li> 
class="bullet-item">1GB Bandwidth</li> 
class="cta-button"><a class="button" href="#">Buy</a></1li> 


实例 解析 


.pricing-table -定义 价格 表 

.title -定义 产品 标题 (黑色 背景 ) 

i .price -定义 价格 (灰色 背景 字体 大 个 项 ) 
i.description - 定义 产品 描述 (如 果 需 要 ) 
i.bullet-item -定义 产品 特点 

i.ca-button -按钮 文本 (如 "Buy", "Join", "Sign Up", 等 ) 


注意 : 表格 会 100% 填充 容器 的 宽度 ， 所 有 的 项 都 有 边框 且 是 居中 的 。 


价格 表 网 格 


以 下 实例 显示 了 三 个 企业 产品 的 价格 (三 项 是 均等 划分 宽度 的 ) 


实例 


<div class="row"> 
<div class="medium-4 columns"> 
<ul class="pricing-table"> 
<li class="title">Basic</li> 
</ul> 
</div> 
<div class="medium-4 columns"> 
<ul class="pricing-table"> 
«li class="title">Pro</1li> 
</ul> 
</div> 
<div class="medium-4 columns"> 
«ul class="pricing-table"> 
<li class="title">Premium</1i> 
</ul> 
</div> 
</div> 


Foundation 顶部 导航 栏 


顶部 导航 栏 放 在 页 面 头 部 : 


Home Sign Up Search 





实例 


<nav class="top-bar" data-topbar> 
<ul class="title-area"> 
<li class="name"> 
<!-- 如 果 你 不 需要 标题 或 图 标 可 以 删 掉 它 - -> 
<hi><a href="#">WebSiteName</a></h1> 
</li> 
«1-- JN Fiat: 去 掉 **.menu-icon** 类 ， 可 以 去 除 图 标 。 
如 果 需 要 只 显示 图 片 ， 可 以 删除 "Menu" 文本 --> 
«li class-"toggle-topbar menu-icon"><a href="#"><Span>Menu</spi 
</ul> 


<section class="top-bar-section"> 
<ul class="left"> 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">Page 1«/a»«/li» 
<li><a href="#">Page 2«/a»«/li» 
<li><a href="#">Page 3«/a»«/li» 
</ul> 
</section> 
</nav> 


<!-- 初始 化 Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 





实例 解析 


使 用 &lt;nav class-"top-bar" data-topbar&gt; 创建 标准 工具 条 。 

.title-area 类 定义 了 网 站 logo 区 域 (必须 防止 li.name 内 ) 。 屏 幕 变 小 后 你 
就 可 以 看 到 一 个 "menu" 按钮 。 Foundation 的 菜单 会 根据 屏幕 尺寸 自动 折 熏 喝 延 
E : 


小 屏幕 上 ， 由 于 尺寸 的 原因 很 多 选项 会 被 隐藏 。  li.toggle-topbar menu.icon 
类 创建 了 一 个 菜单 的 按钮 ， 点 击 它 可 以 显示 被 隐藏 的 选项 。 fem: 重 置 浏览 器 窗口 
查看 效果 。 


.top-bar-section 定义 了 导航 的 链接 部 分 。 .1left 类 指定 链接 左 对 齐 。 
.active 类 用 于 显示 选中 的 项 ， 背 景 为 蓝 色 。 


提示 : 如 果 你 想 导航 链接 右 对 齐 可 以 将 .left 修改 为 ,right 
实例 


<section class="top-bar-section"> 
<ul class="right">... 


你 可 以 同时 设置 左边 对 齐 与 右边 对 齐 : 
实例 


<section class="top-bar-section"> 
<ul class="left"> 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">Page 1«/a»«/li» 
<li><a href="#">Page 2«/a»«/li» 
</ul> 
<ul class="right"> 
<li><a href="#">Sign Up</a></1i> 
<li><a href="#">Login</a></1i> 
</ul> 
</section> 


导航 栏 可 以 通过 .divider 类 来 添加 分 割 线 (大 屏幕 上 是 垂直 的 线 ， 小 屏幕 上 是 
水 平 线 ) 


实例 


<ul class="left"> 
«li class="active"><a href="#">Home</a></1li> 
«li class-"divider"»«/li» 
<li><a href="#">Page 1«/a»«/li» 
«li class="divider"></1i> 
<li><a href="#">Page 2«/a»«/li» 
<li class-"divider"»«/li» 
<li><a href="#">Page 3«/a»«/li» 
«li class="divider"></1i> 
</ul> 


导航 栏 的 下 拉 菜 单 


顶部 导航 栏 可 以 设置 下 拉 菜 单 。 


可 以 通过 在 &lt;li&gt; 元 素 上 添加 .has-dropdown 类 来 设置 下 拉 菜 单 : 
实例 


<section class="top-bar-section"> 
<ul class="left"> 
<li class="active"><a href="#">Home</a></1i> 
<li class="has-dropdown"> 
<a href="#">Dropdown</a> 
<ul class="dropdown"> 
<li><a href="#">First link in dropdown</a></1i> 
<li><a href="#">Second link in dropdown</a></1i> 
«li class="active"><a href="#">Active link in dropdown</a>< 
</ul> 
</li> 
</ul> 


</section> 





分 割 线 
使 用 .divider 类 来 设置 下 拉 菜 单 的 分 割 线 : 


实例 


<ul class="dropdown"> 
<li><a href="#">Apple</a></1i> 
<li><a href="#">Banana</a></1i> 
<li><a href="#">Orange</a></1i> 
<li class="divider"></1i> 
<li><a href="#">Kale</a></1li> 
<li><a href="#">Spinach</a></1i> 
</ul> 


tt pe kx 
下 拉 菜 单 标签 
在 &lt;li&gt; 内 添加 &lt;label&gt; 元 素来 设置 下 拉 菜 单 的 标签 (标题 ): 


实例 


<ul class="dropdown"> 
<li><label>Fruit</label></1i> 
<li><a href="#">Apple</a></1i> 
<li><a href="#">Banana</a></1i> 
<li><a href="#">Orange</a></1i> 
<li class="divider"></1li> 
<li><label>Vegetable</label></1i> 
<li><a href="#">Kale</a></1li> 
<li><a href="#">Spinach</a></1i> 

</ul> 


FIER Pius e 
下 拉 菜单 可 以 再 嵌入 一 个 下 拉 菜单 : 


实例 


<section class="top-bar-section"> 
<ul class="left"> 
<li class="has-dropdown"> 
<a href="#">Dropdown</a> 
<ul class="dropdown"> 
<li><label>Level 1</label></1i> 
<li><a href="#">Link</a></1i> 
<li><a href="#">Link</a></1li> 
<li class="has-dropdown"> 
<a href="#">New dropdown</a> 
<ul class="dropdown"> 
<li><label>Level 2</label></1i> 
<li><a href="#">2nd level dropdown</a></1i> 
<li><a href="#">2nd level dropdown</a></1i> 
<li class="has-dropdown"> 
<a href="#">New dropdown</a> 
<ul class="dropdown"> 
<li><label>Level 3</label></1i> 
<li><a href="#">3rd level dropdown</a></1i> 
<li><a href="#">3rd level dropdown</a></1i> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</section> 


Bm 


默认 情况 下 导航 栏 的 下 拉 菜 单 在 鼠标 移动 过 去 后 显示 ， 我 们 可 以 使 用 
data-options="is_hover: false" 属性 来 设置 导航 栏 在 鼠标 在 点 击 后 显示 : 


实例 


<nav class="top-bar" data-topbar data-options="is_hover: false"> 


导航 栏 上 的 按钮 及 图 标 


你 可 以 在 导航 栏 上 放置 图 标 和 按钮 : 
实例 
<li><a href="#" class="button">Button Link«/a»«/li» 


你 可 以 在 导航 栏 上 放 上 图 标 ， 更 多 图 片 样式 可 以 查看 Foundation 图 标 教程 : 
实例 
Se 


<head> 

<!-- Foundation 图 标 样式 --> 

<link rel="stylesheet" href="http://static.runoob.com/assets/foundé 
</head> 


<ul class="left"> 
<li class="active"><a href="#"><i class="fi-home"></i> Home</a><, 
<li><a href="#"><i class="fi-torso"></i> Sign Up</a></1i> 
<li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></_ 
</ul> 


4] mca] 





固定 导航 栏 


导航 栏 可 以 固定 在 页 面 顶 部 。 
页 面 滚动 时 导航 栏 在 顶部 是 不 会 动 的 。 
要 固定 导航 栏 只 需要 将 导航 栏 放 在 &lt;div class="fixed"agt; 内 即 可 : 


实例 


<div class="fixed"> 
<nav class="top-bar" data-topbar> 


«/nav» 
«/div» 
Lj. ra 
导航 栏 绝 对 定位 
我 们 可 以 将 导航 栏 放 在 &lt;div class-"sticky"&gt; 内 来 设置 导航 栏 的 绝对 
定位 ， 当 滚动 条 滚 到 到 该 区 域 时 ， 该 导航 栏 就 像 固 定 导 航 栏 一 样 在 顶部 不 动 : 
实例 
头 
<div class="sticky"> 
<nav class="top-bar" data-topbar> 
</nav> 
</div> 
当 你 使 用 .sticky 类 时 ， 顶 部 导航 栏 在 所 有 屏幕 尺寸 上 将 固定 不 动 。 如 果 你 需 


在 指定 屏幕 上 设 定 只 需要 在 &lt;nav&gt; 上 添加 
data-options-"sticky on: small|medium|large" 属性 即 可 : 


实例 


<div class="sticky"> 
«1-- 只 有 在 大 屏幕 上 --> 
«nav class="top-bar" data-topbar data-options-"sticky on: large": 


«/nav» 
«/div» 


o 0 RÀ 
或 者 通过 数组 设置 多 个 屏幕 尺寸 : 





实例 


<div class="sticky"> 
«1-- 小 屏幕 和 大 屏幕 (没有 中 等 屏幕 ) - -> 
«nav class="top-bar" data-topbar data-options-"sticky on: [small, 
</nav> 

</div> 


«| | 








Foundation 侧 边 栏 


侧 边栏 导航 


Foundation 使 用 &lt;ul class-"side-nav"&gt; 创建 侧 边 栏 : 
实例 


<ul class="side-nav"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 
<li><a href="#">Link 4«/a»«/li» 
</ul> 


激活 链接 与 分 割 线 


已 点 击 的 链接 可 以 在 &lt;li&gt; 上 使 用 .active 类 来 标识 ， 使 用 
.divider 类 添加 水 平分 割 线 : 


实例 


<ul class="side-nav"> 
«li class="active"><a class="a" href="#">Link 1«/a»«/li» 
<li><a class="a" href="#">Link 2«/a»«/li» 
<li class-"divider"»«/li» 
<li><a class="a" href="#">Link 3«/a»«/li» 
<li><a class="a" href="#">Link 4«/a»«/li» 
</ul> 


网 格 中 的 侧 边 栏 


我 们 可 以 使 用 网 格 设计 模式 来 设置 侧 边 导航 栏 ， 实 例如 下 : 


实例 


<div class="row"> 
«div class="medium-4 columns" style="background-color:#f1if1if1; "> 
<ul class="side-nav"> 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">Learn HTML«/a»«/1li» 
</ul> 
</div> 
<div class="medium-8 columns"> 
<hi>Side Nav</h1i> 
<p>Some text. .</p> 
</div> 
</div> 


Sa 


Foundation 滑动 导航 (Off-Canvas) 


侧 边 栏 导 航 


Off-Canvas 滑动 导航 现在 逐渐 在 移动 页 面 变 得 越 来 越 流行 了 (点 击 菜单 按钮 菜单 从 
左 侧 滑 出 ): 


三 Off-canvas 实例 
学 的 不 仅 是 技术 ， 更 是 梦想 ! ! | 
创建 滑动 导航 
创建 滑动 导航 实例 如 下 : 


实例 


<!-- 最 外 层 div : 页 面 布局 --> 
<div class-"off-canvas-wrap" data-offcanvas» 
<!-- 内 部 元 素 : "工具 栏 ” 内容 (Aim, BE, TARAS) --> 
<div class="inner-wrap"> 
«nav class="tab-bar"> 
«section class="left-small"> 
<a class-"left-off-canvas-toggle menu-icon" href="#"><span: 
</section> 


<section class="middle tab-bar-section"> 
«hi class="title">0ff-canvas Example</h1> 
</section> 
</nav> 


<!-- 滑动 菜单 --> 
<aside class="left-off-canvas-menu"> 
<!-- Add links or other stuff here --> 
«ul class="off-canvas-list test"> 
<li><label>Heading</label></1i> 
<li><a href="#">Link 1</a></1i> 
<li><a href="#">Link 2«/a»«/li» 
</ul> 
</aside> 
<!-- 主要 内 容 --> 
<section class="main-section"> 
<h3>Lorem Ipsum</h3> 
<p>... </p> 
</section> 


SHE E 
«a Class="exit-off-canvas"></a> 


«/div» «!-- 结束 内 部 内 容 s 
</div> «!-- 结束 滑动 菜单 --> 


<!-- 初始 化 Foundation JS --> 
<script> 
$(document).ready(function() { 

$(document).foundation(); 
3) 


</script> 


E E S 





Foundation 麦哲伦 (Magellan) 导航 


Magellan 


E JT AN EÀS Br dd 
Mag; , 


x E I" = H L SL E LA J 
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如 何 创 建 麦哲伦 导航 
麦哲伦 导航 就 是 一 个 导航 索引 ， 创 建 方式 如 下 


实例 


<div data-magellan-expedition="fixed"> 
«dl class="sSub-nav"> 
«dd data-magellan-arrival-"pagei"»«a href="#pagei">Page 1</a><, 
<dd data-magellan-arrival="page2"><a href="#page2">Page 2</a><, 
«/dl» 
«/div» 


«h3 data-magellan-destination="page1i">Page1</h3> 
«a name="pagei"></a> 


«h3 data-magellan-destination="page2">Page2</h3> 
«a name="page2"></a> 


«!-- Initialize Foundation JS --> 

«script» 

$(document).ready(function() { 
$(document).foundation(); 


;) 


«/script» 


«| m 








实例 解析 


在 <div> 元 素 上 添加 data-magellan-expedition-"fixed" 属性 来 创建 麦哲伦 
导航 。 


然后 在 &lt;dd&gt; 或 &lt;li&gt; 上 添加 
data-magellan-arrival="_value_" 属性 ， 后 面 添加 一 个 与 该 属性 值 一 样 的 链 
接 (page1)。 


使 用 data-magellan-destination-"value" 属性 来 控制 麦哲伦 导航 的 目标 , 后 
面 紧 跟 的 &lt;a&gt; 元 素 添 加 name="_value_" 属性 。 两 个 属性 的 值 必须 与 
data-magellan-arrival 的 值 一 致 (page1)。 


最 后 ， 初 始 化 Foundation JS ， 用 户 在 滚动 页 面 时 导航 就 会 根据 当前 显示 的 内 容 自 
动 切换 。 


麦哲伦 导航 头 部 工具 条 
麦哲伦 导航 使 用 头 部 工具 条 实例 : 


实例 


<div data-magellan-expedition="fixed"> 
<nav class="top-bar" data-topbar> 


<section class="top-bar-section"> 
<ul class="left"> 
«li data-magellan-arrival="pagei"><a href="#pagei">Page 1<, 
<li data-magellan-arrival="page2"><a href="#page2">Page 2<, 
</ul> 
</section> 


</nav> 
</div> 


<h3 data-magellan-destination="page1i">Page1</h3> 
«a name="pagei"></a> 


<h3 data-magellan-destination="page2">Page2</h3> 
<a name="page2"></a> 





麦哲伦 导航 内 边 距 


默认 情况 下 ， 麦 哲 伦 导 航 的 &lt;div&gt; 元 素 有 10px 的 内 边 距 。 可 以 使 用 
CSS 移 除 它 : 


实例 


[data-magellan-expedition], [data-magellan-expedition-clone] { 


padding: 0; 
麦哲伦 导航 选项 


使 用 data-options 属性 修改 麦哲伦 导航 的 设置 , 例如 
&lt;div data-magellan-expedition="fixed" data-options-"destination : 


名 称 类 型 BRIA 描述 Pe 
active class string active ”指定 激活 链接 的 类 
指定 导航 在 什么 时 候 需 要 固 
threshold number 0 定位 置 。 会 根据 滚动 条 滚动 


计算 ， 默 认为 (auto), 


设 该 值 设 定 了 导航 链接 显示 
destination threshold number 20 为 激活 (REFR) 时 导航 
列表 距离 顶部 的 值 。 


指定 了 导航 条 距离 头 部 的 像 


fixed top number 0 Ri 


Foundation 表单 


Foundation 表单 控制 会 自动 设置 为 全 局 样式 : 


所 有 &lt;textarea&gt; , &lt;select&gt; 及 &lt;input&gt; 元 素 宽度 都 
为 100%， 且 带 有 外 边 距 、 内 边 距 、 阴 影 喝 鼠 标 移动 效果 。 


实例 


<form> 
Input : 
<input type="text" placeholder="Name"> 


Textarea: 
«textarea rows="4" placeholder="Address"></textarea> 


Select: 

<select> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 

</select> 

</form> 


标签 


在 表单 中 使 用 &lt;label&gt; 元 素来 设置 标签 ， 标 签 可 以 添加 for 属性 和 id 属 
性 。 用 户 在 点 击 标签 或 输入 域 时 获取 输入 框 焦点 : 


实例 


«form» 
«label for="name">Input 
<input type="text" placeholder="Name" id="name"> 
«/label» 


«label for="adr">Label 
«textarea rows="4" placeholder="Address" id="adr"></textarea> 
</label> 


<label for="num">Select 
<select id="num"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
</select> 
</label> 
</form> 


加 [ED 
如 果 需 要 设置 标签 右 对 齐 ， 可 以 使 用 ,right X: 


实例 


<label class="right"> 


Fieldset 


Foundation 泻 染 &1t;fieldset&gt; 元 素 的 样式 如 下 : 
实例 
头 


<form> 
<fieldset> 
<legend>Fieldset Legend</legend> 
<label>Name 
<input type="text" placeholder="First Name. ."> 
</label> 
<label>Email 
<input type="text" placeholder="Enter email. ."> 
</label> 
</fieldset> 
</form> 


错误 状态 

使 用 .error 类 来 设置 错误 的 标签 、 输 入 框 、 文 本 框 样式 : 
实例 

头 


«form» 
«label class="error">Error 
<input type="text" placeholder="Name. ."> 
</label> 
«small class="error">Wrong input</small> 


<textarea rows="4" placeholder="Address"></textarea> 


«small class="error">Wrong input</small> 
</form> 


q 


你 需要 使 用 JavaScript 来 更 新 用 户 输入 的 错误 状态 。 


a= SANT OK 


Foundation 输入 框 尺寸 


First Name 


Name 


Last Name 


Last Name 


City 


City 


Search 


使 用 网 格 的 列 来 设置 输入 框 的 大 小 ， 如 .large-6 , .medium-6 , 等。 
更 多 网 格 系统 知识 ， 可 以 点 击 网 格 系统 教程 。 


实例 


oundatuon 


«form» 
«div class="row"> 
«div class="large-10 medium-7 columns"> 
<label>large-10 medium-7 (100% on small) 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 


<div class="row"> 
<div class-"small-5 columns"> 
«label»small-5 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 


<div class="row"> 
<div class="medium-3 columns"> 
<label>medium-3 (100% on small) 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 
</form> 


相等 大 小 列 
以 下 演示 了 相等 大 小 列 的 实例 : 


实例 


<form> 
<div class="row"> 
<div class="medium-4 columns"> 
<label>medium-4 (100% on small, stacked) 
<input type="text" placeholder="Name"> 
</label> 
</div> 


<div class="medium-4 columns"> 
<label>medium-4 (100% on small, stacked) 
<input type="text" placeholder="Name"> 
</label> 
</div> 


<div class="medium-4 columns"> 
<label>medium-4 (100% on small, stacked) 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 
</form> 


内 联 标 签 


如 果 你 希望 你 的 标签 内 容 显 示 在 左边 (不 是 上 边 ) ， 可 以 将 标签 元 素 label KEM 
入 框 左边 的 不 同 的 列 上 ， 并 使 用 .inline 类 来 设置 垂直 居中 : 


实例 


<form> 
<div class="row"> 
<div class-"small-8"» 
<div class="row"> 
<div class="small-3 columns"> 
«label for="name" class="inline right">Name</label> 
</div> 
<div class-"small-9 columns"> 
<input type="text" id="name" placeholder="First Name. ."> 
</div> 
</div> 
</div> 
</div> 
</form> 
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你 可 以 在 &lt;div class="row collapse"&gt; 中 添加 前 置 和 后 置 标签 ， 元 素 
Jj: &lt; element class-"postfix"&gt; 或 


&lt; element class="prefix"agt; 。 可 以 使 用 网 格 系统 来 设置 前 置 和 后 置 标 
签 的 大 小 : 





实例 


<form> 
<div class="row"> 
<div class="large-6 columns"> 
<div class="row collapse prefix-radius"> 
«div class="small-3 columns"> 
<span class="prefix">Prefix</span> 
</div> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
</div> 
</div> 
<div class="large-6 columns"> 
<div class="row collapse postfix-radius"> 
«div class="small-9 columns"> 
<input type="text" placeholder="Value"> 
</div> 
«div class="small-3 columns"> 
«span class="postfix">Postfix</span> 
</div> 
</div> 
</div> 
</div> 
</form> 


前 置 和 后 置 标签 按钮 





可 以 使 用 &lt;a&gt; 元 素 添加 .button 类 来 设置 前 置 和 后 置 按钮 : 
实例 
<a href="#" class="postfix button">Go</a> 


— 


前 置 和 后 置 标签 圆 角 按钮 


实例 


«form» 
«div class="row"> 
«div class="large-6 columns"> 
<div class="row collapse prefix-radius"> 
«div class="small-3 columns"> 
<span class="prefix">Prefix</span> 
</div> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
</div> 
</div> 
<div class="large-6 columns"> 
<div class="row collapse postfix-radius"> 
«div class="small-9 columns"> 
<input type="text" placeholder="Value"> 
</div> 
«div class="small-3 columns"> 
«span class="postfix">Postfix</span> 
</div> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class="large-6 columns"> 
<div class="row collapse prefix-round"> 
«div class="small-3 columns"> 
<a href="#" class="button prefix">Go</a> 
</div> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
</div> 
</div> 
<div class="large-6 columns"> 
«div class="row collapse postfix-round"> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
«div class-"small-3 columns"> 
«a href="#" class="button postfix">Go</a> 
</div> 
</div> 
</div> 
</div> 
</form> 


Foundation 开关 


开关 是 在 鼠标 点 击 (手指 敲 击 ) 下 在 "On" 和 "Off 状态 下 切换 : 


E & 


切换 开关 使 用 &lt;div class-"switch"&gt; 


创建 。 &lt;div&gt; 内 添加 带 有 唯一 id 的 


&lt;input type="checkbox"&gt; ,  &lt;label&gt; 


&lt;input type-"checkbox"&gt; 的 id 相 匹 配 : 
实例 
头 


<div class="switch"> 
<input id="mySwitch" type="checkbox"> 
«label for="mySwitch"></label> 

</div> 


开 天 大 小 


使 用 .large , .small 或 .tiny 类 来 设置 开关 大 小 : 


实例 


«div class="switch large">...</div> 
«div class="switch">...</div> 

«div class-"switch small">...</div> 
«div class-"switch tiny">...</div> 


圆 角 切换 开关 
使 用 .radius 和 .round 类 来 设置 圆 角 切 换 开 关 : 
实例 


<div class="Switch">...</div> 
<div class-"switch radius">...</div> 
«div class-"switch round">...</div> 


TRH for 属性 需要 和 与 


开 天 组 


可 以 通过 设置 单 选 按钮 (radio) 来 设置 单个 选项 。 注 意 : 注意 各 个 选项 的 name 属性 
必须 一 致 (实例 中 为 "myGroup" )。 


实例 


<div class="switch"> 
<input id="mySwitchi" type="radio" name="myGroup"> 
«label for="mySwitchi"></label> 

</div> 


<div class="switch"> 
<input id="mySwitch2" type="radio" name="myGroup" checked> 
<label for="mySwitch2"></label> 

</div> 


Foundation 滑 块 
Foundation 滑 块 允许 用 户 通 过 拖 动 来 选取 区 间 值 : 


B3 so 


滑 块 可 以 通过 使 用 &lt;div class="range-slider" data-slider&gt; 创建 。 
在 &lt;div&gt; 内 , 添加 两 个 &lt:span&gt; 元 素 : 

&lt;span class="range-slider-handle"&gt; 创建 矩形 滑 块 〈( 蓝 色 背 景 ) ， 
&lt;span class="range-slider-active-segment"&gt; 是 在 滑 块 后 的 灰色 横 
条 ， 是 滑 块 拖 动 区 域 。 


主意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 


<div class="range-slider" data-slider> 

<span class="range-slider-handle"></span> 

«span class="range-slider-active-segment"></span> 
</div> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


HAMRA? 


使 用 .radius 和 .round 类 来 添加 圆 角 滑 块 。 使 用 .disabled 类 来 禁用 滑 
块 : 


实例 


«div class="range-slider" data-slider>..</div> 

<div class="range-slider radius" data-slider>...</div> 
<div class="range-slider round" data-slider>...</div> 
<div class="range-slider disabled" data-slider>...</div> 


使 用 .vertical-range 类 和 data-options="vertical: true;" 来 创建 垂直 
Nr: š 
YAIR: 


实例 


<div class="range-slider vertical-range" data-slider data-options=' 
<span class="range-slider-handle"></span> 
<span class="range-slider-active-segment"></span> 

</div> 


ee 
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默认 情况 下 ， 滑 块 放 在 横 条 的 中 间 (数值 为 "50")。 可 以 通过 添加 
data-options="initial: num " 属性 来 修改 默认 值 : 


实例 


«div class-"range-slider" data-slider data-options="initial: 80;"> 
<span class="range-slider-handle"></span> 
«span class="range-slider-active-segment"></span> 

</div> 


LEN: | 


显示 滑 块 值 


如 果 我 们 需要 在 滑 块 拖 动 时 实时 显示 值 ， 可 以 通过 在 &lt;div&gt; 中 添加 
data-options="display_selector:#_id_" 属性 且 元 素 id 值 与 滑 块 的 id 匹 
配 ， 如 下 实例 : 


实例 


<!-- Display the slider value in this span --> 
<span id="mySlider"></span> 


<div class-"range-slider" data-slider data-options="display_select« 
<span class="range-slider-handle"></span> 
«span class="range-slider-active-segment"></span> 

</div> 


‘ ay 








组 合 数据 选项 
以 下 实例 使 用 了 display_selector 和 initial 数据 选项 : 


实例 


<span id="mySlider"></span> 
<div class-"range-slider" data-slider data-options="display_select« 
<span class="range-slider-handle"></span> 


<span class="range-slider-active-segment"></span> 
</div> 


SS TSS 





步 长 


默认 情况 下 ， 滑 块 滑动 的 增加 减少 的 数量 为 "1"。 可 以 通过 添加 
data-options="step: _num_;" 属性 来 修改 步 长 值 。 实 例 中 设置 为 25: 


实例 


<span id="mySlider"></span> 
«div class-"range-slider" data-slider data-options="display_select« 
«span class="range-slider-handle"></span> 


«span class="range-slider-active-segment"></span> 
«/div» 





自 定义 区 间 


默认 情况 下 ， 区 间 值 在 "0" 到 "100"。 可 以 通过 添加 data-options start 和 
end 来 设置 区 间 值 。 以 下 实例 设置 区 间 值 为 "1" 到 "20": 


实例 


<span id="mySlider"></span> 


<div class-"range-slider" data-slider data-options="display_select« 
<span class="range-slider-handle"></span> 


<span class="range-slider-active-segment"></span> 
</div> 


‘ — % 
使 用 网 格 








以 下 使 用 为 在 网 格 中 使 用 滑 块 : 


实例 


<div class="row"> 
«div class-"small-10 columns"> 
«div class-"range-slider" data-slider data-options-"display se: 
«span class="range-slider-handle"></span> 


«span class="range-slider-active-segment"></span> 
«/div» 


«/div» 
«div class-"small-2 columns"> 


«!-- The display element (Tip: use CSS to perfectly position i! 


«span id-"mySlider" style-"display:block;margin-top:14px;"»«/s[ 
«/div» 


«/div» 





使 用 Input 


以 下 实例 使 用 &lt;input&gt; 取代 &lt;span&gt; 


实例 


来 显示 滑 块 的 值 : 


<div class="row"> 
«div class-"small-10 columns"> 
«div class-"range-slider" data-slider data-options-"display se: 
«span class="range-slider-handle"></span> 


«span class="range-slider-active-segment"></span> 
«/div» 


«/div» 
«div class-"small-2 columns"> 


«!-- The display element (Tip: use CSS to perfectly position i! 


«input type="number" id="mySlider" style-"margin-top:7px;" vali 
«/div» 


«/div» 


B -————————Àá[ 





Foundation 提示 框 


提示 框 在 鼠标 移动 到 元 素 上 后 显示 : 


鼠标 移 到 我 这 ! 我 这 也 能 显示 ! 





我 们 可 以 在 任何 元 素 上 添加 data-tooltip 属性 来 创建 提示 信息 。 使 用 title 
属性 来 设置 提示 信息 的 文本 。 


注意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 
头 


<span data-tooltip title="Hooray!">Hover over me!</span> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 

.has-tip 类 可 以 加 粗 鼠 标 移动 的 文本 : 
实例 
头 


<span data-tooltip class="has-tip" title="Hooray!">Hover over me!<, 





E 


提示 框 显示 位 置 


默认 情况 下 ， 提 示 框 会 出 现在 元 素 的 底部 。 


可 以 使 用 .tip-top , .tip-left , .tip-right or .tip-bottom (默认 ) 来 
设置 提示 框 的 位 置 。 


注意 : 在 小 尺寸 的 屏幕 上 ， 提 示 框 的 宽带 是 100%。 


实例 


<span data-tooltip 
<span data-tooltip 
<span data-tooltip 
<span data-tooltip 


‘| 


class="has-tip tip-top" title="Hooray!">Top</spé 
class="has-tip tip-bottom" title="Hooray!">Bottc 
class="has-tip tip-left" title="Hooray!">Left</: 
class-"has-tip tip-right" title="Hooray!">Right< 


A E: 








角 提 示 框 


,radius 和 .round 


实例 


<span data-tooltip 
<span data-tooltip 
<span data-tooltip 


类 用 于 设置 圆 角 提示 框 : 


class="has-tip" title="Hooray!">Default</span> 
class="has-tip radius" title="Hooray!">Radius</: 
class="has-tip round" title="Hooray!">Round</spé 





Foundation 模 态 框 


模 态 框 是 一 个 显示 在 页 面 头 部 的 弹 窗 。 


我 们 可 以 在 容器 元 素 上 (如 &lt;div id-"myModal" ) 使 用 唯一 并 添加 
.reveal-modal 类 和 data-reveal 属性 来 添加 模 态 框 。 E ru 
上 使 用 data-reveal-id-" id " 属性 阿里 打开 模 态 框 。 ja 必须 与 容器 id 一 致 
(实例 为 "myModal")。 


如 果 你 希望 在 点 击 模 态 框 之 外 的 区 域 来 关闭 模 态 框 。 你 可 以 在 模 态 框 的 关闭 按钮 
&lt;a&gt; 标签 上 添加 .close-reveal-modal 类 来 实现 。 


注意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 


<!-- Trigger the Modal --> 
<button type="button" class="button" data-reveal-id="myModal">Clicl 


<!-- The Modal Content --> 
<div id="myModal" class="reveal-modal" data-reveal> 
<h2>Heading in Modal.</h2> 
<p>Some text in the modal.</p> 
<p>Some text in the modal.</p> 
<a class="close-reveal-modal">&times ;</a> 
</div> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 

3) 


«/script» 


模 态 框 大 小 


可 以 在 模 态 框 容器 上 添加 以 下 类 来 设置 模 态 框 的 大 小 : 


.tiny :30% 宽度 

.small : 4096 宽度 
,medium : 6096 宽度 
.large : 7096 宽度 
.xlarge :95% 宽度 
.full : 10096 宽度 和 高 度 





注意 : 在 平板 、 笔 记 本 、PC 电脑 上 默认 为 80% 宽度 ， 在 小 屏幕 设备 上 是 100% 5E 
度 。 
实例 
头 
«div id="myModal" class="reveal-modal tiny|small|medium|large|xlart 


‘ = 
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你 可 以 在 模 态 框 内 伐 入 模 态 框 ， 可 以 在 第 一 个 模 态 框 上 添加 新 的 触发 按钮 。 你 必须 
AWA RRR ATE BNE B id : 








实例 


<!-- Trigger the modal --> 
«a href="#" class="button" data-reveal-id="myModal">Click To Open I 


<!-- The First Modal --> 
<div id="myModal" class="reveal-modal" data-reveal> 
<h2>First Modal</h2> 
<p>Some text. .</p> 
<p><a href="#" data-reveal-id-"secondModal" class="button">Open £ 
<a class="close-reveal-modal">&times;</a> 
</div> 


<!-- The Second Modal --> 

<div id="secondModal" class="reveal-modal" data-reveal> 
<h2>Tada! Second Modal</h2> 
<p>Some text. .</p> 
<a class="close-reveal-modal">&times;</a> 

</div> 


| 


第 二 个 模 态 框 会 取代 第 一 个 模 态 框 。 如 果 你 希望 在 打开 第 二 个 模 态 框 时 ， 不 关闭 第 
一 个 模 态 框 。 可 以 在 第 二 个 模 态 框 上 添加 
data-options="multiple_opened:true;" 属性 : 





实例 


<div id="secondModal" class="reveal-modal" data-reveal data-option: 
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Foundation Joyride 
Joyride 是 一 个 功能 向 导 的 JavaScript 效果 ， 创 建 实 例如 下 : 


实例 


<!-- Elements that control the tour stops --> 
<h3 id="first">First stop!</h3> 
«h3 id="second">Second stop!</h3> 


<!-- The joyride: must be placed at the bottom of your page, but ir 
<ol class="joyride-list" data-joyride> 
<li data-id="first"> 
<p>First stop. The ride has begun!</p> 
</li> 
<li data-id="second"> 
<h4>Second Stop</h4> 
<p>Any valid HTML will work inside the Joyride.</p> 
</li> 
<li data-button="End"> 
<h4>End Stop</h4> 
<p>The tour is over. You can either go back to the previous st« 
</li> 
</ol> 


<!-- Start Joyride Upon Initialization --> 

<script> 

$(document).ready(function() { 
$(document).foundation('joyride', 'start'); 


}) 


</script> 
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实例 解析 


以 上 实例 中 ， 我 们 创建 了 两 个 元 素 ， 每 个 元 素 都 有 独立 的 ID。 两 个 元 素 设置 了 
joyride 开始 和 结束 的 位 置 。 


我 们 在 &lt;ol&gt; 或 &lt;ul&gt; 元 素 上 添加 data-joyride 属性 和 
.joyride-list 类 来 创建 joyride。 你 需要 在 文档 头 部 定义 它 (在 

&lt;body&gt; 内 的 头 部 )。 在 每 个 列表 上 使 用 &lt;li&gt; 元 素 ， 每 个 元 素 添 
加 data-id-" value " 属性 。 属 性 的 value 必须 与 之 前 元 素 的 id 相同 。 所 以 第 
一 个 功能 导航 &lt;h3&gt; 元 素 使 用 id-"first" 必须 与 «li» 元 素 的 data-id-"first" 
值 一 致 。 


如 果 你 没有 管理 停止 的 id， 将 显示 一 个 模 态 框 。 





最 后 ，Jovride 需要 使 用 JavaScript 初始 化 它 ， 代 码 为 : 
$(document).foundation('joyride', 'start'); 


Foundation 均衡 磊 (Equalizem) 


我 们 可 以 在 容器 元 素 添 加 data-equalizer 属性 ， 并 为 每 个 子 元 素 添 加 
data-equalizer-watch 属性 来 创建 一 个 相同 高 度 的 均衡 器 。 最 高 的 元 素 决 定 了 
其 他 元 素 的 高 度 。 


注意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 
头 


<div class="row" data-equalizer> 
«div class="medium-4 columns panel" data-equalizer-watch> 
Lorem ipsum... 
«/div» 
«div class="medium-4 columns panel" data-equalizer-watch> 
Sed ut... 
«/div» 
«div class-"medium-4 columns panel" data-equalizer-watch» 
Lorem ipsum... 
«/div» 
«/div» 


«!-- Initialize Foundation JS --> 

«script» 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


不 同 屏幕 的 均衡 器 


在 均衡 器 上 通过 添加 data-equalizer-mq-" value " 属性 为 不 同 屏幕 尺寸 设置 
相同 高 度 。 值 可 以 是 以 下 之 一 : 


值 描述 实例 
medium-up 默认 。 创建 相同 高 度 的 容器 ， 宽 度 大 于 40.063em 
large-up 创建 相同 高 度 的 容器 ， 宽 度 大 于 64.063em 
xlarge-up 创建 相同 高 度 的 容器 ， 宽 度 大 于 90.063em 
xxlarge-up 创建 相同 高 度 的 容器 ， 宽 度 大 于 120.063em 


RENS 


Jj data-equalizer 和 data-equalizer-watch 属性 添加 相同 的 值 。 这 会 一 
起 连接 到 均衡 器 容器 。 重复 多 次 柑 套 均衡 器 ， 确 保 他 们 是 匹配 的 : 


实例 


<!-- The Equalized Container --> 
<div class="row" data-equalizer="first"> 
<div class="medium-4 columns"> 
<div class="panel" data-equalizer-watch="first"> 
<h3>Panel</h3> 


<!-- An Equalized Container Inside The Equalized Container -- 
<div class="row" data-equalizer="second"> 
«div class="panel" data-equalizer -watch="second"> 
<h3>Nested Panel</h3> 
<p>Lorem ipsum...</p> 
</div> 
«div class="panel" data-equalizer -watch="second"> 
<h3>Nested Panel</h3> 
<p>Lorem ipsum. ..</p> 
</div> 
«div class="panel" data-equalizer -watch="second"> 
<h3>Nested Panel</h3> 
<p>Lorem ipsum. ..</p> 
</div> 
</div> 
<!-- End Nested Equalized Container --> 


</div> 
</div> 
<div class="medium-4 columns"> 
«div class="panel" data-equalizer-watch="first"> 


<h3>Panel</h3> 
<p>Ut enim. ..</p> 
</div> 
</div> 


<div class="medium-4 columns"> 
«div class="panel" data-equalizer-watch="first"> 
<h3>Panel</h3> 
<p>Lorem ipsum....</p> 
</div> 
</div> 
</div> 
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Foundation 网 格 


Foundation 网 格 系统 


Foundation 网 格 系统 为 12 列 。 
如 果 你 不 需要 12 列 ， 你 可 以 合并 一 些 列 ， 创 建 一 些 更 大 宽度 的 列 。 


span span span span span span span span span span span span 
1 1 il 1 1 al 1 al i i il i 


span 4 span 4 span 4 
span 4 span 8 
span 6 span 6 
span 12 


Foundation 的 网 格 系统 是 响应 式 的 。 列 会 根据 屏幕 尺寸 自动 调整 大 小 。 在 大 尺寸 
屏幕 上 ， 可 能 是 三 列 ， 小 屏幕 尺寸 就 可 能 是 三 个 单列 ， 按 顺序 排列 。 


网 格 列 


Foundation 网 格 系统 有 三 个 列 : 


e .small (手机 端 ) 
e „medium (平板 设备 ) 
e large (电脑 设备 : Ei, AAH) 


以 上 类 可 以 结合 使 用 ， 创 建 更 灵活 的 布局 
基本 的 网 格 结构 
以 下 是 基本 的 Foundation 网 格 结构 实例 : 


实例 


<div class="row"> 
<div class-"small|medium|large- num columns"></div> 
</div> 
<div class="row"> 
<div class="small|medium|large-_num_ columns"></div> 
<div class="small|medium|large-_num_ columns"></div> 
<div class="small|medium|large-_num_ columns"></div> 
</div> 
<div class="row"> 


</div> 


首先 ， 创 建 一 行 (&lt;div class-"row"&gt; ), 这 是 一 个 水 平 的 垂直 列 。 然 后 
添加 列 的 数量 说 明 small- num , medium-_num_ 及 large- num X, ik 
x : 列 的 数量 num ”加 起 来 必须 等 于 12 : 


实例 


<div class="row"> 
«div class="small-12 columns">.small-12 yellow</div> 
</div> 
<div class="row"> 
<div class-"small-8 columns">.small-8 beige</div> 
<div class="small-4 columns">.small-4 gray</div> 
</div> 
<div class="row"> 
<div class="large-9 small-8 columns">.small-8 .large-9 pink</div: 
<div class="large-3 small-4 columns">.small-4 .large-3 orange</d: 
</div> 





实例 中 ， 第 一 行 的 <div> X Xj .small-12 , 这 会 创建 12 列 (100% 宽 度 ) 。 


第 二 行 创建 了 两 个 列 ， .smal1-4 的 宽度 为 33.3% ， .small-8 的 宽度 为 
66.6%, 


第 三 行 我 们 添加 了 领 外 的 两 个 列 ( .Large-3 和 .large-9 )。 这 意味 着 如 果 在 大 
屏幕 尺寸 下 ， 列 就 会 变 为 25% ( .large-3 ) #1 75%( .large-9 ) 的 比例 。 同 时 我 
们 也 指定 了 小 屏幕 上 列 的 比例 3396 ( .small-4 ) 和 66% ( .small-8 )。 这 种 组 

合 的 方式 对 于 不 同 屏幕 显示 效果 是 非常 有 帮助 的 。 


网 格 选项 


下 表 总 结 了 Foundation 网 格 系统 在 多 个 设备 上 的 说 明 : 


小 型 设备 中 等 设备 大 设备 


Phones Tablets 
(<40.0625em (>=40.0625em ells A 
(640px)) (640px)) ` 
网 
格 -gak Liata, Hr 以 折 生 开始 ， 断 点 以 上 是 水 
行 让 是 水 平 的 以 上 是 水 平 的 平 的 
为 
前 .small-* .medium-* large-* 
BR 
的 
数 12 12 12 
量 
可 
内 Yes Yes Yes 
BR 
F 
移 Yes Yes Yes 
量 
列 
排 Yes Yes Yes 
序 


aa 
3d] 


网 格 最 大 ( .row ) 宽度 为 62.5rem。 在 宽屏 上 ， 当 宽度 大 于 62.5rem, 列 不 会 跨越 
页 面 的 宽度 ， 即使 宽度 设 定 为 100%。 但 你 可 以 通过 CSS 重新 设置 max-width: 


实例 


<style> 
.row { 
max-width: 100%; 


j 
</style> 


如 果 你 使 用 默认 的 max-width, 但 希望 背景 颜色 跨越 整个 页 面 宽 度 ， 你 可 以 使 用 
,row 包 右 整个 容器 ， 并 指定 你 需要 的 背景 颜色 : 


实例 


«div style="background-color:coral;padding:25px;"> 
<div class="row"> 
«div class-"small-6 columns" style="background-color: yellow; "> 
«div class-"small-6 columns" style="background-color:pink;">.sr 
«/div» 
«/div» 
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Foundation 网 格 - ZK3E3ÉE & 


以 下 实例 创建 了 一 个 基本 的 网 格 系统 ， 在 PC 和 平板 设备 上 它 是 水 平平 铺 的 ， 在 手 
机 等 小 型 设备 上 它 是 水 平 堆 过 的。 


实例 


<div class="row"> 
«div class="medium-6 columns" style="background-color: yellow; "> 


<p> 菜 乌 教 程 </p> 
</div> 
<div class="medium-6 columns" style="background-color:pink;"> 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 


ES 了 9 
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提示 : .small&£i24;medium&£i24;large-* 类 中 的 数字 指定 了 跨越 的 列 数 。 
所 以 ， .small-1 跨越 1 列 ，.small-4 跨越 4 列 ，.smal1-6 跨越 6 列 
(50% 宽度 ) 等 。 


注意 : 要 保证 数列 加 起 来 是 12 列 ! 


Foundation 网 格 - 小 型 设备 


假设 我 们 在 小 型 设备 上 有 一 个 简单 的 网 格 布局 ， 两 列 ， 宽 度 比例 为 25% 和 75%。 
提示 : 小 型 设备 的 定义 是 屏幕 小 于 40.0625em o 
小 型 设备 上 我 们 使 用 .small-* X. 


<div class-"small-3 columns">....</div> 
<div class="small-9 columns">....</div> 


以 下 实例 设置 了 两 个 列 ， 比 例 为 25% 和 75% (Foundation 是 移动 优先 : 如 果 没 有 特 
别 说 明 ， 在 大 型 设备 上 会 继承 small 类 的 代码 ): .small in them and use those". 


实例 


<div class="row"> 
«div class="small-3 columns" style="background-color: yellow; "> 


<p> 菜 乌 教 程 </p> 
</div> 
<div class="small-9 columns" style="background-color:pink;"> 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 
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注意 : 要 保证 数列 加 起 来 是 12 列 ! 
如 果 需 要 设置 33.3%/66.6% 的 比例 ， 你 可 以 使 用 .small-4 和 .small-8 : 


实例 


<div class="row"> 
<div class="small-4 columns" style="background-color:yellow;"> 
<p> 菜 乌 教 程 </p> 
</div> 
<div class="small-8 columns" style="background-color:pink;"> 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 


Foundation 网 格 - 中 型 设备 


上 一 章节 我 们 介绍 了 小 型 设备 上 我 们 使 用 .small-* 类 来 设置 ， 网 格 比例 为 
25%/75% : 


<div class-"small-3 columns">....</div> 
<div class-"small-9 columns">....</div> 


在 中 型 设备 上 我 们 推荐 的 比例 为 50%/50%, 

提示 : 中 型 设备 的 屏幕 尺寸 定义 在 40.0625em 到 64.0624em 之 间 。 
中 型 设备 上 使 用 .medium-* 类 。 

现在 我 们 在 中 型 设备 上 添加 两 列 : 


<div class="small-3 medium-6 columns">....</div> 
<div class-"small-9 medium-6 columns">....</div> 


以 上 实例 设置 了 两 个 列 ， 比 例 为 25% 和 75% (Foundation 是 移动 优先 : 如 果 没 有 特 
别 说 明 ， 在 大 型 设备 上 会 继承 small 类 的 代码 ): 


小 型 设备 上 使 用 的 比例 为 25%/75% ( .small-3 和 .small-9 )。 但 在 中 型 设备 
上 使 用 的 比例 为 50%/50% ( .medium-6 和 .medium-6 ) 。 


实例 


<div class="row"> 
«div class-"small-3 medium-6 columns" style="background-color: :ye- 


<p> 菜 乌 教 程 </p> 
</div> 
«div class-"small-9 medium-6 columns" style="background-color: pir 
«p»3& & dfe «/ p» 
«/div» 
«/div» 





注意 : 要 保证 数列 加 起 来 是 12 7l! 


紧 在 中 型 设备 上 使 用 


以 下 实例 中 我 们 指定 了 .medium-6 类 (不 是 .small-* )。 这 表明 在 中 型 或 大 型 
设备 上 上 比例 为 50%/50%。 但 在 小 型 设备 上 会 水 平 堆 过 (100% 宽度 ): 


实例 


<div class="row"> 
«div class="medium-6 columns" style="background-color:yellow; "> 


<p> 菜 乌 教 程 </p> 
</div> 
<div class="medium-6 columns" style="background-color:pink;"> 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 
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Foundation 网 格 - 大 型 设备 


上 一 章节 我 们 介绍 了 中 型 设备 和 小 型 设备 的 网 格 布局 ， 小 型 设备 上 使 用 的 比例 为 
25%/75% (.small-3 和 .small-9)， 但 在 中 型 设备 上 使 用 的 比例 为 5096/5096 
(.medium-6 和 .medium-6) : 


<div class="small-3 medium-6 columns">....</div> 
<div class-"small-9 medium-6 columns">....</div> 


在 大 型 设备 上 我 们 推荐 的 比例 为 33%/66%。 
fem: 大 型 设备 的 屏幕 尺寸 定义 大 于 64.0625em。 
大 型 设备 上 使 用 .large-* 类 。 

现在 我 们 在 大 型 设备 上 添加 两 列 : 


<div class="small-3 medium-6 large-4 columns">....</div> 
<div class="small-9 medium-6 large-8 columns">....</div> 
解析 


e 小 型 设备 两 个 列 的 比例 为 25%/75% ( .small-3 和 .small-9 ) 
e 中 型 设备 两 个 列 的 比例 为 50%/50% ( .medium-6 和 .medium-6 ) 
e 大 型 设备 两 个 列 的 比例 为 33%/66% ( .large-4 和 .large-8 ) 


实例 


<div class="row"> 
<div class="small-3 medium-6 large-4 columns" style="background-¢ 


<p> 菜 乌 教 程 </p> 
</div> 
«div class-"small-9 medium-6 large-8 columns" style-"background-« 
«p»3& & dfe «/ p» 
«/div» 
«/div» 
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注意 : 要 保证 数列 加 起 来 是 12 列 ! 


紧 在 大 型 设备 上 使 用 


以 下 实例 中 我 们 指定 了 .large-6 类 (不 是 .medium- 和 `.smal/-*)。 这 表明 在 大 
型 设备 上 比例 为 50%/50%。 但 在 中 型 或 小 型 设备 上 会 水 平 堆 和 过 (100% 宽度 ): 


实例 


<div class="row"> 
«div class="large-6 columns" style="background-color: yellow; "> 
<p> 菜 乌 教 程 </p> 
</div> 
<div class="large-6 columns" style="background-color:pink;"> 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 


Foundation 块 状 网 格 


: 例如 一 行内 要 显示 四 张 图 片 ， 不 管 什 么 屏幕 下 都 需 
均 分 宽度 。 


可 以 使 用 &lt;ul&gt; 元 素 加 上 .small|medium|large-block-grid- num. 
类 来 创建 块 状 网 格 。num 用 于 指定 均 分 是 数量 : 


实例 


<ul class="small-block-grid-3"> 
<li><img src="newyork.jpg" alt="New York"></1i> 
<li><img src="paris.jpg" alt="Paris"></li> 
<li><img src-'"sanfran.jpg" alt="San Francisco"></1li> 
</ul> 


另 一 个 实例 ， 使 用 段落 : 
实例 


<ul class="small-block-grid-3"> 
<li><p>Just a Simple Example Text...</p></1li> 
<li><p>Just a Simple Example Text...</p></1li> 
<li><p>Just a Simple Example Text...</p></1li> 
</ul> 


不 同 尺 寸 屏幕 显示 不 同 效 量 
通过 添加 多 个 网 格 块 类 可 以 设置 不 同 尺寸 屏幕 显示 不 同 的 块 数量 


实例 


<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid- 
<li><img src="newyork.jpg" alt="New York"></1i> 
<li><img src="paris.jpg" alt="Paris"></1li> 
<li><img src-'"sanfran.jpg" alt="San Francisco"></1li> 
<li><img src="newyork.jpg" alt="New York"></1i> 
</ul> 
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Foundation 网 格 实例 


以 下 我 们 收集 了 一 些 网 格 常用 的 实例 。 


三 个 均等 列 


该 实例 演示 了 如 何 创建 三 个 均等 列 (33.3%/33.3%/33.3%) ， 在 中 型 和 大 型 设备 上 显 
示 三 个 列 ， 在 小 型 设备 上 自动 堆 壹 : 


实例 


<div class="row"> 
«div class="medium-4 columns" style="background-color: yellow; "> 
<p>.medium-4</p> 
</div> 
<div class="medium-4 columns" style="background-color:pink;"> 
<p>.medium-4</p> 
</div> 
«div class="medium-4 columns" style="background-color: yellow; "> 
<p>.medium-4</p> 
</div> 
</div> 
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三 个 不 均等 列 


该 实例 演示 了 如 何 创建 三 个 不 均等 列 (25%/50%/25%)， 在 中 型 和 大 型 设备 上 显示 
三 个 列 ， 在 小 型 设备 上 自动 堆 可 : 


实例 


<div class="row"> 
«div class="medium-3 columns" style="background-color:yellow; "> 
<p>.medium-3</p> 
</div> 
<div class="medium-6 columns" style="background-color:pink;"> 
<p>.medium-6</p> 
</div> 
«div class="medium-3 columns" style="background-color:yellow; "> 
<p>.medium-3</p> 
</div> 
</div> 
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两 个 均等 列 


该 实例 演示 了 如 何 创 建 两 个 均等 列 (50%/50%)， 在 小 型 、 中 型 和 大 型 设备 上 列 的 比 
例 始终 为 50%/50% : 





实例 


<div class="row"> 
«div class="small-6 columns" style="background-color: yellow; "> 
<p>.small-6</p> 
</div> 
«div class="small-6 columns" style="background-color:pink;"> 
<p>.small-6</p> 
</div> 
</div> 


两 个 不 均等 列 


该 实例 演示 了 如 何 创建 两 个 不 均等 列 (33.3%/66.6%)， 在 小 型 、 中 型 和 大 型 设备 上 
列 的 比例 始终 为 33.3%/66.6% : 


实例 


«div class="row"> 


«div class="small-8 columns" style="background-color: yellow; "> 
<p>.small-8</p> 
</div> 


<div class="small-4 columns" style="background-color: pink; "> 
<p>.small-4</p> 
</div> 
</div> 


修改 列 的 顺序 


通过 使 用 .small|medium|large-push-* 和 .small|medium|large-pull-* 
类 来 修改 列 的 顺序 : 


实例 


«div class="row"> 


«div class-"small-4 small-8-push columns" style="background-colot 
<p>.small-4 .small-8-push</p> 
</div> 


«div class-"small-8 small-4-pull columns" style="background-colo} 
«p».small-8 .small-4-pull</p> 
«/div» 
«/div» 
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RA ELSE FISH (FU HHH AB): 


实例 





<div class="row"> 
«div class="small-8 columns"».small-8 
«div class="row"> 
«div class="small-8 columns"».small-8 Nested 
«div class="row"> 
<div class="small-8 columns">.small-8 Nested Again</div> 
«div class="small-4 columns"».small-4«/div» 


«/div» 
«/div» 
«div class="small-4 columns"».small-4«/div» 
«/div» 
«/div» 
«div class="small-4 columns"».small-4«/div» 


«/div» 


e A 


混合 : FA SHES 

Foundation 网 格 系统 有 三 个 列 : .small-* (手机 )，.medium-* (平板 ), 和 
.large-* (桌面 设备 )。 这 些 类 可 以 动态 组 合 使 用 ， 让 布局 更 加 灵活 : 

提示 : 每 个 类 都 能 放大 ， 如 果 你 希望 小 型 和 大 型 屏幕 设备 的 宽度 一 样 可 以 设置 指定 


.small-* , 





实例 


<div class="row"> 
<div class="small-6 large-8 columns">.small-6 .large-8</div> 
<div class="small-6 large-4 columns">.small-6 .large-4</div> 
</div> 
<div class="row"> 
<div class="small-2 large-4 columns">.small-2 .large-2</div> 
<div class="small-4 large-4 columns">.small-4 .large-2</div> 
<div class="small-6 large-4 columns">.small-6 .large-2</div> 
</div> 
<div class="row"> 
<div class="small-3 large-5 columns">.small-3 .large-5</div> 
<div class="small-9 large-7 columns">.small-9 .large-7</div> 
</div> 


混合 : 手机 、 平 板 和 桌面 设备 


实例 


<div class="row"> 
<div class="medium-6 large-8 columns">.medium-6 .large-8«/div» 
<div class="medium-6 large-4 columns">.medium-6 .large-4</div> 
</div> 
<div class="row"> 
<div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 
<div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 
«div class-"small-4 medium-3 large-2 columns">.small-4 .medium-3 
«/div» 


«| m | 


居中 列 


列 居 中 可 以 使 用 .small-centered 类 。 中 型 和 大 型 设 各 可 以 继承 小 型 设 各 的 居 
中 ， 但 你 需要 在 大 型 设备 上 设置 居中 类 .large-centered 。 








实例 


<div class="row"> 

<div class="small-4 small-centered columns">small-4 small-centere 
</div> 
<div class="row"> 

«div class="small-6 small-centered columns">small-6 small-centere 
</div> 
<div class="row"> 

<div class="small-6 large-centered columns">small-6 large-centere 
</div> 
<div class="row"> 

<div class="small-8 small-centered large-uncentered columns">sma- 
</div> 
<div class="row"> 

«div class="small-10 small-centered columns">small-10 small-cente 
</div> 





列 偏 移 量 


可 以 使 用 .large-offset-* (或 .small-offset-* ) 类 设置 列 向 右 移 。 左 侧 外 
边 距 的 列 数量 使 用 * 号 控制 |: 


实例 


<div class="row"> 

<div class="large-1 columns">1</div> 

<div class="large-11 columns">11</div> 
</div> 
<div class="row"> 

<div class="large-1 columns">1</div> 

<div class="large-10 large-offset-1 columns">10, offset 1</div> 
</div> 
<div class="row"> 

<div class="large-1 columns">1</div> 

<div class="large-9 large-offset-2 columns">9, offset 2</div> 
</div> 
<div class="row"> 

<div class="large-1 columns">1</div> 

<div class="large-8 large-offset-3 columns">8, offset 3</div> 
</div> 


|] 


不 完整 列 


如 果 一 行 中 的 列 数量 之 和 不 是 12, Foundation 将 自动 将 最 后 一 列 向 右 浮动 ， 并 使 
用 空白 来 填充 剩 下 的 列 。 


可 选项 .end 类 用 于 设置 最 后 一 列 的 元 素 向 左边 浮动 : 
实例 
头 


<div class="row"> 
<div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns">.medium-3</div> 
</div> 
«div class="row"> 
<div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns end">.medium-3 .end</div> 
</div> 


宽屏 
网 格 ( .row ) RAR (max-width) 为 62.5rem。 在 宽屏 设备 上 尺寸 可 能 大 于 


62.5rem, 这 样 列 就 无 法 完整 填充 页 面 ， 即 便 宽度 设置 为 100%。 但 是 我 们 可 以 通过 
CSS 来 设置 新 的 max-width: 


实例 


<style> 
row { 
max-width: 100%; 


</style> 


如 果 你 想 使 用 默认 的 max-width, 但 是 背景 颜色 需要 跨 域 整个 页 面 ， 这 时 你 在 容器 元 
素 上 使 用 .row 类 ， 并 指定 你 需要 的 背景 颜色 : 


实例 


«div style-"background-color:coral;padding:25px;"» 
«div class="row"> 
«div class-"small-6 columns" style-"background-color:yellow;'» 


«div class-"small-6 columns" style="background-color:pink;">.sr 
«/div» 


«/div» 


加 EN 





Foundation 参考 手册 


Foundation 图 标 参 考 手册 


Foundation 图 标 
Foundation 提供 了 283 图 标 ， 你 可 以 使 用 CSS 来 泻 染 她 们 : 修改 大 小 和 颜色 。 


图 标 创 建 语 法 格式 如 下 : 


«i class="fi-name"></i> 


语法 中 name 部 分 为 图 标 指 定 的 名 称 。 

要 使 用 图 标 ， 你 可 以 将 图 片 的 样式 文件 放置 在 页 面 头 部 &lt;head&gt; 部分: 
<link rel="stylesheet" href="http://static.runoob.com/assets/four 

IE 

以 上 是 菜 乌 教程 使 用 的 图 标 样 式 类 ， 大 家 可 以 共用 。 

点 我 在 新 页 面 中 查看 图 标 。 





General Icons 


heart 
star 

plus 
minus 

X 

check 
upload 
download 
widget 
marker 
refresh 
home 
trash 
paperclip 
lock 
unlock 
calendar 
cloud 
magnifying-glass 


zoom-out 
zoom-in 
wrench 

rss 

share 

flag 
list-thumbnails 
list 
thumbnails 
annotate 
folder 
folder-lock 
folder-add 
clock 
play-video 
crop 
archive 
pencil 
graph-trend 
graph-bar 
graph-horizontal 
graph-pie 
checkbox 
minus-circle 
x-circle 

eye 
database 
results 


results-demographics 


like 

dislike 
upload-cloud 
camera 

alert 

bookmark 
contrast 

mail 

video 

telephone 
comment 
comment-video 
comment-quotes 
comment-minus 
comments 
microphone 
megaphone 
sound 
address-book 


bluetooth 
html5 
css3 
layout 
web 
foundation 


Page Icons 


page 
page-csv 
page-doc 
page-pdf 
page-export 
page-export-csv 
page-export-doc 
page-export-pdf 
page-add 
page-remove 
page-delete 
page-edit 
page-search 
page-copy 
page-filled 
page-multiple 


Arrow Icons 


arrow-up 
arrow-right 
arrow-down 
arrow-left 
arrows-out 
arrows-in 
arrows-expand 
arrows-compress 


People Icons 


torso 

torso-female 

torsos 
torsos-female-male 
torsos-male-female 
torsos-all 


e torsos-all-female 
e torso-business 


Device Icons 


monitor 

laptop 
tablet-portrait 
tablet-landscape 
mobile 
mobile-signal 
usb 


Text Editor Icons 


bold 

italic 
underline 
strike 
text-color 
background-color 
superscript 
subscript 
align-left 
align-center 
align-right 
align-justify 
list-numbered 
list-bullet 
indent-more 
indent-less 
print 

save 

photo 

filter 
paint-bucket 
link 

unlink 

quote 


Media Control Icons 


e play 
e stop 
e pause 


previous 
rewind 
fast-forward 
next 

record 
play-circle 
volume-none 
volume 
volume-strike 
loop 

shuffle 

eject 
rewind-ten 


Ecommerce Icons 


dollar 

euro 

pound 

yen 

bitcoin 
bitcoin-circle 
credit-card 
shopping-cart 
burst 
burst-new 
burst-sale 
paypal 
price-tag 
pricetag-multiple 
shopping-bag 
dollar-bill 


Accessibility Icons 


wheelchair 
braille 
closed-caption 
blind 

asl 

hearing-aid 
guide-dog 
universal-access 
telephone-accessible 
elevator 

male 


female 
male-female 
male-symbol 
female-symbol 


Social & Brand Icons 


social-500px 
social-adobe 
social-amazon 
social-android 
social-apple 
social-behance 
social-bing 
social-blogger 
social-delicious 
social-designer-news 
social-deviant-art 
social-digg 
social-dribbble 
social-drive 
social-dropbox 
social-evernote 
social-facebook 
social-flickr 
social-forrst 
social-foursquare 
social-game-center 
social-github 
social-google-plus 
social-hacker-news 
social-hi5 
social-instagram 
social-joomla 
social-lastfm 
social-linkedin 
social-medium 
social-myspace 
social-orkut 
social-path 
social-picasa 
social-pinterest 
social-rdio 
social-reddit 
social-skype 
social-skillshare 
social-smashing-mag 


social-snapchat 
social-spotify 
social-squidoo 
social-stack-overflow 
social-steam 
social-stumbleupon 
social-treehouse 
social-tumblr 
social-twitter 
social-vimeo 
social-windows 
social-xbox 
social-yahoo 
social-yelp 
social-youtube 
social-zerply 
social-zurb 


Miscellaneous Icons 


compass 
music 

lightbulb 
battery-full 
battery-half 
battery-empty 
projection-screen 
info 

power 

asterisk 

at-sign 

key 

ticket 

book 
book-bookmark 
anchor 

puzzle 

foot 

paw 

mountains 
trees 
sheriff-badge 
first-aid 

trophy 
prohibited 
no-dogs 
no-smoking 


safety-cone 
shield 

crown 

target 
target-two 
die-one 

die-two 
die-three 
die-four 
die-five 

die-six 

skull 

map 

clipboard 
clipboard-pencil 
clipboard-notes 


Foundation CSS 参考 手册 


Foundation 默认 设置 


Foundation 使 用 浏览 器 默认 字体 大 小 ( font-size:100% )。 对 于 大 多 数 桌 面 设 各 
的 浏览 器 来 说 ， 字 体 大 小 默认 为 16px。 对 于 移动 设备 的 浏览 器 ， 字 体 默 认 大 小 为 
12px, 默认 的 字体 为 "Helvetica Neue" , line-height 默认 为 1.5 。 


这 些 设置 是 适用 于 &1t;body&gt; 元 素 内 的 元 素 。 


此 外 ，  &lt;p&gt; 元 素 与 底部 的 外 边 距 (margin-bottom) 为 1.25rem , line-height 
为 1.6。 


文本 


以 下 的 HTML 元 素 ，Foundation 设置 了 独立 的 样式 演 染 它 ， 不 会 采用 浏览 器 默认 
样式 。 点 击 "尝试 一 下 " 查看 在 线 实 例 。 


A 描述 
<h1> - <h6> h1 - h6 标题 
<a> REAM, Mire aBeRRSA PRIA 
<small> 浅 厌 色 的 副标题 文本 
«blockquote» ”引用 内 容 模 块 
<strong> 加 粗 文本 
<em> 斜体 
Sire 指定 单词 的 缩写 ， 使 用 该 元 素 文本 出 现 虚 线 下 划 线 ， 
鼠标 移动 上 去 会 有 提示 信息 
<kbd> 接收 键盘 输入 指令 : <kbd>CTRL + P</kbd> 
<hr> 水 平 线 
<code> 代码 片段 
<ul> 无 序列 表 
<ol> 有 序列 表 


«dl» 描述 性 列表 


文本 对 齐 


使 用 CSS 类 来 修改 文本 的 对 齐 方 式 : 


.small-only-text-left 


.medium-text-left 
.medium-only-text-left 
.large-text-left 
.large-only-text-left 
.xlarge-text-left 
.xlarge-only-text-left 


.xxlarge-text-left 
右 对 齐 
.Small-text-right 
.small-only-text-right 
.medium-text-right 


.medium-only-text- 


类 描述 实例 
.text-left 左 对 齐 文本 
text-right 右 对 齐 文本 
.text-center 居中 
.text-justify 两 端 对 齐 
不 同 尺寸 屏幕 的 对 齐 
使 用 CSS 类 来 修改 文本 的 不 同 尺寸 屏幕 的 对 齐 方式 : 
x 描述 " 
左 对 齐 
.small-text-left 所 有 尺寸 屏幕 左 对 齐 


小 尺寸 屏幕 左 对 齐 ( 宽 度 小 于 40em ) 
EAF 40.0625em 尺寸 屏幕 左 对 齐 
度 在 40.0625em 到 64em 尺寸 的 屏幕 左 对 


大 于 64.0625em 尺寸 屏幕 左 对 齐 
在 64.0625em 到 90em 尺寸 的 屏幕 左 对 


we Gm 
kd 


M 


EAF 90.0625em 尺寸 屏幕 左 对 章 
在 90.0625em 到 120em 尺寸 的 屏幕 左 对 


M M e 
Kd 


M 


el 


EAF 120em 尺寸 屏幕 左 对 章 


所 有 尺寸 屏幕 右 对 齐 

小 尺寸 屏幕 右 对 齐 ( 宽 度 小 于 40em ) 

宽度 大 于 40.0625em 尺寸 屏幕 右 对 齐 
宽度 在 40.0625em 到 64em 尺寸 的 屏幕 右 对 


right 
.large-text-right 


.large-only-text-right 
.xlarge-text-right 
.xlarge-only-text-right 


.xxlarge-text-right 

居中 对 齐 
.Small-text-center 
.small-only-text-center 
.medium-text-center 


.medium-only-text- 
center 


.large-text-center 
.large-only-text-center 


.xlarge-text-center 


.xlarge-only-text- 
center 


.xxlarge-text-center 
两 端 对 齐 
.small-text-justify 
.small-only-text-justify 
.medium-text-justify 


.medium-only-text- 
justify 


Jarge-text-justify 
.large-only-text-justify 


.xlarge-text-justify 


.xlarge-only-text- 
justify 


=H 


EAF 64.0625em RU RRA xt A 
在 64.0625em 到 90em 尺寸 的 屏幕 右 对 


St c 
ku 


kd 


大 于 90.0625em 尺寸 屏幕 右 对 齐 
在 90.0625em 到 120em 尺寸 的 屏幕 右 对 


we Gm 
kd 


M 


EAF 120em 尺寸 屏幕 右 对 齐 


el 


所 有 尺寸 屏幕 居中 对 齐 

小 尺寸 屏幕 居中 对 齐 (宽度 小 于 40em ) 
EAF 40.0625em 尺寸 屏幕 居中 对 齐 
度 在 40.0625em 到 64em 尺寸 的 屏幕 居中 


SX c 


=H 


kd 


大 于 64.0625em 尺寸 屏幕 居中 对 齐 
在 64.0625em 到 90em 尺寸 的 屏幕 居中 


X og c 
XW xg 


M 


kd 


AF 90.0625em 尺寸 屏幕 居中 对 齐 
在 90.0625em 到 120em 尺寸 的 屏幕 居中 


Sog c 
XW xg 


M 


Ex 
kd 


大 于 120em 尺寸 屏幕 居中 对 齐 


所 有 尺寸 屏幕 都 两 端 对 齐 
小 尺寸 屏幕 两 端 对 齐 (宽度 小 于 40em ) 


宽度 大 于 40.0625em 尺寸 屏幕 两 端 对 齐 
宽度 在 40.0625em 到 64em 尺寸 的 屏幕 两 端 
Xt FF 

宽度 大 于 64.0625em 尺寸 屏幕 两 端 对 齐 
宽度 在 64.0625em 到 90em 尺寸 的 屏幕 两 端 
xt FF 

宽度 大 于 90.0625em 尺寸 屏幕 两 端 对 齐 
宽度 在 90.0625em 到 120em 尺寸 的 屏幕 两 端 
对 齐 


Xxlarge-text-justify 宽度 大 于 120em 尺寸 屏幕 两 端 对 齐 


其 他 


类 描述 实例 
.left 元 素 向 左 浮动 
right 元 素 向 右 浮 动 
.Clearfix 清除 浮动 - 必须 添加 在 浮动 元 素 的 父 元 素 上 
.hide 隐藏 元 素 (CSS display: none ) 
.list-inline 将 所 有 元 素 设置 在 同一 行 
lead 让 <p> 元 素 更 突出 


.subheader 设置 浅 色 的 <h1> - <h6> 元 素 


Foundation CSS 可 见 性 


根据 屏幕 尺寸 显示 元 素 
以 下 类 会 根据 设备 (屏幕 尺寸 ) 来 显示 元 素 。 


Æ 
KR 


.show-for-small- 
only 


.show-for- 
medium-up 


.Show-for- 
medium-only 


.Show-for-large- 
UP 
.Show-for-large- 
only 


.Show-for- 
xlarge-up 


.Show-for- 
xlarge-only 


.Show-for- 
xxlarge-up 


以 下 实例 演示 了 以 上 所 有 


学 


描 


只 在 小 型 设备 上 显示 元 素 (屏幕 宽度 小 于 40.0625em ) 


在 中 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 于 40.0625em) 


只 在 中 型 设备 上 显示 元 素 (屏幕 宽度 在 40.0625em 到 
64.0625em 之 间 ) 


在 大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 于 64.0625em) 
只 在 大 型 设备 上 显示 元 素 (屏幕 宽度 在 64.0625em 到 
90.0625em 之 间 ) 


在 更 大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 
90.0625em) 


只 在 更 大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 在 90.0625em 
到 120.0625em 之 间 ) 


在 超大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 于 
120.0625em) 


类 的 可 见 性 。 


. Show- 


<p class="show-for-small-only"> 你 在 小 型 设备 上 。</p> 

<p class="show-for-medium-up"> 你 在 中 型 、 大 型 、 更 大 型 超大 型 的 设备 上 。</p 
<p class="show-for-medium-only"> 你 在 中 型 设备 上 。</p> 

<p class="show-for-large-up"> 你 在 大 型 、 更 大 型 、 超 大 型 的 设备 上 </p> 

<p class="show-for-large-only"> 你 在 大 型 设备 上 。</p> 

<p class="show-for-xlarge-up"> 你 在 更 大 型 、 超 大 型 的 设备 上 。</p> 


<p class="show-for-xlarge-only"> 你 在 更 大 型 设 各 上 。</p> 
<p class="show-for-xxlarge-up"> 你 在 超大 型 设备 上 。</p> 





根据 屏幕 尺寸 隐藏 元 素 


以 下 类 会 根据 设备 (屏幕 尺寸 ) 来 隐藏 元 素 。 


.hide-for-small- 
only 

.hide-for- 
medium-up 


.hide-for- 
medium-only 
.hide-for-large- 
up 
.hide-for-large- 
only 

.hide-for- 
xlarge-up 
.hide-for- 
xlarge-only 


.hide-for- 
xxlarge-up 


学 


描 


只 在 小 型 设备 上 隐藏 元 素 (屏幕 宽度 小 于 40.0625em ) 


在 中 型 及 以 上 设 各 上 隐藏 元 素 (屏幕 宽度 大 于 40.0625em) 


只 在 中 型 设备 上 隐藏 元 素 (屏幕 宽度 在 40.0625em 到 
64.0625em 之 间 ) 


在 大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 大 于 64.0625em) 


只 在 大 型 设备 上 隐藏 元 素 (屏幕 宽度 在 64.0625em 到 
90.0625em 之 间 ) 


在 更 大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 大 于 90.0625em) 


只 在 更 大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 在 90.0625em 
到 120.0625em 之 间 ) 


在 超大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 大 于 
120.0625em) 


<p class="hide-for-small-only"> 你 不 在 小 型 设备 上 。</p> 

<p class="hide-for-medium-up"> 你 不 在 中 型 、 大 型 、 更 大 型、 超大 型 的 设备 上 。 <, 
<p class="hide-for-medium-only"> 你 不 在 中 型 设 各 上 。</p> 

<p class="hide-for-large-up"> 你 不 在 大 型 、 更 大 型 、 超 大 型 的 设备 上 。</p> 

«p class="hide-for-large-only"> 你 不 在 大 型 设备 上 。</p> 


<p class="hide-for-xlarge-up"> 你 不 在 更 大 型 、 超 大 型 的 设备 上 。</p> 
<p class="hide-for-xlarge-only"> 你 不 在 更 大 型 设 各 上 。</p> 
<p class="hide-for-xxlarge-up"> 你 不 在 超大 型 设备 上 。</p> 





根据 屏幕 方向 显示 元 冬 


以 下 类 会 根据 设 各 (屏幕 尺寸 ) 来 隐藏 元 素 。 


我 们 可 以 设置 元 素 在 不 同方 向 是 是 否 显示 或 隐藏 。 笔 记 本 等 桌面 设备 一 般 是 横向 
的 ， 但 是 手机 和 平板 设备 可 以 是 横向 或 纵向 ， 我 们 可 以 根据 用 户 手 机 拿 的 方向 来 设 
置 元 素 隐 藏 与 显示 : 


类 描述 


.Show-for-landscape 在 横向 时 显示 元 素 (纵向 隐藏 ) 
.show-for-portrait 在 纵向 时 显示 元 素 (横向 隐藏 ) 


下 面 实例 根据 使 用 的 方向 显示 文本 内 容 : 
实例 


<p class="show-for-landscape"> 文 本 只 在 横向 显示 。</p> 
<p class="show-for-portrait"> 文 本 只 在 纵向 显示 。</p> 


触 屏 设备 的 显示 和 与 隐藏 
你 可 以 根据 设备 是 否 支持 触摸 来 显示 与 隐藏 元 素 。 


类 描述 
.show-for-touch 在 支持 触 屏 的 设备 上 显示 (不 支持 的 设备 上 隐藏 ) 
.hide-for-touch 在 支持 触 屏 的 设备 上 隐藏 (不 支持 的 设备 上 显示 ) 


下 面 实例 根据 设备 是 否 支持 触摸 来 显示 文本 内 容 : 
实例 


<p class="show-for-touch"> 你 的 设 各 支持 触 屏 。</p> 
«p class="hide-for-touch"> 你 的 设 各 不 支持 触 屏 。</p> 


W3School Javascript 教程 


来 源 : 


e JavaScript 教 程 
e HTML DOM 教 程 
e. Ajax 教程 


整理 : 飞龙 


JavaScript 基础 


JavaScript 简介 


JavaScript 是 世界 上 最 流行 的 编程 语言 。 


这 门 语言 可 用 于 HTML 和 web， 更 可 广泛 用 于 服务 器 、PC、 笔 记 本 电脑 、 平 板 电 


脑 和 智能 手机 等 设备 。 


JavaScript 是 脚本 语言 


JavaScript 是 一 种 轻 量 级 的 编程 语言 。 

JavaScript 是 可 插入 HTML 页 面 的 编程 代码 。 

JavaScript 插入 HTML 页 面 后 ， 可 由 所 有 的 现代 浏览 器 执行 。 
JavaScript 很 容易 学 习 。 


您 将 学 到 什么 

面 是 您 将 在 本 教程 中 学 到 的 主要 内 容 。 
JavaScript : € A HTML 输出 
实例 


document.write("<hi>This is a heading</hi>"); 
document .write("<p>This is a paragraph</p>"); 


提示 : 您 只 能 在 HTML 输出 中 使 用 document.write。 如 果 您 在 文档 加 载 后 使 用 该 方 


法 ， 会 覆盖 整个 文档 。 
JavaScript : 对 事件 作出 反应 
实例 


«button type="button" onclick="alert('Welcome!')"> 点 击 这 里 </button> 
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alert() 函数 在 JavaScript 中 并 不 常用 ， 但 它 对 于 代码 测试 非常 方便 。 


onclick 事件 只 是 您 即将 在 本 教程 中 学 到 的 众多 事件 之 一 。 
JavaScript : 改变 HTML AR 

使 用 JavaScript 3E 4438 HTML 内 容 是 非常 强大 的 功能 。 
实例 


x-document.getElementById("demo") // 查 找 元 素 
x.innerHTML="Hello JavaScript"; // 改 变 内 容 


您 会 经 常 看 到 document.getElementByID("some id")。 这 个 方法 是 HTML DOM 中 
定义 的 。 


DOM (文档 对 象 模型 ) 是 用 以 访问 HTML 元 素 的 正式 W3C 标准 。 

您 将 在 本 教程 的 多 个 章节 中 学 到 有 关 HTML DOM 的 知识 。 
JavaScript : 改变 HTML 图 像 

本 例会 动态 地 改变 HTML <image> 的 来 源 (src) : 

The Light bulb 

5d KD a LFA RAR AT 

JavaScript 能 够 改变 任意 HTML 元 素 的 大 多 数 属性 ， 而 不 仅仅 是 图 片 。 
JavaScript : 改变 HTML 样式 

改变 HTML TRAIA, BFAR HTML 属性 的 变种 。 


实例 


x=document.getElementById("demo") // 找 到 元 素 
x.style.color="#ff0000"; // 改 变样 式 


JavaScript : 验证 输入 


JavaScript 常用 于 验证 用 户 的 输入 。 


实例 


if isNaN(x) {alert("Not Numeric") }; 


您 知道 吗 ? 

提示 : JavaScript 与 Java 是 两 种 完全 不 同 的 语言 ， 无 论 在 概念 还 是 设计 上 。 
Java (由 Sun 发 明 ) 是 更 复杂 的 编程 语言 。 

ECMA-262 是 JavaScript 标准 的 官方 名 称 。 


JavaScript 由 Brendan Eich 发 明 。 它 于 1995 年 出 现在 Netscape 中 (该 浏览 器 已 
停止 更 新 ) ， 并 于 1997 年 被 ECMA (一 个 标准 协会 ) Xm. 


课外 阅读 


JavaScript 高 级 教程 : JavaScript 历史 、 JavaScript 实现 


JavaScript 使 用 


HTML 中 的 脚本 必须 位 于 <script> 与 </script> 标签 之 间 。 
脚本 可 被 放置 在 HTML 页 面 的 «body» 和 <head> 部 分 中 。 


JavaScript 输出 


JavaScript 通常 用 于 操作 HTML 元 素 。 


操作 HTML 元 素 


如 需 从 JavaScript 访问 某 个 HTML 元 素 ， 您 可 以 使 用 
document.getElementByld(id) Aik. 


请 使 用 "id" 属性 来 标识 HTML 7538 : 


例子 
通过 指定 的 id 来 访问 HTML 元 素 ， 并 改变 其 内 容 : 
<!DOCTYPE html» 
<html> 
<body> 
<hi>My First Web Page</h1> 
<p id="demo">My First Paragraph</p> 
<script> 
"document.getElementById("demo").innerHTML-z"My First JavaScript"; ~ 


</script> 


</body> 
</html> 


[E s.l 


JavaScript 由 web 浏览 器 来 执行 。 在 这 种 情况 下 ， 浏 览 器 将 访问 id="demo" 的 
HTML 元 素 ， 并 把 它 的 内 容 (innerHTML) 替换 为 "My First JavaScript". 


写 到 文档 输出 
下 面 的 例子 直接 把 <p> TREA HTML 文档 输出 中 : 


实例 


<!DOCTYPE html» 
<html> 
<body> 


<hi>My First Web Page</h1> 
<script> 
“document .write("<p>My First JavaScript«/p»");" 


</script> 


</body> 
</html> 


I 
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请 使 用 document.write) 仅仅 向 文档 输出 写 内 容 。 
如 果 在 文档 已 完成 加 载 后 执行 document.write， 整 个 HTML 页 面 将 被 覆盖 : 


实例 


<!DOCTYPE html» 
<html> 
<body> 


<hi>My First Web Page</h1> 

<p>My First Paragraph.</p> 

«button onclick="myFunction( )">R dix #</button> 
<script> 


function myFunction() 


{ 
document .write( "糟糕 ! 文档 消失 了 。 "); 


} 


</script> 


</body> 
</html> 


Windows 8 中 的 JavaScript 


提示 : 微软 支持 通过 JavaScript 创建 Windows 8 app. 
对 于 因特网 和 视窗 操作 系统 ，JavaScript 都 意味 着 未 来 。 


W3School 前 端 教 程 合 


JavaScript 输出 1881 


JavaScript 语句 


JavaScript 语句 


JavaScript 语句 向 浏览 器 发 出 的 命令 。 语句 的 作用 是 告诉 浏览 器 该 做 什么 。 
下 面 的 JavaScript 语句 向 id="demo" 的 HTML 元 素 输 出 文本 "Hello World" : 


document .getElementById("demo").innerHTML="Hello World"; 


分 号 

分 号 用 于 分 隔 JavaScript 语句 。 

通常 我 们 在 每 条 可 执行 的 语句 结尾 添加 分 号 。 
使 用 分 号 的 另 一 用 处 是 在 一 行 中 编写 多 条 语句 。 
fem : 您 也 可 能 看 到 不 带 有 分 号 的 案例 。 

在 JavaScript 中 ， 用 分 号 来 结束 语句 是 可 选 的 。 


JavaScript 代码 


JavaScript 代码 (或 者 只 有 JavaScript) 是 JavaScript 语句 的 序列 。 
浏览 器 会 按照 编写 顺序 来 执行 每 条 语句 。 
本 例 将 操作 两 个 HTML 元 素 : 


实例 


document.getElementById("demo").innerHTML-"Hello World"; 
document.getElementById("myDIV").innerHTML-"How are you?"; 


JavaScript 代码 块 


JavaScript 语句 通过 代码 块 的 形式 进行 组 合 
块 由 左 花 括号 开始 ， 由 右 花 括号 结束 。 


块 的 作用 是 使 语句 序列 一 起 执行 。 
JavaScript 函数 是 将 语句 组 合 在 块 中 的 典型 例子 
下 面 的 例子 将 运行 可 操作 两 个 HTML 元 素 的 函数 : 


实例 


function myFunction() 


{ 
document .getElementById("demo").innerHTML="Hello World"; 


document .getElementById("myDIV").innerHTML="How are you?"; 
j 
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JavaScript 对 大 小 写 敏 感 。 


JavaScript 对 大 小 写 是 敏感 的 。 

当 编写 JavaScript 语句 时 ， 请 留意 是 否 关 闭 大 小 写 切 换 键 。 
HA getElementByld 与 getElementbyID 是 不 同 的 。 

E2, & Æ myVariable 与 MyVariable 也 是 不 同 的 。 


空格 


JavaScript 会 忽略 多 余 的 空格 。 您 可 以 向 脚本 添加 空格 ， 来 提高 其 可 读 性 。 下 面 的 
两 行 代码 是 等 效 的 : 


var name="Hello"; 
var name = "Hello"; 


对 代码 行进 行 折 行 
您 可 以 在 文本 字符 串 中 使 用 反 斜 杠 对 代码 行进 行 换 行 。 下 面 的 例子 会 正确 地 显示 : 


document.write("Hello \ 
World!"); 


不 过 ， 您 不 能 像 这 样 折 行 : 


document.write \ 
("Hello World!"); 


您 A Ibe 吗 ^? 


提示 : JavaScript 是 脚本 语言 。 浏 览 器 会 在 读 取代 码 时 ， 逐 行 地 执行 脚本 代码 。 而 
对 于 传统 编程 来 说 ， 会 在 执行 前 对 所 有 代码 进行 编译 。 


课外 阅读 


JavaScript 高 级 教程 : ECMAScript 语法 


JavaScript 注释 
JavaScript 注释 可 用 于 提高 代码 的 可 读 性 。 


JavaScript 注释 

JavaScript 不 会 执行 注释 。 

我 们 可 以 添加 注释 来 对 JavaScript 进行 解释 ， 或 者 提高 代码 的 可 读 性 。 
单行 注释 以 / 开头。 

例子 

下 面 的 例子 使 用 单行 注释 来 解释 代码 : 


// 输出 标题 : 
document .getElementById("myH1i").innerHTML="Welcome to my Homepage", 
// 输出 段落 : 
document .getElementById("myP").innerHTML="This is my first paragray 
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JavaScript 多 行 注释 
多 行 注释 以 / 开始 ， 以 / 结尾 。 
下 面 的 例子 使 用 多 行 注 释 来 解释 代码 : 


例子 


ifs 

下 面 的 这 些 代码 会 输出 

一 个 标题 和 一 个 段落 

并 将 代表 主页 的 开始 

= 

document .getElementById("myH1").innerHTML="Welcome to my Homepage", 
document.getElementById("myP").innerHTML-"This is my first paragray 


E == oo 


使 用 注释 来 阻止 执行 





例子 1 
在 下 面 的 例子 中 ， 注 释 用 于 阻止 其 中 一 条 代码 行 的 执行 (可 用 于 调试 ) 


//document.getElementById("myHi1").innerHTML-"Welcome to my Homepage 
document .getElementById("myP").innerHTML="This is my first paragray 


«| EE 








例子 2 
在 下 面 的 例子 中 ， 注 释 用 于 阻止 代码 块 的 执行 (可 用 于 调试 ) 


pi 
document .getElementById("myH1i").innerHTML="Welcome to my Homepage", 
document .getElementById("myP").innerHTML="This is my first paragray 
PA 


在 行 末 使 用 注释 


在 下 面 的 例子 中 ， 我 们 把 注释 放 到 代码 行 的 结尾 处 : 





例子 


var x=5; // 声明 x 并 把 5 赋值 给 它 
var y=x+2; // 声明 y 并 把 x+2 REALE 


课外 阅读 


JavaScript 高 级 教程 : ECMAScript 语法 


JavaScript == 


变量 是 存储 信息 的 容器 。 
实例 


var x-2; 
var y-3; 
var z-x*ty; 


融 像 代 效 那样 


在 代数 中 ， 我 们 使 用 字母 (比如 x) 来 保存 值 (比如 2) 。 
通过 上 面 的 表达 式 z=x+y， 我 们 能 够 计算 出 z 的 值 为 5。 
在 JavaScript 中 ， 这 些 字母 被 称 为 变量 。 

提示 : 您 可 以 把 变量 看 做 存储 数据 的 容器 。 


JavaScript = = 


与 代数 一 样 ，JavaScript 变量 可 用 于 存放 值 (比如 x=2) 和 表达 式 (上 比如 


Z=X+y) 。 


变量 可 以 使 用 短 名 称 (比如 x Aly) ， 也 可 以 使 用 描述 性 更 好 的 名 称 (上 比如 age, 


sum, totalvolume) 。 
e 变量 必须 以 字母 开头 
e 变量 也 能 以 $ 和 _ 符号 开头 (不 过 我 们 不 推荐 这 么 做 ) 
e 变量 名 称 对 大 小 写 敏 感 (y 和 Y 是 不 同 的 变量 ) 


提示 : JavaScript 语句 和 JavaScript 变量 都 对 大 小 写 敏 感 。 


JavaScript 数据 类 型 


JavaScript 变量 还 能 保存 其 他 数据 类 型 ， 比 如 文本 值 (name="Bill Gates"), 


在 JavaScript 中 ， 类 似 "Bill Gates" 这 样 一 条 文本 被 称 为 字符 串 。 
JavaScript 变量 有 很 多 种 类 型 ， 但 是 现在 ， 我 们 只 关注 数字 和 字符 串 。 
当 您 向 变量 分 配 文本 值 时 ， 应 该 用 双 引 号 或 单 引 号 包围 这 个 值 。 


当 您 向 变量 赋 的 值 是 数值 时 ， 不 要 使 用 引号 。 如 果 您 用 引号 包围 数值 ， 该 值 会 被 作 
为 文本 来 义理 。 


例子 


var pi=3.14; 
var name="Bill Gates"; 
var answer='Yes I am!'; 


声明 (创建 ) JavaScript 变量 


在 JavaScript 中 创建 变量 通常 称 为 “声明 ”变量 。 
我 们 使 用 var 关键 词 来 声明 变量 : 


var carname; 
变量 声明 之 后 ， 该 变量 是 空 的 〈 它 没有 值 ) 。 
如 需 向 变量 赋值 ， 请 使 用 等 号 : 


carname="Volvo"; 


不 过 ， 您 也 可 以 在 声明 变量 时 对 其 赋值 : 


var carname="Volvo"; 


例子 


在 下 面 的 例子 中 ， 我 们 创建 了 名 为 carname 的 变量 ， 并 向 其 赋值 "Volvo"， 然 后 把 
它 放 入 id="demo" 的 HTML 段落 中 : 


<p id="demo"></p> 
var carname="Volvo"; 
document .getElementById("demo").innerHTML-carname; 


提示 : 一 个 好 的 编程 习惯 是 ， 在 代码 开始 处 ， 统 一 对 需要 的 变量 进行 声明 。 


" - Ea 
一 条 语句 ， 多 个 变量 


您 可 以 在 一 条 语句 中 声明 很 多 变量 。 该 语句 以 var 开头 ， 并 使 用 去 号 分 隔 变量 即 
nj: 


var name="Gates", age-56, job="CEO"; 


声明 也 可 横 跨 多 行 : 
var name="Gates", 
age=56, 
job="CEO"; 


Value = undefined 


在 计算 机 程序 中 ， 经 常会 声明 无 值 的 变量 。 未 使 用 值 来 声明 的 变量 ， 其 值 实际 上 是 
undefined。 


在 执行 过 以 下 语 名 后， 变量 carname 的 值 将 是 undefined : 


var carname; 


重新 声明 JavaScript 7s 


如 果 重 新 声明 JavaScript 变量 ， 该 变量 的 值 不 会 丢失 : 
在 以 下 两 条 语句 执行 后 ， 变 量 carname 的 值 依然 是 "Volvo" : 


var carname="Volvo"; 
var carname; 


JavaScript 算数 
您 可 以 通过 JavaScript 变量 来 做 算数 ， 使 用 的 是 = 和 + 这 类 运算 符 : 


例子 


您 将 在 本 教程 稍 后 的 章 


课外 阅读 


JavaScript 高 级 教程 : 


节 学 到 更 多 有 关 JavaScript 运算 符 的 知识 。 


ECMAScript 语法 、 ECMAScript 变量 


JavaScript 数据 类 型 
字符 串 、 数 字 、 布 尔 、 数 组 、 对 象 、Null、Undefined 


JavaScript 拥有 动态 类 型 


JavaScript 拥有 动态 类 型 。 这 意味 着 相同 的 变量 可 用 作 不 同 的 类 型 : 


实例 
var x // x 为 undefined 
var x - 6; // x 为 数字 
var x = "Bill"; // x 为 字符 串 
JavaScript 字符 串 


字符 串 是 存储 字符 (比如 "Bill Gates") HES. 
字符 串 可 以 是 引号 中 的 任意 文本 。 您 可 以 使 用 单 引 号 或 双 引 号 : 


实例 


var carname="Bill Gates"; 
var carname='Bill Gates'; 


您 可 以 在 字符 串 中 使 用 引号 ， 只 要 不 匹配 包围 字符 串 的 引号 即 可 : 
实例 


var answer="Nice to meet you!"; 
var answer="He is called 'Bill'"; 
var answer='He is called "Bill"'; 


您 将 在 本 教程 的 高 级 部 分 学 到 更 多 关于 字符 串 的 知识 。 


JavaScript 数字 


JavaScript 只 有 一 种 数字 类 型 。 数 字 可 以 带 小 数 点 ， 也 可 以 不 带 : 


实例 


var x1=34.00; // 使 用 小 数 点 来 写 
var x2=34; // 不 使 用 小 数 点 来 写 


极 大 或 极 小 的 数字 可 以 通过 科学 (指数 ) 计数 法 来 书写 : 


实例 
var y-123e5; // 12300000 
var z-123e-5; // 0.00123 


您 将 在 本 教程 的 高 级 部 分 学 到 更 多 关于 数字 的 知识 。 


JavaScript 布尔 
布尔 (逻辑 ) 只 能 有 两 个 值 true 或 false. 


var x=true 
var y=false 


布尔 常用 在 条 件 测试 中 。 您 特 在 本 教程 稍 后 的 章节 中 学 到 更 多 关于 条 件 测 试 的 知 


Fo 


JavaScript 数组 
下 面 的 代码 创建 名 为 cars 的 数组 : 


var cars=new Array(); 
cars[0]="Audi"; 
cars[1]="BMW"; 
cars[2]="Volvo"; 


3% (condensed array): 


var cars=new Array("Audi", "BMW", "Volvo"); 


或 者 (literal array): 


实例 


var cars-["Audi", "BMW", 'Volvo"]; 


数组 下 标 是 基于 零 的 ， 所 以 第 一 个 项 目 是 [0]， 第 二 个 是 [人 ]， 以 此 类 推 。 
您 将 在 本 教程 稍 后 的 章节 中 学 到 更 多 关于 数组 的 知识 。 
JavaScript 对 象 


对 象 由 花 括 号 分 隔 。 在 括号 内 部 ， 对 象 的 属性 以 名 称 和 值 对 的 形式 (name : value) 
来 定义 。 属 性 由 到 号 分 隔 : 


var person={firstname:"Bill", lastname:"Gates", id:5566}; 


上 面 例子 中 的 对 象 (person) 有 三 个 属性 : firstname、lastname 以 及 id。 
空格 和 折 行 无 关 紧 要 。 声 明 可 横 跨 多 行 : 


var person={ 


firstname : "Bill", 
lastname : "Gates", 
id : 5566 
J; 
对 象 属性 有 两 种 寻 址 方式 : 
实例 


name-person.lastname; 
name-person["lastname"]; 


您 将 在 本 教程 稍 后 的 章节 中 学 到 更 多 关于 对 象 的 知识 。 


Undefined 和 Null 


Undefined 这 个 值 表示 变量 不 含有 值 。 
可 以 通过 将 变量 的 值 设 置 为 null 来 清空 变量 。 


实例 


cars-null; 
person=null; 


声明 变量 类 型 
当 您 声明 新 变量 时 ， 可 以 使 用 关键 词 "new" 来 声明 其 类 型 : 


var carname=new St ring; 


var X= new Number; 
var y= new Boolean; 
var cars= new Array; 


var person- new Object; 


JavaScript 变量 均 为 对 象 。 当 您 声明 一 个 变量 时 ， 就 创建 了 一 个 新 的 对 象 。 


课外 阅读 


JavaScript 高 级 教程 : 


JavaScript 对 象 


JavaScript 中 的 所 有 事物 都 是 对 象 : 字符 串 、 数 字 、 数 组 、 日 期 ， 等 等 。 
在 JavaScript 中 ， 对 象 是 拥有 属性 和 方法 的 数据 。 


属性 和 方法 
属性 是 与 对 象 相关 的 值 。 
方法 是 能 够 在 对 象 上 执行 的 动作 。 
举例 : 汽车 就 是 现实 生活 中 的 对 象 。 
汽车 的 属性 : 

car .name=Fiat 

car .model=500 

car .weight=850kg 


car .color=white 


汽车 的 方法 : 
car.start() 


car.drive() 


car.brake() 


汽车 的 属性 包括 名 称 、 型 号 、 重 量 、 颜 色 等 。 

所 有 汽车 都 有 这 些 属 性 ， 但 是 每 款 车 的 属性 都 不 尽 相 同 。 

汽车 的 方法 可 以 是 和 启动、 驾驶 、 刹 车 等 。 

所 有 汽车 都 拥有 这 些 方法 ， 但 是 它们 被 执行 的 时 间 都 不 尽 相同 。 


JavaScript 中 的 对 象 


在 JavaScript 中 ， 对 象 是 数据 (变量) ， 拥 有 属性 和 方法 。 
当 您 像 这 样 声 明 一 个 JavaScript 变量 时 : 


var txt = "Hello"; 


您 实际 上 已 经 创建 了 一 个 JavaScript 字符 串 对 象 。 字 符 串 对 象 拥 有 内 建 的 属性 
length。 对 于 上 面 的 字符 串 来 涪 ，length 的 值 是 5。 字 符 串 对 象 同 时 拥有 若干 个 内 
建 的 方法 。 


属性 : 


txt.length-5 


方法 : 


txt.indexOf() 
txt.replace() 


txt.search() 


提示 : 在 面向 对 象 的 语言 中 ， 属 性 和 方法 常 被 称 为 对 象 的 成 员 。 
在 本 教程 稍 后 的 章节 中 ， 您 特 学 到 有 关 字 符 串 对 象 的 更 多 属性 和 方法 。 


创建 JavaScript 对 象 
JavaScript 中 的 几乎 所 有 事务 都 是 对 象 : SHB. BS. Bea, A. wR, SF 


sJ o 


你 也 可 以 创建 自己 的 对 象 。 
本 例 创 建 名 为 "person" 的 对 象 ， 并 为 其 添加 了 四 个 属性 : 


实例 


person=new Object(); 
person. firstname="Bill"; 
person. lastname="Gates"; 
person.age=56; 
person.eyecolor="blue"; 


创建 新 JavaScript 对 象 有 很 多 不 同 的 方法 ， 并 且 您 还 可 以 向 已 存在 的 对 象 添加 属性 
和 方法 。 


您 将 在 本 教程 稍 后 的 章节 学 到 更 多 相关 的 内 容 。 


访问 对 象 的 属性 

访问 对 象 属性 的 语法 是 : 
_objectName_._propertyName_ 

本 例 使 用 String 对 象 的 length 属性 来 查找 字符 串 的 长 度 : 


var message="Hello World!"; 
var x=message.length; 


在 以 上 代码 执行 后 ，x 的 值 是 : 
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访问 对 象 的 方法 
您 可 以 通过 下 面 的 语法 调用 方法 : 
.objectName . methodName () 
这 个 例子 使 用 String st RAY toUpperCase() 方法 来 把 文本 转换 为 大 写 : 


var message="Hello world!"; 
var x-message.toUpperCase(); 


在 以 上 代码 执行 后 ，x 的 值 是 : 


HELLO WORLD! 


您 知道 吗 ? 


提示 : 在 面向 对 象 的 语言 中 ， 使 用 camel-case 标记 法 的 函数 是 很 常见 的 。 您 会 经 
常 看 到 someMethod() 这 样 的 函数 名 ， 而 不 是 some_method()。 


课外 书 


如 需 更 多 有 关 JavaScript 对 象 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 
容 : 


ECMAScript 面向 对 象 技术 

本 节 简 要 介绍 了 面向 对 象 技术 的 术语 、 面 向 对 象 语言 的 要 求 以 及 对 象 的 构成 。 
ECMAScript 对 象 应 用 

本 节 讲 解 了 如 何 声明 和 实例 化 对 象 ， 如 何 引 用 和 废除 对 象 ， 以 及 绑 定 的 概念 。 
ECMAScript 对 象 类 型 


本 节 介 绍 了 ECMAScript 的 三 种 类 型 : 本 地 对 象 、 内 置 对 象 和 宿主 对 象 ， 并 提供 了 
指向 相关 参考 手册 的 链接 。 


ECMAScript 对 象 作 用 域 

本 节 讲 解 了 ECMAScript FARAR this 关键 字 。 

ECMAScript 定义 类 或 对 象 

本 节 详 细 讲 解 了 创建 ECMAScript 对 象 或 类 的 各 种 方式 。 
ECMAScript 修改 对 象 

本 节 讲 解 了 如 何 通过 创建 新 方法 或 重 定义 已 有 方法 来 修改 对 象 。 


JavaScript WA 


PE SE Ht aa oh UR S e con Ft TOY HR 3A 
实例 


<!DOCTYPE html» 

«html» 

«head» 

«script» 

function myFunction() 
{ 

alert("Hello World!"); 


</script> 
</head> 


<body> 
«button onclick="myFunction( )"> 点 击 这 里 </button> 


</body> 
</html> 


JavaScript 函数 话 法 
函数 就 是 包 囊 在 花 括 号 中 的 代码 块 ， 前 面 使 用 了 关键 词 function : 


function functionname() 


{ 
这 里 是 要 执行 的 代码 
j 


SARARAN, ARUU TRIBU PU G3, 


JERR A EH BRA (比如 当 用 户 点 击 按钮 时 ) ， 并 且 可 由 
JavaScript 在 任何 位 置 进行 调用 。 


提示 : JavaScript 对 大 小 写 敏 感 。 关 键 词 function 必须 是 小 写 的 ， 并 且 必 须 以 与 函 
数 名称 相 同 的 大 小 写 来 调用 函数 。 


调用 带 参 数 的 函数 


在 调用 画 数 时 ， 您 可 以 向 其 传递 值 ， 这 些 值 被 称 为 参数 。 


这 些 参数 可 以 在 函数 中 使 用 。 
您 可 以 发 送 任意 多 的 参数 ， 由 逗号 (,) 分 隔 : 


myFunction( argumenti , argument2 ) 


当 您 声明 函数 时 ， 请 把 参数 作为 变量 来 声明 : 


function myFunction( var1 ，Vvar2 ) 


~ 


这 里 是 要 执行 的 代码 


WwW 


变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 的 给 定 的 
值 ， 以 此 类 推 。 


实例 


«button onclick="myFunction('Bill Gates','CE0')"> 点 击 这 里 </button> 


<script> 
function myFunction(name, job) 


alert("Welcome " + ‘name + ", the " + job ); 


} 


</script> 
B|ree——————————————X——À—Á— 9: e 
上 面 的 函数 会 当 按 钮 被 点 击 时 提示 "Welcome Bill Gates, the CEO". 
图 数 很 灵活 ， 您 可 以 使 用 不 同 的 参数 来 调用 该 函数 ， 这 样 就 会 给 出 不 同 的 消息 : 


实例 


«button onclick="myFunction('Harry Potter', 'Wizard')"> 点 击 这 里 </butt 
<button onclick="myFunction('Bob', 'Builder' ) "> 点 击 这 里 </button> 


SSS eee P 


根据 您 点 击 的 不 同 的 按钮 ， 上 面 的 例子 会 提示 "Welcome Harry Potter, the Wizard" 
BY "Welcome Bob, the Builder". 


i? AR f& BER X 





有 时 ， 我 们 会 希望 本 数 将 值 返回 调用 它 的 地 方 。 
通过 使 用 return 语句 就 可 以 实现 。 
在 使 用 return 语句 时 ， 画 数 会 停止 执行 ， 并 返回 指定 的 值 。 


语法 


function myFunction() 


var x-5; 
"return Xx; 


j 


上 面 的 函数 会 返回 值 5。 


注释 : 整个 JavaScript 并 不 会 停止 执行 ， 仅 仅 是 画 数 。JavaScript 将 继续 执行 代 
码 ， 从 调用 画 数 的 地 方 . 


E 25073 FS ARR ANN : 

var myVar=myFunction(); 
myVar Siac 5, tht ee "myFunction()" 所 返回 的 值 。 
即使 不 把 它 保存 为 变量 ， 您 也 可 以 使 用 返回 值 : 


document .getElementById("demo").innerHTML=myFunction(); 


"demo" 元 素 的 innerHTML 将 成 为 5， 也 就 是 函数 "myFunction()" 所 返回 的 值 。 
您 可 以 使 返回 值 基于 传递 到 函数 中 的 参数 : 


实例 
计算 两 个 数字 的 乘积 ， 并 返回 结果 : 


function myFunction(a,b) 


{ 


return a*b; 


} 


document .getElementById("demo") .innerHTML=myFunction(4, 3); 


"demo" 元 素 的 innerHTML 将 是 : 
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Trí fo BIB at ， 也 可 使 用 return 语句 。 返 回 值 是 可 选 的 : 


function myFunction(a,b) 
{ 
if (a>b) 

{ 

return; 


} 


x=a+b 


} 
如 果 a 大 于 b， 则 上 面 的 代码 将 退出 孙 数 ， 并 不 会 计算 a 和 b 的 总 和 。 


局 部 JavaScript = = 


在 JavaScript E BAAR SHAN em (使 用 var) 是 局 部 变量 ， 所 以 只 能 在 函数 内 部 
访问 它 。 (该 变量 的 作用 域 是 局 部 的 ) 。 


您 可 以 在 不 同 的 函数 中 使 用 名 称 相 同 的 局 部 变量 ， 因 为 只 有 声明 过 该 变量 的 函数 才 
能 识 别 出 该 变量 。 


只 要 函数 运行 完毕 ， 本 地 变量 就 会 被 删除 。 
全 局 JavaScript = = 
CRANE SERERE, Ma LOM aA AMR I E. 


JavaScript % 69 4# 


JavaScript 变量 的 生命 期 从 它们 被 声明 的 时 间 开 始 。 
局 部 变量 会 在 函数 运行 以 后 被 删除 。 
全 局 变量 会 在 页 面 关 闭 后 被 删除 。 





向 未 声明 的 JavaScript 变量 来 分 配 值 
如 果 您 把 值 赋 给 尚未 声明 的 变量 ， 该 变量 将 被 自动 作为 全 局 变量 声明 。 


这 条 语句 : 


carname="Volvo"; 
将 声明 一 个 全 局 变量 carame, MEEK d. 


课外 书 

如 需 更 多 有 关 JavaScript 函数 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 
ZB: 

ECMAScript 函数 概述 

Ad HRS, ECMAScript 如 何 声明 并 调用 函数 ， 以 及 函数 如 何 返 回 值 。 
ECMAScript arguments 对 象 


本 节 介 绍 了 此 对 象 的 基本 用 法 ， 然 后 讲解 了 如 何 使 用 length 属性 来 测定 函数 的 参数 
数目 ， 以 及 模拟 函数 重 载 。 


ECMAScript Function 对 象 (类 ) 
本 节 讲 解 了 如 何 使 用 Function 类 创建 画 数 ， 然 后 介绍 了 Function 对 象 的 属性 和 方 


法 。 
ECMAScript 闭 包 (closure) 


eS (closure) 的 概念 ， 并 分 别 为 您 展示 了 简单 和 稍 复杂 的 两 个 闭 包 实 
| 


JavaScript 运算 符 


运算 符 = 用 于 赋值 。 
运算 符 + 用 于 加 值 。 

运算 符 = 用 于 给 JavaScript 变量 赋值 。 
算术 运算 符 + 用 于 把 值 加 起 来 。 


在 以 上 语句 执行 后 ，x 的 值 是 7。 


JavaScript 算术 运算 符 


算术 运算 符 用 于 执行 变量 与 /或 值 之 间 的 算术 运算 。 
给 定 y=5， 下 面 的 表格 解释 了 这 些 算术 运算 符 : 


运算 符 描述 例子 
+ 加 X=y+2 
- 减 x=y-2 
* Fe x-y*2 
/ 除 x=y/2 
% 求 余数 (保留 整数 ) X=y%2 
十 十 An X=++y 
递减 X=--y 


JavaScript 赋值 运算 符 


赋值 运算 符 用 于 给 JavaScript 变量 赋值 。 
给 定 x-10 和 y=5， 下 面 的 表格 解释 了 赋值 运算 符 : 


运算 符 例子 等 价 于 结 来 


= x-y x-b5 
s x+=y X=X+y X=15 
-= X-=y X-X-y x-b5 
“= x*=y x=x*y x=50 
/= X/=y X=X/y X=2 
%= x%=y X=x%y x=0 


用 于 字符 串 的 + 运算 符 
。 运 算 符 用 于 把 文本 值 或 字符 串 变 量 加 起 来 连接 起 来 ) 。 
如 需 把 两 个 或 多 个 字符 串 变 量 连 接 起 来 ， 请 使 用 + 运算 符 。 


txti="What a very"; 
txt2-"nice day"; 
txt3-txti1-txt2; 


在 以 上 语句 执行 后 ， 变 量 txt3 包含 的 值 是 "What a verynice day". 
要 想 在 两 个 字符 串 之 间 增 加 空格 ， 需 要 把 空格 插 和 人 一 个 字符 串 之 中 : 


txti-"What a very "; 
txt2="nice day"; 
txt3-txt1-txt2; 


或 者 把 空格 插入 表达 陈 中 : 


txti-"What a very"; 
txt2-"nice day"; 
txt3=txt1+" "+txt2; 


在 以 上 语句 执行 后 ， 变 量 txt3 包含 的 值 是 : 
"What a very nice day" 


对 字符 串 和 数字 进行 加 法 运算 


请 看 这 些 例 子 : 


x=5+5; 
document .write(x); 


x SIEHE ME 
document .write(x); 


x=5+"5" 7 
document .write(x); 


Ma 5 5: 
document.write(x); 


TIY 


规则 是 : 

如 果 把 数字 与 字符 串 相 加 ， 结 果 将 成 为 字符 串 。 

课外 书 

如 需 更 多 有 关 JavaScript 运算 符 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 
T: 

ECMAScript 一 元 运算 符 


一 元 运算 符 只 有 一 个 参数 ， 即 要 操作 的 对 象 或 值 。 本 节 讲 解 ECMAScript 中 最 简单 
的 运算 符 - 一 元 运算 符 。 


ECMAScript 位 运算 符 


位 运算 符 是 在 数字 底层 进行 操作 的 。 本 节 深 入 讲解 了 有 关 整 数 的 知识 ， 并 介绍 了 
ECMAScript 的 各 种 位 运算 符 。 


ECMAScript Boolean 运算 符 


Boolean 运算 符 非常 重要 。 本 节 深 入 讲解 三 种 Boolean 运算 符 : NOT、AND 和 
OR。 


ECMAScript 乘 性 运算 符 

本 节 讲 解 ECMAScript 的 乘 性 运算 符 : 乘法 、 除 法 、 取 模 运 算 符 ， 以 及 它们 的 特殊 
行为 。 

ECMAScript 加 性 运算 符 

本 节 讲 解 ECMAScript 的 加 性 运算 符 : 加 法 、 减 法 运算 符 ， 以 及 它们 的 特殊 行为 。 
ECMAScript 关系 运算 符 


关系 运算 符 执行 的 是 比较 运算 。 本 节 讲 解 关 系 运 算 符 的 常规 比较 方式 ， 以 及 如 何 比 
较 字 符 串 与 数字 。 


ECMAScript 等 性 运算 符 


等 性 运算 符 用 于 判断 变量 是 否 相 等 。ECMAScript 提供 两 套 等 性 运算 符 : 等 号 和 非 
等 号 ， 以 及 全 等 号 和 非 全 等 号 。 


ECMAScript 条 件 运 算 符 

本 节 讲 解 ECMAScript 中 的 条 件 运 算 符 。 
ECMAScript 赋值 运算 符 

本 节 讲 解 ECMAScript 中 的 赋值 运算 符 。 
ECMAScript 3& E iz SERERE 

AK $ tf ECMAScript PAGES iz BH. 


JavaScript 比较 和 逻辑 运算 符 
比较 和 逮 辑 运算 符 用 于 测试 true 或 false, 


比较 运算 符 


比较 运算 符 在 逻辑 语句 中 使 用 ， 以 测定 变量 或 值 是 否 相等 。 
给 定 x=5， 下 面 的 表格 解释 了 比较 运算 符 : 


运算 符 描述 例子 

es 等 于 x==8 为 false 

=== 全 等 ( 值 和 类 型 ) XI 
I= 不 等 于 x!=8 为 true 

> ae x>8 为 false 

< 小 于 X<8 为 true 

>= 大 于 或 等 于 x>=8 为 false 

<= 小 于 或 等 于 x<=8 为 true 

如 何 使 用 


可 以 在 条 件 语句 中 使 用 比较 运算 符 对 值 进行 比较 ， 然 后 根据 结果 来 采取 行动 : 
if (age<18) document.write("Too young"); 
您 将 在 本 教程 的 下 一 节 中 学 习 更 多 有 关 条 件 语句 的 知识 。 


辑 运算 符 
逻辑 运算 符 用 于 测定 变量 或 值 之 间 的 逻辑 。 
给 定 x=6 以 及 y=3, RRB T PHBA : 


Hi 


运算 符 描述 例子 
&& and (x< 10 && y > 1) X true 
&124;&124; Or (x==5 &124;&124; y==5) 为 false 
! not !(x==y) 为 true 


条 件 运 算 符 
JavaScript 还 包含 了 基于 某 些 条 件 对 变量 进行 赋值 的 条 件 运算 符 。 
语法 
variablename-(condition)?value1:value2 
例子 
greeting=(visitor=="PRES")?"Dear President ":"Dear "; 


AR A Æ visitor 中 的 值 是 "PRES"， 则 向 变量 greeting 赋值 "Dear President", A 
则 赋值 "Dear"。 


JavaScript If...Else 语句 


条 件 语 句 用 于 基于 不 同 的 条 件 来 执行 不 同 的 动作 。 


条 件 语句 

通常 在 写 代 码 时 ， 您 总 是 需要 为 不 同 的 决定 来 执行 不 同 的 动作 。 您 可 以 在 代码 中 使 
用 条 件 语 句 来 完成 该 任务 。 

在 JavaScript 中 ， 我 们 可 使 用 以 下 条 件 语句 : 

jf 语句 - 只 有 当 指 定 条 件 为 true 时 ， 使 用 该 语句 来 执行 代码 

if...else 语句 - 当 条 件 为 true 时 执行 代码 ， 当 条 件 为 false 时 执行 其 他 代码 


if...else if....else 语句 - 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 
Switch 语句 - 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 


If 语句 
只 有 当 指 定 条 件 为 true 时 ， 该 语句 才 会 执行 代码 。 
语法 
if (条 件 ) 
RR true 时 执行 的 代码 


注意 : 请 使 用 小 写 的 if。 使 用 大 写字 母 (IF) 会 生成 JavaScript 错误 |! 
实例 
当时 间 小 于 20:00 时 ， 生 成 一 个 “Good day” ià : 


if (time<20) 


{ 
x="Good day"; 
} 


x 的 结果 是 : 


<script>var d=new Date(); 
var time-d.getHours(); 
if (time<20) 

{ 


document.write("Good day"); 
}</script> Good day 


请 注意 ， 在 这 个 语法 中 ， 没 有 ..else..。 您 已 经 告诉 浏览 器 只 有 在 指定 条 件 为 true 
时 才 执 行 代 码 。 


If...else 语句 


请 使 用 if....else 语句 在 条 件 为 true 时 执行 代码 ， 在 条 件 为 false 时 执行 其 他 代码 。 
语法 


if (条 件 ) 
{ 
当 条 件 为 true 时 执行 的 代码 
j 


else 


{ 
当 条 件 不 为 true 时 执行 的 代码 
} 


实例 


当时 间 小 于 20:00 时 ， 将 得 到 问候 "Good day"， 否 则 将 得 到 问候 "Good 
evening". 


if (time<20) 
{ 
x="Good day"; 
} 
else 
x="Good evening"; 


} 


x 的 结果 是 


<script>var d=new Date(); 
var time-d.getHours(); 
if (time<20) 

{ 


document.write("Good day"); 


} 


else 


{ 


document.write("Good evening"); 
}</script> Good day 


If...else if...else 语句 


使 用 if....else if...else 语句 来 选择 多 个 代码 块 之 一 来 执行 。 
语法 


if (条 件 1) 

ee ee toe 
sige if (条 件 2) 

Bat 2 true WARS 


else 


t 
当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 
j 


实例 


如 果 时 间 小 于 10:00， 则 将 发 送 问候 "Good morning"， 否 则 如 果 时 间 小 于 20:00, 
则 发 送 问候 "Good day"， 否 则 发 送 问候 "Good evening" : 


if (time<10) 
xz"Good morning"; 
} 

else if (time<20) 


x="Good day"; 
} 


else 


x="Good evening"; 


} 


x 的 结果 是 : 


<script>var d=new Date(); 
var time=d.getHours(); 
if (time<10) 
{ 


document.write("Good morning"); 


j 
else if (time<20) 
{ 


document.write("Good day"); 


} 


else 


{ 


document.write("Good evening"); 
}</script> Good day 


更 多 实例 


随机 的 链接 


本 例 将 输出 W3School 或 微软 公司 的 链接 。 通 过 使 用 随机 数 ， 每 个 链接 被 输出 的 机 
会 为 50%。 


课外 书 


如 需 更 多 有 关 JavaScript if 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 


T 
ECMAScript if 语句 


if 语句 是 ECMAScript 中 最 常用 的 语句 之 一 。 本 节 为 您 详细 讲解 了 如 何 使 用 if 语 
句 。 


JavaScript Switch 语句 


switch 语句 用 于 基于 不 同 的 条 件 来 执行 不 同 的 动作 。 


JavaScript Switch 语句 
请 使 用 switch 语句 来 选择 要 执行 的 多 个 代码 块 之 一 。 
语法 


switch(n) 


case 1: 
执行 代码 块 1 
break; 
case 2: 
执行 代码 块 2 
break; 
default: 
n 与 case 1 和 case 2 不 同时 执行 的 代码 
} 


工作 原理 : 首先 设置 表达 式 n (通常 是 一 个 变量 ) 。 随 后 表达 式 的 值 会 与 结构 中 的 
t case 的 值 做 比较 。 如 果 存 在 匹配 ， 则 与 该 case 关联 的 代码 块 会 被 执行 。 请 使 
用 break 来 阻止 代码 自动 地 向 下 一 个 case 运行 。 


实例 


显示 今日 的 周 名 称 。 请 注意 Sunday=0, Monday=1, Tuesday=2, 等 等 : 


var day=new Date().getDay(); 
switch (day) 


case 0: 
x-"Today 
break; 

case 1: 


x-"Today i 


break; 
case 2: 


x-'"Today i 


break; 
case 3: 


x="Today i 


break; 
case 4: 


x-"Today i 


break; 
case 5: 


x="Today i 


break; 
case 6: 


x-'"Today i 


break; 


j 


x 的 结果 : 


ts 


Sunday"; 


Monday"; 


Tuesday"; 


Wednesday"; 


Thursday"; 


Friday"; 


Saturday"; 


<script>var d=new Date().getDay(); 

switch (d) 

{ 

case 0: 
x-"Today it's Sunday"; 
break; 

case 1: 
x="Today it's Monday"; 
break; 

case 2: 
x-"Today it's Tuesday"; 
break; 

case 3: 
x="Today it's Wednesday"; 
break; 

case 4: 
x-"Today it's Thursday"; 
break; 

case 5: 
x-"Today it's Friday"; 
break; 

case 6: 
x-"Today it's Saturday"; 
break; 


j 


document.write(x);«/script» Today it's Tuesday 


default 关键 词 
请 使 用 default 关键 词 来 规定 匹配 不 存在 时 做 的 事情 : 


实例 
如 果 今 天 不 是 周 六 或 周 日 ， 则 会 输出 默认 的 消息 : 


var day=new Date().getDay(); 
switch (day) 


case 6: 
x="Today it's Saturday"; 
break; 
case 0: 
x-"Today it's Sunday"; 
break; 
"default: 
x="Looking forward to the Weekend"; ` 


} 


x 的 结果 : 


<script>var d=new Date().getDay(); 
switch (d) 
{ 


case 6: 
xz"Today it's Saturday"; 
break; 
case 0: 
x="Today it's Sunday"; 
break; 
default: 
x-"Looking forward to the Weekend"; 
} 


document .write(x);</script> Looking forward to the Weekend 


课外 书 

如 需 更 多 有 关 JavaScript Switch 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相 
关内 容 : 

ECMAScript switch 语句 


switch 语句 是 if 语句 的 兄弟 语句 。 本 节 介 绍 了 switch 语句 的 用 法 ， 以 及 与 Java 中 
的 switch 语句 的 不 同 。 


JavaScript For 循环 

循环 可 以 将 代码 块 执行 指定 的 次 数 。 

JavaScript 循环 

如 果 您 希望 一 吉 又 一 带 地 运行 相同 的 代码 ， 并 且 每 次 的 值 都 不 同 ， 那 么 使 用 循环 是 


很 方便 的 。 
我 们 可 以 这 样 输出 数组 的 值 : 


document ,write(cars[0] + "<br>"); 
document ,write(cars[1] + "<br>"); 
document ,write(cars[2] + "<br>"); 
document .write(cars[3] + "<br>"); 
document ,write(cars[4] + "<br>"); 
document ,write(cars[5] + "<br>"); 


不 过 通常 我 们 这 样 写 : 


for (var i=0;1i<cars.length;i++) 
{ 


document .write(cars[i] + "<br>"); 


} 


不 同类 型 的 循环 

JavaScript 支持 不 同类 型 的 循环 : 
for - 循环 代码 块 一 定 的 次 数 
for/in - 循环 通 历 对 象 的 属性 


while - 当 指 定 的 条 件 为 true 时 循环 指定 的 代码 块 
do/while - 同样 当 指定 的 条 件 为 true 时 循环 指定 的 代码 块 


For 循环 


for 循环 是 您 在 希望 创建 循环 时 常会 用 到 的 工具 。 
下 面 是 for 循环 的 语法 : 


for (语句 1; 语句 2; 语句 3) 
i 
} 
语句 1 在 循环 (代码 块 ) 开始 前 执行 
语句 2 定义 运行 循环 (代码 块 ) 的 条 件 
语句 3 在 循环 (代码 块 ) 已 被 执行 之 后 执行 


实例 


for (var i=0; i<5; i++) 
x=x + "The number is " + i + "<br>"; 
} 
从 上 面 的 例子 中 ， 您 可 以 看 到 : 
Statement 1 在 循环 开始 之 前 设置 变量 (var i=0)。 
Statement 2 定义 循环 运行 的 条 件 (i 必须 小 于 5) 。 
Statement 3 在 每 次 代码 块 已 被 执行 后 增加 一 个 值 (i++)。 


语句 1 


通常 我 们 会 使 用 语句 1 初始 化 循环 中 所 用 的 变量 (var i=0)。 
语句 1 是 可 选 的， 也 就 是 说 不 使 用 语句 1 也 可 以 。 
您 可 以 在 语句 1 中 初始 化 任意 (或 者 多 个 ) 值 : 


实例 : 


for (‘var i=0,len=cars.length;` i«len; i++) 
{ 


document .write(cars[i] + "<br>"); 


} 
同时 您 还 可 以 省 略语 句 1 (比如 在 循环 开始 前 已 经 设置 了 值 时 ) 


实例 : 


var i=2,len=cars.length; 
for (; i<len; i++) 
{ 


document .write(cars[i] + "<br>"); 


} 


语句 2 


通常 语句 2 用 于 评估 初始 变量 的 条 件 。 
语句 2 同样 是 可 选 的 。 
如 果 语 句 2 返回 true， 则 循环 再 次 开始 ， 如 果 返 回 false， 则 循环 将 结束 。 


提示 : 如 果 您 省 略 了 语句 2， 那 么 必须 在 循环 内 提供 break。 否 则 循环 就 无 法 停 下 
来 。 这 样 有 可 能 今 浏览 器 崩溃 。 请 在 本 教程 稍 后 的 章节 阅读 有 关 break HAA. 


语句 3 
通常 语句 3 会 增加 初始 变量 的 值 。 
语句 3 也 是 可 选 的 。 


语句 3 有 多 种 用 法 。 增 量 可 以 是 负数 (i--)， 或 者 更 大 (i=i+15)。 
语句 3 也 可 以 省 略 (比如 当 循 环 内 部 有 相应 的 代码 时 ) 


实例 : 


var i=0, len=cars.length; 

for (; i<len; ) 

{ 

document.write(cars[i] + "<br>"); 
i++; 


} 


For/in 循环 


JavaScript for/in ;& GE 77; xt S& BJ [ES E : 


实例 


var person={fname: "John", 1name:"Doe",age:25); 
for (x ‘in person) 


{ 


txt=txt + person[x]; 


} 


您 将 在 有 关 JavaScript 对 象 的 章节 学 到 更 多 有 关 for / in 循环 的 知识 。 
While 循环 
我 们 将 在 下 一 章 为 您 讲解 while 循环 和 do/while 循环 。 
课外 书 
如 需 更 多 有 关 JavaScript for 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 
容 : 
ECMAScript 迭代 语句 
迭代 语句 又 叫 循 环 语句 。 本 节 为 您 ECMAScript 提供 的 四 种 迭代 语句 。 


JavaScript While 循环 

只 要 指定 条 件 为 true， 循 环 就 可 以 一 直 执 行 代码 。 
while 循环 
While 循环 会 在 指定 条 件 为 真 时 循环 执行 代码 块 。 
语法 


while (条 件 ) 


{ 
需要 执行 的 代码 
j 


实例 
本 例 中 的 循环 将 继续 运行 ， 只 要 变量 i 小 于 5: 
while (i<5) 


x=x + "The number is " + i + "<br>"; 
i++; 


} 


提示 : 如 果 您 忘记 增加 条 件 中 所 用 变量 的 值 ， 该 循环 永远 不 会 结束 。 该 可 能 导致 济 
V, S8 BH Eo 


do/while 循环 


do/while 循环 是 while 循环 的 变 体 。 该 循环 会 执行 一 次 代码 块 ， 在 检查 条 件 是 否 为 
真 之 前 ， 然 后 如 果 条 件 为 真 的 话 ， 就 会 重复 这 个 循环 。 


语法 


do 
{ 
需要 执行 的 代码 


j 
while (Aft); 


实例 


下 面 的 例子 使 用 do/while 循环 。 该 循环 至 少 会 执行 一 次 ， 即 使 条 件 是 false, Ki 
代码 块 会 在 条 件 被 测试 前 执行 : 


do 


x=x + "The number is " + i + "<br>"; 
i++; 


} 
while (i<5); 
别 忘记 增加 条 件 中 所 用 变量 的 值 ， 否 则 循环 永远 不 会 结束 |! 


比较 for 和 while 


如 果 您 已 经 阅读 了 前 面 那 一 章 关 于 for 循环 的 内 容 ， 您 会 发 现 while 循环 与 for 循环 
很 像 。 


for 语句 实例 
本 例 中 的 循环 使 用 for 循环 来 显示 cars 数组 中 的 所 有 值 : 


cars-["BMW", "Volvo", "Saab", 'Ford"]; 
var i-0; 
for (;cars[i];) 


document.write(cars[i] + "<br>"); 
i++; 
} 

while 语句 实例 


本 例 中 的 循环 使 用 使 用 while 循环 来 显示 cars 数组 中 的 所 有 值 : 


cars=["BMW", "Volvo", "Saab","Ford"]; 
var i-0; 

while (cars[i]) 

{ 

document .write(cars[i] + "«br»"); 
i++; 


} 


课外 书 

如 需 更 多 有 关 JavaScript while 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 
内 容 : 

ECMAScript 迭代 语句 

迭代 语句 又 叫 循 环 语句 。 本 节 为 您 介绍 ECMAScript 提供 的 四 种 迭代 语句 。 


JavaScript Break 和 Continue 语句 
break 语句 用 于 跳出 循环 。 

continue 用 于 跳 过 循环 中 的 一 个 迭代 。 

Break 语句 


我 们 已 经 在 本 教程 稍 早 的 章节 中 见 到 过 break 语句 。 它 用 于 跳出 switch() 语句 。 
break 语句 可 用 于 跳出 循环 。 
break 语句 跳出 循环 后 ， 会 继续 执行 该 循环 之 后 的 代码 (如果 有 的 话 ) 


实例 


for (i=0;i<10;i++) 


由 于 这 个 if 语句 只 有 一 行 代码 ， 所 以 可 以 省 略 花 括号 : 
for (i=0;i<10;i++) 
im 
if (i==3) break;. 


x=x + "The number is " + i + "<br>"; 


} 
Continue 语句 
continue 语句 中 断 循 环 中 的 和 迭代， 如 果 出 现 了 指定 的 条 件 ， 然 后 继续 循环 中 的 下 一 


个 迭代 。 
该 例子 跳 过 了 值 3 : 


实例 


for (i=0;i<=10; i++) 


if (i--3) continue; 
X-zx + "The number is " + i + "<br>"; 


j 


JavaScript 标签 
正如 您 在 switch 语句 那 一 章 中 看 到 的 ， 可 以 对 JavaScript 语句 进行 标记 。 
如 需 标记 JavaScript 语句 ， 请 在 语句 之 前 加 上 冒号 : 


label: 
语句 


break 和 continue 语句 仅仅 是 能 够 跳出 代码 块 的 语句 。 
语法 


break labelname; 


continue labelname; 


continue 语句 〈 带 有 或 不 带 标签 引用 ) 只 能 用 在 循环 中 。 
break 语句 (不 带 标签 引用 ) ， 只 能 用 在 循环 或 switch 中 。 
通过 标签 引用 ，break 语句 可 用 于 跳出 任何 JavaScript 代码 块 : 


实例 


cars-["BMW", "Volvo", "Saab", 'Ford"]; 
list: 

{ 

document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
break list; 

document ,write(cars[3] + "<br>"); 
document ,write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>"); 


} 


课外 书 

如 需 更 多 有 关 JavaScript Break 和 Continue 语句 的 知识 ， 请 阅读 JavaScript 高 级 
教程 中 的 相关 内 容 : 

ECMAScript break 和 continue 语句 

本 节 讲 解 了 break 语句 和 continue 语句 的 不 同 之 处 ， 以 及 如 何 与 有 标签 语句 一 起 使 


o 


JavaScript 错误 - Throw、Try 和 Catch 


try 语句 测试 代码 块 的 错误 。 
catch 语句 义理 错误 。 
throw 语句 创建 自 定义 错误 。 


错误 一 定 会 发 生 

当 JavaScript 引擎 执行 JavaScript 代码 时 ， 会 发 生 各 种 错误 : 
可 能 是 语法 错误 ， 通 常 是 程序 员 造 成 的 编码 错误 或 错别字 。 
可 能 是 拼写 错误 或 语言 中 缺少 的 功能 (可 能 由 于 浏览 器 差异 ) 。 
可 能 是 由 于 来 自 服务 器 或 用 户 的 错误 输出 而 导致 的 错误 。 

当然 ， 也 可 能 是 由 于 许多 其 他 不 可 预知 的 因素 。 


JavaScript 抛 出 错误 


当 错 误 发 生 时 ， 当 事情 出 问题 时 ，JavaScript 引擎 通常 会 停止 ， 并 生成 一 个 错误 消 
E 


描述 这 种 情况 的 技术 术语 是 : JavaScript 将 抛 出 一 个 错误 。 
JavaScript 测试 和 捕捉 
try 语句 允许 我 们 定义 在 执行 时 进行 错误 测试 的 代码 块 。 


catch 语句 允许 我 们 定义 当 try 代码 块 发 生 错误 时 ， 所 执行 的 代码 块 。 
JavaScript 语句 try 和 catch 是 成 对 出 现 的 。 


语法 


try 

{ r 

// 在 这 里 运行 代码 
catch(err) 


{ 
// 在 这 里 处 理 错误 
} 


实例 
在 下 面 的 例子 中 ， 我 们 故意 在 try 块 的 代码 中 写 了 一 个 错字 。 
catch 块 会 捕捉 到 try 块 中 的 错误 ， 并 执行 代码 来 处 理 它 。 


<!DOCTYPE html» 
<html> 

<head> 

<script> 

var txt="") 
function message() 


{ 
try 


adddlert("Welcome guest!"); 

catch(err) 
txt="There was an error on this page.\n\n"; 
txt+="Error description: " + err.message + "\n\n"; 


txt+="Click OK to continue.\n\n"; 
alert(txt); 


b 
} 
</script> 
</head> 
<body> 
«input type="button" value="View message" onclick="message()"> 
</body> 


</html> 


Throw 语句 


throw 语句 允许 我 们 创建 自 定 义 错 误 。 
正确 的 技术 术语 是 : 创建 或 抛 出 异常 (exception) 。 


如 果 把 throw 与 try 和 catch 一 起 使 用 ， 那 么 您 能 够 控制 程序 流 ， 并 生成 自 定义 的 


错误 消息 。 
语法 
throw _exception_ 
异常 可 以 是 JavaScript 字符 串 、 数 字 、 逻 辑 值 或 对 象 。 


实例 


本 例 检 测 输入 变量 的 值 。 如 果 值 是 错误 的 ， 会 抛 出 一 个 异常 〈 错 误 ) 。catch 会 捕 
捉 到 这 个 错误 ， 并 显示 一 段 自 定义 的 错误 消息 : 


<script> 

function myFunction() 

{ 

try 
{ 
var x-document.getElementById("demo").value; 
if (x=="") "throw "empty"; 
if(isNaN(x)) “throw "not a number"; 
if (x>10) "throw "too high"'; 
if(x«5) "throw "too low"'; 
} 

catch(err) 


var y-document.getElementById("mess"); 
y.innerHTML="Error: " + err + "."; 
} 

} 


</script> 

<hi>My First JavaScript</h1> 

<p>Please input a number between 5 and 10:</p> 

<input id="demo" type="text"> 

<button type="button" onclick="myFunction()">Test Input</button> 
<p id="mess"></p> 


请 注意 ， 如 果 getElementByld 画 数 出 错 ， 上 面 的 例子 也 会 抛 出 一 个 错误 。 


课外 阅读 


JavaScript 高 级 教程 JavaScript 历史 JavaScript 实现 


JavaScript 表单 验证 


JavaScript 可 用 来 在 数据 被 送 往 服务 器 前 对 HTML 表单 中 的 这 些 输 入 数据 进行 验 
证 。 


JavaScript 表单 验证 


JavaScript 可 用 来 在 数据 被 送 往 服务 器 前 对 HTML 表单 中 的 这 些 输 入 数据 进行 验 
证 。 
被 JavaScript 验证 的 这 些 典型 的 表单 数据 有 : 

e 用 户 是 否 已 填写 表单 中 的 必 填 项 目 ? 

e 用户 输入 的 邮件 地 址 是 否 合法 ? 


(Area 已 输入 合法 的 日 期 ? 
e 用 户 是 否 在 数据 域 (numeric field) 中 输入 了 文本 ? 


WE (或 必 选 ) 项 目 


下 面 的 函数 用 来 检查 用 户 是 否 已 填写 表单 中 的 必 填 (或 必 选 ) 项 目 。 假 如 必 填 或 必 
选项 为 空 ， 那 么 警告 框 会 弹出 ， 并 且 函 数 的 返回 值 为 false， 否 则 画 数 的 返回 值 则 为 
true (意味 着 数据 没有 问题 ) 


function validate required(field,alerttxt) 
{ 

with (field) 

{ 


if (value==null| | value=="") 
{alert(alerttxt);return false} 

else {return true} 

} 

} 


下 面 是 连同 HTML 表单 的 代码 : 


<html> 
<head> 
<script type="text/javascript"> 
"function validate required(field,alerttxt) 


{ 
with (field) 


if (value==null| |value=="") 
{alert(alerttxt);return false} 
else {return true} 


t 
} 


function validate form(thisform) 
with (thisform) 


if (validate_required(email, "Email must be filled out!")--false) 
{email.focus();return false} 
} 
V 
«/script» 
«/head» 


«body» 

«form action-"submitpage.htm" onsubmit-"return validate form(this)' 
Email: «input type="text" name-"email" size="30"> 

<input type-"submit" value="Submit"> 

</form> 

</body> 


</html> 
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E-mail 验证 


下 面 的 函数 检查 输入 的 数据 是 否 符合 电子 邮件 地 址 的 基本 语法 。 


意思 就 是 说 ， 输 入 的 数据 必须 包含 @ 符号 和 点 号 (.)。 同 时 ，@ 不 可 以 是 邮件 地 址 
的 首 字符 ， 并 且 @ 之 后 需 有 至 少 一 个 点 号 : 


function validate email(field,alerttxt) 


{ 

with (field) 

{ 

apos-value.indexOf("Q") 

dotpos=value.lastIndexof(".") 

if (apos<1i| |dotpos-apos<2) 
{alert(alerttxt);return false} 

else {return true} 

} 

} 


下 面 是 连同 HTML 表单 的 完整 代码 : 


‘| 


<html> 

<head> 

<script type="text/javascript"> 
"function validate email(field,alerttxt) 


{ 

with (field) 

{ 

apos-value.indexOf("Q") 

dotpos-value.lastIndexOf(".") 

if (apos«1i||dotpos-apos«2) 
{alert(alerttxt);return false} 

else {return true} 

} 

} 


function validate_form(thisform) 
with (thisform) 


if (validate email(email,"Not a valid e-mail address!")--false) 
{email.focus();return false} 

} 

i 

«/script» 

</head> 


<body> 

«form action="Submitpage.htm"onsubmit="return validate form(this); 
Email: «input type="text" name-"email" size="30"> 

<input type="submit" value="Submit"> 

</form> 

</body> 


</html> 








JavaScript 保留 关键 字 


在 JavaScript 中 ， 一 些 标识 符 是 保留 关键 字 ， 不 能 用 作 变 量 名 或 函数 名 。 


JavaScript 标准 


所 有 的 现代 浏览 器 完全 支持 ECMAScript 3 (ES3，JavaScript 的 第 三 版 ， 从 1999 
年 开始 ) 。 


ECMAScript 4 (ES4) 未 通过 
ECMAScript 5 (ES5，2009 年 发 布 ) ， ee 最 新 的 官方 版 本 。 
随 着 时 间 的 推移 ， 我 们 开始 看 到 ， 所 有 的 现代 浏览 器 已 经 完全 支持 ES5。 


JavaScript 保留 关键 字 


Javascript 的 保留 关键 字 不 可 以 用 作 变 量 、 标 签 或 者 函数 名 。 有 些 保留 关键 字 是 作 
为 Javascript 以 后 扩展 使 用 。 


abstract arguments boolean break byte 
Case catch char class* const 
continue debugger default delete do 
double else enum* eval export* 
extends* false final finally float 
for function goto if implements 
import* in instanceof int interface 
let long native new null 
package private protected public return 
short static super* switch synchronized 
this throw throws transient true 
try typeof var void volatile 
while with yield 


e 标记 的 关键 字 是 ECMAScript5 中 新 添加 的 。 


JavaScript 对 象 、 属 性 和 方法 


您 也 应该 避免 使 用 JavaScript 内 置 的 对 象 、 属 性 和 方法 的 名 称 作为 Javascript 的 变 
量 或 函数 名 : 


Array Date eval function hasOwnProperty 
Infinity isFinite isNaN isPrototypeOf length 
Math NaN name Number Object 
prototype String toString undefined valueOf 


Java RE KS 


JavaScript 经 常 与 Java 一 起 使 用 。 您 点 该 避免 使 用 一 些 Java 对 象 和 属性 作为 
JavaScript 标识 符 : 


getClass java JavaArray 


javaClass JavaObject JavaPackage 


Windows 保留 关键 字 


JavaScript 可 以 在 HTML 外 部 使 用 。 它 可 在 许多 其 他 点 用 程序 中 作为 编程 语言 使 


o 


在 HTML 中 ， 您 必须 (为 了 可 移植 性 ， 您 也 应 该 这 么 做 ) 避免 使 用 HTML 和 
Windows 对 象 和 属性 的 名 称 作为 Javascript 的 变量 及 函数 名 : 


alert 


assign 


clearTimeout 


constructor 
document 
encodeURI 
focus 
innerWidth 
mimeTypes 
hidden 
open 
packages 


parselnt 


propertylsEnum 


scroll 
setTimeout 


textarea 


all 


blur 


clientInformation 


crypto 


element 


encodeURIComponent 


form 

layer 
navigate 
history 
opener 
pageXOffset 
password 
radio 

secure 
status 


top 


HTML 事件 句柄 


除 此 之 外 ， 您 还 应 该 避免 使 用 HTML 事件 句柄 的 名 称 作为 Javascript 的 变量 及 函数 


o 


实例 : 
onblur onclick 
onkeydown onkeypress 
onload onmouseup 
非 标准 JavaScript 


anchor 
button 
close 
decodeURI 
elements 
escape 
forms 
layers 
navigator 
image 
option 
pageY Offset 
pkcs11 
reset 
select 
submit 


unescape 


onerror 
onkeyup 


onmousedown 


anchors 
checkbox 
closed 
decodeURICompol 
embed 
event 
frame 
link 
frames 
images 
outerHeight 
parent 
plugin 
screenX 
self 
taint 


untaint 


onfocus 
onmouseover 


onsubmit 


除了 保留 关键 字 ， 在 JavaScript 实现 中 也 有 一 些 非 标准 的 关键 字 。 


一 个 实例 是 const 关键 字 ， 用 于 定义 变量 。 一 些 JavaScript 引擎 把 const 当 作 var 
的 同义词 。 另 一 些 引擎 则 把 const 当 作 只 读 变量 的 定义 。 


Const JavaScript 的 扩展 。JavaScript 引擎 支持 它 用 在 Firefox 和 Chrome 中 。 
但 是 它 并 不 是 JavaScript 标准 ES3 或 ES5 的 组 成 部 分 。 建 议 : 不 要 使 用 它 。 


JavaScript JSON 


JSON 是 用 于 存储 和 传输 数据 的 格式 。 
JSON 通常 用 于 服务 端 向 网 页 传递 数据 。 


什么 是 JSON? 


JSON 英文 全 称 JavaScript Object Notation 
JSON 是 一 种 轻 量 级 的 数据 交换 格式 。 
JSON 是 独立 的 语言 * 

JSON 易于 理解 。 


9 JSON 使 用 JavaScript 语法 ， 但 是 JSON 格式 公信 是 一 个 文本 。 
文本 可 以 被 任何 编程 语言 读 取 及 作为 数据 格式 传递 。 


JSON 实例 


以 下 JSON 语法 定义 了 employees 对 象 : 3 条 员工 记录 (对 象 ) 的 数组 : 
JSON Example 


{"employees": [ 
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"}, 
{"firstName":"Peter", "LastName": "Jones"} 


]j 


JSON 格式 化 后 为 JavaScript 对 象 


JSON 格式 在 语法 上 与 创建 JavaScript 对 象 代码 是 相同 的 。 


由 于 它们 很 相似 ， 所 以 JavaScript 程序 可 以 很 容易 的 将 JSON 数据 转换 为 
JavaScript 对 象 。 


JSON 语法 规则 


。 数据 为 键 / 值 对 。 
e BUS EH 6 2) Di. 


。 大 括号 保存 对 象 
e 方 括号 保存 数组 


JSON 数据 - 一 个 名 称 对 应 一 个 值 


JSON 数据 格式 为 键 / 值 对 ， 就 像 JavaScript 对 象 属性 。 
键 / 值 对 包括 字段 名 称 (在 双 引 号 中 ) ， 后 面 一 个 冒号 ， 然 后 是 值 : 


"firstName":"John" 


JSON 对 象 


JSON 对 象 保 存在 大 括号 内 。 
就 像 在 JavaScript 中 , 对 象 可 以 保存 多 个 键 / 值 对 : 


{"firstName":"John", "lastName":"Doe"} 


JSON 数组 


JSON 数组 保存 在 中 括号 内 。 
就 像 在 JavaScript 中 , 数组 可 以 包含 对 象 : 


"employees": [ 
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"}, 
{"firstName":"Peter", "LastName": "Jones"} 


在 以 上 实例 中 ， 对 象 "employees'" 是 一 个 数组 。 包 含 了 三 个 对 象 。 
每 个 为 个 对 象 为 员工 的 记录 ( 姓 和 名 ) 。 


JSON 字符 串 转换 为 JavaScript 对 象 


通常 我 们 从 服务 器 中 读 取 JSON 数据 ， 并 在 网 页 中 显示 数据 。 
简单 起 见 ， 我 们 网 页 中 直接 设置 JSON 字符 串 (你 还 可 以 阅读 我 们 的 JSON 教程 ): 
首先 ， 创 建 JavaScript 字符 串 ， 字 符 传 为 JSON 格式 的 数据 : 


var text = '{ "employees" : [' + 

'{ "firstName":"John" , "lastName":"Doe" },' + 

'{ "firstName": "Anna" , "lastName":"Smith" },' + 
'{ "firstName":"Peter" , "lastName":"Jones" } ]}'; 


然后 ， 使 用 JavaScript SERŽ JSON. parse() 将 字符 串 转 换 为 JavaScript 对 象 : 


var obj = JSON.parse(text); 
最 后 ， 在 你 的 页 面 中 使 用 新 的 JavaScript 对 象 : 


例 


将 


<p id="demo"></p> 


<script> 

document .getElementById("demo").innerHTML = 
obj.employees[1].firstName + " " + obj.employees[1].lastName; 
</script> 


更 多 JSON 信息 ， 你 可 以 阅读 我 们 的 JSON 教程 。 


javascript:void(0) 含义 
我 们 经 常会 使 用 到 javascript:void(0) 这 样 的 代码 ， 那 么 在 JavaScript 中 
javascript:void(0) 代表 的 是 什么 意思 呢 ? 


javascript:void(0) 中 最 关键 的 是 void 关键 字 ， void 是 JavaScript 中 非常 重要 的 关 
键 字 ， 该 操作 符 指 定 要 计算 一 个 表达 式 但 是 不 返回 值 。 


语法 格式 如 下 : 
<head> 
<script type="text/javascript"> 
alia 


void func() 
javascript:void func() 


或 者 

void(func()) 
javascript:void(func()) 
fem 


«/script» 
«/head» 


下 面 的 代码 创建 了 一 个 超级 链接 ， 当 用 户 点 击 以 后 不 会 发 生 任 何事 。 
实例 
«a href="javascript:void(0)"> 单 击 此 处 什么 也 不 会 发 生 </a> 


当 用 户 链接 时 ，void(0) 计算 为 0， 但 Javascript 上 没有 任何 效果 。 
以 下 实例 中 ， 在 用 户 点 击 链接 后 显示 警告 信息 : 


实例 


<head> 

<script type="text/javascript"> 

ea 

//--> 

</script> 

</head> 

<body> 

«a href="javascript:void(alert('Warning!!!'))">R#!</a> 
</body> 


以 下 实例 中 参数 a 将 返回 undefined : 


例 


将 


<head> 
<script type="text/javascript"> 
qe 
function getValue(){ 
var a,b,c; 


a = void (b=5,c=7 ); 
document.write('a = '+a+''b='+b+'c='+c); 
} 
//--> 
</script> 
</head> 


href="#" 5 hrefz"javascript:void(0)" BS[X | 


# 包含 了 一 个 位 置信 息 ， 默 认 的 锚 是 雁 op 也 就 是 网 页 的 上 端 。 

而 javascript:void(0), 仅仅 表示 一 个 死 链接 。 

在 页 面 很 长 的 时 候 会 使 用 # 来 定位 页 面 的 具体 位 置 ， 格 式 为 : # + id. 
如 果 你 要 定义 一 个 死 链接 请 使 用 javascript:void(0) 。 


例 


将 


«a href="javascript:void(0);"> 点 我 没有 反应 的 !</a> 
«a href="#pos"> 点 我 定位 到 指定 位 置 !</a> 
<br><br><br> «p Id="pos"> 尾 部 定位 点 </p> 


JavaScript 高 级 


JavaScript 对 象 


JavaScript 中 的 所 有 事物 都 是 对 象 : FRR. Mia, Bea, PST. 
此 外 ，JavaScript 允许 自 定义 对 象 。 


JavaScript 对 象 


JavaScript 提供 多 个 内 建 对 象 ， 比 如 String, Date, Array 等 等 。 
对 象 只 是 带 有 属性 和 方法 的 特殊 数据 类 型 。 


访问 对 象 的 属性 
属性 是 与 对 象 相关 的 值 。 
访问 对 象 属性 的 语法 是 : 


_objectName_._propertyName_ 


这 个 例子 使 用 了 String 对 象 的 length 属性 来 获得 字符 串 的 长 度 : 


var message="Hello World!"; 
var x=message. length’; 


在 以 上 代码 执行 后 ，x 的 值 将 是 : 
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访问 对 象 的 方法 
方法 是 能 够 在 对 象 上 执行 的 动作 。 
您 可 以 通过 以 下 语法 来 调用 方法 : 


.objectName . methodName () 


这 个 例子 使 用 了 String 对 象 的 toUpperCase() 方法 来 将 文本 转换 为 大 写 : 


var message="Hello world!"; 
var x=message. toUpperCase()' ; 


在 以 上 代码 执行 后 ，x 的 值 将 是 : 


HELLO WORLD! 


创建 JavaScript 对 象 


通过 JavaScript， 您 能 够 定义 并 创建 自己 的 对 象 。 
创建 新 对 象 有 两 种 不 同 的 方法 : 


1. 定义 并 创建 对 象 的 实例 
2. 使 用 函数 来 定义 对 象 ， 然 后 创建 新 的 对 象 实例 


创建 直接 的 实例 
这 个 例子 创建 了 对 象 的 一 个 新 实例 ， 并 向 其 添加 了 四 个 属性 : 
实例 


person=new Object(); 
person. firstname="Bill"; 
person. lastname="Gates"; 
person.age-56; 
person.eyecolor="blue"; 


替代 语法 (使 用 对 象 literals) 
实例 


person={firstname:"John",1lastname:"Doe",age:50,eyecolor:"blue"}; 


使 用 对 象 构 造 器 


本 例 使 用 画 数 来 构造 对 象 : 


实例 


function person(firstname, lastname, age, eyecolor ) 
this. firstname=firstname; 

this. lastname=lastname; 

this .age=age; 

this.eyecolor=eyecolor; 


} 


创建 JavaScript 对 象 实例 
一 旦 您 有 了 对 象 构造 器 ， 就 可 以 创建 新 的 对 象 实例 ， 就 像 这 样 : 


var myFather=new person("Bill","Gates",56," blue"); 
var myMother=new person("Steve","Jobs",48, "green"); 


把 属性 添加 到 JavaScript 对 象 


您 可 以 通过 为 对 象 赋值 ， 向 已 有 对 象 添 加 新 属性 : 


假设 personObj 已 存在 - 您 可 以 为 其 添加 这 些 新 属性 : firstname, lastname, age 
以 及 eyecolor : 


person. firstname="Bill"; 
person. lastname="Gates"; 
person.age=56; 

person.eyecolor="blue"; 


x=person. firstname; 


在 以 上 代码 执行 后 ，x 的 值 将 是 : 


Bill 


把 方法 添加 到 JavaScript 对 象 


方法 只 不 过 是 附加 在 对 象 上 的 函数 。 
在 构造 器 函数 内 部 定义 对 象 的 方法 : 


function person(firstname, lastname, age, eyecolor ) 
1 

this.firstname-firstname; 
this.lastname-lastname; 

this.age-age; 

this.eyecolor=eyecolor; 


this .changeName=changeName; 
function changeName(name ) 


this.lastname=name; 
} 
} 


changeName() ES name 的 值 赋 给 person 的 lastname 属性 。 
现在 您 可 以 试 一 下 : 


myMother.changeName( "Ballmer"); 


JavaScript 类 


JavaScript 是 面向 对 象 的 语言 ， 但 JavaScript 不 使 用 类 。 


在 JavaScript 中 ， 不 会 创建 类 ， 也 不 会 通过 类 来 创建 对 象 【 就 像 在 其 他 面向 对 象 的 
语言 中 那样 ) 。 


JavaScript 基于 prototype， 而 不 是 基于 类 的 。 
JavaScript for...in 循环 
JavaScript for...in 34 3] 1& £138 At RATE. 
语法 

for (对 象 中 的 变量 ) 


{ 
要 执行 的 代码 
j 


注释 : for...in 循环 中 的 代码 块 将 针对 每 个 属性 执行 一 次 。 


实例 


循环 通 历 对 象 的 属性 : 
var person-(fname:"Bill",lname:"Gates",age:56)]; 
for (x in person) 


txt=txt + person[x]; 


j 


课外 书 

如 需 更 多 有 关 JavaScript 对 象 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 
T: 

ECMAScript 面向 对 象 技术 

本 节 简 要 介绍 了 面向 对 象 技 术 的 术语 、 面 向 对 象 语言 的 要 求 以 及 对 象 的 构成 。 
ECMAScript 对 象 应 用 

本 节 讲 解 了 如 何 声明 和 实例 化 对 象 ， 如 何 引 用 和 废除 对 象 ， 以 及 线 定 的 概念 。 
ECMAScript 对 象 类 型 


本 节 介 绍 了 ECMAScript 的 三 种 类 型 : 本 地 对 象 、 内 置 对 象 和 宿主 对 象 ， 并 提供 了 
指向 相关 参考 手册 的 链接 。 


ECMAScript 对 象 作 用 域 

本 节 讲 解 了 ECMAScript FARLAR this Kee. 

ECMAScript 定义 类 或 对 象 

本 节 详 细 讲 解 了 创建 ECMAScript 对 象 或 类 的 各 种 方式 。 
ECMAScript 修改 对 象 

本 节 讲 解 了 如 何 通过 创建 新 方法 或 重 定义 已 有 方法 来 修改 对 象 。 


JavaScript Number 对 象 


JavaScript 只 有 一 种 数字 类 型 。 
可 以 使 用 也 可 以 不 使 用 小 数 点 来 书写 数字 。 


JavaScript 数字 
JavaScript 数字 可 以 使 用 也 可 以 不 使 用 小 数 点 来 书写 : 
实例 


var pi=3.14; // 使 用 小 数 点 
var x-34; // 不 使 用 小 数 点 


极 大 或 极 小 的 数字 可 通过 科学 GEBO 计数 法 来 写 : 
实例 


var y-1236e5; // 12300000 
var z-123e-5; // 0.00123 


所 有 JavaScript 数字 均 为 64 位 

JavaScript 不 是 类 型 语言 。 与 许多 其 他 编程 语言 不 同 ，JavaScript 不 定义 不 同类 型 
的 数字 ， 比 如 整数 、 短 、 长 、 浮 点 等 等 。 

JavaScript 中 的 所 有 数字 都 存储 为 根 为 10 的 64 位 (8 比特 ) ， 浮 点 数 。 


精度 


整数 (不 使 用 小 数 点 或 指数 计数 法 ) 最 多 为 15 位 。 
小 数 的 最 大 位 数 是 17， 但 是 浮 点 运算 并 不 总 是 100% 准确 : 


实例 


var x=0.2+0.1; 


八进制 和 十 六 进 制 


如 果 前 级 为 0， 则 JavaScript 会 把 数值 常量 解释 为 八进制 数 ， 如 果 前 级 为 0 和 
"x"， 则 解释 为 十 六 进 制 数 。 


实例 


var y-0377; 
var z-OxFF; 


提示 : 绝 不 要 在 数字 前 面 写 需 ， 除 非 您 需要 进行 八进制 转换 。 
数字 属性 和 方法 
属性 : 


e MAX VALUE 

e MIN VALUE 

e NEGATIVE INFINITIVE 
e POSITIVE INFINITIVE 
e NaN 

e prototype 

e constructor 


方法 : 


e toExponential() 
e toFixed() 

e toPrecision() 

e toString() 

e valueOf() 


完整 的 Number 对 象 参 考 手 册 


如 需 可 用 于 Number 对 象 的 所 有 属性 和 方法 的 完整 参考 ， 请 访问 我 们 的 Number 对 
象 参考 手册 。 


该 参考 手册 包含 每 个 属性 和 方法 的 描述 和 实例 。 


JavaScript 字符 串 (String) 对 象 


String 对 象 用 于 人 处理 已 有 的 字符 块 。 


JavaScript String (FFE) 对 象 实例 


计算 字符 串 的 长 度 
如 何 使 用 长 度 属性 来 计算 字符 串 的 长 度 。 


«html» 
«body» 


«script type="text/javascript"> 


var txt="Hello World!" 
document .write(txt.length) 


</script> 
</body> 
</html> 
为 字符 串 添加 样式 
如 何 为 字符 串 添 加 样式 。 


«html» 
«body» 


«script type="text/javascript"> 
var txt-"Hello World!" 


document.write("«p»Big: " + txt.big() + "</p>") 
document.write("«p»Small: " + txt.small() + "</p>") 


document.write("«p»Bold: " + txt.bold() + "«/p»") 


document.write("«p»Italic: " + txt.italics() + "</p>") 
document.write("«p»Blink: " + txt.blink() + " (does not work in IE. 
document .write("<p>Fixed: " + txt.fixed() + "</p>") 

document .write("<p>Strike: " + txt.strike() + "</p>") 

document .write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>") 
document .write("<p>Fontsize: " + txt.fontsize(16) + "</p>") 
document .write("<p>Lowercase: " + txt.toLowerCase() + "</p>") 
document .write("<p>Uppercase: " + txt.toUpperCase() + "</p>") 
document .write("<p>Subscript: " + txt.sub() + "</p>") 

document .write("<p>Superscript: " + txt.sup() + "</p>") 

document .write("<p>Link: " + txt.link("http://www.w3school.com.cn"' 
</script> 

</body> 

</html> 





indexOf() 方法 
如 何 使 用 indexOf() 来 定位 字符 串 中 某 一 个 指定 的 字符 首次 出 现 的 位 置 。 


<html> 
<body> 


<script type="text/javascript"> 

var str="Hello world!" 

document .write(str.indexOf("Hello") + "<br />") 
document .write(str.indexOf("World") + "<br />") 
document .write(str.indexOf ("world") ) 


</script> 


</body> 
</html> 


match() 方法 
如 何 使 用 match() 来 查找 字符 串 中 特定 的 字符 ， 并 且 如 果 找 到 的 话 ， 则 返回 这 个 字 
f 


«script type="text/javascript"> 

var str="Hello world!" 
document.write(str.match("world") + "«br /»") 
document.write(str.match("World") + "«br /»") 
document.write(str.match("worlld") + "«br /»") 
document.write(str.match("world!")) 

«/script» 


«/body» 
«/html» 


如 何 蔡 换 字符 串 中 的 字符 - replace() 
如 何 使 用 replace() 方法 在 字符 串 中 用 某 些 字符 替换 另 一 些 字符 。 


«html» 
«body» 


«script type="text/javascript"> 


var str="Visit Microsoft!" 
document.write(str.replace(/Microsoft/,"W3School")) 


«/script» 
</body> 
</html> 


完整 的 String 对 象 参考 手册 


请 查看 我 们 的 JavaScript String 对 象 参 考 手 册 ， 其 中 提供 了 可 以 与 字符 串 对 象 一 同 
使 用 的 所 有 的 属性 和 方法 。 


这 个 手册 包含 的 关于 每 个 属性 和 方法 的 用 法 的 详细 描述 和 实例 。 
字符 串 对 象 
字符 串 对 象 用 于 处 理 已 有 的 字符 块 。 


例子 : 
下 面 的 例子 使 用 字符 串 对 象 的 长 度 属性 来 计算 字符 串 的 长 度 。 


var txt="Hello world!" 
document.write(txt. length') 


上 面 的 代码 输出 为 : 


12 


下 面 的 例子 使 用 字符 串 对 象 的 tbUpperCase() 方 法 将 字符 串 转 换 为 大 罕 : 


Var txt="Hello world!" 
document .write(txt. toUpperCase()') 


上 面 的 代码 输出 为 : 


HELLO WORLD! 


相 天 页 面 

JavaScript 高 级 教程 : ECMAScript 类 型 转换 
JavaScript 高 级 教程 : ECMAScript 引用 类 型 
JavaScript 参考 手册 : String xt 


JavaScript Date (日 期 ) 对 象 


日 期 对 象 用 于 处 理 日 期 和 时 间 。 


JavaScript Date (日 期 ) 对 象 实例 


返回 当日 的 日 期 和 时 间 
如 何 使 用 Date() 方法 获得 当日 的 日 期 。 


<html> 
<body> 


<script type="text/javascript"> 
document .write(Date() ) 
</script> 
</body> 
</html> 

getTime() 


getTime() 返回 从 1970 年 1 月 1 日 至 今 的 毫秒 数 。 
<html> 
<body> 
<script type="text/javascript"> 
var d=new Date(); 
document .write(" 从 1970/01/01 至 今 已 过 去 " + d.getTime() + " BP"); 
</script> 


</body> 
</html> 


二 Sa 
setFullYear() 
如 何 使 用 setFullYear() 设置 具体 的 日 期 。 


<html> 
<body> 


<script type="text/javascript"> 
var d = new Date() 
d.setFullYear(1992,10, 3) 
document .write(d) 
</script> 
</body> 
</html> 

toUTCString() 


如 何 使 用 toUTCString() 将 当日 的 日 期 (根据 UTC) 转换 为 字符 串 。 


<html> 
<body> 


<script type="text/javascript"> 


var d = new Date() 
document.write (d.toUTCString()) 


</script> 
</body> 
</html> 


getDay() 
如 何 使 用 getDay() 和 数组 来 显示 星期 ， 而 不 仅仅 是 数字 。 


«html» 
«body» 


«script type="text/javascript"> 


var d=new Date() 

var weekday=new Array(7) 
weekday[0]-" £&BH" 
weekday[1]=" 星 期 一 " 
weekday[2]=" 星 期 二 " 
weekday[3]=" 星 期 三 " 
weekday[4]=" 星 期 四 " 
weekday[5]=" 星 期 五 " 
weekday[6]=" 星 期 六 " 


document .write(" 今 天 是 " + weekday[d.getDay()]) 
</script> 
</body> 
</html> 
显示 一 个 钟表 


如 何在 网 页 上 显示 一 个 钟表 。 


«html» 

«head» 

«script type="text/javascript"> 
function startTime() 

{ 

var today=new Date() 

var h=today.getHours() 

var m=today.getMinutes( ) 

var s=today.getSeconds() 

// add a zero in front of numbers<10 
m-checkTime (m) 

s-checkTime(s) 

document .getElementById('txt').innerHTML=h+":"+m+":"+s 
t-setTimeout('startTime()',500) 

} 


function checkTime(i) 
{ 
if (i<10) 

{i="0" + i} 


return i 


} 

</script> 

</head> 

«body onload="startTime()"> 
<div id="txt"></div> 
</body> 

</html> 


完整 的 Date 对 象 参考 手册 


我 们 提供 JavaScript Date 对 象 参考 手册 ， 其 中 包括 所 有 可 用 于 日 期 对 象 的 属性 和 
方法 。 


该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 
定义 日 期 


Date 对 象 用 于 义理 日 期 和 时 间 。 


可 以 通过 new 关键 词 来 定义 Date 对 象 。 以 下 代码 定义 了 名 为 myDate 的 Date 对 
象 : 


var myDate= new Date() 


注释 : Date 对 象 自动 使 用 当前 的 日 期 和 时 间作 为 其 初始 值 。 


操作 日 期 
通过 使 用 针对 日 期 对 象 的 方法 ， 我 们 可 以 很 容易 地 对 日 期 进行 操作 。 
在 下 面 的 例子 中 ， 我 们 为 日 期 对 象 设 置 了 一 个 特定 的 日 期 (2008 年 8 月 9 日 ): 


var myDate=new Date() 
myDate. setFullYear (2008,7,9) 


注意 : 表示 月 份 的 参数 介 于 0 到 11 之 间 。 也 就 是 说 ， 如 果 希 望 把 月 设置 为 8 月 ， 
则 参数 应 该 是 7。 
在 下 面 的 例子 中 ， 我 们 将 日 期 对 象 设置 为 5 天 后 的 日 期 : 


var myDate-new Date() 
myDate. setDate (myDate.getDate()-5) 


注意 : 如 果 增 加 天 数 会 改变 月 份 或 者 年 份 ， 那 么 日 期 对 象 会 自动 完成 这 种 转换 。 


比较 日 期 


日 期 对 象 也 可 用 于 比较 两 个 日 期 。 
下 面 的 代码 将 当前 日 期 与 2008 年 8 月 9 日 做 了 上 比较: 


var myDate-new Date(); 
myDate.setFullYear(2008,8,9); 


var today - new Date(); 

if (myDate>today ) 

alert("Today is before 9th August 2008"); 
else 


{ 
alert("Today is after 9th August 2008"); 


JavaScript Array (数组 ) 对 象 


数组 对 象 的 作用 是 : 使 用 单独 的 变量 名 来 存储 一 系列 的 值 。 


实例 


创建 数组 
创建 数组 ， 为 其 赋值 ， 然 后 输出 这 些 值 。 


«html» 
«body» 


«script type="text/javascript"> 
var mycars - new Array() 


mycars[0] = "Saab" 
mycars[1] = "Volvo" 
mycars[2] = "BMW" 


for (i=0;i<mycars.length;i++) 
document.write(mycars[i] + "«br /»") 
«/script» 
</body> 
</html> 

For...In 声明 


使 用 for...in 声明 来 循环 输出 数组 中 的 元 素 。 


<html> 


<body> 

<script type="text/javascript"> 
var x 

var mycars = new Array() 
mycars[0] = "Saab" 

mycars[1] = "Volvo" 

mycars[2] = "BMW" 


for (x in mycars) 


{ 


document .write(mycars[x] + "<br />") 


} 
</script> 
</body> 
</html> 


合并 两 个 数组 - concat() 
如 何 使 用 concat() 方法 来 合并 两 个 数组 。 


<html> 
<body> 


<script type="text/javascript"> 


var arr = new Array(3) 


arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 


var arr2 - new Array(3) 


arr2[0] = "James" 
arr2[1] = "Adrew" 
arr2[2] = "Martin" 


document .write(arr.concat(arr2)) 
«/script» 
«/body» 
«/html» 

用 数组 的 元 素 组 成 字符 串 - join() 

如 何 使 用 join) 方法 将 数组 的 所 有 元 素 组 成 一 个 字符 串 。 


«html» 
«body» 


«script type="text/javascript"> 


var arr - new Array(3); 


arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 


document.write(arr.join()); 
document.write("«br /»"); 
document.write(arr.join(".")); 
</script> 
</body> 
</html> 

文字 数组 - sort() 

如 何 使 用 sort() 方法 从 字面 上 对 数组 进行 排序 。 


«html» 
«body» 


«script type="text/javascript"> 


var arr - new Array(6) 


arr[0] = "George" 
arr[1] = "John" 

arr[2] = "Thomas" 
arr[3] = "James" 
arr[4] = "Adrew" 
arr[5] = "Martin" 


document.write(arr + "<br />") 
document .write(arr.sort()) 


</script> 

</body> 

</html> 

数字 数组 - sort() 

如 何 使 用 sort() 方法 从 数值 上 对 数组 进行 排序 。 


«html» 
«body» 


«script type="text/javascript"> 


function sortNumber(a, b) 


t 

return a - b 

j 

var arr - new Array(6) 
arr[0] - "10" 

aralt = E55 

arr[2] = "40" 

arr[3] = "25" 

arr[4] = "1000" 

arr[5] = "1" 


document.write(arr + "<br />") 
document .write(arr.sort(sortNumber ) ) 


</script> 


</body> 
</html> 


完整 的 Array 对 象 参考 手册 
我 们 提供 JavaScript Array 对 象 参 考 手 册 ， 其 中 包括 所 有 可 用 于 数组 对 象 的 属性 和 


法 。 


该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 
定义 数组 


数组 对 象 用 来 在 单独 的 变量 名 中 存储 一 系列 的 值 。 


ee 
组 对 家 : 


var myArray=new Array() 


有 两 种 向 数组 赋值 的 方法 (你 可 以 添加 任意 多 的 值 ， 就 像 你 可 以 定义 你 需要 的 任意 
多 的 变量 一 样 ) 。 


1: 


var mycars= new Array()^ 
mycars[0]="Saab" 
mycars[1]="Volvo" 
mycars[2]-" BMW" 


也 可 以 使 用 一 个 整数 自 变 量 来 控制 数组 的 容量 : 


var mycars= new Array(3) 
mycars[0]="Saab" 
mycars[1]="Volvo" 
mycars[2]-" BMW" 


var mycars-' new Array("Saab", "Volvo", 'BMw")^ 


注意 : 如 果 你 需要 在 数组 内 指定 数值 或 者 逻辑 值 ， 那 么 变量 类 型 应 该 是 数值 变量 或 
者 布尔 变量 ， 而 不 是 字符 变量 。 


访问 数组 
通过 指定 数组 名 以 及 索引 号 码 ， 你 可 以 访问 某 个 特定 的 元 素 。 
下 面 是 代码 行 : 


document .write(mycars[0]) 


下 面 是 输出 : 


Saab 


修改 已 有 数组 中 的 值 
如 需 修改 已 有 数组 中 的 值 ， 只 要 向 指定 下 标号 添加 一 个 新 值 即 可 : 


mycars[0]="Opel"; 


现在 ， 以 上 代码 : 


document.write(mycars[0]); 


将 输出 : 


Opel 


JavaScript Boolean (3244) 对 象 


Boolean (逻辑 ) 对 象 用 于 将 非 区 辑 值 转换 为 逻辑 值 (true XG false) 。 


辑 对 象 是 true 还 是 false。 


R> 
|o 
[sé 
Ya 


«script type="text/javascript"> 

var bi-new Boolean( 0) 

var b2-new Boolean(1) 

var b3-new Boolean("") 

var b4-new Boolean(null) 

var b5-new Boolean(NaN) 

var b6-new Boolean("false") 

document.write("O 是 逻辑 的 "+ b1 +"<br />") 
document.write("1 是 逻辑 的 "+ b2 +"<br /»") 
document .write(" 空 字符 串 是 逻辑 的 "+ b3 + "<br />") 
document .write("null 是 逻辑 的 "+ b4+ "<br />") 
document .write("NaN 是 逻辑 的 "+ b5 +"<br />") 
document .write(" 字 符 串 'false' 是 逻辑 的 "+ b6 +"<br />") 
</script> 


</body> 
</html> 


完整 的 Boolean 对 象 参考 手册 


我 们 提供 JavaScript Boolean 对 象 参考 手册 ， 其 中 包括 所 有 可 用 于 逮 辑 对 象 的 属性 
和 方法 。 


该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 
Boolean 对 象 


您 可 以 将 Boolean 对 象 理 解 为 一 个 产生 逻辑 值 的 对 象 包装 
Boolean (逻辑 ) 对 象 用 于 将 非 逻 辑 值 转换 为 逻辑 值 (true RÆ false) 。 


创建 Boolean 对 象 


使 用 关键 词 new 来 定义 Boolean 对 象 。 下 面 的 代码 定义 了 一 个 名 为 myBoolean 的 
逻辑 对 象 : 


var myBoolean-new Boolean() 


注释 : 如 果 逻 辑 对 象 无 初始 值 或 者 其 值 为 0、-0、null、"、false、undefined 或 者 
NaN， 那 么 对 象 的 值 为 false, Gal, Haz true 〈 即 使 当 自 变量 为 字符 串 "false" 
at) ! 


下 面 的 所 有 的 代码 行 均 会 创建 初始 值 为 false BY Boolean 对 象 。 


var myBoolean=new Boolean(); 

var myBoolean=new Boolean(0); 

var myBoolean=new Boolean(null); 
var myBoolean-new Boolean(""); 
var myBoolean-new Boolean(false); 
var myBoolean-new Boolean(NaN); 


下 面 的 所 有 的 代码 行 均 会 创 初始 值 为 true 的 Boolean 对 象 : 


var myBoolean=new Boolean(1); 

var myBoolean=new Boolean(true); 

var myBoolean-new Boolean("true"); 

var myBoolean=new Boolean("false"); 

var myBoolean=new Boolean("Bill Gates"); 


相关 页 面 


JavaScript 高 级 教程 : ECMAScript 引用 类 型 
JavaScript 参考 手册 : Boolean 对 象 


JavaScript Math (算数 ) 对 象 


Math 算数) 对象 的 作用 是 : 执行 常见 的 算数 任务 。 


实例 


round() 


如 何 使 用 round(). 


«html» 
«body» 


«script type="text/javascript"> 


document 
document 
document 
document 
document 


«/script» 
</body> 
</html> 


random() 


.write(Math. 
.write(Math. 
.write(Math. 
.write(Math. 
.write(Math. 


round(0.60) + "«br /»") 
round(0.50) + "«br /»") 
round(0.49) + "«br /»") 
round(-4.40) + "«br /»") 
round( -4.60)) 


如 何 使 用 random() 来 返回 0 到 1 之 间 的 随机 数 。 


«html» 
«body» 


«script type="text/javascript"> 


document .write(Math.random()) 


«/script» 


«/body» 
«/html» 


max() 


如 何 使 用 max() 来 返回 两 个 给 定 的 数 中 的 较 大 的 数 。 (在 ECMASCript v3 之 前 ， 
该 方法 只 有 两 个 参数 。) 


<html> 
<body> 


<script type="text/javascript"> 
document .write(Math.max(5,7) + "<br />") 
document .write(Math.max(-3,5) + "<br />") 
document .write(Math.max(-3,-5) + "<br />") 
document .write(Math.max(7.25,7.30) ) 
</script> 
</body> 
</html> 

min() 


如 何 使 用 min() 来 返回 两 个 给 定 的 数 中 的 较 小 的 数 。 (在 ECMASCript v3 之 前 ， 该 
方法 只 有 两 个 参数 。) 


<html> 
<body> 


<script type="text/javascript"> 

document .write(Math.min(5,7) + "<br />") 
document .write(Math.min(-3,5) + "<br />") 
document .write(Math.min(-3,-5) + "<br />") 
document .write(Math.min(7.25, 7.30) ) 


</script> 


</body> 
</html> 


完整 的 Math 对 象 参考 手册 


我 们 提供 JavaScript Math 对 象 的 参考 手册 ， 其 中 包括 所 有 可 用 于 算术 对 象 的 属性 
和 方法 。 


该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 


Math 对 象 


Math (算数 ) 对 象 的 作用 是 : 执行 普通 的 算数 任务 。 
Math 对 象 提 供 多 种 算数 值 类 型 和 函数 。 无 需 在 使 用 这 个 对 象 之 前 对 它 进 行 定义 。 


算数 值 


JavaScript 提供 8 种 可 被 Math 对 象 访问 的 算数 值 : 


常数 

圆周 率 

2 的 平方 根 

1/2 的 平方 根 

2 的 自然 对 数 

10 的 自然 对 数 

以 2 为 底 的 e 的 对 数 
以 10 为 底 的 e 的 对 数 


这 是 在 Javascript 中 使 用 这 些 值 的 方法 : (与 上 面 的 算数 值 一 一 对 应 ) 


e Math.E 

e Math.PI 
Math.SQRT2 
Math.SQRT1 2 
Math.LN2 
Math.LN10 
Math.LOG2E 
Math.LOG10E 


算数 方法 
除了 可 被 Math 对 象 访问 的 算数 值 以 外 ， 还 有 几 个 函数 方法 ) 可 以 使 用 。 


BA (AK) 实例 : 
下 面 的 例子 使 用 了 Math 对 象 的 round 方法 对 一 个 数 进行 四 舍 五 入 。 


document .write( Math.round(4.7) ) 


上 面 的 代码 输出 为 : 
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下 面 的 例子 使 用 了 Math 对 象 的 random() 方法 来 返回 一 个 介 于 0 和 1 之 间 的 随机 
A: 


document .write( Math.random()') 


上 面 的 代码 输出 为 : 


0.9370844220218102 


下 面 的 例子 使 用 了 Math 对 象 的 floor() 方法 和 random() 来 返回 一 个 介 于 0 和 10 之 
间 的 随机 数 : 


document .write( Math.floor(Math.random()*11)~) 
上 面 的 代码 输出 为 : 


3 


JavaScript RegExp 对 象 


RegExp 对 象 用 于 规定 在 文本 中 检索 的 内 容 。 


什么 是 RegExp ? 


RegExp 是 正则 表达 式 的 缩写 。 


arene 可 以 使 用 一 种 模式 来 描述 要 检索 的 内 容 。RegExp 就 是 这 种 
RIV 


简单 的 模式 可 以 是 一 个 单独 的 字符 。 

更 复 条 的 模式 包括 了 更 多 的 字符 ， 并 可 用 于 解析 、 格 式 检查 、 蔡 换 等 等 。 
您 可 以 规定 字符 串 中 的 检索 位 置 ， 以 及 要 检索 的 字符 类 型 ， 等 等 。 
定义 RegExp 


RegExp 对 象 用 于 存储 检索 模式 。 
通过 new 关键 词 来 定义 RegExp 对 象 。 以 下 代码 定义 了 名 为 patt1 的 RegExp 对 
象 ， 其 模式 是 "e" : 


var patt1=new RegExp("e"); 
当 您 使 用 该 RegExp 对 象 在 一 个 字符 串 中 检索 时 ， 将 寻找 的 是 字符 "e", 


RegExp 对 象 的 方法 


RegExp 对 象 有 3 个 方法 test(), exec() 以 及 compile()。 
test() 
test() 方法 检索 字符 串 中 的 指定 值 。 返 回 值 是 true & false. 


例子 : 


var patt1=new RegExp("e"); 


document .write(patt1.test("The best things in life are free")); 


由 于 该 字符 串 中 存在 字母 "e"， 以 上 代码 的 输出 将 是 


true 


TIY 


exec() 


exec() 方法 检索 字符 串 中 的 指定 值 。 返 回 值 是 被 找到 的 值 。 如 果 没 有 发 现 匹 配 ， 则 
返回 null。 


例子 1 : 


var patt1=new RegExp("e"); 


document .write(patt1.exec("The best things in life are free")); 


由 于 该 字符 串 中 存在 字母 "e"， 以 上 代码 的 输出 将 是 : 


e 


TIY 


例子 2 : 


您 可 以 向 RegExp 对 象 添 加 第 二 个 参数 ， 以 设 定 检索 。 例 如 ， 如 果 需 要 找到 所 有 某 
个 字符 的 所 有 存在 ， 则 可 以 使 用 "g" 参数 ("global")。 


如 需 关 于 如 何 修改 搜索 模式 的 完整 信息 ， 请 访问 我 们 的 RegExp 对 象 参 考 手册 。 
在 使 用 "g" 参数 时 ，exec() 的 工作 原理 如 下 : 
e 找到 第 一 个 "e"， 并 存储 其 位 置 


e 如 果 再 次 运行 exec()， 则 从 存储 的 位 置 开 始 检索 ， 并 找到 下 一 个 "e"， 并 存储 
其 位 置 


var patti-new RegExp( vour ugu) 
do 


result=patt1.exec("The best things in life are free"); 
document.write(result); 


while (result!-null) 


由 于 这 个 字符 串 中 6 个 "e" 字母 ， 代 码 的 输出 将 是 : 


eeeeeenull 
TIY 


compile() 


compile() 方法 用 于 改变 RegExp. 
compile() 既 可 以 改变 检索 模式 ， 也 可 以 添加 或 删除 第 二 个 参数 。 


例子 : 


var patt1=new RegExp("e"); 
document ,write(patt1.test("The best things in life are free")); 
patt1.compile("d"); 


document .write(patti.test("The best things in life are free")); 


由 于 字符 串 中 存在 "e"， 而 没有 "d"， 以 上 代码 的 输出 是 : 


truefalse 
TIY 


完整 的 RegExp 对 象 参考 手册 


如 需 可 与 RegExp 对 象 一 同 使 用 所 有 属性 和 方法 的 完整 信息 ， 请 访问 我 们 的 
RegExp 对 象 参 考 手册 。 


这 个 参考 手册 包含 了 对 RegExp 对 象 中 每 个 属性 和 方法 的 详细 描述 ， 以 及 使 用 的 例 
子 


o 


JavaScript BOM 


JavaScript Window - 浏览 器 对 象 模型 


浏览 器 对 象 模型 (BOM) 使 JavaScript 有 能 力 与 浏览 器 “对 话 ”。 


浏览 器 对 象 模 型 (BOM) 


浏览 器 对 象 模型 (Browser Object Model) 尚 无 正式 标准 。 


由 于 现代 浏览 器 已 经 ULE) 实现 了 JavaScript 交互 性 方面 的 相同 方法 和 属性 ， 
此 常 被 认为 是 BOM 的 方法 和 属性 。 


Window 对 象 


所 有 浏览 器 都 支持 window 对 象 。 它 表示 浏览 器 窗口 。 

所 有 JavaScript 全 局 对 象 、 画 数 以 及 变量 均 自动 成 为 window 对 象 的 成 员 。 
全 局 变量 是 window 对 象 的 属性 。 

TDR window 对 象 的 方法 。 

甚至 HTML DOM 的 document 也 是 window 对 象 的 属性 之 一 : 


window.document.getElementById("header"); 


与 此 相同 : 


document .getElementById("header"); 


Window 尺寸 
有 三 种 方法 能 够 确定 浏览 器 窗口 的 尺寸 (浏览 器 的 视 口 ， 不 包括 工具 栏 和 滚动 


条 ) 。 
对 于 Internet Explorer、Chrome、Firefox、Opera 以 及 Safari : 


e Window.innerHeight - 浏览 器 窗口 的 内 部 高 度 
e window.innerWidth - 浏览 器 窗口 的 内 部 宽度 


对 于 Internet Explorer 8, 7, 6. 5: 


e document.documentElement.clientHeight 
e document.documentElement.clientWidth 


或 者 


e document.body.clientHeight 
e document.body.clientWidth 


实用 的 JavaScript 方案 (涵盖 所 有 浏览 器 ) 
实例 


var w-window.innerWidth 
|| document .documentElement.clientWidth 
|| document .body.clientWidth; 


var h=window. innerHeight 


|| document .documentElement.clientHeight 
|| document .body.clientHeight; 


该 例 显示 浏览 器 窗口 的 高 度 和 宽度 : 〈 不 包括 工具 栏 /滚动 条 ) 


其 他 Window 方法 


一 些 其 他 方法 : 


window.open() - 打开 新 窗口 
window.close() - 关闭 当前 窗口 
window.moveTo() - 移动 当前 窗口 
window.resizeTo() - 调整 当前 窗口 的 尺寸 


JavaScript Window Screen 


window.screen 对 象 包 含有 关 用 户 屏幕 的 信息 。 


Window Screen 


window.screen 对 象 在 编写 时 可 以 不 使 用 window 这 个 前 级 。 
一 些 属 性 : 


e screen.availWidth - 可 用 的 屏幕 宽度 
e screen.availHeight - 可 用 的 屏幕 高 度 


Window Screen 可 用 宽度 


screen.availWidth 属性 返回 访问 者 屏幕 的 宽度 ， 以 像素 计 ， 减 去 界面 特性 ， 比 如 窗 
口 任务 栏 。 


实例 
返回 您 的 屏幕 的 可 用 宽度 : 


<script> 
document .write(" 可 用 宽度 :" + ^screen.availWidth'); 


</script> 


以 上 代码 输出 为 : 


<script>document .write(" 可 用 宽度 :" + screen.availwidth);</script> 可 | 
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Window Screen 可 用 高 度 


screen.availHeight 属性 返回 访问 者 屏幕 的 高 度 ， 以 像素 计 ， 减 去 界面 特性 ， 比 如 
窗口 任务 栏 。 


实例 


返回 您 的 屏幕 的 可 用 高 度 : 


<script> 
document .write(" 可 用 高 度 :" + ~“screen.availHeight ); 


</script> 


以 上 代码 输出 为 : 


<script>document .write(" 可 用 高 度 : " + screen.availHeight);</script>5 





JavaScript Window Location 


window.location 对 象 用 于 获得 当前 页 面 的 地 址 (URL)， 并 把 浏览 器 重 定向 到 新 的 页 


o 


Window Location 


window.location 对 象 在 编写 时 可 不 使 用 window 这 个 前 级 。 
一 些 例 子 : 


location.hostname 返回 web 主机 的 域名 

location.pathname 返回 当前 页 面 的 路 径 和 文件 名 
location.port 返回 web 主机 的 端口 (80 或 443) 
location.protocol 返回 所 使 用 的 web 协议 (http:// 或 https://) 


Window Location Href 


location.href 属性 返回 当前 页 面 的 URL. 


实例 
返 


回 


(当前 页 面 的 ) 整个 URL : 


<script> 
document .write( location.href'); 


</script> 


以 上 代码 输出 为 : 


<script>document .write(location.href);</script>http://ww.w3school 


二 





Window Location Pathname 


location.pathname 属性 返回 URL 的 路 径 名 。 


实例 


返回 当前 URL 的 路 径 名 : 


<script> 
document .write( location.pathname'); 


</script> 


以 上 代码 输出 为 : 


<Script>document .write(location.pathname) ;</script>/js/js_window_1« 





Window Location Assign 


location.assign() 方法 加 载 新 的 文档 。 


实例 
加 载 一 个 新 的 文档 : 


<html> 

<head> 

<script> 

function newDoc( ) 


"window.location.assign("http://www.w3school.com.cn")^ 
«/script» 
</head> 
<body> 
<input type="button" value=" 加 载 新 文档 " onclick="newDoc()"> 


</body> 
</html> 


JavaScript Window History 


window.history 对 象 包 含 浏 览 器 的 历史 。 


Window History 


window. history 对 象 在 编写 时 可 不 使 用 window 这 个 前 级 。 
为 了 保护 用 户 隐私 ， 对 JavaScript 访问 该 对 象 的 方法 做 出 了 限制 。 
一 些 方法 : 


e history.back() - 与 在 浏览 器 点 击 后 退 按钮 相同 
e history.forward() - 与 在 浏览 器 中 点 击 按钮 向 前 相同 


Window History Back 


history.back() 方法 加 载 历 史 列 表 中 的 前 一 个 URL. 
这 与 在 浏览 器 中 点 击 后 退 按钮 是 相同 的 : 


实例 
在 页 面 上 创建 后 退 按钮 : 


<html> 

<head> 

<script> 

function goBack() 


"window.history.back()' 


} 
</script> 
</head> 
<body> 


<input type="button" value="Back" onclick="goBack()"> 
</body> 
</html> 


以 上 代码 输出 为 : 


«input type="button" value=" 转 到 上 一 页 " onclick="goBack()"> 


Window History Forward 


history forward() 方法 加 载 历史 列表 中 的 下 一 个 URL。 
这 与 在 浏览 器 中 点 击 前 进 按钮 是 相同 的 : 


实例 
在 页 面 上 创建 一 个 向 前 的 按钮 : 


<html> 

<head> 

<script> 

function goForward() 


{ 


"window.history.forward()' 
j 
«/script» 
«/head» 
«body» 
<input type="button" value="Forward" onclick="goForward()"> 


</body> 
</html> 


以 上 代码 输出 为 : 


«input type="button" value=" 转 到 下 一 页 " onclick="goForward()"> 


JavaScript Window Navigator 
window.navigator 对 象 包 含有 关 访 问 者 浏览 器 的 信息 。 


Window Navigator 


window.navigator 对 象 在 编写 时 可 不 使 用 window 这 个 前 级 。 
实例 


<div id="example"></div> 


<script> 

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; 
txt+= "<p>Browser Name: " + navigator.appName + "</p>"; 

txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; 
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; 
txt+= "<p>Platform: " + navigator.platform + "</p>"; 

txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; 
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p: 


document .getElementById("example") .innerHTML=txt; 


</script> 


加 
il 





ae navigator 对 象 的 信息 具有 误导 性 ， 不 应 该 被 用 于 检测 浏览 器 版 本 ， 


pim nit 
bs DR 
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e navigator 数据 可 被 浏览 器 使 用 者 更 改 
e 浏览 器 无 法 报告 晚 于 济 览 器 发 布 的 新 操作 条 统 


3x] X, dis dz 20] 
由 于 navigator 可 误导 浏览 器 检测 ， 使 用 对 象 检 测 可 用 来 嗅 探 不 同 的 浏览 器 。 


由 于 不 同 的 浏览 器 支持 不 同 的 对 象 ， 您 可 以 使 用 对 象 来 检测 浏览 器 。 例 如 ， 由 于 只 
有 Opera 支持 属性 "window.opera"， 您 可 以 据 此 识别 出 Opera。 


例子 : if (window.opera) {...some action...} 


JavaScript 消息 框 


可 以 在 JavaScript 中 创建 三 种 消息 框 : 警告 框 、 确 认 框 、 提 示 框 。 


<html> 

<head> 

<script type="text/javascript"> 
function disp_alert() 


alert(" 我 是 警告 框 !1 |") 
} 

</script> 

</head> 

<body> 


<input type="button" onclick="disp_alert()" value=" 显 示警 告 框 " /> 
</body> 
«/html» 


带 有 折 行 的 警告 杠 





<html> 

<head> 

<script type="text/javascript"> 
function disp_alert() 


{ 

alert(" 再 次 向 您 问好 | 在 这 里 ， 我 们 向 您 演示 " + '\n' + "如 何 向 警告 框 添加 折 行 。" 
} 

</script> 

</head> 

<body> 


«input type="button" onclick="disp_alert()" value=" 显 示警 告 框 " /> 


</body> 
</html> 
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<html> 

<head> 

<script type="text/javascript"> 
function show confirm() 


{ 


var r=confirm("Press a button!"); 
if (r==true) 


alert("You pressed OK!"); 
} 


else 


alert("You pressed Cancel!"); 


} 
} 


</script> 

</head> 

<body> 

<input type="button" onclick="show_confirm()" value="Show a confirr 


</body> 
</html> 
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提示 框 





«html» 
«head» 
«script type="text/javascript"> 
function disp prompt() 
{ 
var name=prompt(" 请 输入 您 的 名 字 ", "Bill Gates") 
if (name!=null && name!="") 
{ 
document .write(" 你 好 1" + name + " 今天 过 得 怎么 样 ?") 
} 
} 
</script> 
</head> 
<body> 


<input type="button" onclick="disp_prompt()" value=" 显 示 提 示 框 " /> 


</body> 
</html> 


警告 框 经 常用 于 确保 用 户 可 以 得 到 某 些 信息 。 
当 和 警告 框 出 现 后 ， 用 户 需要 点 击 确定 按钮 才能 继续 进行 操作 。 


语法 : 


alert(" 文 本 ") 


确认 框 


确认 框 用 于 使 用 户 可 以 验证 或 者 接受 某 些 信息 
当 确 认 框 出 现 后 ， 用 户 需 要 点 击 确定 或 者 取消 按钮 才能 继续 进行 操作 。 
如 果 用 户 点 击 确认 ， 那 么 返回 值 为 rue。 如 果 用 户 点 击 取消 ， 那 么 返回 值 为 false, 


语法 : 


confirm(" 文 本 ") 


提示 框 


提示 框 经 常用 于 提示 用 户 在 进入 页 面前 输入 某 个 值 。 
当 提 示 框 出 现 后 ， 用 户 需 要 输入 某 个 值 ， 然 后 点 击 确 认 或 取消 按钮 才能 继续 操纵 。 


如 果 用 户 点 击 确 认 ， 那 么 返回 值 为 输入 的 值 。 如 果 用 户 点 击 取 消 ， 那 么 返回 值 为 
null, 


语法 : 


prompt ( "文本 " "默认 值 " ) 


JavaScript 计时 


通过 使 用 JavaScript， 我 们 有 能 力 做 到 在 一 个 设 定 的 时 间 间 隅 之 后 来 执行 代码 ， 而 
不 是 在 函数 被 调用 后 立即 执行 。 我 们 称 之 为 计时 事件 。 


实例 


简单 的 计时 
单 击 本 例 中 的 按钮 后 ， 会 在 5 秒 后 弹出 一 个 警告 杠 。 


<html> 

<head> 

<script type="text/javascript"> 
function timedMsg() 


var t=setTimeout("alert('5 $5! ')",5000) 
} 


</script> 
</head> 


<body> 

<form> 

<input type="button" value=" p PENKA" onClick = "timedMsg()"> 
</form> 

<p> 请 点 击 上 面 的 按钮 。 和 警告 框 会 在 5 秒 后 显示 。</p> 

</body> 


</html> 
EE 
个 简单 的 计时 
本 例 中 的 程序 会 执行 2 秒 、4 秒 和 6 秒 的 计时 。 


<html> 

<head> 

<script type="text/javascript"> 
function timedText() 


var ti=setTimeout("document.getElementById('txt').value='2 #'", 206 
var t2=setTimeout("document.getElementById('txt').value='4 #'", 406 
var t3=setTimeout("document.getElementById('txt').value='6 #'", 606 


} 

</script> 

</head> 

<body> 

<form> 

<input type="button" value=" 显 示 计 时 的 文本 " onClick="timedText()"> 


<input type="text" id="txt"> 
</form> 


<p> 点 击 上 面 的 按钮 。 输 入 框 会 显示 出 已 经 逝去 的 时 间 (2、4、6 秒 ) o </p> 
</body> 


</html> 
ss 
在 一 个 无 穷 循环 中 的 计时 事件 
在 本 例 中 ， 单 击 开始 计时 按钮 后 ， 程 序 开始 从 0 以 秒 计 时 。 





«html» 

«head» 

«script type="text/javascript"> 
var c-0 

var t 

function timedCount() 

{ 
document.getElementById('txt').value-c 
c=ct+1 

t=setTimeout ("timedCount()", 1000) 
} 

</script> 

</head> 


<body> 

<form> 

«input type="button" value=" 开 始 计时 1" onClick="timedCount()"> 
<input type="text" id="txt"> 

</form> 

<p> 请 点 击 上 面 的 按钮 。 输 入 框 会 从 9 开始 一 直 进 行 计时 。</p> 

</body> 


</html> 


带 有 停止 按钮 的 无 穷 循环 中 的 计时 事件 


在 本 例 中 ， 点 击 计数 按钮 后 根据 用 户 输入 的 数值 开始 倒计时 ， 点 击 停止 按钮 停止 计 
时 。 


«html» 

«head» 

«script type="text/javascript"> 
var c-0 

var t 

function timedCount() 

{ 
document.getElementById('txt').value-c 
c=c+1 

t=setTimeout ("timedCount()", 1000) 
} 


function stopCount() 

{ 

c=0; 

setTimeout ("document .getElementById('txt').value=0",0); 
clearTimeout(t); 

} 

</script> 

</head> 


<body> 

<form> 

«input type="button" value=" 开 始 计 时 1" onClick="timedCount()"> 
<input type="text" id="txt"> 

«input type="button" value=" 停 止 计 时 1" onClick="stopCount()"> 
</form> 

<p> 请 点 击 上 面 的 “开始 计时 ”按钮 来 启动 计时 器 。 输 入 框 会 一 直 进 行 计时 ， 从 0 开始 。 点 


</body> 


</html> 





使 用 计时 事件 制作 的 钟表 
一 个 JavaScript 小 时 钟 


<html> 

<head> 

<script type="text/javascript"> 
function startTime() 


var today-new Date() 

var h-today.getHours() 

var m-today.getMinutes() 

var s-today.getSeconds() 

// add a zero in front of numbers«10 

m-checkTime (m) 

s-checkTime(s) 

document .getElementById('txt').innerHTML=h+":"+m+":"+s 
t-setTimeout('startTime()',500) 

} 


function checkTime(i) 
{ 
if (i<10) 
{i="0" + i} 
return i 
j 


«/script» 
«/head» 


«body onload-'"startTime()"» 
«div id="txt"></div> 


«/body» 
«/html» 


JavaScript 计时 事件 


通过 使 用 JavaScript， 我 们 有 能 力作 到 在 一 个 设 定 的 时 间 间 隅 之 后 来 执行 代码 ， 而 
不 是 在 函数 被 调用 后 立即 执行 。 我 们 称 之 为 计时 事件 。 


在 JavaScritp 中 使 用 计时 事件 是 很 容易 的 ， 两 个 关键 方法 是 : 
setTimeout() 

未 来 的 某 时 执行 代码 

clearTimeout() 


取消 setTimeout() 


setTimeout() 


语法 


var t=setTimeout("javascript 语 句 ", BP) 


setTimeout() 方法 会 返回 某 个 值 。 在 上 面 的 语句 中 ， 值 被 储存 在 名 为 t 的 变量 中 。 
假如 你 希望 取消 这 个 setTimeout()， 你 可 以 使 用 这 个 变量 名 来 指定 它 。 


setTimeout() 的 第 一 个 参数 是 含有 JavaScript 语句 的 字符 串 。 这 个 语句 可 能 诸如 
"alert('5 seconds!')"， 或 者 对 函数 的 调用 ， 诸 如 alertMsg()"。 


第 二 个 参数 指示 从 当前 起 多 少 毫 秒 后 执行 第 一 个 参数 。 
提示 : 1000 毫秒 等 于 一 秒 。 


实例 
当下 面 这 个 例子 中 的 按钮 被 点 击 时 ， 一 个 提示 框 会 在 5 秒 中 后 洋 出 。 


«html» 

«head» 

«script type="text/javascript"> 

function timedMsg() 
{ 
"var t=setTimeout("alert('5 seconds!')",5000) ~ 
} 

</script> 

</head> 


<body> 
<form> 
<input type="button" value="Display timed alertbox!" onClick="timec 
</form> 
</body> 
</html> 


E scs m 
实例 - 无 穷 循环 


要 创建 一 个 运行 于 无 穷 循 环 中 的 计时 器 ， 我 们 需要 编写 一 个 函数 来 调用 其 自身 。 在 
下 面 的 例子 中 ， 当 按钮 被 点 击 后 ， 输 入 域 便 从 0 开始 计数 。 





<html> 


<head> 

<script type="text/javascript"> 

var c=0 

var t 

function timedCount() 
{ 
document .getElementById('txt').value=c 
c=ct+1 
*t=setTimeout("timedCount()", 1000) ~ 
} 

</script> 

</head> 


<body> 

<form> 

<input type="button" value="Start count!" onClick="timedCount()"> 
<input type="text" id="txt"> 

</form> 

</body> 

</html> 


| 
clearTimeout() 
语法 

clearTimeout(setTimeout variable) 


实例 


下 面 的 例子 和 上 面 的 无 穷 循环 的 例子 相似 。 唯 一 的 不 同 是 ， 现 在 我 们 添加 了 一 个 
"Stop Count!" 按钮 来 停止 这 个 计数 器 : 


<html> 


<head> 

<script type="text/javascript"> 
var c=0 

var t 


function timedCount() 

{ 
document.getElementById('txt').value-c 
c=ct+1 
~*t=setTimeout("timedCount()", 1000) ~ 

} 


function stopCount() 
{ 
"clearTimeout(t)' 
} 
</script> 
</head> 


<body> 

<form> 

<input type="button" value="Start count!" onClick="timedCount()"> 
<input type="text" id="txt"> 

<input type="button" value="Stop count!" onClick="stopCount()"> 
</form> 

</body> 


</html> 
EE 


JavaScript Cookies 
cookie 用 来 识别 用 户 。 

实例 

创建 一 个 欢迎 cookie 


利用 用 户 在 提示 框 中 输入 的 数据 创建 一 个 JavaScript Cookie， 当 该 用 户 再 次 访问 该 
页 面 时 ， 根 据 cookie 中 的 信息 发 出 欢迎 信息 。 


<html> 

<head> 

<script type="text/javascript"> 
function getCookie(c_name) 


if (document .cookie.length>0) 


{ 

c start-document.cookie.indexOf(c name + "=") 
if (c start!--1) 

{ 


c_start=c_start + c name.length-*1 
c_end=document.cookie.indexOf(";",c_start) 

if (c end---1) c_end=document.cookie.length 

return unescape(document.cookie.substring(c start,c end)) 
} 

} 


return "" 


} 


function setCookie(c_name, value, expiredays ) 


{ 


var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays) 


document .cookie=c_name+ "=" +escape(value)+ 
((expiredays--null) ? "" : "; expires="+exdate.toGMTString()) 
j 
function checkCookie() 
{ 
username=getCookie('username' ) 
if (username!=null && username!="") 
{alert('Welcome again '+username+'!')} 
else 
{ 
username-prompt('Please enter your name:',"") 
if (username!=null && username!="") 
{ 
setCookie( 'username', username, 365) 
} 
} 
} 
</script> 
</head> 
«body onLoad="checkCookie()"> 
</body> 
</html> 


{+ 4 f= cookie? 


cookie 是 存储 于 访问 者 的 计算 机 中 的 变量 。 每 当 同一 台 计 算 机 通过 浏览 器 请 求 某 个 
页 面 时 ， 就 会 发 送 这 个 cookie。 你 可 以 使 用 JavaScript 来 创建 和 取 回 cookie 的 
值 。 


有 关 cookie 的 例子 : 

名 字 cookie 

当 访问 者 首次 访问 页 面 时 ， 他 或 她 也 许 会 填写 他 /她 们 的 名 字 。 名 字 会 存储 于 
cookie 中 。 当 访问 者 再 次 访问 网 站 时 ， 他 们 会 收 到 类 似 "Welcome John Doe!" 的 
欢迎 词 。 而 名 字 则 是 从 cookie 中 取 回 的 。 

密码 cookie 


当 访问 者 首次 访问 页 面 时 ， 他 或 她 也 许 会 填写 他 /她 们 的 密码 。 密 码 也 可 被 存储 于 
cookie 中 。 当 他 们 再 次 访问 网 站 时 ， 密 码 就 会 从 cookie FEE. 


日 期 cookie 
当 访 问 者 首次 访问 你 的 网 站 时 ， 当 前 的 日 期 可 存储 于 cookie 中 。 当 他 们 再 次 访问 


网 站 时 ， 他 们 会 收 到 类 似 这 样 的 一 条 消息 "Your last visit was on Tuesday August 
11, 2005!"。 日 期 也 是 从 cookie 中 取 回 的 。 


创建 和 存储 cookie 


在 这 个 例子 中 我 们 要 创建 一 个 存储 访问 者 名 字 的 cookie。 当 访问 者 首次 访问 网 站 
时 ， 他 们 会 被 要 求 填写 姓名 。 名 字 会 存储 于 cookie 中 。 当 访问 者 再 次 访问 网 站 
时 ， 他 们 就 会 收 到 欢迎 词 。 


首先 ， 我 们 会 创建 一 个 可 在 cookie 变量 中 存储 访问 者 姓名 的 函数 : 


function setCookie(c_name,value,expiredays) 
var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays ) 


document .cookie=c_name+ "=" +escape(value)+ 
((expiredays--null) ? "" : ";expires="+exdate.toGMTString() ) 


LECKA BAA cookie 的 名 称 、 值 以 及 过 期 天 数 。 


在 上 面 的 函数 中 ， 我 们 首先 将 天 数 转换 为 有 效 的 日 期 ， 然 后 ， 我 们 将 cookie 名 
称 、 值 及 其 过 期 日 期 存 人 document.cookie 对 象 。 


， 我 们 要 创建 另 一 个 画 数 来 检查 是 否 已 设置 cookie : 


function getCookie(c_name) 
if (document .cookie.length>0) 


c start-document.cookie.indexOf(c name + "=") 
if (c start!--1) 

{ 

c_start=c_start + c_name.length+1 

c end-zdocument.cookie.indexOf(";",c start) 


if (c end---1) c end-zdocument.cookie.length 
return unescape(document.cookie.substring(c start,c end)) 
j 
j 
return "" 


j 


上 面 的 函数 首先 会 检查 document.cookie 对 象 中 是 否 存 有 cookie。 假 如 
document.cookie 对 象 存 有 某 些 cookie， 那 么 会 继续 检查 我 们 指定 的 cookie 是 否 
已 储存 。 如 果 找 到 了 我 们 要 的 cookie， 就 返回 值 ， 否 则 返回 空 字 符 串 。 


最 后 ， 我 们 要 创建 一 个 图 数 ， 这 个 函数 的 作用 是 : WR cookie 已 设置 ， 则 显示 欢 
迎 词 ， 否 则 显示 提示 框 来 要 求 用 户 输入 名 字 。 


function checkCookie() 


t 
username=getCookie('username' ) 
if (username!=null && username!="") 
(alert('Welcome again '+usernamet+'!')} 
else 
t 
username-prompt('Please enter your name:',"") 
if (username!-null && username!="") 
t 
setCookie('username',username, 365) 
j 
j 
j 


这 是 所 有 的 代码 : 


<html> 

<head> 

<script type="text/javascript"> 
function getCookie(c_name) 


if (document .cookie.length>0) 


{ 
c start-document.cookie.indexOf(c name + "=") 
if (c start!--1) 

n 


c start-c start + c name.length-*1 
c end-zdocument.cookie.indexOf(";",c start) 
if (c end---1) c_end=document.cookie. length 
return unescape(document.cookie.substring(c start,c end)) 
} 
} 


return "" 


j 


function setCookie(c name, value, expiredays ) 


( 


var exdate-new Date() 
exdate.setDate(exdate.getDate()+expiredays) 


document .cookie=c_name+ "=" +escape(value)+ 
((expiredays--null) ? "" : ";expires="+exdate.toGMTString() ) 
j 
function checkCookie() 
{ 
username=getCookie('username' ) 
if (username!=null && username!="") 
{alert('Welcome again '+usernamet+'!')} 
else 
{ 
username-prompt('Please enter your name:',"") 
if (username!=null && username!="") 
{ 
setCookie( 'username', username, 365) 
j 
j 
j 
«/script» 
«/head» 


«body onLoad="checkCookie()"> 
</body> 
</html> 


HTML DOM 


HTML DOM 简介 


HTML DOM 定义 了 访问 和 操作 HTML 文档 的 标准 。 


您 应 该 上 具 各 的 基础 知识 


在 您 继续 学 习 之 前 ， 您 需要 对 以 下 内 容 拥有 基本 的 了 解 : 
e HTML 
e CSS 


e JavaScript 
如 果 您 需要 首先 学 习 这 些 项 目 ， 请 访问 我 们 的 首页 。 


什么 是 DOM ? 


DOM 是 W3C (万 维 网 联盟 ) 的 标准 。 
DOM 定义 了 访问 HTML 和 XML 文档 的 标准 : 


“W3C 文档 对 象 模 型 (DOM) 是 中 立 于 平台 和 话 言 的 接口 ， 它 允许 程序 和 脚 
本 动态 地 访问 和 更 新 文档 的 内 容 、 结 构 和 样式 。” 
W3C DOM 标准 被 分 为 3 个 不 同 的 部 分 : 
e 核心 DOM - 针对 任何 结构 化 文档 的 标准 模型 
e XML DOM - 针对 XML 文档 的 标准 模型 
e HTML DOM - 针对 HTML 文档 的 标准 模型 


编者 注 : DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 
什么 是 XML DOM ? 

XML DOM 定义 了 所 有 XML 元 素 的 对 象 和 属性 ， 以 及 访问 它们 的 方法 。 
如 果 您 需要 学 习 XML DOM， 请 访问 我 们 的 XML DOM ZU, 
什么 是 HTML DOM ? 


HTML DOM 是 : 


e HTML 的 标准 对 象 模型 
e HTML 的 标准 编程 接口 
e W3C 标准 


HTML DOM 定义 了 所 有 HTML 元 素 的 对 象 和 属性 ， 以 及 访问 它们 的 方法 。 
SZ, HTML DOM 是 关于 如 何 获取 、 人 修改、 添加 或 删除 HTML 元 素 的 标准 。 


HTML DOM 节点 


在 HTML DOM 中 ， 所 有 事物 都 是 节点 。DOM 是 被 视 为 节点 树 的 HTML, 


DOM 节点 


根据 W3C 的 HTML DOM 标准 ，HTML 文档 中 的 所 有 内 容 都 是 节点 : 


整个 文档 是 一 个 文档 节点 

每 个 HTML 元 素 是 元 素 节 点 
HTML 元 素 内 的 文本 是 文本 节点 
每 个 HTML 属性 是 属性 节点 
注释 是 注释 节点 


HTML DOM 节点 树 
HTML DOM 将 HTML 文档 视 作 树 结构 。 这 种 结构 被 称 为 节点 树 : 


HTML DOM Tree 实例 


KE 






TR: 
<head> 
TR: 
<tithe> 


<body> 







Eu ee 
R (节点 ) 均 可 被 修改 ， 也 可 以 创建 或 删除 节点 


PR, FAA 


节点 树 中 的 节点 彼此 拥有 层级 关系 。 


父 (parent) 、 子 (child) 和 同胞 (sibling) 等 术语 用 于 描述 这 些 关 系 。 父 节点 拥 
e Geese e ale 


在 节点 树 中 ， 项 端 节点 被 称 为 根 (root) 

每 个 节点 都 有 父 节 点 、 除 了 根 〈 它 没有 父 节点 ) 
一 个 节点 可 拥有 任意 数量 的 子 

同胞 是 拥有 相同 父 节点 的 节点 


下 面 的 图 片 展示 了 节点 树 的 一 部 分 ， 以 及 节点 之 间 的 关系 : 


<html> 


parentNode 













元 素 
<head> 











<html> 的 子 节点 
同时 ， 彼此 互 为 同胞 





nextSibling 
6UulIIqISsSnolAaJd 





lastChild 


TCR: 
<body> 


请 看 下 面 的 HTML 片段 : 


<html> 
<head> 
<title>DOM 教程 </title> 
</head> 
<body> 
<h1>DOM 第 一 课 </h1> 
<p>Hello world!</p> 
</body> 
</html> 


从 上 面 的 HTML 中: 


e <html> 节点 没有 父 节 点 ; 它 是 根 节点 
e <head> 和 <body> 的 父 节 点 是 «html» 节点 
e MAAR "Hello world!" 的 父 节 点 是 <p> 节点 


JH: 

e <html> 节点 拥有 两 个 子 节点 : <head> 和 «body» 
e <head> 节点 拥有 一 个 子 节点 : «title 节点 
e 
e 


«title» 节点 也 拥有 一 个 子 节点 : 文本 节点 "DOM 教程 " 
«hi» 和 <p> 节点 是 同胞 节点 ， 同 时 也 是 <body> 的 子 节点 


e <head> 元 素 是 «html» 元 素 的 首 个 子 节点 


abe 


e <body> RE «html» 元 素 的 最 后 一 个 子 节点 
e «hi» 元 素 是 <body> 元 素 的 首 个 子 节点 
e <p> TRE <body> 元 素 的 最 后 一 个 子 节点 


DOM 义理 中 的 常见 错误 是 希望 元 素 节 点 包含 文本 。 


在 本 例 中 : «title-DOM 教程 </titie>， 元 素 节 点 <title>， 包 含 值 为 "DOM ME" 的 文 
本 节点 。 


可 通过 节点 的 innerHTML 属性 来 访问 文本 节点 的 值 。 
您 将 在 稍 后 的 章节 中 学 习 更 多 有 关 innerHTML 属性 的 知识 。 


HTML DOM 方法 


方法 是 我 们 可 以 在 节点 (HTML 元 素 ) 上 执行 的 动作 。 


编程 接口 

可 通过 JavaScript (以 及 其 他 编程 语言 ) 对 HTML DOM 进行 访问 。 
所 有 HTML 元 素 被 定义 为 对 象 ， 而 编程 接口 则 是 对 象 方法 和 对 象 属性 。 
方法 是 您 能 够 执行 的 动作 (上 比如 添加 或 修改 元 素 ) 。 

属性 是 您 能 够 获取 或 设置 的 值 (比如 节点 的 名 称 或 内 容 ) 。 


getElementByld() 方法 


getElementByld() 方法 返回 带 有 指定 ID 的 元 素 : 
例子 


var element-document.getElementById("intro"); 


HTML DOM 对 象 - 方法 和 属性 


一 些 常用 的 HTML DOM 方法 : 


e getElementByld(id) - 获取 带 有 指定 id 的 节点 (元 素 ) 
e appendChild(node) - 插入 新 的 子 节点 (TR) 
e removeChild(node) - 删除 子 节点 (TR) 


一 些 常用 的 HTML DOM 属性 : 


e innerHTML - 节点 (TR) 的 文本 值 
e parentNode - 节点 (元 素 ) 的 父 节点 
e childNodes - 节点 (元 素 ) 的 子 节点 

e attributes - 节点 (元 素 ) 的 属性 节点 


您 将 在 本 教程 的 下 一 章 中 学 到 更 多 有 关 属 性 的 知识 。 


现实 生活 中 的 对 象 
某 个 人 是 一 个 对 象 。 


人 的 方法 可 能 是 eat(), sleep(), work(), play() 等 等 。 

所 有 人 都 有 这 些 方法 ， 但 会 在 不 同时 间 执 行 它们 。 

一 个 人 的 属性 包括 姓名 、 身 高 、 体 重 、 年 龄 、 性 别 等 等 。 
所 有 人 都 有 这 些 属性 ， 但 它们 的 值 因 人 而 异 。 


一 些 DOM 对 象 方法 
这 里 提供 一 些 您 将 在 本 教程 中 学 到 的 常用 方法 : 


方法 描述 
getElementByld() 返回 带 有 指定 ID 的 元 素 。 


返回 包含 带 有 指定 标签 名 称 的 所 有 元 素 的 节点 
getElementsBy TagName() 列表 (集合 /节点 数组 ) 。 


返回 包含 带 有 指定 类 名 的 所 有 元 素 的 节点 列 
表 


o 


getElementsByClassName() 


appendChild() 把 新 的 子 节点 添加 到 指定 节点 。 
removeChild() 删除 子 节点 。 

replaceChild() 替换 子 节点 。 

insertBefore() 在 指定 的 子 节点 前 面 插入 新 的 子 节点 。 
createAttribute() 创建 属性 节点 。 

createElement() 创建 元 素 节 点 。 

createTextNode() 创建 文本 节点 。 

getAttribute() 返回 指定 的 属性 值 。 


setAttribute() 把 指定 属性 设置 或 修改 为 指定 的 值 。 


HTML DOM 属性 


属性 是 节点 (HTML 元 素 ) 的 值 ， 您 能 够 获取 或 设置 。 


编程 接口 

可 通过 JavaScript (以 及 其 他 编程 语言 ) 对 HTML DOM 进行 访问 。 
所 有 HTML 元 素 被 定义 为 对 象 ， 而 编程 接口 则 是 对 象 方 法 和 对 象 属性 。 
方法 是 您 能 够 执行 的 动作 (上 比如 添加 或 修改 元 素 ) o 

属性 是 您 能 够 获取 或 设置 的 值 〈 比 如 节点 的 名 称 或 内 容 ) 。 


innerHTML 属性 


获取 元 素 内 容 的 最 简单 方法 是 使 用 innerHTML 属性 。 
innerHTML 属性 对 于 获取 或 替换 HTML 元 素 的 内 容 很 有 用 。 


实例 


下 面 的 代码 获取 id="intro" 的 <p> 元 素 的 innerHTML : 
实例 
<html> 
<body> 
<p id="intro">Hello World!</p> 
<script> 
var txt-document.getElementById("intro").innerHTML; 
document .write(txt); 


«/script» 


«/body» 
«/html» 


在 上 面 的 例子 中 ，getElementByld 是 一 个 方法 ， 而 innerHTML 是 属性 。 
innerHTML 属性 可 用 于 获取 或 改变 任意 HTML 元 素 ， 包 括 «html» 和 <body>. 


nodeName 属性 


nodeName 属性 规定 节点 的 名 称 。 


nodeName 是 只 读 的 

元 素 节 点 的 nodeName 与 标签 名 相同 
属性 节点 的 nodeName 与 属性 名 相同 
文本 节点 的 nodeName 始终 是 #text 
文档 节点 的 nodeName 始终 是 #document 


注释 : nodeName 始终 包含 HTML 元 素 的 大 写字 母 标 签名 。 


nodeValue 属性 


nodeValue 属性 规定 节点 的 值 。 


e 元 素 节 点 的 nodeValue = undefined 3 null 
e 文本 节点 的 nodeValue 是 文本 本 身 
e 属性 节 点 的 nodeValue 是 属性 值 


KRUTCH A 


下 面 的 例子 会 取 回 «p id="intro"> 标签 的 文本 节点 值 : 
实例 
<html> 
<body> 
<p id="intro">Hello World!</p> 
<script type="text/javascript"> 
x-document.getElementById("intro"); 
document.write(x.firstChild.nodeValue); 


«/script» 


«/body» 
«/html» 


nodeType 属性 


nodeType 属性 返回 节点 的 类 型 。nodeType 是 只 读 的 。 
比较 重要 的 节点 类 型 有 : 


W3School 前 端 教程 合 


元 素 类 型 NodeType 
元 素 1 
属性 
文本 
注释 
文档 


Oo co CO N 


HTML DOM 属性 2013 


HTML DOM 访问 

访问 HTML DOM - 查找 HTML 元 素 。 
访问 HTML TR (节点 ) 
访问 HTML 元 素 等 同 于 访问 节点 


您 能 够 以 不 同 的 方式 来 访问 HTML 元 素 : 


e 通过 使 用 getElementByld() 方法 
e 通过 使 用 getElementsByTagName() 方法 
e 通过 使 用 getElementsByClassName() 方法 


getElementByld() 方法 
getElementByld() 方法 返回 带 有 指定 ID 的 元 素 : 
语法 

node. getElementById("id"); 
下 面 的 例子 获取 id="intro" 的 元 素 : 
实例 


document .getElementById("intro"); 


getElementsByTagName() 方法 


getElementsByTagName() 返回 带 有 指定 标签 名 的 所 有 元 素 。 
语法 
node .getElementsByTagName("tagname"); 


下 面 的 例子 返回 包含 文档 中 所 有 «p» 元 素 的 列表 : 


实例 1 


document .getElementsByTagName("p"); 


下 面 的 例子 返回 包含 文档 中 所 有 <p> 元 素 的 列表 ， 并 且 这 些 «p» 元 素 应 该 是 
id="main" 的 元 素 的 后 代 ( 子 、 孙 等 等 ) : 


实例 2 


document .getElementById("main").getElementsByTagName("p"); 


getElementsByClassName() 方法 
如 果 您 希望 查找 带 有 相同 类 名 的 所 有 HTML 元 素 ， 请 使 用 这 个 方法 : 


document .getElementsByClassName("intro"); 


上 面 的 例子 返回 包含 class="intro" 的 所 有 元 素 的 一 个 列表 : 
注释 : getElementsByClassName() 在 Internet Explorer 5,6,7,8 中 无 效 。 


HTML DOM - 修改 


修改 HTML = 改变 元 素 、 属 性 、 样 式 和 事件 。 


修改 HTML 元 素 


修改 HTML DOM 意味 着 许多 不 同 的 方面 : 


e 改变 HTML 内 容 

e 改变 CSS 样式 

e 改变 HTML 属性 

e 创建 新 的 HTML 元 素 

e 删除 已 有 的 HTML 元 素 
e 改变 事件 (处 理 程序 ) 


在 接 下 来 的 章节 ， 我 们 会 深入 学 习 修 改 HTML DOM 的 常用 方法 。 


创建 HTML 内 容 


改变 元 素 内 容 的 最 简 答 的 方法 是 使 用 innerHTML 属性 。 
下 面 的 例子 改变 一 个 <p> 元 素 的 HTML 内 容 : 
实例 
<html> 
<body> 
«p id="p1i">Hello World!</p> 
<script> 
document .getElementById("p1i").innerHTML="New text!"; 
</script> 
</body> 
</html> 


提示 : 我 们 将 在 下 面 的 章节 为 您 解释 例子 中 的 细节 。 


改变 HTML 样式 


通过 HTML DOM， 您 能 够 访问 HTML 元 素 的 样式 对 象 。 


下 面 的 例子 改变 一 个 段落 的 HTML 样式 : 
实例 


<html> 


<body> 
<p id="p2">Hello world!</p> 


<script> 
document .getElementById("p2").style.color="blue"; 
</script> 


</body> 
</html> 


创建 新 的 HTML 元 素 


如 需 向 HTML DOM 添加 新 元 素 ， 您 首先 必须 创建 该 元 素 (元素 节点 ) ， 然 后 把 它 
追加 到 已 有 的 元 素 上 。 


实例 


«div id="di"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


<script> 

var para-document.createElement("p"); 

var node-document.createTextNode("This is new."); 
para.appendChild(node); 


var element-document.getElementById("d1"); 
element.appendChild(para); 
«/script» 


HTML DOM - 修改 HTML 内 容 


通过 HTML DOM, JavaScript 能 够 访问 HTML 文档 中 的 每 个 元 素 。 


改变 HTML 内 容 


改变 元 素 内 容 的 最 简 答 的 方法 是 使 用 innerHTML 属性 。 
下 面 的 例子 更 改 <p> 元 素 的 HTML 内 容 : 
实例 
<html> 
<body> 
«p id="p1i">Hello World!</p> 
<script> 
document .getElementById("p1i").innerHTML="New text!"; 
</script> 


</body> 
</html> 


改变 HTML 样式 


通过 HTML DOM， 您 能 够 访问 HTML 对 象 的 样式 对 象 。 
下 面 的 例子 更 改 段落 的 HTML 样式 : 


实例 


<html> 


<body> 
<p id="p2">Hello world!</p> 


<script> 
document .getElementById("p2").style.color="blue"; 
</script> 


</body> 
</html> 


使 用 事件 


HTML DOM 人 允许 您 在 事件 发 生 时 执行 代码 。 
当 HTML 元 素 " 有 事情 发 生 “ 时 ， 浏 览 器 就 会 生成 事件 : 


e 在 元 素 上 点 击 
e MARA 
e 改变 输入 字段 


你 可 以 在 下 一 章 学 习 更 多 有 关 事 件 的 内 容 。 
Bi DU CERE ER ds Sp UU <body> 元 素 的 背景 


实例 
<html> 
<body> 


<input type="button" onclick="document .body.style.backgroundColor= 
value="Change background color" /> 


</body> 
</html> 


在 本 例 中 ， 由 函数 执行 相同 的 代码 : 





实例 


<html> 
<body> 


<script> 
function ChangeBackground( ) 


{ 


document .body.style.backgroundColor="lavender"; 


} 


</script> 


<input type="button" onclick="ChangeBackground()" 
value="Change background color" /> 


</body> 
</html> 


下 面 的 例子 在 按钮 被 点 击 时 改变 <p> 元 素 的 文本 : 
实例 


<html> 
<body> 


<p id="pi">Hello world!</p> 


<script> 
function ChangeText() 


{ 
document .getElementById("p1i").innerHTML="New text!"; 


} 
</script> 


<input type="button" onclick="ChangeText()" value="Change text"> 


</body> 
</html> 


HTML DOM - TA 


添加 、 删 I 除 和 蔡 换 HTML 元 素 。 


创建 新 的 HTML 元 素 - appendChild() 


D A yee 
元 素 上 。 


实例 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 

</div> 

<script> 

var para-document.createElement("p"); 

var node=document.createTextNode("This is new."); 
para.appendChild(node) ; 

var element-document.getElementById("divi"); 


element.appendChild(para); 
«/script» 


例子 解释 
这 段 代 码 创 建 了 一 个 新 的 <p> 元 素 : 


var para-document.createElement("p"); 


如 需 向 «p» 元 素 添 加 文本 ， 您 首先 必须 创建 文本 节点 。 这 段 代 码 创建 文本 节点 : 


var node-document.createTextNode("This is a new paragraph."); 


然后 您 必须 向 «p» 元 素 追 加 文本 节点 : 


para.appendChild(node); 


最 后 ， 您 必须 向 已 有 元 素 追 加 这 个 新 元 素 。 


这 段 代码 查找 到 一 个 已 有 的 元 素 : 


var element-document.getElementById("divi"); 


这 段 代 码 向 这 个 已 存在 的 元 素 追 加 新 元 素 : 


element.appendChild(para); 


创建 新 的 HTML 元 素 - insertBefore() 


上 一 个 例子 中 的 appendChild() 方法 ， 将 新 元 素 作 为 父 元 素 的 最 后 
添加 。 


如 果 不 希 望 如 此 ， 您 可 以 使 用 insertBefore() 方法 
实例 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


<script> 

var para=document.createElement("p"); 

var node=document.createTextNode("This is new."); 
para.appendChild(node); 


var element-document.getElementById("divi"); 
var child-document.getElementById("p1"); 
element.insertBefore(para, child); 

«/script» 


删除 已 有 的 HTML 元 素 


如 需 删 除 HTML 元 素 ， 您 必须 清楚 该 元 素 的 父 元 素 : 


实例 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 

<script> 

var parent-document.getElementById("div1"); 
var child-document.getElementById("p1"); 
parent.removeChild(child) ; 

</script> 


例子 解释 
这 个 HTML 文档 包含 一 个 带 有 两 个 子 节点 (两 个 <p> 元 素 ) 的 «div» 元 素 : 


<div id="divi"> 

<p id="p1i">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


查找 id-"div1" 的 元 素 : 


var parent-document.getElementById("div1"); 


查找 id="p1" BY <p> 元 素 : 


var child=document.getElementById("p1i"); 


从 父 元 素 中 删除 子 元 素 : 


parent.removeChild(child) ; 


提示 : 能 否 在 不 引用 父 元 素 的 情况 下 删除 某 个 元 素 ? 

‘RIDE. DOM 需要 了 解 您 需要 删除 的 元 素 ， 以 及 它 的 父 元 素 。 

这 里 提供 一 个 常用 的 解决 方法 : 找到 您 需要 删除 的 子 元 素 ， 然 后 使 用 parentNode 
属性 来 查找 其 父 元 素 : 


var child-document.getElementById("p1"); 
child.parentNode.removeChild(child); 


替换 HTML 元 素 


如 需 替 换 HTML DOM 中 的 元 素 ， 请 使 用 replaceChild() 方法 : 
实例 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


<script> 

var para=document.createElement("p"); 

var node=document.createTextNode("This is new."); 
para.appendChild(node); 


var parent-document.getElementById("div1"); 
var child-document.getElementById("p1"); 
parent.replaceChild(para,child); 

«/script» 


HTML DOM - 事件 


HTML DOM 人 允许 JavaScript 对 HTML 事件 作出 反应 。。 
实例 


«div style="background-color :#8AB83D;width:160px; height :60px; 
margin: 20px; padding-top: 20px;color:#ffffff; font-weight :bold; 
font-size:14px; float: left; text-align:center;" 
onmouseoverz"this.innerHTML-'Thank You'" 
onmouseout-"this.innerHTML-'Mouse Over Me'">Mouse Over Me</div> 


«div style="background-color :#8AB83D;width:160px; height :60px; 
margin: 20px; padding-top: 20px; color: #ffffFF; font-weight :bold; 
font-size:14px; float: left; text-align:center;" 
onclick="clickMeEvent(this)">Click Me</div> 


<script type="application/javascript"> 
elles 


function clickMeEvent(obj ) 


if (obj .innerHTML=="Goodbye" ) 


{ 
obj.style.display="none"; 
j 
else if (obj.innerHTML--"Thank You") 
{ 
obj .innerHTML="Goodbye"; 
j 
else if (obj.innerHTML--"Click Me<br>Click Me Again<br>And Aga: 
{ 
obj .innerHTML="Thank You"; 
j 
else if (obj.innerHTML--"Click Me<br>Click Me Again") 
{ 
obj .innerHTML=obj.innerHTML+"<br>And Again"; 
j 
else 
{ 
obj .innerHTML=obj .innerHTML+"<br>Click Me Again"; 
j 
} 
//--> 


</script> 


«| m 








对 事件 作出 反应 


当 事 件 发 生 时 ， 可 以 执行 JavaScript， 上 比如 当 用 户 点 击 一 个 HTML 元 素 时 。 
如 需 在 用 户 点 击 某 个 元 素 时 执行 代码 ， 请 把 JavaScript 代码 添加 到 HTML 事件 属 
性 中 : 


onclick=_JavaScript_ 


HTML 事件 的 例子 : 


e SAP Ra mint 

e 当 网 页 已 加 载 时 

e 当 图 片 已 加 载 时 

e 当 鼠 标 移动 到 元 素 上 时 
e 当 输 入 字段 被 改变 时 

。 当 HTML 表单 被 提交 时 
e 当 用 户 触发 按键 时 


在 本 例 中 ， 当 用 户 点 击 时 ， 会 改变 «hi» 元 素 的 内 容 : 
实例 


<!DOCTYPE html» 

<html> 

<body> 

«hi onclick="this.innerHTML='hello! '">#4 ARs ix EMA! </h1> 
</body> 

</html> 


在 本 例 中 ， 会 从 事件 处 理 程序 中 调用 函数 : 


实例 


<!DOCTYPE html» 

«html» 

«head» 

«script» 

function changetext(id) 
id.innerHTML-"hello!"; 
} 

</script> 

</head> 

<body> 

«hi onclick="changetext(this)"> 请 点 击 这 段 文 本 !</h1> 
</body> 

</html> 


HTML 事件 属性 

如 需 向 HTML 元 素 分 配 事件 ， 您 可 以 使 用 事件 属性 。 
实例 

向 button 元 素 分 配 一 个 onclick 事件 : 


«button onclick="displayDate()"> 试 一 试 </button> 
在 上 面 的 例子 中 ， 当 点 击 按钮 时 ， 会 执行 名 为 displayDate HHA. 


使 用 HTML DOM 来 分 配 事件 


HTML DOM 允许 您 使 用 JavaScript 向 HTML 元 素 分 配 事件 : 


实例 
为 button 元 素 分 配 onclick 事件 : 


<script> 
document .getElementById("myBtn").onclick=function(){displayDate()}, 
</script> 


R00 BRI 
在 上 面 的 例子 中 ， 名 为 displayDate 的 函数 被 分 配给 了 id=myButn" 的 HTML 元 
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onload 和 onunload 事件 


4SAPRARBA RAN, BARR onload 和 onunload 事件 。 


onload 事件 可 用 于 检查 访客 的 浏览 器 类 型 和 版 本 ， 以 便 基 于 这 些 信息 来 加 载 不 同 版 
本 的 网 页 。 


onload 和 onunload 事件 可 用 于 处 理 cookies. 
实例 


<body onload="checkCookies()"> 


onchange 事件 


onchange 事件 常用 于 输入 字段 的 验证 。 


下 面 的 例子 展示 了 如 何 使 用 onchange。 当 用 户 改变 输入 字段 的 内 容 时 ， 将 调用 
upperCase() HX. 


实例 


<input type="text" id="fname" onchange="upperCase()"> 


onmouseover fll onmouseout 事件 


onmouseover #1] onmouseout 事件 可 用 于 在 鼠标 指针 移动 到 或 离开 元 素 时 触发 函 
数 。 


实例 


一 个 简单 的 onmouseover-onmouseout 例子 : 


«div style="background-color :#8AB83D;width:150px; height :60px; 
margin: 20px; padding-top: 20px;color:#ffffff;font-weight:bold; 
font-size:18px; text-align:center;" onmouseover="this.innerHTML=' t} 


«p class="tiy"><a target="_blank" href="/tiy/t.asp?f=dom_event_onmc 
</div> 
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onmousedown, onmouseup 以 及 onclick 事件 


onmousedown、onmouseup 以 及 onclick 事件 是 鼠标 点 击 的 全 部 过 程 。 首 先 当 某 
个 鼠标 按钮 被 点 击 时 ， 触 发 onmousedown 事件 ， 然 后 ， 当 她 标 按钮 被 松 开 时 ， 会 
触发 onmouseup 事件 ， 最 后 ， 当 最 标点 击 完 成 时 ， 触 发 onclick 事件 。 


实例 


一 个 简单 的 onmousedown-onmouseup 实例 : 


<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="backgr« 
margin: 20px; padding-top: 20px;color:#ffffff; font-weight :bold; 
font-size:18px;text-align:center; "25d ix H«/div» 


«script type="application/javascript"> 
es 
function mDown(obj) 


obj.style.backgroundColor="#1ec5e5"; 
obj . innerHTML="*AF S&H" 


} 


function mUp(obj ) 


{ 
obj.style.backgroundColor="#8AB83D"; 
obj . innerHTML=" jj" 


} 
//--> 
</script> 





HTML DOM 事件 对 象 参 考 手册 


如 需 每 个 事件 的 完整 描述 和 例子 ， 请 访问 我 们 的 HTML DOM 参考 手册 。 


HTML DOM - 导航 
通过 HTML DOM， 您 能 够 使 用 节点 关系 在 节点 树 中 导航 。 


HTML DOM 节点 列表 


getElementsByTagName() 方法 返回 节点 列表 。 节 点 列表 是 一 个 节点 数组 。 
下 面 的 代码 选取 文档 中 的 所 有 <p> 节点 : 


实例 


var x-document.getElementsByTagName("p"); 

可 以 通过 下 标号 访问 这 些 节 点 。 如 需 访问 第 二 个 <p>， 您 可 以 这 么 写 
y-x[1]; 

注释 : 下 标号 从 0 开始 。 


HTML DOM 节点 列表 长 度 


length 属性 定义 节点 列表 中 节点 的 数量 。 
您 可 以 使 用 length 属性 来 循环 节点 列表 : 


实例 


x-document.getElementsByTagName("p"); 


for (1=0;1i<x.length;it++) 


( 


document.write(x[i].innerHTML); 
document.write("«br /»"); 


j 


例子 解释 : 
e 获取 所 有 <p> ”元素 节点 


e 输出 每 个 <p> 元 素 的 文本 节点 的 值 


导航 节点 天 系 
您 能 够 使 用 三 个 节点 属性 : parentNode、firstChild 以 及 lastChild ， 在 文档 结构 中 
进行 导航 。 
请 看 下 面 的 HTML 片段 : 
<html> 


<body> 


<p>Hello World!</p> 
<div> 
<p>DOM 很 有 用 !</p> 
<p> 本 例 演示 节点 关系 。</p> 
</div> 


</body> 
</html> 


e ET <p> 元 素 是 «body» 元 素 的 首 个 子 元 素 (firstChild) 
e <div> RÆ «body» 元 素 的 最 后 一 个 子 元 素 (lastChild) 
e <body> 元 素 是 首 个 <p> 元 素 和 <div> 元 素 的 父 节点 (parentNode) 


firstChild 属性 可 用 于 访问 元 素 的 文本 : 

实例 
<html> 
<body> 
<p id="intro">Hello World!</p> 
<script> 
x-document.getElementById("intro"); 
document.write(x.firstChild.nodeValue); 


«/script» 


«/body» 
«/html» 


DOM {R} 5a 
这 里 有 两 个 特殊 的 属性 ， 可 以 访问 全 部 文档 : 


e document.documentElement - 全 部 文档 
e document.body - 文档 的 主体 


实例 


<html> 
<body> 


<p>Hello World!</p> 

<div> 

<p>DOM 很 有 用 !</p> 

<p> 本 例 演示 <b>document.body</b> 属性 。</p> 
</div> 


<script> 
alert(document.body.innerHTML); 
«/script» 


«/body» 
«/html» 


childNodes 和 nodeValue 


除了 innerHTML 属性 ， 您 也 可 以 使 用 childNodes 和 nodeValue 属性 来 获取 元 素 的 
内 容 。 


下 面 的 代码 获取 id="intro" 的 «p» 元 素 的 值 : 


实例 


a 


«html» 
«body» 


«p id="intro">Hello World!</p> 

<script> 

var txt-document.getElementById("intro").childNodes[0].nodeValue; 
document .write(txt); 

«/script» 


«/body» 
«/html» 


| 








在 上 面 的 例子 中 ，getElementByld 是 一 个 方法 ， 而 childNodes 和 nodeValue 是 属 


q 


o 


在 本 教程 中 ， 我 们 将 使 用 innerHTML 属性 。 不 过 ， 学 习 上 面 的 方法 有 助 于 对 DOM 
树 结构 和 导航 的 理解 。 


JavaScript HTML DOM EventListener 
addEventListener() 方法 


实例 
点 用 户 点 击 按钮 时 触发 监听 事件 : 


document.getElementById("myBtn").addEventListener("click", displayl 
is — B 





addEventListener() 方法 用 于 向 指定 元 素 添加 事件 句柄 。 

addEventListener() 方法 添加 的 事件 句柄 不 会 覆盖 已 存在 的 事件 句柄 。 

你 可 以 向 一 个 元 素 添 加 多 个 事件 句柄 。 

你 可 以 向 同 个 元 素 添 加 多 个 同类 型 的 事件 句柄 ， 如 : 两 个 "Click" 事件 。 

你 可 以 向 任何 DOM 对 象 添 加 事件 监听 ， 不 仅仅 是 HTML 元 素 。 如 : window 对 


o 


addEventListener() 方法 可 以 更 简单 的 控制 事件 〈 冒 泡 与 捕获 ) 。 


当 你 使 用 addEventListener() 方法 时 , JavaScript 从 HTML 标记 中 分 离开 来 ， 可 读 
性 更 强 ， 在 没有 控制 HTML 标 记 时 也 可 以 添加 事件 监听 。 


你 可 以 使 用 removeEventListener() 方法 来 移 除 事件 的 监听 。 


语法 

element.addEventListener(event, function, useCapture); 

第 一 个 参数 是 事件 的 类 型 (如 "click" 或 "mousedown"). 

第 二 个 参数 是 事件 触发 后 调用 的 函数 。 

第 三 个 参数 是 个 布尔 值 用 于 描述 事件 是 冒 泡 还 是 捕获 。 该 参数 是 可 选 的 。 





9 注意 :不 要 使 用 "on" 前 级。 例如 ， 使 用 "click" ,而 不 是 使 用 "onclick"。 


向 原 元 素 添 加 事件 句柄 


实例 
当 用 户 点 击 元 素 时 弹出 "Hello World!" : 


_element_.addEventListener("click", function(){ alert("Hello World 


«| ue 
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实例 
当 用 户 点 击 元 素 时 弹出 "Hello World!" : 


_element_.addEventListener("click", myFunction); 


function myFunction() { 
alert ("Hello World!"); 
} 


向 同一 个 元 素 中 添加 多 个 事件 句柄 


addEventListener() 方法 允许 向 同 个 元 素 添加 多 个 事件 ， 且 不 会 覆盖 已 存在 的 事 
ft : 


实例 


element .addEventListener("click", myFunction); 
element .addEventListener("click", mySecondFunction); 


你 可 以 向 同 个 元 素 添加 不 同类 类 “型 的 事件 : 
实例 
头 


element .addEventListener("mouseover", myFunction); 
.element .addEventListener("click", mySecondFunction); 
element .addEventListener("mouseout", myThirdFunction); 


向 Window 对 象 添 加 事件 句柄 


addEventListener() 方法 允许 你 在 HTML DOM 对 象 添 加 事件 监听 ， HTML DOM 
对 象 如 : HTML 元 素 , HTML 文档 , window 对 象 。 或 者 其 他 支出 的 事件 对 象 如 : 
xmlHttpRequest 对 象 。 


实例 
当 用 户 重 置 窗口 大 小 时 添加 事件 监听 : 


window.addEventListener("resize", function(){ 
document.getElementById("demo").innerHTML =  sometext ; 


"pud, HELM URB S SMO : 
实例 


_element_.addEventListener("click", function(){ myFunction(p1, p2), 
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事件 冒 泡 或 事件 捕获 ? 


事件 传递 有 两 种 方式 : 冒 泡 与 捕获 。 


事件 传递 定义 了 元 素 事件 触发 的 顺序 。 如 果 你 将 <p> 元 素 插 入 到 <div> 元 素 中 ， 
用 户 点 击 <p> 元 素 , 哪个 元 素 的 "cick" 事件 先 被 触发 呢 ? 


在 冒 泡 中 ， 内 部 元 素 的 事件 会 先 被 触发 ， 然 后 再 触发 外 部 元 素 ， 即 : <p> 元 素 的 
点 击 事件 先 触 发 ， 然 后 会 触发 «div» 元 素 的 点 击 事件 。 


在 捕获 中 ， 外 部 元 素 的 事件 会 先 被 触发 ， 然 后 才 会 触发 内 部 元 素 的 事件 ， 即 : 
<div> 元 素 的 点 击 事件 先 触发 ， 然 后 再 触发 «p» 元 素 的 点 击 事件 。 


addEventListener() 方法 可 以 指定 "useCapture" 参数 来 设置 传递 类 型 : 





addEventListener(event, function, useCapture); 


默认 值 为 false, 及 冒 泡 传递 ， 当 值 为 true 时 , 事件 使 用 捕获 传递 。 


实例 


document.getElementById("myDiv").addEventListener("click", myFunct: 
‘| — : 








removeEventListener() 方法 


removeEventListener() 方法 移 除 由 addEventListener() 方法 添加 的 事件 句柄 : 
实例 
as 

_element_.removeEventListener("mousemove", myFunction); 


浏览 器 文 持 
表格 中 的 数字 表示 支持 该 方法 的 第 一 个 浏览 器 的 版 本 号 。 


方法 
addEventListener() 1.0 9.0 1.0 1.0 7.0 
removeEventListener() 1.0 9.0 120 1.0 7.0 


注意 : IE 8 及 更 早 IE 版 本 ，Opera 7.0 及 其 更 早 版 本 不 支持 addEventListener() 和 
removeEventListener() 方法 。 但 是 ， 对 于 这 类 浏览 器 版 本 可 以 使 用 detachEvent() 
方法 来 移 除 事件 句柄 : 


element.attachEvent(event, function); 
element.detachEvent(event, function); 


实例 
跨 浏 览 器 解决 方法 : 


var x = document.getElementById("myBtn"); 


if (x.addEventListener) { // 所 有 主流 浏览 器 ， 除 了 I 
x.addEventListener("click", myFunction); 
} else if (x.attachEvent) { // IE 8 及 更 早 版 本 
x.attachEvent("onclick", myFunction); 
} 
«j ul — E 








HTML DOM 事件 对 象 参考 手册 
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所 有 HTML DOM 事件 ， 可 以 查看 我 们 完整 的 HTML DOM Event 对 象 参 考 手 册 。 
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AJAX 教程 


AJAX 简介 


AJAX 是 一 种 在 无 需 重 新 加 载 整个 网 页 的 情况 下 ， 能 够 更 新 部 分 网 页 的 技术 。 


您 应 当 有 具备 的 基础 知识 


在 继续 学 习 之 前 ， 您 需要 对 下 面 的 知识 有 基本 的 了 解 : 


e HTML/XHTML 
e CSS 
e JavaScript / DOM 


如 果 您 希望 首先 学 习 这 些 项 目 ， 请 在 我 们 的 首页 访问 这 些 教程 。 


什么 是 AJAX ? 


AJAX = 异步 JavaScript 和 XML. 
AJAX 是 一 种 用 于 创建 快速 动态 网 页 的 技术 。 


通过 在 后 台 和 与 服务 器 进行 少量 数据 交换 ，AJAX 可 以 使 网 页 实现 异步 更 新 。 这 意味 
着 可 以 在 不 重新 加 载 整个 网 页 的 情况 下 ， 对 网 页 的 某 部 分 进行 更 新 。 


传统 的 网 页 (不 使 用 AJAX) 如 果 需 要 更 新 内 容 ， 必 需 重 载 整个 网 页 面 。 
有 很 多 使 用 AJAX 的 应 用 程序 案例 : 新 浪 微 博 、Google 地 图 、 开 心 网 等 等 。 


Google Suggest 


在 2005 t£, Google 通过 其 Google Suggest 使 AJAX 变 得 流行 起 来 。 

Google Suggest 使 用 AJAX 创造 出 动态 性 极 强 的 web 界面 : 当 您 在 谷歌 的 搜索 框 
输入 关键 字 时 ，JavaScript 会 把 这 些 字符 发 送 到 服务 器 ， 然 后 服务 器 会 返回 一 个 搜 
索 建 议 的 列表 。 

SRM AEA AJAX 


AJAX 基于 已 有 的 标准 。 这 些 标准 已 被 大 多 数 开发 者 使 用 多 年 。 
请 阅读 下 一 章 ， 看 看 AJAX 是 如 何 工作 的 ! 


AJAX 实例 


e XHR 创建 对 象 
为 了 帮助 您 理解 AJAX 的 工作 原理 ， 我 们 创建 了 一 个 小 型 的 AJAX 应 用 程序 。 


实例 


«div id="myDiv"><p>AJAX is not a programming language.</p> 
<p>It is just a technique for creating better and more interactive 
«button type="button" onclick="loadXMLDoc()">iHit AJAX 改变 内 容 </buti 


a ee 





AJAX 实例 解释 


上 面 的 AJAX 应 用 程序 包含 一 个 div 和 一 个 按钮 。 


div 部 分 用 于 显示 来 自 服务 器 的 信息 。 当 按钮 被 点 击 时 ， 它 负责 调用 名 为 
loadXMLDoc() 的 函数 : 


<html> 
<body> 


<div id="myDiv"><h3>Let AJAX change this text</h3></div> 
«button type="button" onclick-"loadXMLDoc()"»Change Content</buttor 


</body> 
</html> 


EE E) 


接 下 来 ， 在 页 面 的 head 部 分 添加 一 个 <script> 标签 。 该 标签 中 包含 了 这 
loadXMLDoc() ERX : 





<head> 
<script type="text/javascript"> 
function loadXMLDoc( ) 


. AJAX script goes here ... 
j 


«/script» 
«/head» 


下 面 的 章节 会 为 您 讲解 AJAX 的 工作 原理 。 
e XHR 创建 对 象 


AJAX - 创建 XMLHttpRequest 对 象 


e XHR 请 求 
XMLHttpRequest 是 AJAX 的 基础 。 


XMLHttpRequest 对 象 


所 有 现代 浏览 器 均 支 持 XMLHttpRequest 对 象 (IE5 和 IES 使 用 
ActiveXObject) 。 


XMLHttpRequest 用 于 在 后 台 和 与 服务 器 交换 数据 。 这 意味 着 可 以 在 不 重新 加 载 整个 
网 页 的 情况 下 ， 对 网 页 的 某 部 分 进行 更 新 。 


创建 XMLHttpRequest 对 象 


所 有 现代 浏览 器 (IE7+、Firefox、Chrome、Safari 以 及 Opera) 均 内 建 
XMLHttpRequest 对 象 。 


创建 XMLHttpRequest 对 象 的 语法 : 


variable-new XMLHttpRequest(); 


老 版 本 的 Internet Explorer (IE5 #1 IE6) 使 用 ActiveX 对 象 : 


variable-new ActiveXObject("Microsoft.XMLHTTP"); 


为 了 应 对 所 有 的 现代 浏览 器 ， 包 括 IE5 和 IE6， 请 检查 浏览 器 是 否 支持 
XMLHttpRequest 对 象 。 如 果 支 持 ， 则 创建 XMLHttpRequest 对 象 。 如 果 不 支 持 ， 
则 创建 ActiveXObject : 


var xmlhttp; 
if (window. XMLHttpRequest ) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest (); 
} 
else 
{// code for IE6, IES 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 


在 下 一 章 中 ， 您 将 学 习 发 送 服务 器 请 求 的 知识 。 
e XHR 请 求 


AJAX - 加 服务 右 发 送 请 求 


e XHR 创建 对 象 


e XHR 响应 
XMLHttpRequest 对 象 用 于 和 服务 器 交换 数据 。 
向 服务 器 发 送 请 求 


如 需 籽 请 求 发 送 到 服务 器 ， 我 们 使 用 XMLHttpRequest 对 象 的 open() 和 send() 75 
法 : 


xmlhttp.open("GET", "test1.txt", true); 
xmlhttp.send(); 
方法 描述 


规定 请 求 的 类 型 、URL 以 及 是 否 异 步 处 理 请 求 。 
method : 请 求 的 类 型 ; GET 或 POST url : 文件 在 


open(method,urhasync) 服务 器 上 的 位 置 async : true (异步 ) 或 false ( 同 
步 ) 
send(string) 将 请 求 发 送 到 服务 器 。 string : 仅 用 于 POST 请 求 


GET it Æ POST? 


5 POST 相 比 ，GET 更 简单 也 更 快 ， 并 且 在 大 部 分 情况 下 都 能 
然而 ， 在 以 下 情况 中 ， 请 使 用 POST 请 求 : 
e 无 法 使 用 缓存 文件 〈 更 新 服务 器 上 的 文件 或 数据 库 ) 


e 向 服务 器 发 送 大 量 数据 (POST 没有 数据 量 限制 ) 
e 发 送 包含 未 知 字符 的 用 户 输入 时 ，POST 比 GET 更 稳定 也 更 可 靠 


GET 请 求 
一 个 简单 的 GET 请 求 : 


xmlhttp.open("GET", "demo_get.asp", true); 
xmlhttp.send(); 


在 上 面 的 例子 中 ， 您 可 能 得 至 | 的 是 缓存 的 结果 。 
为 了 避免 这 种 情况 ， 请 向 URL 添加 一 个 唯一 的 ID : 


xmlhttp.open("GET","demo get.asp?t-" + "Math.random() ,true); 
xmlhttp.send(); 


如 果 您 希望 通过 GET 方法 发 送信 息 ， 请 向 URL 添加 信息 : 


xmlhttp.open( "GET", "demo_get2.asp?fname=Bill&lname=Gates", true); 
xmlhttp.send(); 


POST 请 求 
一 个 简单 POST 请 求 : 


xmlhttp.open("POST","demo post.asp",true); 
xmlhttp.send(); 


如 果 需 要 像 HTML 表单 那样 POST 数据 , 请 青 使 用 setRequestHeader() 来 添加 
HTTP 头 。 然 后 在 send() 方法 中 规定 您 希望 发 送 的 数据 : 


xmlhttp.open("POST", "ajax_test.asp", true); 
xmlhttp.setRequestHeader ("Content-type", "application/x-www- form-ur- 
xmlhttp.send("fname-Bill&lname-Gates"); 
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方法 描述 


向 请 求 添加 HTTP 头 。 header: 规定 头 的 


setRequestHeader(header, value) 名 称 value: 规定 头 的 值 


url - B 4-38 E BSc 
open() 方法 的 url 参数 是 服务 器 上 文件 的 地 址 : 


xmlhttp.open("GET","ajax test.asp",true); 


该 文件 可 以 是 任何 类 型 的 文件 ， 比 如 txt 和 .xml， 或 者 服务 器 脚本 文件 ， 比 如 asp 
和 .php (在 传 回响 应 之 前 ， 能 够 在 服务 器 上 执行 任务 ) 。 


异步 - True = False ? 


AJAX 指 的 是 异步 JavaScript 和 XML (Asynchronous JavaScript and XML) 。 
XMLHttpRequest 对 象 如 果 要 用 于 AJAX 的 话 ， 其 open() 方法 的 async 参数 必须 
设置 为 true : 


xmlhttp.open("GET","ajax test.asp', true); 


对 于 web 开发 人 员 来 说 ， 发 送 异 步 请 求 是 一 个 巨大 的 进步 。 很 多 在 服务 器 执行 的 任 
务 都 相当 费时 。AJAX 出 现 之 前 ， 这 可 能 会 引起 应 用 程序 挂 起 或 停止。 


通过 AJAX, JavaScript 无 需 等 待 服务 器 的 响应 ， 而 是 : 


e. 在 等 待 服务 器 响应 时 执行 其 他 脚本 
e 当 响 应 就 绪 后 对 响应 进行 处 理 


Async = true 


当 使 用 async=true 时 ， 请 规定 在 响应 处 于 onreadystatechange 事件 中 的 就 绪 状 态 
时 执行 的 函数 : 


xmlhttp.onreadystatechange-function() 
{ 
if (xmlhttp.readyState--4 && xmlhttp.status--200) 


{ 
document.getElementById("myDiv").innerHTML-xmlhttp.responseText 


j 


xmlhttp.open("GET","testi.txt",true); 
xmlhttp.send(); 
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您 将 在 稍 后 的 章节 学 习 更 多 有 关 onreadystatechange 的 内 容 。 





Async = false 
如 需 使 用 async=false， 请 将 open() 方法 中 的 第 三 个 参数 改 为 false : 


xmlhttp.open("GET", "testi.txt", false); 


我 们 不 推荐 使 用 async=false， 但 是 对 于 一 些小 型 的 请 求 ， 也 是 可 以 的 。 


请 记 住 ，JavaScript 会 等 到 服务 器 响应 就 绪 才 继续 执行 。 如 果 服 务 器 繁忙 或 缓慢 ， 
应 用 程序 会 挂 起 或 停止。 


注释 : 当 您 使 用 async=false 时 ， 请 不 要 编写 onreadystatechange Hz - 把 代码 放 
到 send() 语句 后 面 即 可 : 


xmlhttp.open("GET", "testi.txt", false); 
xmlhttp.send(); 
document.getElementById("myDiv").innerHTML-xmlhttp.responseText; 


e XHR 创建 对 象 
e. XHR 响应 


AJAX - 服务 器 响应 


e XHR 请 求 
e XHR readyState 


服务 三 响应 


如 需 获 得 来 自 服务 器 的 响应 ， 请 使 用 XMLHttpRequest 对 象 的 responseText 或 
responseXML 属性 。 


属性 描述 
responseText 获得 字符 串 形式 的 响应 数据 。 
responseXML 获得 XML 形式 的 响应 数据 。 


responseText 属性 


如 果 来 自 服务 器 的 响应 并 非 XML， 请 使 用 responseText 属性 。 
responseText 属性 返回 字符 串 形 式 的 响应 ， 因 此 您 可 以 这 样 使 用 : 


document.getElementById("myDiv").innerHTML-xmlhttp.responseText; 


responseXML 属性 


如 果 来 自 服务 器 的 响应 是 XML， 而 且 需 要 作为 XML 对 象 进行 解析 ， 请 使 用 
responseXML 属性 : 


请 求 books.xml 文件 ， 并 解析 响应 : 


xmlDoc-xmlhttp.responseXML; 

text ee 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (1=0;1i<x.length;i++) 


txt=txt + x[i].childNodes[0].nodeValue + "<br />"; 
document .getElementById("myDiv").innerHTML=txt; 


e XHR 请 求 
e XHR readyState 
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AJAX - onreadystatechange 事件 


e XHR 响应 


onreadystatechange 事件 

当 请 求 被 发 送 到 服务 器 时 ， 我 们 需要 执行 一 些 基 于 响应 的 任务 。 

每 当 readyState 改变 时 ， 就 会 触发 onreadystatechange 事件 。 

readyState 属性 存 有 XMLHttpRequest 的 状态 信息 。 

Fi XMLHttpRequest 对 象 的 三 个 重要 的 属性 : 
属性 


Hit 
iE 


存储 函数 (RRMA), 4 
时 ， 就 会 调用 该 轿 数 。 


存 有 XMLHttpRequest 的 状态 。 从 0 到 4 发 生变 化 。 
readyState 0: 请 求 未 初始 化 1: 服务 器 连接 已 建立 2: 请 求 已 接收 3: 
请 求 处 理 中 4: 请 求 已 完成 ， 且 响应 已 就 绪 


status 200: "OK" 404: 未 找到 页 面 


IK 


onreadystatechange readyState 属性 改变 


在 onreadystatechange 事件 中 ， 我 们 规定 当 服 务 器 响应 已 做 好 被 处 理 的 准备 时 所 
执行 的 任务 。 


当 readyState 等 于 4 且 状 态 为 200 时 ， 表 示 响 应 已 就 绪 : 


xmlhttp.onreadystatechange-function() 
{ 
if (xmlhttp.readyState--4 && xmlhttp.status--200) 


document .getElementById("myDiv").innerHTML-xmlhttp.responseText 





注释 : onreadystatechange 事件 被 触发 5 次 (0-4) ， 对 应 着 readyState 的 每 个 
变化 。 


使 用 Callback 函数 


callback 函数 是 一 种 以 参数 形式 传递 给 另 一 个 加 数 的 函数 。 


如 果 您 的 网 站 上 存在 多 个 AJAX 任务 ， 那 么 您 应 该 为 创建 XMLHttpRequest 对 象 编 
写 一 个 标准 的 函数 ， 并 为 每 个 AJAX 任务 调用 该 函数 。 


该 回 数 调用 应 该 包含 URL. 以 及 发 生 onreadystatechange 事件 时 执行 的 任务 (每 次 
调用 可 能 不 尽 相同 ) 


function myFunction() 
loadXMLDoc("ajax_info.txt",function() 

{ 

if (xmlhttp.readyState--4 && xmlhttp.status--200) 


document.getElementById("myDiv").innerHTML-xmlhttp.responseText 





e. XHR 响应 


AJAX ASP/PHP 请 求实 例 


e XHR readyState 
AJAX 用 于 创造 动态 性 更 强 的 应 用 程序 。 


AJAX ASP/PHP 实例 


下 面 的 例子 将 为 您 演示 当 用 户 在 输入 框 中 键入 字符 时 ， 网 页 如 何 与 web 服务 器 进行 
通信 : 

<p> 请 在 下 面 的 输入 框 中 键入 字母 (A - Z) : </p> 

<form action="" style="margin-top:15px;"> 

姓氏 : <input id="txti" onkeyup="showHint(this.value)" type="text"> 


</form> 


<p> 建 议 : <span id="txtHint"></span></p> 
EE==== Se 4] 


实例 解释 - showHint() 函数 


当 用 户 在 上 面 的 输入 框 中 键入 字符 时 ， 会 执行 玫 数 "showHint()" 。 该 图 数 由 
"onkeyup" 事件 触发 : 


function showHint(str) 


{ 

var xmlhttp; 

if (str.length==0) 
{ 


document.getElementById("txtHint").innerHTML=""; 
return; 


if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 


} 


else 
{// code for IE6, IES 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 


} 


xmlhttp.onreadystatechange-function() 
{ 
if (xmlhttp.readyState--4 && xmlhttp.status--200) 


document.getElementById("txtHint").innerHTML-xmlhttp.responseTt 
j 


} 
xmlhttp.open("GET","gethint.asp?q="+str, true); 
xmlhttp.send(); 


— MÀ] 


源 代码 解释 : 


如 果 输 入 框 为 空 (strlength==0)， 则 该 函数 清空 txtHint 占 位 符 的 内 容 ， 并 退出 函 


o 





如 果 输 入 框 不 为 空 ，showHint() 函数 执行 以 下 任务 : 


创建 XMLHttpRequest 对 象 

当 服 务 器 响应 就 绪 时 执行 男 数 

把 请 求 发 送 到 服务 器 上 的 文件 

请 注意 我 们 向 URL 添加 了 一 个 参数 q 〈 带 有 输入 框 的 内 容 ) 


AJAX 服务 十 页 面 -ASP 和 PHP 


由 上 面 的 JavaScript 调用 的 服务 器 页 面 是 ASP 文件 ， 名 为 "gethint.asp"。 


下 面 ， 我 们 创建 了 两 个 版 本 的 服务 器 文件 ， 一 个 用 ASP 编写 ， 另 一 个 用 PHP 编 
F, 


ASP 文件 
"gethint.asp" 中 的 源 代码 会 检查 一 个 名 字数 组 ， 然 后 向 浏览 器 返回 相应 的 名 字 : 


<% 
response.expires=-1 
dim a(30) 

' 用 名 字 来 填充 数组 
a(1)-"Anna" 
a(2)-"Brittany" 
a(3)="Cinderella" 
a(4)="Diana" 


a(5)="Eva" 
a(6)="Fiona" 
a(7)="Gunda" 
a(8)="Hege" 
a(9)="Inga" 


a(10)="Johanna" 
a(11)-"Kitty" 
a(12)-"Linda" 
a(13)-z"Nina" 
a(14)-z"Ophelia" 
a(15)z'Petunia" 
a(16)-"Amanda" 
a(17)="Raquel" 
a(18)="Cindy" 
a(19)="Doris" 
a(20)="Eve" 
a(21)="Evita" 
a(22)="Sunniva" 


a(23)="Tove" 
a(24)="Unni" 
a(25)="Violet" 
a(26)="Liza" 


a(27)="Elizabeth" 
a(28)="Ellen" 
a(29)="Wenche" 
a(30)="Vicky" 


' 获得 来 自 URL 的 q 参数 
q=ucase(request.querystring("q")) 


MR oq AF 9， 则 查找 数组 中 的 所 有 提示 
if len(q)>0 then 
hint=" "n 
for i=1 to 30 
if q-ucase(mid(a(i),1,len(q))) then 
if hint="" then 
hint-a(i) 
else 
hint=hint & " , " & a(i) 


end if 
end if 
next 
end if 


' 如 果 未 找到 提示 ， 则 输出 "no suggestion" 
' 否则 输出 正确 的 值 
if hint="" then 

response.write("no suggestion" ) 
else 

response.write(hint ) 
end if 
%> 


PHP 文件 


下 面 的 代码 用 PHP 编写 ， 与 上 面 的 ASP 代码 作用 是 一 祥 的 。 


注释 : 如 需 在 PHP 中 运行 这 个 例子 ， 请 将 url 变量 的 值 (Javascript 代码 中 ) 由 
"gethint.asp" && 7; "gethint.php"。 


<?php 
// 用 名 字 来 填充 数组 
$a[]-"Anna"; 


$a[]-"Brittany"; 
$a[]-"cinderella"; 
$a[]-"Diana"; 
$a[]-"Eva"; 
$a[]-"Fiona"; 
$a[]-"Gunda"; 
$a[ ]="Hege"; 
$a[]-"Inga"; 
$a[]-"Johanna"; 
$a[]-"Kitty"; 
$a[]-"Linda"; 
$a[]-"Nina"; 
$a[]-"Ophelia"; 
$a[]-"Petunia"; 
$a[]-"Amanda"; 
$a[]-"Raquel"; 
$a[]-"cindy"; 
$a[]-"Doris"; 
$a[ ]-"Eve"; 
$a[]-"Evita"; 
$a[]-"Sunniva"; 
$a[ ]-"Tove"; 
$a[]-"Unni"; 
$a[]-"Violet"; 
$a[]-"Liza"; 
$a[]-"Elizabeth"; 


$a[]-"Ellen"; 
$a[ ]="Wenche"; 
$a[]-"Vicky"; 


// 获 得 来 自 URL 的 q 参数 
$q=$_GET["q"]; 


// 如 果 q AF 9， 则 查找 数组 中 的 所 有 提示 
if (strlen($q) > 0) 


{ 
$hint=""; 
for($i=0; $i<count($a); $i++) 


{ 
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q) ))) 
{ 
if ($hint=="") 
{ 
$hint-$a[$i]; 
} 
else 


i 
$hint-$hint." , ".$a[$i]; 
j 
j 
j 
} 


// 如 果 未 找到 提示 ， 则 把 输出 设置 为 "no suggestion" 
// 否则 设置 为 正确 的 值 
if ($hint == "") 
{ 
$response="no suggestion"; 
} 
else 
{ 
$response=$hint ; 


j 
// 输 出 响应 


echo $response; 
?> 


e XHR readyState 


AJAX 数据 库 实 例 


AJAX 可 用 来 与 数据 库 进行 动态 通信 。 


AJAX 数据 库 实 例 


下 面 的 例子 将 演示 网 页 如 何 通 过 AJAX 从 数据 库 读 取信 息 : 


<p> 请 在 下 面 的 下 拉 列 表 中 选择 一 个 客户 : </p> 


«form action="""style="margin-top:15px;"> 

<labe1l1> 请 选择 一 位 客户 : 

<select name="customers" onchange="showCustomer(this.value)" style: 
<option value="APPLE">Apple Computer, Inc.</option> 
<option value="BAIDU ">BAIDU, Inc</option> 

<option value="Canon">Canon USA, Inc.</option> 

<option value="Google">Google, Inc.</option> 

<option value="Nokia">Nokia Corporation</option> 

<option value="SONY">Sony Corporation of America</option> 
</select> 

</label> 

</form> 


«div id="txtHint" style="margin:15px © © 0;padding:0;border:0;colot 


s] (0 ES 





实例 解释 - showCustomer() 函数 


当 用 户 在 上 面 的 下 拉 列 表 中 选择 某 个 客户 时 ， 会 执行 名 为 "showCustomer()" WEE 
数 。 该 函数 由 "onchange" 事件 触发 : 


function showCustomer(str) 


{ 

var xmlhttp; 

if (str=="") 
{ 
document.getElementById("txtHint").innerHTML=""; 
return; 


if (window. XMLHttpRequest ) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest (); 


} 


else 
{// code for IE6, IES 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 


xmlhttp.onreadystatechange-function() 
{ 
if (xmlhttp.readyState--4 && xmlhttp.status--200) 


document.getElementById("txtHint").innerHTML-xmlhttp.responseTt 
j 
} 


xmlhttp.open("GET","getcustomer.asp?q="+str, true); 
xmlhttp.send(); 


IE | 
showCustomer() E323 3.47 EL FES : 


检查 是 否 已 选择 某 个 客户 

创建 XMLHttpRequest 对 象 

当 服 务 器 响应 就 绪 时 执行 所 创建 的 函数 

把 请 求 发 送 到 服务 器 上 的 文件 

请 注意 我 们 向 URL 添加 了 一 个 参数 q 《〈 带 有 输入 域 中 的 内 容 ) 





AJAX fk Fas n IH 


由 上 面 的 JavaScript 调用 的 服务 器 页 面 是 ASP xt, 4% "getcustomer.asp". 


用 PHP 编写 服务 器 文件 也 很 容易 ， 或 者 用 其 他 服务 器 语言 。 请 看 用 PHP 编写 的 相 
应 的 例子 。 


"getcustomer.asp" 中 的 源 代 码 负责 对 数据 库 进 行 查询 ， 然 后 用 HTML 表格 返回 结 
m. 


<% 

response.expires=-1 

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" 
sql=sql & "'" & request.querystring("q") & "'" 


set conn=Server.CreateObject("ADODB.Connection" ) 
conn.Provider="Microsoft.Jet.OLEDB.4.0" 
conn.Open(Server.Mappath("/db/northwind.mdb")) 
set rs-Server.CreateObject("ADODB.recordset") 
rs.Open sql, conn 


response.write("<table>") 
do until rs.EOF 
for each x in rs.Fields 
response.write("<tr><td><b>" & x.name & "</b></td>") 
response.write("«td»" & x.value & "</td></tr>") 
next 
rs.MoveNext 
loop 
response.write("</table>") 
%> 


AJAX XML 实例 


AJAX 可 用 来 与 XML 文件 进行 交互 式 通信 。 


AJAX XML 实例 
下 面 的 例子 将 演示 网 页 如 何 使 用 AJAX 来 读 取 来 自 XML 文件 的 信息 : 


«div id="txtCDInfo" style="margin:15px © © 0; border:0; padding:0;' 
«button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')" style: 
«/div» 


De s= = ose] 





实例 解释 - loadXMLDoc() HË 


当 用 户 点 击 上 面 的 “获得 CD 信息 ”这 个 按钮 ， 就 会 执行 loadXMLDoc() HX. 


loadXMLDoc() 函数 创建 XMLHttpRequest 对 象 ， 添 加 当 服 务 器 响应 就 绪 时 执行 的 
函数 ， 并 闻 请 求 发 送 到 服务 器 。 


当 服 务 器 响应 就 绪 时 ， 会 构建 一 个 HTML 表格 ， 从 XML 文件 中 提取 节点 (元 
素 ) ， 最 后 使 用 已 经 填充 了 XML 数据 的 HTML 表格 来 更 新 txtCDInfo 占 位 符 : 


function loadXMLDoc(url) 


t 
var xmlhttp; 
var txt;xx X iF 
if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IES 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 


xmlhttp.onreadystatechange-function() 
f 
if (xmlhttp.readyState--4 && xmlhttp.status--200) 


1 
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>", 
x=xmlLhttp.responsexXML.documentElement .getElementsByTagName("CD' 
for (i-0;i«x.length;i--) 

{ 

txt=txt + "<tr>": 

xx-x[i].getElementsByTagName("TITLE"); 


{ 
try 


{ 
txt-txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; 


} 


catch (er) 


txt=txt + "<td> </td>"; 
} 


xx-x[i].getElementsByTagName( ARTIST"); 


try 


{ 
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; 


catch (er) 
t 
txt=txt + "<td> </td>"; 
} 


txt=txt + "</tr>"; 


txt=txt + "</table>"; 
document .getElementById('txtCDInfo').innerHTML=txt; 
} 


} 
xmlhttp.open("GET",url,true); 


xmlhttp.send(); 





AJAX Hi Fas n E 


上 面 这 个 例子 中 使 用 的 服务 器 页 面 实际 上 是 一 个 XML 文件 ， 名 为 


"cd_catalog.xml"。 


W3School JavaScript 高 级 教程 


来 源 : JavaScript 高 级 教程 
整理 : 飞龙 


JavaScript 高 级 教程 


JavaScript 的 万 史 


为 了 发 挥 JavaScript 的 全 部 潜力 ， 了 解 它 的 本 质 、 历 史 及 局 限 性 是 十 分 重要 的 。 
本 节 为 您 讲解 JavaScript 和 客户 端 脚 本 的 起 源 。 


Nombas 和 ScriptEase 


大 概 在 1992 年 ， 一 家 称 作 Nombas 的 公司 开发 了 一 种 叫做 C 减 减 (C-minus- 
minus， 简 称 Cmm) WRA RHS. Cmm 背后 的 理念 很 简单 : 一 个 足够 强大 
可 以 替代 宏 操 作 (macro) 的 脚本 语言 ， 同 时 保持 与 C (AIC ++) 足够 的 相似 
性 ， 以 便 开发 人 员 能 很 快 学 会 。 这 个 脚本 语言 捆绑 在 一 个 叫做 CEnvi 的 共享 软件 
中 ， 它 首次 向 开发 人 员 展 示 了 这 种 语言 的 威力 。 


Nombas 最 终 把 Cmm 的 名 字 改 成 了 ScriptEase， 原 因 是 后 面 的 部 分 (mm) 听 起 
来 过 于 消极 ， 同 时 字母 C“ 倒 人 害怕 ”。 


现在 ScriptEase 已 经 成 为 了 Nombas 产品 背后 的 主要 驱动 力 。 


Netscape 发 明了 JavaScript 


当 Netscape Navigator #22: fant, Nombas 开发 了 一 个 可 以 秦 入 网 页 中 的 CEnvi 
的 版 本 。 这 些 早期 的 试验 被 称 为 Espresso Page (党 咖啡 般 的 页 面 ) ， 它 们 代表 了 
第 一 个 在 万 维 网 上 使 用 的 客户 端 语 言 。 而 Nombas 丝毫 没有 料 到 它 的 理念 将 会 成 为 
万 维 网 的 一 块 重要 基石 。 


当 网 上 冲浪 越 来 越 流 行 时 ， 对 于 开发 客户 端 脚本 的 需求 也 逐渐 增 大 。 此 时 ， 大 部 分 
因特网 用 户 还 仅仅 通过 28.8 kbit/s 的 调制 解 调 器 连接 到 网 络 ， 即 便 这 时 网 页 已 经 不 
断 地 变 得 更 大 和 更 复杂 。 而 更 加 加 剧 用 户 痛苦 的 是 ， 仅 仅 为 了 简单 的 表单 有 效 性 验 
证 ， 就 要 与 服务 器 进行 多 次 地 往返 交互 。 设 想 一 下 ， 用 户 填 完 一 个 表单 ， 点 击 提交 
Ha, FFT 30 秒 的 义理 后 ， 看 到 的 却 是 一 条 告诉 你 忘记 填写 一 个 必要 的 字段 。 


那 时 正 处 于 技术 革新 最 前 治 的 Netscape， 开 始 认 真 考虑 开发 一 种 客户 端 脚本 语言 
来 解决 简单 的 处 理 问题 。 


当时 工作 于 Netscape 的 Brendan Eich, FAF A EISE 1995 年 发 行 的 
Netscape Navigator 2.0 开发 一 个 称 之 为 LiveScript 的 脚本 语言 ， 当 时 的 目的 是 在 
浏览 器 和 服务 器 (本 来 要 叫 它 LiveWire) 端 使 用 它 。Netscape 5 Sun 及 时 完成 
LiveScript 实现 。 

就 在 Netscape Navigator 2.0 即将 正式 发 布 前 ，Netscape 将 其 更 名 为 

JavaScript， 目 的 是 为 了 利用 Java 3x S$ At iq ic. Netscape 的 赌注 最 终 得 
到 回报 ，JavaScript 从 此 变 成 了 因特网 的 必 备 组 件 。 


ZERU 


因为 JavaScript 1.0 如 此 成 功 ，Netscape 在 Netscape Navigator 3.0 rh Z fp f. 1.1 
版 。 恰 巧 那 个 时 候 ， 微 软 决定 进军 浏览 器 ， 发 布 了 IE 3.0 并 搭载 了 一 个 JavaScript 
的 克隆 版 ， 叫 做 JScript (这 样 命名 是 为 了 避免 与 Netscape 潜在 的 许可 纠纷 ) 。 微 
软 步 人 Web 浏览 器 领域 的 这 重要 一 步 虽 然 令 其 声名 狼藉 ， 但 也 成 为 JavaScript 语 
言 发 展 过 程 中 的 重要 一 步 。 

在 微软 进入 后 ， 有 3 种 不 同 的 JavaScript 版 本 同时 存在 : Netscape Navigator 3.0 


中 的 JavaScript, IE 中 的 JScript 以 及 CEnvi 中 的 ScriptEase。 与 C 和 其 他 编程 语 
言 不 同 的 是 ，JavaScript 并 没有 一 个 标准 来 统一 其 语法 或 特性 ， 而 这 3 种 不 同 的 版 


本 恰恰 突出 了 这 个 问题 。 随 着 业界 担心 的 增加 ， 这 个 语言 的 标准 化 显然 已 经 势 在 必 
行 。 
标准 化 


1997 年 ，JavaScript 1.1 作为 一 个 草案 提交 给 欧洲 计算 机 制造 商 协 会 (ECMA) 。 
第 39 技术 委员 会 (TC39) 被 委派 来 “标准 化 一 个 通用 、 跨 平台 、 中 立 于 厂商 的 脚 
本 语言 的 语法 和 语义 ”(http://www.ecma-international.org/memento/TC39.htm)。 由 
来 自 Netscape、Sun、 微 软 、Borland 和 其 他 一 些 对 脚本 编程 感 兴趣 的 公司 的 程序 
员 组 成 的 TC39 锤炼 出 了 ECMA-262， 该 标准 定义 了 名 为 ECMAScript 的 全 新 脚本 
Ao 

在 接 下 来 的 几 年 里 ， 国 际 标准 化 组 织 及 国际 电工 委员 会 (ISO/IEC) 也 采纳 
ECMAScript 作为 标准 (ISO/IEC-16262) 。 从 此 ，Web 浏览 器 就 开始 努力 (虽然 
有 着 不 同 的 程度 的 成 功 和 失败 ) 将 ECMAScript 作为 JavaScript 实现 的 基础 。 


JavaScript 实现 


JavaScript 的 核心 ECMAScript 描述 了 该 语言 的 语法 和 基本 对 象 ; 
DOM 描述 了 处 理 网 页 内 容 的 方法 和 接口 ; 
BOM 描述 了 与 浏览 器 进行 交互 的 方法 和 接口 。 


ECMAScript、DOM 和 BOM 


尽管 ECMAScript 是 一 个 重要 的 标准 ， 但 它 并 不 是 JavaScript 唯一 的 部 分 ， 当 然 ， 
也 不 是 唯一 被 标准 化 的 部 分 。 实 际 上 ， 一 个 完整 的 JavaScript 实现 是 由 以 下 3 个 不 
同 部 分 组 成 的 : 


e 核心 (ECMAScript) 
e 文档 对 象 模型 (DOM) 
e 浏览 器 对 象 模型 (BOM) 


JavaScript 
ECMAScript 


ECMAScript 并 不 与 任何 具体 浏览 器 相 绑 定 ， 实 际 上 ， 它 也 没有 提 到 用 于 任何 用 户 
输入 输出 的 方法 (这 点 与 C 这 类 语言 不 同 ， 它 需要 依赖 外 部 的 库 来 完成 这 类 任 
务 ) 。 那 么 什么 地 是 ECMAScript Ye ?ECMA-262 标准 (第 2 段 ) 的 描述 如 下 : 


“ECMAScript 可 以 为 不 同 种 类 的 宿主 环境 提供 核心 的 脚本 编程 能 力 ， 因 此 核心 
的 脚本 语言 是 与 任何 特定 的 宿主 环境 分 开 进 行规 定 的 .… ..." 


Web 浏览 器 对 于 ECMAScript 来 说 是 一 个 宿主 环境 ， 但 它 并 不 是 唯一 的 宿主 环境 。 
事实 上 ， 还 有 不 计 其 数 的 其 他 各 种 环境 (例如 Nombas 的 ScriptEase， 以 及 
Macromedia 同时 用 在 Flash 和 Director MX 中 的 ActionScript) 可 以 容纳 
ECMAScript 实现 。 那 么 ECMAScript 在 浏览 器 之 外 规定 了 些 什么 呢 ? 
简单 地 说 ，ECMAScript 描述 了 以 下 内 容 : 

e 语法 

e 类 型 

e 语句 


e 关键 字 


。 保留 字 
e 运算 符 
e 对 象 


ECMAScript 仅仅 是 一 个 描述 ， 定 义 了 脚本 语言 的 所 有 属性 、 方 法 和 对 象 。 其 他 语 
言 可 以 实现 ECMAScript 来 作为 功能 的 基准 ，JavaScript 就 是 这 样 : 


ECMAScript 


JavaScript Actions cript ScriptEase 


每 个 浏览 器 都 有 它 自己 的 ECMAScript 接口 的 实现 ， 然 后 这 个 实现 又 被 扩展 ， 包 含 
了 DOM 和 BOM (在 以 下 几 节 中 再 探讨 ) 。 当 然 还 有 其 他 实现 并 扩展 了 
ECMAScript 的 语言 ， 例 如 Windows 脚本 宿主 (Windows Scripting Host, 

WSH) 、Macromedia 在 Flash 和 Director MX 中 的 ActionScript， 以 及 Nombas 
ScriptEase。 


1. ECMAScript 的 版 本 


ECMAScript 分 成 几 个 不 同 的 版 本 ， 它 是 在 一 个 叫做 ECMA-262 的 标准 中 定义 的 。 
和 其 他 标准 一 样 ，ECMA-262 会 被 编辑 和 更 新 。 当 有 了 主要 更 新 时 ， 就 会 发 布 一 个 
标准 的 新 版 。 最 新 ECMA-262 的 版 本 是 5.1， 于 2011 年 6 月 发 布 。 


ECMA-262 的 第 一 版 在 本 质 上 与 Netscape 的 JavaScript 1.1 是 一 样 ， 只 是 把 所 有 
与 浏览 器 相关 的 代码 删除 了 ， 此 外 还 有 一 些小 的 调整 。 首 先 ，ECMA-262 要 求 对 
Unicode 标准 的 支持 〈 以 便 支 持 多 语言 ) 。 第 二 ， 它 要 求 对 象 是 平台 无 关 的 

(Netscape 的 JavaScript 1.1 事实 上 有 不 同 的 对 象 实现 ， 例 如 Date 对 象 ， 是 依赖 
于 平台 ) 。 这 是 JavaScript 1.1 和 1.2 为 什么 不 符合 ECMA-262 规范 第 一 版 的 主要 
原因 。 


ECMA-262 的 第 二 版 大 部 分 更 新 本 质 上 是 编辑 性 的 。 这 次 标准 的 更 新 是 为 了 与 
ISO/IEC-16262 的 严格 一 致 ， 也 并 没有 特别 添加 、 更 改 和 删除 内 容 。ECMAScript 
一 般 不 会 遵守 第 二 版 。 


ECMA-262 第 三 版 是 该 标准 第 一 次 真正 的 更 新 。 它 提供 了 对 字符 串 处 理 、 错 误 定义 
和 数值 输出 的 更 新 。 同 时 ， 它 还 增加 了 正则 表达 式 、 新 的 控制 语句 、try...catch & 
常 处 理 的 支持 ， 以 及 一 些 为 使 标准 国际 化 而 做 的 小 改动 。 一 般 来 说 ， 它 标志 着 
ECMAScript 成 为 一 种 真正 的 编程 语言 。 


2. 何谓 ECMAScript 符合 性 


在 ECMA-262 中 ，ECMAScript 符合 性 (conformance) 有 明确 的 定义 。 一 个 脚本 
语 襄 必须 满足 以 下 四 项 基本 原则 : 


e 符合 的 实现 必须 按照 ECMA-262 中 所 描述 的 支持 所 有 的 “类 型 、 值 、 对 象 、 属 
性 、 画 数 和 程序 语言 及 语义 ”(ECMA-262， 第 一 页 ) 

e 符合 的 实现 必须 支持 Unicode 字符 标准 (UCS) 

e 符合 的 实现 可 以 增加 没有 在 ECMA-262 中 指定 的 “额外 类 型 、 值 、 对 象 、 属 性 


PEER”, ECMA-262 将 这 些 增加 摘 述 为 规范 中 未 给 定 的 新 对 象 或 对 象 的 新 属 
n 


e 符合 的 实现 可 以 支持 没有 在 ECMA-262 中 定义 的 “程序 和 正则 表达 式 语法 ”( 意 
思 是 可 以 替换 或 者 扩展 内 建 的 正则 表达 式 支 持 ) 


所 有 ECMAScript 实现 必须 符合 以 上 标准 。 


3. Web 浏览 器 中 的 ECMAScript 支持 


含有 JavaScript 1.1 的 Netscape Navigator 3.0 在 1996 FR. Am, JavaScript 
1.1 规范 被 作为 一 个 新 标准 的 草案 被 提交 给 EMCA。 有 了 JavaScript & ap ERSTE 
行 ，Netscape 十 分 高 兴 地 开始 开发 1.2 版 。 但 有 一 个 问题 ，ECMA 并 未 接受 
Netscape 的 草案 。 在 Netscape Navigator 3.0 发 布 后 不 久 ， 微 软 就 发 布 了 IE 3.0。 
该 版 本 的 IE 含有 JScript 1.0 (微软 自己 的 JavaScript 实现 的 名 称 ) ， 原 本 计划 可 
以 与 JavaScript 1.1 相提并论 。 然 后 ， 由 于 文档 不 全 以 及 一 些 不 当 的 重复 特性 ， 
JScript 1.0 远 远 没有 达到 JavaScript 1.1 的 水 平 。 


在 ECMA-262 第 一 版 定稿 之 前 ， 发 布 含 有 JavaScript 1.2 的 Netscape Navigator 
4.0 是 在 1997 年 ， 在 那 年 晚 些 时 候 ，ECMA-262 标准 被 接受 并 标准 化 。 因 此 ， 
JavaScript 1.2 并 不 和 ECMAScript 的 第 一 版 兼容 ， 虽 然 ECMAScript 应 该 基于 
JavaScript 1.1. 


JScript 的 下 一 步 是 IE 4.0 中 加 入 的 JScript 3.0 (2.0 版 是 随 IIS 3.0 一 起 发 布 的 ， 
但 并 未 包含 在 浏览 器 中 ) 。 微 软 大 力 宣 传 JScript 3.0 是 世界 上 第 一 个 真正 符合 
ECMA 标准 的 脚本 语言 Fio 而 那 时 ， ECMA-262 还 没有 最 终 定稿 ， 所 以 JScript 3.0 
也 遭受 了 和 JavaScript 1.2 同样 的 命运 - 它 还 是 没 能 符合 最 终 的 ECMAScript 标 
准 。 

Netscape 选择 在 Netscape Navigator 4.06 中 升级 它 的 JavaScript 实现 。 
JavaScript 1.3 使 Netscape 终于 完全 符合 了 ECMAScript 第 一 版 。Netscape 加 入 


了 对 Unicode 标准 的 支持 ， 并 让 所 有 的 对 象 保留 了 在 JavaScript 1.2 中 引入 的 新 特 
性 的 同时 实现 了 平台 独立 。 


当 Netscape 将 它 的 源 代码 作为 Mozilla 项 目 公布 于 众 时 ， 本 来 计划 JavaScript 1.4 
FEBR AZ! Netscape Navigator 5.0 中 。 然 而 ， 一 个 冒进 的 决定 - 要 完全 从 头 重新 
设计 Netscape 的 代码 ， 破 坏 了 这 个 工作 。 eet .4 仅仅 作为 一 个 Netscape 
Enterprise Server 的 服务 器 端 脚本 话 言 发 布 ， 以 后 也 没有 被 放 和 人 浏 "m 


如 今 ， 所 有 主流 的 Web 浏览 器 都 遵守 ECMA-262 第 三 版 。 
下 面 的 表格 列 出 了 大 部 分 流行 的 Web 浏览 器 中 的 ECMAScript 支持 : 


DEAE DOM 兼容 性 
Netscape Navigator 2.0 - 
Netscape Navigator 3.0 - 
Netscape Navigator 4.0 - 4.05 - 
Netscape Navigator 4.06 - 4.79 Edition 1 
Netscape 6.0+ (Mozilla 0.6.0+) Edition 3 
Internet Explorer 3.0 - 


Internet Explorer 4.0 5 


Internet Explorer 5.0 Edition 1 

Internet Explorer 5.5+ Edition 3 

Opera 6.0 - 7.1 Edition 2 

Opera 7.2+ Edition 3 

Safari 1.0+/Konqueror ~ 2.0+ Edition 3 
DOM 


DOM (文档 对 象 模型 ) 是 HTML 和 XML 的 点 用 程序 接口 (API) , DOM 将 把 整个 
页 面 规划 成 由 节点 层级 构成 的 文档 。HTML 或 XML 页 面 的 每 个 部 分 都 是 一 个 节点 
的 衍生 物 。 请 考虑 下 面 的 HTML 页 面 : 


«html» 
«head» 
<title>Sample Page</title> 
</head> 
<body> 
<p>hello world!</p> 
</body> 
</html> 


这 段 代 码 可 以 用 DOM 绘制 成 一 个 节点 层次 图 : 






Sample Page 


Hello World! 


DOM 通过 创建 树 来 表示 文档 ， 从 而 使 开发 者 对 文档 的 内 容 和 结构 具有 空前 的 控制 
力 。 用 DOM API 可 以 轻松 地 删除 、 添 加 和 替换 节点 。 


1. 为 什么 DOM 必 不 可 少 


自从 IE 4.0 和 Netscape Navigator 4.0 开始 支持 不 同形 态 的 动态 

HTML (DHTML) ， 开 发 者 首次 能 够 在 不 重 载 网 页 的 情况 下 修改 它 的 外 观 和 内 容 。 
这 是 Web 技术 的 一 大 飞跃 ， 不 过 也 带 来 了 巨大 的 问题 。Netscape 和 微软 各 自 开发 
自己 的 DHTML， 从 而 结束 了 Web 开发 者 只 编写 一 个 HTML 页 面 就 可 以 在 所 有 浏 
览 器 中 访问 的 时 期 。 


业界 决定 必须 要 做 点 什么 以 保持 Web 的 跨 平 台 特 性 ， 他 们 担心 如 果 放 任 Netscape 
和 微软 公司 这 样 做 ，Web 必 将 分 化 为 两 个 独立 的 部 分 ， 每 一 部 分 只 适用 于 特定 的 浏 
览 器 。 因 此 ， 负 责 指 定 Web 通信 标准 的 团体 W3C (World Wide Web 
Consortium) 就 开始 制定 DOM。 


2. DOM 的 各 个 level 


DOM Level 1 是 W3C 于 1998 年 10 月 提出 的 。 它 由 两 个 模块 组 成 ， 即 DOM Core 
和 DOM HTML。 前 者 提供 了 基于 XML 的 文档 的 结构 图 ， 以 便 访 问 和 操作 文档 的 任 
意 部 分 ; 后 者 添加 了 一 些 HTML 专用 的 对 象 和 方法 ， 从 而 扩展 了 DOM Core。 


注意 ，DOM 不 是 JavaScript 专 有 的 ， 事 实 上 许多 其 他 话 言 都 实现 了 它 。 不 过 ， 
Web 浏览 器 中 的 DOM 已 经 用 ECMAScript 实现 了 ， 现 在 是 JavaScript 语言 的 一 
个 很 大 组 成 部 分 。 


DOM Level 1 只 是 一 个 目标 ， 即 规划 文档 的 结构 ，DOM Level 2 的 目标 就 广泛 多 
了 。 对 原始 DOM 的 扩展 添加 了 对 鼠标 和 用 户 界 面 事件 (DHTML 对 此 有 丰富 的 支 
持 ) . SER. 34/5 (重复 执行 DOM 文档 的 方法 ) 的 支持 ， 并 通过 对 象 接 口 添加 了 
xt CSS (ARAR) 的 支持 。 由 Level 1 引入 的 原始 DOM Core 也 加 入 了 对 
XML 命名 空间 的 支持 。 


DOM Level 2 引入 了 几 种 DOM 新 模块 ， 用 于 义理 新 的 接口 类 型 : 


e DOM 视图 - 描述 跟踪 文档 的 各 种 视图 (BI CSS 样式 化 之 前 和 CSS 样式 化 之 
后 的 文档 ) 

e DOM 事件 - 描述 事件 的 接口 

e DOM 样式 - 描述 义理 基于 CSS 样式 的 接口 

e DOM 通 万 和 范围 - 描述 通 万 和 操作 文档 树 的 接口 


DOM Level 3 引入 了 以 统一 的 方式 载 人 和 保持 文档 的 方法 〈 包 含 在 新 模块 DOM 
Load and Save) 以 及 验证 文档 (DOM Validation) 的 方法 ， 从 而 进一步 扩展 了 
DOM。 在 Level 3 中 ，DOM Core 被 扩展 为 支持 所 有 的 XML 1.0 特性 ， 包 括 XML 
Infoset、XPath 和 XML Base。 


在 学 习 DOM 时 ， 可 能 会 遇 到 有 人 引用 DOM Level 0。 注 意 ， 根 本 没有 DOM Level 
0 这 个 标准 ， 它 只 是 DOM 的 一 个 历史 参考 点 (DOM Level 0 指 的 是 IE 4.0 和 
Netscape Navigator 4.0 中 支持 的 原始 DHTML) 。 


3. 其 他 DOM 


除了 DOM Core 和 DOM HTML 外 ， 还 有 其 他 几 种 语言 发 布 了 自己 的 DOM 标准 。 
这 些 语言 都 是 基于 XML 的 ， 每 种 DOM 都 给 对 应 语言 添加 了 特有 的 方法 和 接口 : 


e 可 缩放 矢量 语言 (SVG) 1.0 
e 数字 标记 语言 (MathML) 1.0 
e 同步 多 媒体 集成 语言 (SMIL) 


注释 : 如 果 希 望 学 习 更 多 相关 内 容 ， 请 访问 w3school 的 SMIL 教程 和 SVG 教 
程 。 


此 外 ， oe cL 自己 的 DOM Ea, 3I Mozilla 的 XML 用 户 界 面 语言 
(XUL) 。 不 过 ， 只 有 上 面 列 出 的 几 种 语言 是 W3C 的 推荐 标准 。 


4. Web 浏览 器 中 的 DOM 支持 


DOM 在 被 Web 浏览 器 开始 实现 之 前 就 已 经 是 一 种 标准 了 。1|E 首次 尝试 DOM 是 在 
5.0 版 本 中 ， 不 过 其 实 直到 5.5 版 本 之 后 才 具 有 真正 的 DOM 支持 ，IE 5.5 实现 了 
DOM Level 1。 从 那 时 起 ，IE 就 没有 引入 新 的 DOM 功能 。 


Netscape 直到 Netscape 6 (Mozilla 0.6.0) 才 引 入 DOM 支持 。 目 前 ，Mozilla E 
有 最 好 的 DOM 支持 ， 实 现 了 完整 的 Level 1、 几 乎 所 有 Level 2 以 及 一 部 分 Level 
3, (Mozilla 开发 小 组 的 目标 是 构造 一 个 与 标准 100% 兼容 的 浏览 器 ， 他 们 的 工作 
得 到 了 回报 。 ) 


Opera 直到 7.0 版 本 才 加 入 DOM 支持 ， 还 有 Safari 也 实现 了 大 部 分 DOM Level 
1。 它 们 几乎 都 与 IE 5.5 处 于 同一 水 平 ， 有 些 情况 下 ， 其 至 超过 了 IE 5.5。 不 过 ， 
就 对 DOM 的 支持 而 论 ， 所 有 浏览 器 都 远 远 落后 于 Mozilla。 下 表 列 出 了 常用 浏览 器 
对 DOM 的 支持 。 


浏览 器 DOM 兼容 性 
Netscape Navigator 1.0 - 4.x - 
Netscape 6.0+ (Mozilla 0.6.0+) Level 1, Level 2, Level 3 (部 分 ) 
IE 2.0 - 4.X - 


IE: 5:0 Level 1 〈 最 小 ) 

IE 5.5+ Level 1 〈 几 乎 全 部 ) 

Opera 1.0 - 6.0 - 

Opera 7.0+ Level 1 (几乎 全 部 ) . Level 2 (8823) 
Safari 1.0+/Konqueror ~ 2.0+ Level 1 


注释 : 如 果 希 望 进 一 步 地 学 习 DOM 的 知识 ， 请 访问 w3school 的 HTML DOM 2X 
程 和 XML DOM 教程 。 


BOM 


IE 3.0 和 Netscape Navigator 3.0 提供 了 一 种 特性 -BOM (浏览 器 对 象 模型 ) ， 可 
以 对 浏览 器 窗口 进行 访问 和 操作 。 使 用 BOM， 开 发 者 可 以 移动 窗口 、 改 变 状 态 栏 

中 的 文本 以 及 执行 其 他 与 页 面 内 容 不 直接 相关 的 动作 。 使 BOM 独树一帜 且 又 常常 
邻 人 怀疑 的 地 方 在 于 ， 它 只 是 JavaScript 的 一 个 部 分 ， 没 有 任何 相关 的 标准 。 


BOM 主要 人 处理 浏览 器 窗口 和 框架 ， 不 过 通常 浏览 器 特定 的 JavaScript 扩展 都 被 看 
做 BOM 的 一 部 分 。 这 些 扩展 包括 : 


弹出 新 的 浏览 器 窗口 

移动 、 关 闭 浏 览 器 窗口 以 及 调整 窗口 大 小 

提供 Web 浏览 器 详细 信息 的 定位 对 象 

提供 用 户 屏幕 分 辩 率 详细 信息 的 屏幕 对 象 

对 cookie 的 支持 

IE 扩展 了 BOM， 加 入 了 ActiveXObject 类 ， 可 以 通过 JavaScript 实例 化 
ActiveX 对 象 


由 于 没有 相关 的 BOM 标准 ， 每 种 浏览 器 都 有 自己 的 BOM 实现 。 有 一 些 事实 上 的 
标准 ， 如 具有 一 个 窗口 对 象 和 一 个 导航 对 象 ， 不 过 每 种 浏览 器 可 以 为 这 些 对 象 或 其 
他 对 象 定义 自己 的 属性 和 方法 。 


参阅 : 


e Window 对 象 
Navigator 对 象 
Screen 对 象 
History 对 象 
Location 对 象 
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ECMAScript 语法 
熟悉 Java, C 和 Perl 这 些 语言 的 开发 者 会 发 现 ECMAScript 的 语法 很 容易 掌握 ， 
因为 它 借 用 了 这 些 语言 的 语法 。 


Java 和 ECMAScript 有 一 些 关键 的 语法 特性 相同 ， 也 有 一 些 完全 不 同 。 


区 分 大 小 写 

与 Java 一样， 变量 、 画 数 名 、 运 算 符 以 及 其 他 一 切 东 西 都 是 区 分 大 小 写 的 。 
比如 : 

变量 test 与 变量 TEST 是 不 同 的 。 


变量 是 弱 类 型 的 

与 Java 和 C 不 同 ，ECMAScript 中 的 变量 无 特定 的 类 型 ， 定 义 变 量 时 只 用 var 运 
算 符 ， 可 以 将 它 初始 化 为 任意 值 。 

因此 ， 可 以 随时 改变 变量 所 存 数据 的 类 型 (尽量 避免 这 样 做 ) 。 


例子 


var color = "red"; 
var num = 25; 
var visible = true; 


每 行 结尾 的 分 号 可 有 可 无 

Java, C 和 Perl 都 要 求 每 行 代码 以 分 号 (;) 结束 才 符 合 语法 。 

ECMAScript 则 允许 开发 者 自行 决定 是 否 以 分 号 结束 一 行 代码 。 如 果 没 有 分 号 ， 
ECMAScript 就 把 折 行 代码 的 结尾 看 做 该 语句 的 结尾 (4 Visual Basic #1 VBScript 
相似 ) ， 前 提 是 这 样 没有 破坏 代码 的 语义 。 

最 好 的 代码 编写 习惯 是 总 加 入 分 号 ， 因 为 没有 分 号 ， 有 些 浏览 器 就 不 能 正确 运行 ， 
不 过 根据 ECMAScript 标准 ， 下 面 两 行 代码 都 是 正确 的 : 


n red" 
"blue"; 


var testi 
var test2 


注释 与 Java, C 和 PHP 语言 的 注释 相同 
ECMAScript 借用 了 这 些 语言 的 注释 语法 。 
有 两 种 类 型 的 注释 : 
e 单行 注释 以 双 斜 杠 开 头 /) 
e 多 行 注 释 以 单 斜 枉 和 星 号 开头 0) ， 以 星 号 和 单 斜 杠 结尾 (/) 
//this is a single-line comment 


/*this is a multi- 
line comment*/ 


括号 表示 代码 块 


M Java 中 借鉴 的 另 一 个 概念 是 代码 块 。 


P p E s 吾 句 ， 这 些 语句 被 封装 在 左 括号 (D 和 右 括号 
) 之 间 。 


例如 : 
if (test1 == "red") { 


testi = "blue"; 
alert(test1); 


ECMAScript % = 


请 使 用 var 运算 符 声明 变量 。 


变量 名 需要 遵守 一 些 简 单 的 规则 。 


声明 变量 


在 上 一 节 中 我 们 讲解 过 ，ECMAScript 中 的 变量 是 用 var 运算 符 (variable 的 缩 
写 ) 加 变量 名 定义 的 。 例 如 : 


var test = "hi"; 


在 这 个 例子 中 ， 声 明了 变量 test， 并 把 它 的 值 初 始 化 为 "hi" (FAR). AF 
ECMAScript 是 弱 类 型 的 ， 所 以 解释 程序 会 为 test 自动 创建 一 个 字符 串 值 ， 无 需 明 
确 的 类 型 声明 。 


还 可 以 用 一 个 var 语句 定义 两 个 或 多 个 变量 : 


var testi = "hi", test2 = "hello"; 


前 面 的 代码 定义 了 变量 test1， 初 始 值 为 "hi"， 还 定义 了 变量 test2， 初 始 值 为 
"hello"。 


不 过 用 同一 个 var 语句 定义 的 变量 不 必 具 有 相同 的 类 型 ， 如 下 所 示 : 


var test = "hi", age = 25; 


这 个 例子 除了 (再 次 ) 定义 test 外 ， 还 定义 了 age， 并 把 它 初 始 化 为 25。 即 使 test 
和 age 属于 两 种 不 同 的 数据 类 型 ， 在 ECMAScript 中 这 样 定义 也 是 完全 合法 的 。 


5 Java 不 同 ，ECMAScript 中 的 变量 并 不 一 定 要 初始 化 〈 它 们 是 在 幕后 初始 化 的 ， 
将 在 后 面 讨 论 这 一 点 ) 。 因 此 ， 下 面 这 一 行 代码 也 是 有 效 的 : 


var test; 


此 外 ， 与 Java 不 同 的 还 有 变量 可 以 存放 不 同类 型 的 值 。 这 是 弱 类 型 变量 的 优势 。 
例如 ， 可 以 把 变量 初始 化 为 字符 串 类 型 的 值 ， 之 后 把 它 设 置 为 数字 值 ， 如 下 所 示 : 


var test = "hi"; 
alert(test); 
test = 55; 
alert(test); 


这 段 代 码 将 坚 无 问题 地 输出 字符 串 值 和 数字 值 。 但 是 ， 如 前 所 述 ， 使 用 变量 时 ， 好 
的 编码 习惯 是 始终 存放 相同 类 型 的 值 。 


命名 变量 


变量 名 需要 遵守 两 条 简单 的 规则 : 


e 第 一 个 字符 必须 是 字母 、 下 划 线 ( ) 或 美元 符号 ($) 
。 余下 的 字符 可 以 是 下 划 线 、 美 元 符号 或 任何 字母 或 数字 字符 


var test; 
var $test; 
var $1; 

var _$te$t2; 


车 名 的 变量 命名 规则 


只 是 因为 变量 名 的 语法 正确 ， 并 不 意味 着 就 该 使 用 它们 。 变 量 还 应 遵守 以 下 某 条 著 
名 的 命名 规则 : 


Camel 标记 法 
首 字母 是 小 写 的 ， 接 下 来 的 字母 都 以 大 写字 符 开头 。 例 如 : 


var myTestValue = 0, mySecondValue = "hi"; 


Pascal 标记 法 
首 字 母 是 大 写 的 ， 接 下 来 的 字母 都 以 大 写字 符 开 头 。 例 如 : 


var MyTestValue = 0, MySecondValue = "hi"; 


匈牙利 类 型 标记 法 


在 以 Pascal 标记 法 命名 的 变量 前 附加 一 个 小 写字 母 〈 或 小 宇 字 母 序 列 ) ， 说 明 该 
变量 的 类 型 。 例 如 ，i 表示 整数 ，s 表示 字符 串 ， 如 下 所 示 " 


var iMyTestValue = 0, sMySecondValue = "hi"; 


本 教程 采用 了 这 些 前 级 ， 以 使 示例 代码 更 易 阅 读 : 


类 型 前 组 示例 
数组 a aValues 
布尔 型 b bFound 
浮 点 型 (数字) f fValue 
函数 fn fnMethod 
整 型 (WF) iValue 
对 象 (e oType 
正则 表达 式 re rePattern 
字符 串 S sValue 
变型 (可 以 是 任何 类 型 ) V vValue 


变量 声明 不 是 必须 的 


ECMAScript 另 一 个 有 趣 的 方面 (也 是 与 大 多 数 程 序 设计 语言 的 主要 区 别 ) ， 是 在 
使 用 变量 之 前 不 必 声 明 。 例 如 : 


var sTest = "hello "; 
sTest2 = sTest + "world"; 
alert(sTest2); 


在 上 面 的 代码 中 ， 首 先 ，sTest 被 声明 为 字符 串 类 型 的 值 "hello"。 接 下 来 的 一 行 ， 
用 变量 sTest2 把 sTest 与 字符 串 "world" 连 在 一 起 。 变 量 sTest2 并 没有 用 var 运算 
符 定义 ， 这 里 只 是 插入 了 它 ， 就 像 已 经 声明 过 它 一 样 。 


ECMAScript 的 解释 程序 遇 遇 到 未 声明 过 的 标识 符 时 ， 用 该 变量 名 创建 一 个 全 局 变 
量 ， 并 将 其 初始 化 为 指定 的 值 。 


言 的 便利 之 和 处， 不 过 如 果 不 能 
总 、 


密 跟 踪 变 量 ， 这 样 做 也 很 危险 。 最 好 的 习 
睦 是 像 使 用 其 他 程序 设计 语言 一 样 ， 明 


声 所 有 变量 。 


A 
是 


ECMAScript 关键 字 


本 节 提 供 完 整 的 ECMAScript 关键 字 列 表 。 


ECMAScript 关键 字 


ECMA-262 定义 了 ECMAScript 支持 的 一 套 关键 字 (keyword) 。 


这 些 关键 字 标 识 了 ECMAScript 语句 的 开头 和 /或 结尾 。 根 据 规定 ， 关 键 字 是 保留 
的 ， 不 能 用 作 变 量 名 或 函数 名 。 


下 面 是 ECMAScript 关键 字 的 完整 列表 : 


break 
case 
catch 
continue 
default 


finally 
for 
Function 
if 

in 
instanceof 
new 
return 
Switch 
this 
throw 
try 
typeof 
var 

void 
while 
with 


注意 : 如 果 把 关键 字 用 作 变 量 名 或 函数 名 ， 可 能 得 到 诸如 "Identifier Expected" (应 
该 有 标识 符 、 期 望 标识 符 ) 这 样 的 错误 消息 。 


ECMAScript 保留 字 


本 节 提 供 完 整 的 ECMAScript 保留 字 列 表 。 


ECMAScript 保留 字 


ECMA-262 定义 了 ECMAScript 支持 的 一 套 保 留 字 (reserved word) 。 


保留 字 在 某 种 意思 上 是 为 将 来 的 关键 字 而 保留 的 单词 。 因 此 保留 字 不 能 被 用 作 变 量 
名 或 函数 名 。 


ECMA-262 第 三 版 中 保留 字 的 完整 列表 如 下 : 


abstract 
boolean 
byte 

char 
class 
const 
debugger 
double 
enum 
export 
extends 
Final 
Float 
goto 
implements 
import 
int 
interface 
long 
native 
package 
private 
protected 
public 
short 
static 
super 
synchronized 
throws 
transient 
volatile 


注意 : 如 果 将 保留 字 用 作 变 量 名 或 本 数 名 ， 那 么 除非 将 来 的 浏览 器 实现 了 该 保留 
> 否则 很 可 能 收 不 到 任何 错误 消息 。 当 浏览 器 将 其 实现 后 ， 该 单词 将 被 看 做 关键 
字 ， 如 此 将 出 现 关 键 字 错 误 。 


ECMAScript 原始 值 和 引用 值 


在 ECMAScript 中 ， 变 量 可 以 存在 两 种 类 型 的 值 ， 即 原始 值 和 引用 值 。 


原始 值 和 引用 值 


在 ECMAScript 中 ， 变 量 可 以 存在 两 种 类 型 的 值 ， 即 原始 值 和 引用 值 。 
原始 值 
存储 在 栈 (stack) 中 的 简单 数据 段 ， 也 就 是 说 ， 它 们 的 值 直 接 存储 在 变量 访问 的 位 


置 。 
引用 值 


存储 在 堆 (heap) 中 的 对 象 ， 也 就 是 说 ， 存 储 在 变量 处 的 值 是 一 个 指针 (point) , 
指向 存储 对 象 的 内 存 处 。 


AX SBN, ECMAScript 的 解释 程序 必须 判断 该 值 是 原始 类 型 ， 还 是 引用 类 
型 。 要 实现 这 一 点 ， 解 释 程序 则 需 尝试 判断 该 值 是 否 为 ECMAScript 的 原始 类 型 之 
一 ， 即 Undefined, Null, Boolean, Number 和 String 型 。 由 于 这 些 原始 类 型 占据 
的 空间 是 固定 的 ， 所 以 可 将 他 们 存储 在 较 小 的 内 存 区 域 - 栈 中 。 这 样 存储 便于 迅速 
查寻 变量 的 值 。 


在 许多 语言 中 ， 字 符 串 都 被 看 作 引 用 类 型 ， 而 非 原始 类 型 ， 因 为 字符 串 的 长 度 是 可 
4X HJ, ECMAScript 打破 了 这 一 传统 。 


如 果 一 个 值 是 引用 类 型 的 ， 那 么 它 的 存储 空间 将 从 堆 中 分 配 。 由 于 引用 值 的 大 小 会 
改变 ， 所 以 不 能 把 它 放 在 栈 中 ， 否 则 会 降低 变量 查寻 的 速度 。 相 反 ， 放 在 变量 的 栈 
空间 中 的 值 是 该 对 象 存储 在 堆 中 的 地 址 。 地 址 的 大 小 是 固定 的 ， 所 以 把 它 存 储 在 栈 
中 对 变量 性 能 无 任何 负面 影响 。 如 下 图 所 示 : 





数字 【12) 


AiR (true) 


null 


地 址 co) 


SHB ("test") 





原始 类 型 


如 前 所 述 ，ECMAScript 有 5 种 原始 类 型 (primitive type) ， 即 Undefined, Null, 
Boolean, Number 和 String, ECMA-262 把 术语 类 型 (type) 定义 为 值 的 一 个 集 
合 ， 每 种 原始 类 型 定义 了 它 包含 的 值 的 范围 及 其 字面 量 表 示 形 式 。 

ECMAScript 提供 了 typeof 运算 符 来 判断 一 个 值 是 否 在 某 种 类 型 的 范围 内 。 可 以 用 
这 种 运算 符 判 断 一 个 值 是 否 表示 一 种 原始 类 型 : 如 果 它 是 原始 类 型 ， 还 可 以 判断 它 
表示 哪 种 原始 类 型 。 

在 稍 后 的 章节 ， 我 们 将 为 您 深入 讲解 ECMAScript 的 原始 类 型 和 引用 类 型 。 


ECMAScript 原始 类 型 


ECMAScript 有 5 种 原始 类 型 (primitive type) ， 即 Undefined, Null, 
Boolean、Number 和 String。 


typeof 运算 符 
typeof 运算 符 有 一 个 参数 ， 即 要 检查 的 变量 或 值 。 例 如 : 


var sTemp = "test string"; 
alert (typeof sTemp); // 输 出 "string" 
alert (typeof 86); // 输 出 "number" 


对 变量 或 值 调 用 typeof 运算 符 将 返回 下 列 值 之 一 : 


undefined - 如 果 变 量 是 Undefined 类 型 的 

boolean - 如 果 变 量 是 Boolean 类 型 的 

number - #058 x: =7= Number 类 型 的 

string - WR Be String 类 型 的 

object - 如 果 变 量 是 一 种 引用 类 型 或 Null 类 型 的 

注释 : 您 也 许 会 问 ， 为 什么 typeof 运算 符 对 于 null AARE "Object"。 这 实际 上 是 


JavaScript 最 初 实现 中 的 一 个 错误 ， 然 后 被 ECMAScript 治 用 了 。 现 在 ，null 被 认 
为 是 对 象 的 占 位 符 ， 从 而 解释 了 这 一 矛盾 ， 但 从 技术 上 来 说 ， 它 仍然 是 原始 值 。 


Undefined 类 型 


如 前 所 述 ，Undefined 类 型 只 有 一 个 值 ， 即 undefined。 当 声明 的 变量 未 初始 化 
时 ， 该 变量 的 默认 值 是 undefined。 


var oTemp; 


前 面 一 行 代码 声明 变量 oTemp， 没 有 初始 值 。 该 变量 将 被 赋予 值 undefined， 即 
undefined 类 型 的 字面 量 。 可 以 用 下 面 的 代码 段 测试 该 变量 的 值 是 否 等 于 
undefined : 


var oTemp; 
alert(oTemp == undefined); 


这 段 代 码 将 显示 "true"， 说 明 这 两 个 值 确实 相等 。 还 可 以 用 typeof 运算 符 显 示 该 变 
量 的 值 是 undefined : 


var oTemp; 
alert(typeof oTemp); // 输 出 "undefined" 


提示 : {4 undefined 并 不 同 于 未 定义 的 值 。 但 是 ，typeof 运算 符 并 不 真正 区 分 这 两 
种 值 。 考 虑 下 面 的 代码 : 


var oTemp; 
alert(typeof oTemp); // 输 出 "undefined" 
alert(typeof oTemp2); // 输 出 "undefined" 


前 面 的 代码 对 两 个 变量 输出 的 都 是 "undefined"， 即 使 只 有 变量 oTemp2 MARE 
明 过 。 如 果 对 oTemp2 EARR typeof 之 外 的 其 他 运算 符 的 话 ， 会 引起 错误 ， 因 为 其 
他 运算 符 只 能 用 于 已 声明 的 变量 上 。 


例如 ， 下 面 的 代码 将 引发 错误 : 


var oTemp; 
alert(oTemp2 == undefined); 


KHAZAR, WEA "undefined", M0 RATA : 


function testFunc() { 


} 


alert(testFunc() == undefined); // 输 出 "true" 


Null 类 型 


一 种 只 有 一 个 值 的 类 型 是 Null， 它 只 有 一 个 专用 值 null， 即 它 的 字面 量 。 值 
undefined 实际 上 是 从 值 null 派生 来 的 ， 因 此 ECMAScript 把 它们 定义 为 相等 的 。 


alert(null == undefined); // 输 出 "true" 


尽管 这 两 个 值 相 等 ， 但 它们 的 含义 不 同 。undefined 是 声明 了 变量 但 未 对 其 初始 化 
时 赋予 该 变量 的 值 ，null 则 用 于 表示 尚未 存在 的 对 象 (在 讨论 typeof 运算 符 时 ， 简 
单 地 介绍 过 这 一 点 ) 。 如 果 画 数 或 方法 要 返回 的 是 对 象 ， 那么 找 不 到 该 对 象 时 ， 返 
回 的 通常 是 null. 


Boolean 类 型 


Boolean 类 型 是 ECMAScript 中 最 常用 的 类 型 之 一 。 它 有 两 个 值 true Al false (BD 
两 个 Boolean 字面 量 ) 。 


即使 false 不 等 于 0，0 也 可 以 在 必要 时 被 转换 成 false， 这 样 在 Boolean 语句 中 使 
用 两 者 都 是 安全 的 。 


var bFound = true; 
var bLost = false; 


Number 类 型 


ECMA-262 中 定义 的 最 特殊 的 类 型 是 Number 类 型 。 这 种 类 型 既 可 以 表示 32 位 的 
整数 ， 还 可 以 表示 64 位 的 浮 点 数 。 


直接 输入 的 而 不 是 从 另 一 个 变量 访问 的 ) 任何 数字 都 被 看 做 Number 类 型 的 字面 
量 。 例 如 ， 下 面 的 代码 声明 了 存放 整数 值 的 变量 ， 它 的 值 由 字面 量 86 定义 : 


var iNum = 86; 


进 制 数 和 十 六 进 制 数 
整数 也 可 以 被 表示 为 八进制 (以 8 AB) 或 十 六 进 制 (以 16 为 底 ) 的 字面 量 。 八 
oe ea 0， 其 后 的 数字 可 以 是 任何 八进制 数字 (0-7) ， 如 下 面 
代码 所 示 : 


var iNum = 070; //070 等 于 十 进 制 的 56 


要 创建 十 六 进 制 的 字面 量 ， 首 位 数字 必须 为 0， 后 面 接 字母 x， 然 后 是 任意 的 十 六 
进 制 数字 (0 到 9 和 人 A 到 F) 。 这 些 字母 可 以 是 大 写 的 ， able NEE. 例如 : 


Oxif; //0x1f 等 于 十 进 制 的 31 
OxAB; //OxAB 等 于 十 进 制 的 171 


var iNum 
var iNum 


提示 : 尽管 所 有 整数 都 可 以 表示 为 八进制 或 十 六 进 制 的 字面 量 ， 但 所 有 数学 运算 返 
回 的 都 是 十 进 制 结果 。 


浮 点 数 


要 定义 浮 点 值 ， 必 须 包 括 小 数 点 和 小 数 点 后 的 一 位 数字 (例如 ， 用 1.0 而 不 是 
1) 。 这 被 看 作 浮 点 数字 面 量 。 例 如 : 


var fNum = 5.0; 
对 于 浮 点 字面 量 的 有 趣 之 处 在 于 ， 用 它 进行 计算 前 ， 真 正 存 储 的 是 字符 串 。 


科学 计数 法 


对 于 非常 大 或 非常 小 的 数 ， 可 以 用 科学 计数 法 表示 浮 点 数 ， 可 以 把 一 个 数 表 示 为 数 
字 (包括 十 进 制 数字 ) 加 e (或 E) ， 后 面 加 乘 以 10 的 倍数 。 例 如 : 


var fNum = 5.618e7 


该 符号 表示 的 是 数 56180000。 把 科学 计数 法 转化 成 计算 式 就 可 以 得 到 该 值 : 5.618 
x 10<sup>7</sup>. 


也 可 以 用 科学 计数 法 表示 非常 小 的 数 ， 例 如 0.00000000000000008 可 以 表示 为 8- 
e<sup>17</sup> (这 里 ，10 RAEI -17 次 曙 ， 意 味 着 需要 被 10 ER 17 次 ) 。 
ECMAScript 默认 把 具有 6 个 或 6 个 以 上 前 导 0 的 浮 点 数 转换 成 科学 计数 法 。 


提示 : 也 可 用 64 位 IEEE 754 形式 存储 浮 点 值 ， 这 意味 着 十 进 制 值 最 多 可 以 有 17 
个 十 进 制 位 。17 位 之 后 的 值 将 被 裁 去 ， 从 而 造成 一 些小 的 数学 误差 。 


特殊 的 Number 值 


几 个 特殊 值 也 被 定义 为 Number 类 型 。 前 两 个 是 Number. MAX VALUE 和 
Number.MIN_VALUE， 它 们 定义 了 Number 值 集合 的 外 边界 。 所 有 ECMAScript 
数 都 必须 在 这 两 个 值 之 间 。 不 过 计算 生成 的 数值 结果 可 以 不 落 在 这 两 个 值 之 间 。 


当 计 算 生 成 的 数 大 于 Number.MAX_VALUE 时 ， 它 将 被 赋予 值 
Number.POSITIVE_INFINITY， 意 味 着 不 再 有 数字 值 。 同 样 ， 生 成 的 数值 小 于 
Number.MIN VALUE 的 计算 也 会 被 赋予 值 NumberNEGATIVE_INFINITY， 也 意 
i A a i 
计 o 

事实 上 ， 有 专门 的 值 表示 无 穷 大 ， (如 你 猜 到 的 ) BD Infinity. 

Number.POSITIVE INFINITY 的 值 为 Infinity。NumberNEGATIVE_INFINITY 的 值 
为 -Infinity。 


由 于 无 穷 大 数 可 以 是 正 数 也 可 以 是 负数 ， 所 以 可 用 一 个 方法 判断 一 个 数 是 否 是 有 穷 


的 (而 不 是 单独 测试 每 个 无 穷 数 ) 。 可 以 对 任何 数 调用 isFinite() 方法 ， 以 确保 该 数 
TEZZA. PIAN : 


var iResult = iNum * some really large number; 


“if (isFinite(iResult)) { 
alert("finite"); 


j 

else ( 
alert("infinite"); 

j 


最 后 一 个 特殊 值 是 NaN， 表 示 非 数 (Nota Number) > NaN 是 个 奇怪 的 特殊 值 。 
一 般 说 来 ， 这 种 情况 发 生 在 类 型 (String、Boolean 等 ) 转换 失败 时 。 例 如 ， 要 把 
单词 blue 转换 成 数值 就 会 失败 ， 因 为 没有 和 与 之 等 价 的 数值 。 与 无 穷 大 一 样 ，NaN 
也 不 能 用 于 算术 计算 。NaN 的 另 一 个 奇特 之 处 在 于 ， 它 与 自身 不 相等 ， 这 意味 着 下 
面 的 代码 将 返回 false : 


alert(NaN == NaN); // 输 出 "false" 


出 于 这 个 原因 ， 不 推荐 使 用 NaN AQ. WR isNaN() 会 做 得 相当 好 : 


alert(isNaN("blue")); // 输 出 "true" 
alert(isNaN("666")); // 输 出 "false" 


String 类 型 


String 类 型 的 独特 之 处 在 于 ， 它 是 唯一 没有 固定 大 小 的 原始 类 型 。 可 以 用 字符 串 存 
ik 0 或 更 多 的 Unicode 字符 ， 有 16 位 整数 表示 (Unicode 是 一 种 国际 字符 集 ， 本 
教程 后 面料 讨论 它 ) 。 
字符 串 中 每 个 字符 都 有 特定 的 位 置 ， 首 字符 从 位 置 0 开始 ， 第 二 个 字符 在 位 置 1， 
依 此 类 推 。 这 意味 着 字符 串 中 的 最 后 一 个 字符 的 位 置 一 定 是 字符 串 的 长 度 减 1 : 

这 个 字符 审 的 长 度 是 6 


a EE 
ü 1 2 3 4 3 


字符 串 字 面 量 是 由 双 引 号 (C) 或 单 引 号 C) 声明 的 。 而 Java 则 是 用 双 引 号 声明 字 
符 串 ， 用 单 引 号 声明 字符 。 但 是 由 于 ECMAScript 没有 字符 类 型 ， 所 以 可 使 用 这 两 
种 表示 法 中 的 任何 一 种 。 例 如 ， 下 面 的 两 行 代码 都 有 效 : 


var sColori 
var sColor2 


n red"; 
'red'; 


String 类 型 


还 包括 几 种 字符 字面 量 ，Java、C 和 Perl 的 开发 者 应 该 对 此 非常 熟悉 。 


下 面 列 出 了 ECMAScript 的 字符 字面 量 : 


fala 


字面 


A 
\Onnn 


\xnn 


\unnnn 


Bx 
换行 
制 表 符 
空格 
回 车 
换 页 符 
反 和 斜 杠 
单 引 号 
双 3 引 | 号 
八进制 代码 nnn 表示 的 字符 (n 是 0 到 7 中 的 一 个 八进制 数字 ) 
十 六 进 制 代码 nn 表示 的 字符 (n 是 0 到 F 中 的 一 个 十 六 进 制 数 字 ) 


十 六 进 制 代码 nnnn 表示 的 Unicode 字符 (n 是 0 到 F 中 的 一 个 十 六 
进 制 数 字 ) 


ECMAScript 类 型 转换 


所 有 程序 设计 语言 最 重要 的 特征 之 一 是 具有 进行 类 型 转换 的 能 
ECMAScript 给 开发 者 提供 了 大 量 简单 的 类 型 转换 方法 。 


大 部 分 类 型 具有 进行 简单 转换 的 方法 ， 还 有 几 个 全 局 方法 可 以 用 于 更 复杂 的 转换 。 
无 论 哪 种 情况 ， 在 ECMAScript 中 ， 类 型 转换 都 是 简短 的 一 步 操作 。 


转换 成 字符 串 


ECMAScript 的 Boolean 值 、 数 字 和 字符 串 的 原始 值 的 有 趣 之 处 在 于 它们 是 伪 对 
象 ， 这 意味 着 它们 实际 上 具有 属性 和 方法 。 


例如 ， 要 获得 字符 串 的 长 度 ， 可 以 采用 下 面 的 代码 : 


var sColor = "red"; 
alert(sColor.length); // 输 出 "3" 


Re "red" 是 原始 类 型 的 字符 串 ， 它 仍然 具有 属性 length， 用 于 存放 字符 串 的 大 


小 。 


总 而 言 之 ，3 种 主要 的 原始 类 型 Boolean 值 、 数 字 和 字符 串 都 有 toString() Aik, 
可 以 把 它们 的 值 转换 成 字符 串 。 


提示 : 您 也 许 会 问 ，“ 字 符 串 还 有 toString() 方法 吗 ， 这 不 是 多 余 吗 ? ?是 的 ， 的 确 如 
Itt, Ait ECMAScript 定义 所 有 对 象 都 有 toString) 方法 ， 无 论 它 是 伪 对 象 ， 还 是 
真 对 象 。 因 为 String 类 型 属于 伪 对 象 ， 所 以 它 一 定 有 toString() 方法 。 


Boolean 类 型 的 toString() 方法 只 是 输出 "true" 或 "false"， 结 果 由 变量 的 值 决定 : 


var bFound = false; 
alert(bFound.toString()); // 输 出 "false" 


Number 类 型 的 toString() 方法 比较 特殊 ， 它 有 两 种 模式 ， 即 默认 模式 和 基 模 式 。 
采用 默认 模式 ，toString() 方法 只 是 用 相应 的 字符 串 输 出 数字 值 (无 论 是 整数 、 浮 点 
数 还 是 科学 计数 法 ) ， 如 下 所 示 : 


var iNum1 = 10; 

var iNum2 = 10.0; 
alert(iNumi.toString()); // 输 出 "10" 
alert(iNum2.toString()); //3 "10" 


注释 : 在 默认 模式 中 ， 无 论 最 初 采 用 什么 表示 法 声明 数字 ，Number 类 型 的 
toString() 方法 返回 的 都 是 数字 的 十 进 制 表 示 。 因 此 ， 以 八进制 或 十 六 进 制 字 面 量 形 
式 声 明 的 数字 输出 的 都 是 十 进 制 形 式 的 。 


采用 Number 类 型 的 toString) 方法 的 基 模 式 ， 可 以 用 不 同 的 基 输 出 数字 ， 例 如 二 
进 制 的 基 是 2， 八 进 制 的 基 是 8， 十 六 进 制 的 基 是 16。 


基 只 是 要 转换 成 的 基数 的 另 一 种 加 法 而 已 ， 它 是 toString() 方法 的 参数 : 


var iNum = 10; 

alert(iNum.toString(2)); // 输 出 "1010" 
alert(iNum.toString(8)); // 输 出 "12" 
alert(iNum.toString(16)); // 输 出 "A" 


在 前 面 的 示例 中 ， 以 3 种 不 同 的 形式 输出 了 数字 10， 即 二 进 制 形 式 、 八 进 制 形式 
和 十 六 进 制 形 式 。HTML 采用 十 六 进 制 表示 每 种 颜色 ， 在 HTML 中 人 处理 数字 时 这 种 
功能 非常 有 用 。 

注释 : 对 数字 调用 toString(10) 与 调用 toString() 相同 ， 它 们 返回 的 都 是 该 数字 的 
十 进 制 形式 。 


参阅 : 


请 参阅 JavaScript 参考 手册 提供 的 有 关 toString() 方法 的 详细 信息 : 


e arrayObject.toString() 
e booleanObject.toString() 
e dateObject.toString() 

e NumberObject.toString() 
e stringObject.toString() 


转换 成 数字 


ECMAScript 提供 了 两 种 把 非 数 字 的 原始 值 转换 成 数字 的 方法 ， 即 parselnt() 和 
parseFloat()。 


正如 您 可 能 想到 的 ， 前 者 把 值 转换 成 整数 ， 后 者 把 值 转换 成 浮 点 数 。 只 有 对 String 
类 型 调用 这 些 方法 ， 它 们 才能 正确 运行 ; 对 其 他 类 型 返回 的 都 是 NaN。 


parselnt() 


在 判断 字符 串 是 否 是 数字 值 前 ，parselnt() 和 parseFloat() 都 会 仔细 分 析 该 字符 


o 


parselnt() 方法 首先 查看 位 置 0 处 的 字符 ， 判 断 它 是 否 是 个 有 效 数 字 ; 如 果 不 是 ， 
该 方法 将 返回 NaN， 不 再 继续 执行 其 他 操作 。 但 如 果 该 字符 是 有 效 数 字 ， 该 方法 将 
查看 位 置 1 处 的 字符 ， 进 行 同样 的 测试 。 这 一 过 程 将 持续 到 发 现 非 有 效 数 字 的 字符 


为 止 ， 此 时 parselnt() 将 把 该 字符 之 前 的 字符 串 转 换 成 数字 。 


例如 ， 如 果 要 把 字符 串 "12345red" 转换 成 整数 ， 那 么 parselnt() 将 返回 12345, 
为 当 它 检查 到 字符 r 时， 就 会 停止 检测 过 程 。 


字符 串 中 包含 的 数字 字面 量 会 被 正确 转换 为 数字 ， 比 如 "0xA" 会 被 正确 转换 为 数字 
10。 不 过 ， 字 符 串 "22.5" 将 被 转换 成 22， 因 为 对 于 整数 来 说 ， 小 数 点 是 无 效 字 


No 


一 些 示 例如 下 : 
var iNum1 = parseInt("12345red"); // (iE) 12345 
var iNum1 = parseInt("OxA"); // (2) 10 
var iNum1 = parseInt("56.9"); // 返 回 56 
var iNum1 = parseInt("red"); // [2] NaN 


parselnt() 方法 还 有 基 模 式 ， 可 以 把 二 进 制 、 八 进 制 、 十 六 进 制 或 其 他 任何 进 制 的 
字符 串 转 换 成 整数 。 基 是 由 parselnt() 方法 的 第 二 个 参数 指定 的 ， 所 以 要 解析 十 六 
进 制 的 值 ， 需 如 下 调用 parselnt() 方法 : 


var iNum1 = parseInt("AF", 16); // 返 回 175 


当然 ， 对 二 进 制 、 八 进 制 甚至 十 进 制 (默认 模式 ) ， 都 可 以 这 样 调用 parselnt() 75 
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var iNum1 = parseInt("10", 2); // WRB] 2 
var iNum2 = parseInt("10", 8); / /3&lg] 8 
var iNum3 - parseInt("10", 10); // 返 回 10 


如 果 十 进 制 数 包含 前 导 0， 那 么 最 好 采用 基数 10， 这 桩 才 不 会 意外 地 得 到 八进制 的 
值 。 例 如 : 


var iNum1 = parseInt("010"); // 返 回 8 
var iNum2 = parseInt("010", 8); // 返 回 8 
var iNum3 = parseInt("010", 10); // 返 回 10 


在 这 段 代 码 中 ， 两 行 代 码 都 把 字符 "010" 解析 成 一 个 数字 。 第 一 行 代码 把 这 个 字符 
串 看 作 八 进 制 的 值 ， 解 析 它 的 方式 与 第 二 行 代 码 (声明 基数 为 8) 相同 。 最 后 一 行 
代码 声明 基数 为 10， 所 以 iNum3 最 后 等 于 10。 


参阅 


请 参阅 JavaScript 参考 手册 提供 的 有 关 parselnt() 方法 的 详细 信息 : parselnt()。 


parseFloat() 


parseFloat() 方法 与 parselnt() 方法 的 处 理 方式 相似 ， 从 位 置 0 开始 查看 每 个 字 
符 ， 直 到 找到 第 一 个 非 有 效 的 字符 为 止 ， 然 后 把 该 字符 之 前 的 字符 串 转 换 成 整数 。 
不 过 ， 对 于 这 个 方法 来 说 ， 第 一 个 出 现 的 小 数 点 是 有 效 字 符 。 如 果 有 两 个 小 数 点 ， 
第 二 个 小 数 点 将 被 看 作 无 效 的 。parseFloat() 会 把 这 个 小 数 点 之 前 的 字符 转换 成 数 
字 。 这 意味 着 字符 串 "11.22.33" 将 被 解析 成 11.22。 

使 用 parseFloat() 方法 的 另 一 不 同 之 外 在于， 字符 串 必 须 以 十 进 制 形式 表示 浮 点 
数 ， 而 不 是 用 八进制 或 十 六 进 制 。 该 方法 会 忽略 前 导 0， 所 以 八进制 数 0102 将 被 
解析 为 102。 对 于 十 六 进 制 数 0xA， 该 方法 将 返回 NaN， 因 为 在 浮 点 数 中 ，x 不 是 
有 效 字 符 。 CER: 经 测试 ， 具 体 的 浏览 器 实现 会 返回 0， 而 不 是 NaN。) 

此 外 ，parseFloat() 方法 也 没有 基 模 式 。 


下 面 是 使 用 parseFloat() 方法 的 一 些 示例 : 


var fNum1 = parseFloat("12345red"); // 返 回 12345 
var fNum2 = parseFloat("OxA"); / /3&|g] NaN 
var fNum3 - parseFloat("11.2"); // 返 回 11.2 
var fNum4 = parseFloat("11.22.33"); // 返 回 11.22 
var fNum5 = parseFloat("0102"); // 返 回 102 
var fNum1 = parseFloat("red"); / /3&|g] NaN 

参阅 


请 参阅 JavaScript 参考 手册 提供 的 有 关 parseFloat() 方法 的 详细 信 
息 : parseFloat()。 


强制 类 型 转换 

您 还 可 以 使 用 强制 类 型 转换 (type casting) 来 处 理 转 换 值 的 类 型 。 使 用 强制 类 型 转 
换 可 以 访问 特定 的 值 ， 即 使 它 是 另 一 种 类 型 的 。 

编者 注 : cast 有 “铸造 "之 意 ， 很 贴 合 “强制 转换 ”的 意思 。 

ECMAScript 中 可 用 的 3 种 强制 类 型 转换 如 下 : 


e Boolean(value) - 把 给 定 的 值 转换 成 Boolean 型 ; 
e Number(value) - 把 给 定 的 值 转换 成 数字 〈 可 以 是 整数 或 浮 点 数 ) 
e String(value) - 把 给 定 的 值 转换 成 字符 串 ; 


用 这 三 个 函数 之 一 转换 值 ， 将 创建 一 个 新 值 ， 存 放 由 原始 值 直接 转换 成 的 值 。 这 会 
造成 意 想 不 到 的 后 果 。 


Boolean() HŽ 


当 要 转换 的 值 是 至 少 有 一 个 字符 的 字符 串 、 非 0 数字 或 对 象 时 ，Boolean() 函数 将 
返回 true。 如 果 该 值 是 空 字 符 串 、 数 字 0、undefined 或 null， 它 将 返回 false. 


可 以 用 下 面 的 代码 测试 Boolean 型 的 强制 类 型 转换 : 


var b1 = Boolean(""); //false - 空 字 符 串 

var b2 = Boolean("hello"); //true - 非 空 字符 串 
var b1 = Boolean(50); //true - 非 需 数字 

var b1 = Boolean(null); //false - null 

var bi = Boolean(0); //false - & 

var bi = Boolean(new object()); //true - 对 象 


Number() 函数 
Number() 函数 的 强制 类 型 转换 与 parselnt() 和 parseFloat() 方法 的 处 理 方式 相似 ， 
只 是 它 转换 的 是 整个 值 而 不 是 部 分 值 。 


还 记得 吗 ，parselnt() 和 parseFloat() 方法 只 转换 第 一 个 无 效 字 符 之 前 的 字符 串 ， 
因此 "1.2.3" 将 分 别 被 转换 为 "1" 和 "1.2"。 


用 Number() 进行 强制 类 型 转换 ，"1.2.3" 将 返回 NaN， 因 为 整个 字符 串 值 不 能 转换 
成 数字 。 如 果 字 符 串 值 能 被 完整 地 转换 ，Number() 将 判断 是 调用 parselnt() 方法 还 
是 parseFloat() 方法 。 


下 表 说 明了 对 不 同 的 值 调 用 Number() 方法 会 发 生 的 情况 


用 法 结果 

Number(false) 0 
Number(true) 1 
Number(undefined) NaN 
Number(null) 0 
Number("1.2") 1.2 
Number("12") 12 
Number("1.2.3") NaN 
Number(new object()) NaN 
Number(50) 50 


String() HX 
一 种 强制 类 型 转换 方法 String() 是 最 简单 的 ， 因 为 它 可 把 任何 值 转换 成 字符 


要 执行 这 种 强制 类 型 转换 ， 只 需要 调用 作为 参数 传递 进来 的 值 的 toString() 方法 ， 
即 把 12 转换 成 "12"， 把 true 转换 成 "true"， 把 false 转换 成 "false"， 以 此 类 推 。 


强制 转换 成 字符 串 和 调用 toString) 方法 的 唯一 不 同 之 处 在 于 ， 对 null 和 undefined 
值 强 制 类 型 转换 可 以 生成 字符 串 而 不 引发 错误 : 


var s1 = String(null); //"null" 
var oNull = null; 
var s2 - oNull.toString(); // 会 引发 错误 


在 处 理 ECMAScript 这 样 的 弱 类 型 语言 时 ， 强 制 类 型 转换 非常 有 用 ， 不 过 应 该 确保 
使 用 值 的 正确 。 


ECMAScript 引用 类 型 


引用 类 型 通常 叫做 类 (class) 。 
本 教程 会 讨论 大 量 的 ECMAScript 预定 义 引 用 类 型 。 


引用 类 型 

引用 类 型 通常 叫做 类 (class) ， 也 就 是 说 ， 遇 到 引用 值 ， 所 义理 的 就 是 对 象 。 

本 教程 会 讨论 大 量 的 ECMAScript 预定 义 引 用 类 型 。 

从 现在 起 ， 将 重点 讨论 与 已 经 讨论 过 的 原始 类 型 紧密 相关 的 引用 类 型 。 

注意 : 从 传统 意义 上 来 说 ，ECMAScript 并 不 真正 具有 类 。 事 实 上 ， 除 了 说 明 不 存 
在 类 ， 在 ECMA-262 中 根本 没有 出 现 “ 类 ”这 个 词 。ECMAScript 定义 了 “对 象 定 
义 ”"， 逻 辑 上 等 价 于 其 他 程序 设计 语言 中 的 类 。 

提示 : 本 教程 特使 用 术语 “对 象 "。 

对 象 是 由 new 运算 符 加 上 要 实例 化 的 对 象 的 名 字 创 建 的 。 例 如 ， 下 面 的 代码 创建 
Object 对 象 的 实例 : 


var 0 = new Object(); 


这 种 语法 与 Java 语言 的 相似 ， 不 过 当 有 不 止 一 个 参数 时 ，ECMAScript 要 求 使 用 括 
号 。 如 果 没 有 参数 ， 如 以 下 代码 所 示 ， 括 号 可 以 省 略 : 


var 0 = new Object; 


注意 : 尽管 括号 不 是 必需 的 ， 但 是 为 了 避免 混乱 ， 最 好 使 用 括号 。 
提示 : 我 们 会 在 对 象 基础 这 一 章 中 更 深入 地 探讨 对 象 及 其 行为 。 
这 一 节 的 重点 是 具有 等 价 的 原始 类 型 的 引用 类 型 。 


Object 对 象 


Object 对 象 自身 用 处 不 大 ， 不 过 在 了 解 其 他 类 之 前 ， 还 是 应 该 了 解 它 。 因 为 
ECMAScript 中 的 Object 对 象 与 Java 中 的 java.lang.Object 相似 ，ECMAScript 中 
的 所 有 对 象 都 由 这 个 对 象 继承 而 来 ，Object 对 象 中 的 所 有 属性 和 方法 都 会 出 现在 其 
他 对 象 中 ， 所 以 理解 了 Object 对 象 ， 就 可 以 更 好 地 理解 其 他 对 象 。 


Object 对 象 具有 下 列 属性 : 
constructor 


oo URN 函数 的 引用 (指针 ) 。 对 于 Object 对 象 ， 该 指针 指向 原始 的 Object() 
区 | o 


Prototype 
对 该 对 象 的 对 象 原型 的 引用 。 对 于 所 有 的 对 象 ， 它 默认 返回 Object 对 象 的 一 个 实 
例 。 


Object 对 象 还 具有 几 个 方法 : 
hasOwnProperty(property) 
判断 对 象 是 否 有 某 个 特定 的 属性 。 必 须 用 字符 串 指定 该 属性 。 (例如 ， 


o.hasOwnProperty("name")) 
IsPrototypeOf(object) 

判断 该 对 象 是 否 为 另 一 个 对 象 的 原型 。 
PropertylsEnumerable 

判断 给 定 的 属性 是 否 可 以 用 for...in 语句 进行 枚 举 。 
ToString() 


返回 对 象 的 原始 字符 串 表 示 。 对 于 Object 对 象 ，ECMA-262 没有 定义 这 个 值 ， 所 
以 不 同 的 ECMAScript 实现 具有 不 同 的 值 。 


ValueOf() 


返回 最 适合 该 对 象 的 原始 值 。 对 于 许多 对 象 ， 该 方法 返回 的 值 都 与 ToString() 的 返 
回 值 相 同 。 


注释 : 上 面 列 出 的 每 种 属性 和 方法 都 会 被 其 他 对 象 覆 盖 。 


Boolean 对 象 


Boolean 对 象 是 Boolean 原始 类 型 的 引用 类 型 。 
要 创建 Boolean 对 象 ， 只 需要 传递 Boolean 值 作 为 参数 : 


var oBooleanObject = new Boolean(true); 


Boolean 对 象 将 覆盖 Object st RAY ValueOf() 方法 ， 返 回 原始 值 ， 即 true 和 
false, ToString() 方法 也 会 被 覆盖 ， 返 回 字 符 串 "true" 或 "false", 


遗憾 的 是 ， 在 ECMAScript 中 很 少 使 用 Boolean 对 象 ， 即 使 使 用 ， 也 不 易 理解 。 
问题 通常 出 现在 Boolean 表达 式 中 使 用 Boolean 对 象 时 。 例 如 


var oFalseObject = new Boolean(false); 
var bResult = oFalseObject && true; // 输 出 true 


在 这 上段 代码 中 ， 用 false 值 创建 Boolean 对 象 。 然 后 用 这 个 值 与 原始 值 true 进行 
AND 操作 。 在 Boolean 运算 中 ，false 和 true 进行 AND 操作 的 结果 是 false。 不 
过 ， 在 这 行 代码 中 ， 计 算 的 是 oFalseObject， 而 不 是 它 的 值 false. 


正如 前 面 讨论 过 的 ， 在 Boolean 表达 式 中 ， 所 有 对 象 都 会 被 自动 转换 为 true， 所 以 
oFalseObject 的 值 是 true。 然 后 true 再 与 true 进行 AND 操作 ， 结 果 为 true。 


注意 : 虽然 你 应 该 了 解 Boolean 对 象 的 可 用 性 ， 不 过 最 好 还 是 使 用 Boolean 原始 
值 ， 避 免 发 生 这 一 节 提 到 的 问题 。 


参阅 


如 需 更 多 有 关 Boolean 对 象 的 信息 ， 请 访问 JavaScript Boolean 对 象 参考 手册 。 


Number 对 象 


正如 你 可 能 想到 的 ，Number 对 象 是 Number 原始 类 型 的 引用 类 型 。 要 创建 
Number 对 象 ， 采 用 下 列 代码 : 


var oNumberObject = new Number(68); 


您 应 该 已 认 出 本 章 前 面 小 节 中 讨论 特殊 值 (如 Number.MAX_VALUE) 时 提 到 的 
Number 对 象 。 所 有 特殊 值 都 是 Number 对 象 的 静态 属性 。 


要 得 到 数字 对 象 的 Number 原始 值 ， 只 需要 使 用 valueOf() 方法 


var iNumber = oNumberObject.valueOf(); 


49%, Number 类 也 有 toString() 方法 ， 在 讨论 类 型 转换 的 小 节 中 已 经 详细 讨论 过 
该 方法 。 

除了 从 Object 对 象 继 承 的 标准 方法 外 ，Number 对 象 还 有 几 个 义理 数值 的 专用 方 
法 。 


toFixed() 方法 
toFixed() 方法 返回 的 是 具有 指定 位 数 小 数 的 数字 的 字符 串 表 示 。 例 如 : 


var oNumberObject = new Number(68); 
alert(oNumberObject.toFixed(2)); // 输 出 "68.00" 


在 这 里 ，toFixed() 方法 的 参数 是 2， 说 明 应 该 显示 两 位 小 数 。 该 方法 返回 
"68.00"， 空 的 字符 串 位 由 0 来 补充 。 对 于 处 理 货 币 的 应 用 程序 ， 该 方法 非常 有 用 。 
toFixed() 方法 能 表示 具有 0 到 20 位 小 数 的 数字 ， 超 过 这 个 范围 的 值 会 引发 错误 。 


toExponential() 方法 
与 格式 化 数字 相关 的 另 一 个 方法 是 toExponential()， 它 返回 的 是 用 科学 计数 法 表示 
的 数字 的 字符 串 形式 。 


与 toFixed() 方法 相似 ，toExponential() 方法 也 有 一 个 参数 ， 指 定 要 输出 的 小 数 的 
位 数 。 例 如 : 


var oNumberObject = new Number(68); 
alert(oNumberObject.toExponential(1)); // 输 出 "6.8e+1" 


这 上段 代码 的 结果 是 "6.8e+1"， 前 面 解释 过 ， 它 表示 6.8x10<sup>1</sup>。 问题 
是 ， 如 果 不 知道 要 用 哪 种 形式 (预定 形式 或 指数 形式 ) 表示 数字 怎么 办 ? 可 以 用 
toPrecision() 方法 。 


toPrecision() 方法 


toPrecision() 方法 根据 最 有 意义 的 形式 来 返回 数字 的 预定 形式 或 指数 形式 。 它 有 一 
个 参数 ， 即 用 于 表示 数 的 数字 总 数 (不 包括 指数 ) 。 例 如 ， 


var oNumberObject = new Number(68); 
alert(oNumberObject.toPrecision(1)); // 输 出 "7e+1" 


这 段 代 码 的 任务 是 用 一 位 数字 表示 数字 68， 结 果 为 "7e+1"， 以 另外 的 形式 表示 即 
70。 的 确 ，toPrecision() 方法 会 对 数 进 行 舍 人 。 不 过 ， 如 果 用 2 位 数字 表示 68, 
就 容易 多 了 : 


var oNumberObject = new Number(68); 
alert(oNumberObject.toPrecision(2)); // 输 出 "68" 


当然 ， 输 出 的 是 "68"， 因 为 这 正 是 该 数 的 准确 表示 。 不 过 ， 如 果 指定 的 位 数 多 于 需 
要 的 位 数 又 如 何 呢 ? 


var oNumberObject = new Number(68); 
alert(oNumberObject.toPrecision(3)); // 输 出 "68.0" 


在 这 种 情况 下 ，toPrecision(3) 等 价 于 toFixed(1)， 输 出 的 是 "68.0"。 


toFixed()、toExponential() 和 toPrecision() 方法 都 会 进行 舍 人 和 人 操作， 以 便 用 正确 的 
小 数位 数 正确 地 表示 一 个 数 。 


提示 : 与 Boolean 对 象 相似 ，Number 对 象 也 很 重要 ， 不 过 应 该 少 用 这 种 对 象 ， 以 
避免 潜在 的 问题 。 只 要 可 能 ， 都 使 用 数字 的 原始 表示 法 。 


参阅 


如 需 更 多 有 关 Number 对 象 的 信息 ， 请 访问 JavaScript Number 对 象 参 考 手 册 。 


String 对 象 
String 对 象 是 String 原始 类 型 的 对 象 表示 法 ， 它 是 以 下 方式 创建 的 : 


var oStringObject = new String("hello world"); 


String 对 象 的 valueOf() 方法 和 toString() 方法 都 会 返回 String 类 型 的 原始 值 : 


alert(oStringObject.valueOf() == oStringObject.toString()); // 输 
了 — } ii 
如 果 运 行 这 段 代 码 ， 输 出 是 "true"， 说 明 这 些 值 真 的 相等 。 
注释 : String 对 象 是 ECMAScript 中 比较 复杂 的 引用 类 型 之 一 。 同 样 ， 本 节 的 重点 


只 是 String 类 的 基本 功能 。 更 多 的 高 级 功能 请 阅读 本 教程 相关 的 章节 ， 或 参阅 
JavaScript String 对 象 参 考 手册 。 





length 属性 
String 对 象 具 有 属性 length， 它 是 字符 串 中 的 字符 个 数 : 


var oStringObject = new String("hello world"); 
alert(oStringObject.length); // 输 出 "11" 


这 个 例子 输出 的 是 "11"， 即 "hello world" 中 的 字符 个 数 。 注 意 ， 即 使 字符 串 包 含 双 
字 节 的 字符 (4 ASCI FH, ASCII 字符 只 占用 一 个 字 节 ) ， 每 个 字符 也 只 算 
一 个 字符 。 


charAt() 和 charCodeAt() 方法 
String 对 象 还 拥有 大 量 的 方法 。 


首先 ， 两 个 方法 charAt() 和 charCodeAt() 访问 的 是 字符 串 中 的 单个 字符 。 这 两 个 
方法 都 有 一 个 参数 ， 即 要 操作 的 字符 的 位 置 。 


charAt() 方法 返回 的 是 包含 指定 位 置 处 的 字符 的 字符 串 : 


var oStringObject = new String("hello world"); 
alert(oStringObject.charAt(1)); // 输 出 "e" 


在 字符 串 "hello world" 中 ， 位 置 1 处 的 字符 是 "e"。 在 “ECMAScript 原始 类 型 "这 一 
节 中 我 们 讲 过 ， 第 一 个 字符 的 位 置 是 0， 第 二 个 字符 的 位 置 是 1， 依 此 类 推 。 
此 ， 调 用 charAt(1) 返回 的 是 "e" 


如 果 想 得 到 的 不 是 字符 ， 而 是 字符 代码 ， 那 么 可 以 调用 charCodeAt() 方法 : 


var oStringObject = new String("hello world"); 
alert(oStringObject.charCodeAt(1)); // 输 出 "101" 


这 个 例子 输出 "101"， 即 小 写字 母 "e" 的 字符 代码 。 


concat() 方法 


接 下 来 是 concat() 方法 ， 用 于 把 一 个 或 多 个 字符 串 连接 到 String 对 象 的 原始 值 上 。 
该 方法 返回 的 是 String 原始 值 ， 保 持原 始 的 String 对 象 不 变 : 


var oStringObject = new String("hello "); 
var sResult = oStringObject.concat("world"); 
alert(sResult); // 输 出 "hello world" 
alert(oStringObject); // 输 出 "hello " 


在 上 面 这 段 代 码 中 ， 调 用 concat() 方法 返回 的 是 "hello world", m String 对 象 存 放 
的 仍然 是 "hello "。 出 于 这 种 原因 ， 较 常见 的 是 用 加 号 (+) 连接 字符 串 ， 因 为 这 种 
形式 从 逻辑 上 表明 了 真正 的 行为 : 


var oStringObject = new String("hello "); 
var sResult = oStringObject + "world"; 
alert(sResult); // 输 出 "hello world" 
alert(oStringObject); // 输 出 "hello " 


indexOf() 和 lastIndexOf() 方法 
迄今 为 止 ， 已 讨论 过 连接 字符 串 的 方法 ， 访 问 字符 串 中 的 单个 字符 的 方法 。 不 过 如 


果 无 法 确定 在 某 个 字符 串 中 是 否 确实 存在 一 个 字符 ， 应 该 调用 什么 方法 呢 ? 这 时 ， 
可 调用 indexOf() 和 lastIndexOf() 方法 。 


indexOf() 和 lastIndexOf() 方法 返回 的 都 是 指定 的 子 串 在 另 一 个 字符 串 中 的 位 置 ， 
如 果 没有 找 不 到 子 串 ， 则 返回 -1。 


这 两 个 方法 的 不 同 之 处 在 于 ，indexOf() 方法 是 从 字符 串 的 开头 (位置 0) 开始 检索 
字符 串 ， 而 lastindexOf() 方法 则 是 从 字符 串 的 结尾 开始 检索 子 串 。 例 如 : 


var oStringObject = new String("hello world!"); 
alert(oStringObject.indexOf("o")); 输出 "A" 
alert(oStringObject.lastIndexOf("o")); 输出 "7" 


在 这 里 ， 第 一 个 "o" 字符 串 出 现在 位 置 4， 即 "hello" 中 的 "o" ; 最 后 一 个 "o" 出 现在 
位 置 7， 即 "world" 中 的 "0o"。 如 果 该 字符 串 中 只 有 一 个 "o" 字符 串 ， 那 么 indexOf() 
和 lastIndexOf() 方法 返回 的 位 置 相 同 。 


localeCompare() 方法 


下 一 个 方法 是 localeCompare()， 对 字符 串 进 行 排序 。 该 方法 有 一 个 参数 - 要 进行 
比较 的 字符 串 ， 返 回 的 是 下 列 三 个 值 之 一 : 


。 如果 String 对 象 按照 字母 顺序 排 在 参数 中 的 字符 串 之 前 ， 返 
。 如 果 String 对 象 等 于 参数 中 的 字符 串 ， 返 回 0 
e 如果 String 对 象 按照 字母 顺序 排 在 参数 中 的 字符 串 之 后 ， 返 回 正 数 。 
注释 : 如 果 返 回 负 数 ， 那 么 最 常见 的 是 -1， 不 过 真正 返回 的 是 由 实现 决定 的 。 如 果 
返回 正 数 ， 那 么 同样 的 ， 最 常见 的 是 1， 不 过 真正 返回 的 是 由 实现 决定 的 。 


示例 如 下 : 


回 负数 。 


var oStringObject = new String("yellow"); 


alert(oStringObject.localeCompare("brick")); // 输 出 "1" 
alert(oStringObject.localeCompare("yellow") ); // 输 出 "o" 
alert(oStringObject.localeCompare("zoo")); // 输 出 " -1 


在 这 段 代码 中 ， 字 符 串 "yelow" 5 3 个 值 进 行 了 对 比 ， 即 "brick", "yellow" 和 
"zoo"。 由 于 按照 字母 顺序 排列 ，"yellow'" F "brick" 之 后 ， 所 以 localeCompare() 
返回 1 ; "yellow" ST "yellow", FALA localeCompare() 返回 0 ; "zoo" 位 于 
"yellow" 之 后 ，localeCompare() 返回 -1。 再 强调 一 次 ， 由 于 返回 的 值 是 由 实现 决 
定 的 ， 所 以 最 好 以 下 面 的 方式 调用 localeCompare() 方法 : 


var oStringObjecti 
var oStringObject2 


new String("yellow"); 
new String("brick"); 


var iResult - oStringObjecti.localeCompare(oStringObject2); 


if(iResult « 0) ( 

alert(oStringObjecti + " comes before " + oStringObject2); 
} else if (iResult > 0) ( 

alert(oStringObjecti + " comes after " + oStringObject2); 
) else { 

alert("The two strings are equal"); 


j 


采用 这 种 结构 ， 可 以 确保 这 段 代 码 在 所 有 实现 中 都 能 正确 运行 。 


localeCompare() 方法 的 独特 之 处 在 于 ， 实 现 所 处 的 区 域 (locale， 兼 指 国家 /地 区 
和 语言 ) 确切 说 明了 这 种 方法 运行 的 方式 。 在 美国 ， 英 语 是 ECMAScript 实现 的 标 
准 语言 ，localeCompare() 是 区 分 大 小 写 的 ， 大 写字 母 在 字母 顺序 上 排 在 小 写字 母 
之 后 。 不 过 ， 在 其 他 区 域 ， 情 况 可 能 并 非 如 此 。 


slice() 和 substring() 


ECMAScript 提供 了 两 种 方法 从 子 串 创 建 字符 串 值 ， 即 slice() 和 substring()a 3x 9 
种 方法 返回 的 都 是 要 义理 的 字符 串 的 子 串 ， 都 接受 一 个 或 两 个 参数 。 第 一 个 参数 是 
要 获取 的 子 串 的 起 始 位 置 ， 第 二 个 参数 (如 果 使 用 的 话 ) 是 要 获取 子 串 终止 前 的 位 
iB (也 就 是 说 ， 获 取 终 止 位 置 处 的 字符 不 包括 在 返回 的 值 内 ) 。 如 果 省 略 第 二 个 参 
数 ， 终 止 位 就 默认 为 字符 串 的 长 度 。 


与 concat() AskK—#, slice() 和 substring() 方法 都 不 改变 String 对 象 自身 的 值 。 
它们 只 返回 原始 的 String 值 ， 保 持 String 对 象 不 变 。 


var oStringObject = new String("hello world"); 


alert(oStringObject.slice("3")); // 输 出 "lo world" 
alert(oStringObject.substring("3")); // 输 出 "lo world" 
alert(oStringObject.slice("3", "7")); // 输 出 "lo w" 


alert(oStringObject.substring("3", "7")); // 输 出 "lo w" 


在 这 个 例子 中 ，slice() 和 substring) 的 用 法 相同 ， 返 回 值 也 一 样 。 当 只 有 参数 3 
时 ， 两 个 方法 返回 的 都 是 "lo world"， 因 为 "hello" 中 的 第 二 个 "I" 位 于 位 置 E, 
当 有 两 个 参数 "3" 和 "7" 时 ， 两 个 方法 返回 的 值 都 是 "lo w" ("world" 中 的 字母 "0" 
位 于 位 置 7 上 ， 所 以 它 不 包括 在 结果 中 ) 。 


为 什么 有 两 个 功能 完全 相同 的 方法 呢 ? 事实 上 ， 这 两 个 方法 并 不 完全 相同 ， 不 过 只 
在 参数 为 负数 时 ， 它 们 处 理 参数 的 方式 才 稍 有 不 同 。 


对 于 负数 参数 ，slice() 方法 会 用 字符 串 的 长 度 加 上 参数 ，substring() 方法 则 将 其 作 
HORE (也 就 是 说 将 忽略 它 ) 。 例 如 : 


var oStringObject = new String("hello world"); 


alert(oStringObject.slice("-3")); // 输 出 "rld" 
alert(oStringObject.substring("-3")); // 输 出 "hello world" 
alert(oStringObject.slice("3, -4")); // 输 出 "lo w" 


alert(oStringObject.substring("3, -4")); // 输 出 "hel" 


这 样 即 可 看 出 slice() 和 substring() 方法 的 主要 不 同 。 


当 只 有 参数 -3 时 ，slice() 返回 "ld"，substring() 则 返回 "hello world"。 这 是 因为 对 
于 字符 串 "hello world", slice("-3") 将 被 转换 成 slice("8")， 而 substring("-3") 将 被 转 
换 成 substring("0")。 


同样 ， 使 用 参数 3 和 -4 时 ， 差 别 也 很 明显 。slice() 将 被 转换 成 slice(3, 7)， 与 前 面 
的 例子 相同 ， 返 回 "low". m substring) 方法 则 将 两 个 参数 解释 为 substring(3, 

0)， 实 际 上 即 substring(0, 3)， 因 为 substring() 总 把 较 小 的 数字 作为 起 始 位 ， 较 大 
的 数字 作为 终止 位 。 因 此 ，substring("3, -4") 返回 的 是 "hel"。 这 里 的 最 后 一 行 代 码 
用 来 说 明 如 何 使 用 这 些 方法 。 


toLowerCase()、toLocaleLowerCase()、toUpperCase() 和 
toLocaleUpperCase() 


最 后 一 套 要 讨论 的 方法 涉及 大 小 写 转 换 。 有 4 种 方法 用 于 执行 大 小 写 转 换 ， 即 


e toLowerCase() 
e toLocaleLowerCase() 
e toUpperCase() 

e toLocaleUpperCase() 


从 名 字 上 可 以 看 出 它们 的 用 途 ， 前 两 种 方法 用 于 把 字符 串 转 换 成 全 小 写 的 ， 后 两 种 
方法 用 于 把 字符 串 转 换 成 全 大 写 的 。 


toLowerCase() 和 toUpperCase() 方法 是 原始 的 ， 是 以 java.lang.String 中 相同 方法 
为 原型 实现 的 。 


toLocaleLowerCase() 和 toLocaleUpperCase() 方法 是 基于 特定 的 区 域 实现 的 (与 
localeCompare() 方法 相同 ) 。 在 许多 区 域 中 ， 区 域 特定 的 方法 都 与 通用 的 方法 完 
全 相同 。 不 过 ， 有 几 种 语言 对 Unicode 大 小 写 转 换 应 用 了 特定 的 规则 (例如 土耳其 
语 ) ， 因 此 必须 使 用 区 域 特定 的 方法 才能 进行 正确 的 转换 。 


var oStringObject = new String("Hello World"); 
alert(oStringObject.toLocaleUpperCase()); // 输 出 "HELLO WORLD" 
alert(oStringObject.toUpperCase()); // 输 出 "HELLO WORLD" 
alert(oStringObject.toLocaleLowerCase()); // 输 出 "hello world" 
alert(oStringObject.toLowerCase()); // 输 出 "hello world" 


这 段 代 码 中 ，toUpperCase() 和 toLocaleUpperCase() 输出 的 都 是 "HELLO 
WORLD", toLowerCase() 和 toLocaleLowerCase() 输出 的 都 是 "hello world", — 
般 来 说 ， 如 果 不 知 道 在 以 哪 种 编码 运行 一 种 语言 ， 则 使 用 区 域 特定 的 方法 比较 安 


o 


提示 : 记 住 ，String 对 象 的 所 有 属性 和 方法 都 可 应 用 于 String 原始 值 上 ， 因 为 它们 
是 仿 对 象 。 


instanceof 运算 符 


在 使 用 typeof 运算 符 时 采用 引用 类 型 存储 值 会 出 现 一 个 问题 ， 无 论 引用 的 是 什么 类 
型 的 对 象 ， 它 都 返回 "object", ECMAScript 引入 了 另 一 个 Java 运算 符 instanceof 
来 解决 这 个 问题 。 


instanceof 运算 符 与 typeof 运算 符 相 似 ， 用 于 识别 正在 处 理 的 对 象 的 类 型 。 与 
typeof 方法 不 同 的 是 ，instanceof 方法 要 求 开发 者 明确 地 确认 对 象 为 某 特定 类 型 。 
例如 : 


var oStringobject = new String("hello world"); 
alert(oStringObject instanceof String); // 输 出 "true" 


这 段 代 码 问 的 是 “变量 oStringObject 是 否 为 String 对 象 的 实例 ? "oStringObject 的 
确 是 String 对 象 的 实例 ， 因 此 结果 是 "true"。 尽 管 不 像 typeof 方法 那样 灵活 ， 但 是 
在 typeof 方法 返回 "object" 的 情况 下 ，instanceof 方法 还 是 很 有 用 的 。 


ECMAScript 运算 符 


ECMAScript 一 元 运算 符 


一 元 运算 符 只 有 一 个 参数 ， 即 要 操作 的 对 象 或 值 。 它 们 是 ECMAScript 中 最 简单 的 
运算 符 。 


delete 
delete 运算 符 删 除 对 以 前 定义 的 对 象 属性 或 方法 的 引用 。 例 如 : 


var 0 = new Object; 


o.name = "David"; 

alert(o.name); // 输 出 "David" 
"delete o.name; ` 

alert(o.name); // 输 出 "undefined" 


在 这 个 例子 中 ， 删 除了 name 属性 ， 意 味 着 强制 解除 对 它 的 引用 ， 将 其 设置 为 
undefined 〈 即 创建 的 未 初始 化 的 变量 的 值 ) 。 


delete 运算 符 不 能 删除 开发 者 未 定义 的 属性 和 方法 。 例 如 ， 下 面 的 代码 将 引发 错 


‘a 。 
VT: 


delete o.toString; 


即使 toString 是 有 效 的 方法 名 ， 这 行 代 码 也 会 引发 错误 ， 因 为 toString() 方法 是 原 
始 的 ECMAScript 方法 ， 不 是 开发 者 定义 的 。 


void 


void 运算 符 对 任何 值 返回 undefined。 该 运算 符 通常 用 于 避免 输出 不 应 该 输出 的 
值 ， 例 如 ， 从 HTML 的 <a> 元 素 调 用 JavaScript 函数 时 。 要 正确 做 到 这 一 点 ， 画 
数 不 能 返回 有 效 值 ， 否 则 浏览 器 将 清空 页 面 ， 只 显示 画 数 的 结果 。 例 如 : 


«a href="javascript:window.open( 'about:blank')">Click me</a> 


如 果 把 这 行 代码 放 人 HTML 页 面 ， 点 击 其 中 的 链接 ， 即 可 看 到 屏幕 上 显示 " 
[object]", TIY 


这 是 因为 window.open() 方法 返回 了 新 打开 的 窗口 的 引用 。 然 后 该 对 象 将 被 转换 成 
要 显示 的 字符 串 。 


要 避免 这 种 效果 ， 可 以 用 void 运算 符 调 用 window.open() WR : 


«a hrefz"javascript:void(window.open('about:blank'))"»Click me</a> 
‘| — 


这 使 window.open() 调用 返回 undefined， 它 不 是 有 效 值 ， 不 会 显示 在 浏览 器 窗口 
中 。 


提示 : 请 记 住 ， 没 有 返回 值 的 函数 真正 返回 的 都 是 undefined, 


前 增 量 /前 减 量 运算 符 








直接 从 C (和 Java) 借用 的 两 个 运算 符 是 前 增 量 运 算 符 和 前 减 量 运 算 符 。 
所 谓 前 增 量 运算 符 ， 就 是 数值 上 加 1， 形 式 是 在 变量 前 放 两 个 加 号 (++) 


var iNum = 10; 
++iNum; 


第 二 行 代码 把 iNum 增加 到 了 11， 它 实质 上 等 价 于 : 


var iNum = 10; 
iNum = iNum + 1; 


同样 ， 前 减 量 运算 符 是 从 数值 上 减 1， 形 式 是 在 变量 前 放 两 个 减 号 〈--) 


var iNum = 10; 
--iNum; 


在 这 个 例子 中 ， 第 二 行 代 码 把 iNum 的 值 减 到 9。 


人 
面 的 例 


var iNum = 10; 

--iNum; 

alert(iNum); // 输 出 "9" 
alert(--iNum); // 输 出 "8" 
alert(iNum); // 输 出 "8" 


第 二 行 代码 对 Num 进行 减 量 运 算 ， 第 三 行 代码 显示 的 结果 是 ("9") 。 第 四 行 代码 
又 对 iNum 进行 减 量 运算 ， 不 过 这 次 前 减 量 运 算 和 输出 操作 出 现在 同一 个 语句 中 ， 
显示 的 结果 是 "8"。 为 了 证 明 已 实现 了 所 有 的 减 量 操作 ， 第 五 行 代 码 又 输出 一 

次 "8"。 


在 算术 表达 式 中 ， 前 增 量 和 前 减 量 运 算 符 的 优先 级 是 相同 的 ， 因 此 要 按照 从 左 到 右 
的 顺序 计算 之 。 例 如 : 


var iNum1 = 2; 
var iNum2 = 20; 
var iNum3 = --iNumi + ++iNum2; i a ee 
var iNum4 = iNum1 + iNum2; le ee 


在 前 面 的 代码 中 ，iNum3 SF 22, AA ExiA A ER SRByIE 1-21. $B iNum4 也 
等 于 22， 也 是 1+ 21。 


后 增 量 /后 运算 符 


还 有 两 个 直接 从 C (和 Java) 借用 的 运算 符 ， 即 后 增 量 运算 符 和 后 减 量 运算 符 。 
后 增 量 运算 符 也 是 给 数值 上 加 1， 形 式 是 在 变量 后 放 两 个 加 号 (++) 


var iNum = 10; 
iNum++; 


不 出 所 料 ， 后 减 量 运算 符 也 是 从 数值 上 减 1， 形 式 为 在 变量 后 加 两 个 减 号 〈--) 


var iNum = 10; 
iNum--; 


第 二 行 代码 把 iNum 的 值 减 到 9. 


与 前 级 式 运 算 符 不 同 的 是 ， a E lee 才 进 行 增 
量 或 减 量 运算 的 。 考 虑 以 下 的 例子 


var iNum = 10; 

iNum- -; 

alert(iNum); // "9" 
alert(iNum--); // 输 出 "9" 
alert(iNum); // "8" 


与 前 绥 式 运算 符 的 例子 相似 ， 第 二 行 代码 对 iNum 进行 减 量 运算 ， 第 三 行 代码 显示 
结果 ("O") 。 第 四 行 代码 继续 显示 Num 的 值 ， 不 过 这 次 是 在 同一 语句 中 应 用 减 量 
运算 符 。 由 于 减 量 运算 发 生 在 计算 过 表达 式 之 后 ， 所 以 这 条 语句 显示 的 数 是 "9"。 
执行 了 第 五 行 代码 后 ，alert 函数 显示 的 是 "8"， 因 为 在 执行 第 四 行 代 码 之 后 和 执行 
第 五 行 代码 之 前 ， 执 行 了 后 减 量 运算 。 


在 算术 表达 式 中 ， 后 增 量 和 后 减 量 运算 符 的 优先 级 是 相同 的 ， 因 此 要 按照 从 左 到 右 
的 顺序 计算 之 。 例 如 : 


var iNum1 = 2; 
var iNum2 = 20; 
var iNum3 = iNumi-- + iNum2++; i oon 
var iNum4 = iNum1 + iNum2; Ua CPN 


在 前 面 的 代码 中 ，iNum3 SF 22, AA~RKASHAWNS2+20. % & iNum4 也 
等 于 22， 不 过 它 计 算 的 是 1 + 21， 因 为 增 量 和 减 量 运算 都 在 给 iNum3 赋值 后 示 发 


o 


一 元 加 法 和 一 元 减法 


大 多 数 人 都 熟悉 一 元 加 法 和 一 元 减法 ， 它 们 在 ECMAScript 中 的 用 法 与 您 高 中 数学 
中 学 到 的 用 法 相同 。 


一 元 加 法 本 质 上 对 数字 无 任何 影响 
var iNum = 20; 


iNum = +iNum; 
alert(iNum); // 输 出 "20" 


这 段 代 码 对 数字 20 应 用 了 一 元 加 法 ， 返 回 的 还 是 20. 
尽管 一 元 加 法 对 数字 无 作用 ， 但 对 字符 串 却 有 有 趣 的 效果 ， 会 把 字符 串 转换 成 数 
字 。 

var sNum = "20"; 


alert(typeof sNum) ; // 输 出 "string" 
var iNum = +sNum; 
alert(typeof iNum); // 输 出 "number" 


这 段 代 码 把 字符 串 "20" 转换 成 真正 的 数字 。 当 一 元 加 法 运算 符 对 字符 串 进 行 操作 

时 ， 它 计算 字符 串 的 方式 与 parselnt() 相似 ， 主 要 的 不 同 是 只 有 对 以 "Ox" 开头 的 字 
FE (表示 十 六 进 制 数 字 ) ， 一 元 运算 符 才 能 把 它 转换 成 十 进 制 的 值 。 因 此 ， 用 一 
元 加 法 转换 "010"， 得 到 的 总 是 10， 而 "OxB" 将 被 转换 成 11。 


另 一 方面 ， 一 元 减法 就 是 对 数值 求 负 (例如 把 20 转换 成 -20) 
var iNum = 20; 


iNum = -iNum; 
alert(iNum); // 输 出 "-20" 


与 一 元 加 法 运算 符 相 似 ， 一 元 减法 运算 符 也 会 把 字符 串 转 换 成 近似 的 数字 ， 此 外 还 
会 对 该 值 求 负 。 例如 


var SNum = "20"; 

alert(typeof sNum); // 输 出 "string" 
var iNum = -sNum; 

alert(iNum); // 输 出 "-20" 
alert(typeof iNum); // 输 出 "number" 


在 上 面 的 代码 中 ， 一 元 减法 运算 符 将 把 字符 串 "-20" 转换 成 -20 (一 元 减法 运算 符 
对 十 六 进 制 和 十 进 制 的 处 理 方式 与 一 元 加 法 运算 符 相 似 ， 只 是 它 还 会 对 该 值 求 
fi) o 


ECMAScript 位 运算 符 


位 运算 符 是 在 数字 底层 〈 即 表示 数字 的 32 个 数位 ) 进行 操作 的 。 


m EE 


ECMAScript 整数 有 两 种 类 型 ， 即 有 符号 整数 (人 允许 用 正 数 和 负数 ) 和 无 符号 整数 
(只 人 允许 用 正 数 ) 。 在 ECMAScript 中 ， 所 有 整数 字面 量 默认 都 是 有 符号 整数 ， 
意味 着 什么 呢 ? 


有 符号 整数 使 用 31 位 表示 整数 的 数值 ， 用 第 32 位 表示 整数 的 符号 ，0 表示 正 数 ， 
1 表示 负数 。 数 值 范围 从 -2147483648 到 2147483647。 


可 以 以 两 种 不 同 的 方式 存储 二 进 制 形式 的 有 符号 整数 ， 一 种 用 于 存储 正 数 ， 一 种 用 
于 存储 负数 。 正 数 是 以 真 二 进 制 形式 存储 的 ， 前 31 位 中 的 每 一 位 都 表示 2B], 
从 第 1 位 (位 0) 开始 ， 表 示 Sa 第 2 位 (位 1) 表示 
2<sup>1</sup>。 没 用 到 的 位 用 0 填充 ， 即 忽略 不 计 。 例 如 ， 下 图 展示 的 是 数 18 
的 表示 法 。 
数 18 

[ololololololololololololololololololololololololololol: lolol: [o] 

| 
位 31 过 源 器 位 0 
18 的 二 进 制版 本 只 用 了 前 5 位 ， 它 们 是 这 个 数字 的 有 效 位 。 把 数字 转换 成 二 进 制 
字符 串 ， 就 能 看 到 有 效 位 : 


var iNum = 18; 
alert(iNum.toString(2)); // 输 出 "10010" 


这 段 代 码 只 输出 "10010"， 而 不 是 18 的 32 位 表示 。 其 他 的 数位 并 不 重要 ， 因 为 仅 
使 用 前 5 位 即 可 确定 这 个 十 进 制 数值 。 如 下 图 所 示 : 


1/0/0110 


(24x1) + (23x0) + (22x0) + (21x1) + (20x0) 





16 + 0 + O + 2 + QO 
18 


esi 二 进 制 代码 ， 不 过 采用 的 形式 是 二 进 制 补 码 。 计 算数 字 二 进 制 补 码 的 
又 


1. 确定 该 数字 的 非 负 版 本 的 二 进 制 表 示 (例如 ， 要 计算 -18 的 二 进 制 补 码 ， 首 先 
要 确定 18 的 二 进 制 表示 ) 


2. 求 得 二 进 制 反 码 ， 即 要 把 0 替换 为 1， 把 1 替换 为 0 
3. 在 二 进 制 反 码 上 加 1 


要 确定 -18 的 二 进 制 表示 ， 首 先 必须 得 到 18 的 二 进 制 表示 ， 如 下 所 示 : 


0000 0000 0000 0000 0000 0000 0001 0010 


接 下 来 ， 计 算 二 进 制 反 码 ， 如 下 所 示 : 


1111 1111 1111 1111 1111 1111 1110 1101 


最 后 ， 在 二 进 制 反 码 上 加 1， 如 下 所 示 : 


1111 1111 1111 1111 1111 1111 1110 1101 


1111 1111 1111 1111 1111 1111 1110 1110 


因此 ，-18 的 二 进 制 表 示 即 1111 1111 1111 1111 1111 1111 1110 1110。 记 住 ， 在 处 
理 有 符号 整数 时 ， 开 发 者 不 能 访问 31 位 。 


有 趣 的 是 ， 把 负 整 数 转 换 成 二 进 制 宇 符 串 后 ，ECMAScript 并 不 以 二 进 制 补 码 的 形 
式 显示 ， 而 是 用 数字 绝对 值 的 标准 二 进 制 代 码 前 面 加 负 号 的 形式 输出 。 例 如 : 


var iNum = -18; 
alert(iNum.toString(2)); // 输 出 "-10010" 


这 段 代 码 输出 的 是 "-10010"， 而 非 二 进 制 补 码 ， 这 是 为 避免 访问 位 31。 为 了 简 
便 ，ECMAScript 用 一 种 简单 的 方式 义理 整数 ， 使 得 开发 者 不 必 关 心 它们 的 用 法 。 


另 一 方面 ， 无 符号 整数 把 最 后 一 位 作为 另 一 个 数位 处 理 。 在 这 种 模式 中 ， 第 32 位 
不 表示 数字 的 符号 ， 而 是 值 2<sup>31</sup>。 由 于 这 个 额外 的 位 ， 无 符号 整数 的 
数值 范围 为 0 到 4294967295。 对 于 小 于 2147483647 的 整数 来 说 ， 无 符号 整数 看 
来 与 有 符号 整数 一 样 ， 而 大 于 2147483647 的 整数 则 要 使 用 位 31 (在 有 符号 整数 


中 ， 这 一 位 总 是 0) 。 
把 无 符号 整数 转换 成 字符 串 后 ， 只 返回 它们 的 有 效 位 。 


注意 : 所 有 整数 字面 量 都 默认 存储 为 有 符号 整数 。 只 有 ECMAScript 的 位 运算 符 才 
能 创建 无 符号 整数 。 


位 运算 NOT 


位 运算 NOT 由 否定 号 (~) 表示 ， 它 是 ECMAScript 中 为 数 不 多 的 与 二 进 制 算术 有 
关 的 运算 符 之 一 。 


位 运算 NOT 是 三 步 的 处 理 过 程 : 


1. 把 运算 数 转换 成 32 位 数字 
2. 把 二 进 制 数 转换 成 它 的 二 进 制 反 码 
3. 把 二 进 制 数 转换 成 浮 点 数 


例如 : 
var iNum1 = 25; //25 等 于 00000000000000000000000000011001 
^var iNum2 = ~iNum1; ` // 转 换 为 11111111111111111111111111100110 
alert(iNum2); // 输 出 "-26" 
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位 运算 NOT 实质 上 是 对 数字 求 负 ， 然 后 减 1， 因 此 25 4X -26。 用 下 面 的 方法 也 可 
以 得 到 同样 的 方法 : 


var iNum1 = 25; 
var iNum2 = -iNum1 -1; 
alert(iNum2); // 输 出 -26 


位 运算 AND 


位 运算 AND 由 和 号 (8) 表示 ， 直 接 对 数字 的 二 进 制 形式 进行 运算 。 它 把 每 个 数字 
中 的 数位 对 齐 ， 然 后 用 下 面 的 规则 对 同一 位 置 上 的 两 个 数位 进行 AND 运算 : 


第 一 个 数字 中 的 数位 第 二 个 数字 中 的 数位 结果 
1 1 1 
1 0 0 
0 1 0 
0 0 0 


例如 ， 要 对 数字 25 和 3 进行 AND 运算 ， 代 码 如 下 所 示 : 


var iResult = 25 & 3; 
alert(iResult); // 输 出 "1" 


25 和 3 进行 AND 运算 的 结果 是 1。 为 什么 ?分 析 如 下 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


AND - 0000 0000 0000 0000 0000 0000 0000 0001 


可 以 看 出 ， 在 25 和 3 中 ， 只 有 一 个 数位 (位 0) 存放 的 都 是 1， 因 此 ， 其 他 数位 
生成 的 都 是 0， 所 以 结果 为 1。 


位 运算 OR 


位 运算 OR 由 符号 (|) 表示 ， 也 是 直接 对 数字 的 二 进 制 形式 进行 运算 。 在 计算 每 位 
时 ，OR 运算 符 采 用 下 列 规则 : 


第 一 个 数字 中 的 数位 第 二 个 数字 中 的 数位 结果 
1 1 1 
1 0 1 
0 1 1 
0 0 0 


仍然 使 用 AND 运算 符 所 用 的 例子 ， 对 25 和 3 进行 OR 运算 ， 代 码 如 下 : 


var iResult = 25 | 3; 
alert(iResult); // 输 出 "27" 


25 和 3 进行 OR 运算 的 结果 是 27 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


OR - 0000 0000 0000 0000 0000 0000 0001 1011 


可 以 看 出 ， 在 两 个 数字 中 ， 共 有 4 个 数位 存放 的 是 1， 这 些 数位 被 传递 给 结果 。 二 
进 制 代码 11011 等 于 27。 


位 运算 XOR 


位 运算 XOR 由 符号 (^) 表示 ， 当 然 ， 也 是 直接 对 二 进 制 形 式 进 行 运算 。XOR 不 
同 于 OR， 当 只 有 一 个 数位 存放 的 是 1 时 ， 它 才 返 回 1。 真 值 表 如 下 : 


第 一 个 数字 中 的 数位 第 二 个 数字 中 的 数位 结果 


1 1 0 
1 0 1 
0 1 1 
0 0 0 


对 25 和 3 进行 XOR 运算 ， 代 码 如 下 : 


var iResult = 25 ^ 3; 
alert(iResult); // 输 出 "26" 


25 和 3 进行 XOR 运算 的 结果 是 26 : 


000 0000 0000 0000 0000 0000 0001 1001 
000 0000 0000 0000 0000 0000 0000 0011 


XOR - 0000 0000 0000 0000 0000 0000 0001 1010 


C9 O1 
Hog 
oo 


可 以 看 出 ， 在 两 个 数字 中 ， 共 有 4 个 数位 存放 的 是 1， 这 些 数 位 被 传递 给 结果 。 二 
进 制 代 码 11010 等 于 26。 


左 移 运算 


左 移 运算 由 两 个 小 于 号 表示 (<<) 。 它 把 数字 中 的 所 有 数位 向 左 移动 指定 的 数量 。 
例如 ， a (等 于 二 进 制 中 的 10) 左 移 5 位 ， 结 果 为 64 (等 于 二 进 制 中 的 
1000000 


var iOld 
var iNew 


2; // 等 于 二 进 制 10 
iOld << 5; // 等 于 二 进 制 1000000 十 进 制 64 


注意 : 在 左 移 数 位 时 ， 数 字 右 边 多 出 5 个 空位 。 左 移 运 算 用 0 填充 这 些 空位 ， 使 结 
果 成 为 完整 的 32 位 数字 。 


“秘密 的 ”符号 位 数字 2 


数字 2 向 左 移 5 位 ( 数字 64) -— 
[olololololololololololololololololololololololololilolololololo 


以 口 填充 


注意 : 左 移 运算 保留 数字 的 符号 位 。 例 如 ， 如 果 把 -2 左 移 5 位 ， 得 到 的 是 -64， 而 
不 是 64。 “符号 仍然 存储 在 第 32 位 中 吗 ? "是 的 ， 不 过 这 在 ECMAScript 后 台 进 
行 ， 开 发 者 不 能 直接 访问 第 32 个 数位 。 即 使 输出 二 进 制 字符 串 形式 的 负数 ， 显 示 
的 也 是 负 号 形式 (例如 ，-2 将 显示 -10。 ) 


有 符号 右 移 运算 


有 符号 右 移 运算 符 由 两 个 大 于 号 表示 (>>) 。 它 把 32 位 数字 中 的 所 有 数位 整体 右 
移 ， 同 时 保留 该 数 的 符号 〈 正 号 或 负 号 ) 。 有 符号 右 移 运算 符 恰 好 与 左 移 运 算 相 
反 。 例 如 ， 把 64 右 移 5 位 ， 将 变 为 2 : 


var iOld 
var iNew 


64; // 等 于 二 进 制 1000000 
i01d >> 5; // 等 于 二 进 制 10 十 进 制 2 


同样 ， 移 动 数 位 后 会 造成 空位 。 这 次 ， 空 位 位 于 数字 的 左 侧 ， 但 位 于 符号 位 之 后 。 
ECMAScript 用 符号 位 的 值 填充 这 些 空 位 ， 创 建 完整 的 数字 ， 如 下 图 所 示 : 


“秘密 的 ”符号 位 数字 2 


[IaTaToTaTaToTTaToTTOTOTOTOTOTOTOTOTOTOTOTOTOTOTOTOTOTOTOTIT 


— 数字 2 向 左 移 5 位 ( 数字 64) 
[olololololololololololololololololololololololololilolololololo 


以 口 填充 
无 符号 右 移 运算 
无 符号 右 移 运算 符 由 三 个 大 于 号 (>>>) 表示 ， 它 将 无 符号 32 位 数 的 所 有 数位 整 
体 右 移 。 对 于 正 数 ， 无 符号 右 移 运算 的 结果 与 有 符号 右 移 运算 一 样 。 
用 有 符号 右 移 运算 中 的 例子 ， 把 64 右 移 5 位 ， 将 变 为 2 : 


var iOld 
var iNew 


64; // 等 于 二 进 制 1000000 
i01d >>> 5; // 等 于 二 进 制 10 十 进 制 2 


对 于 负数 ， 情 况 就 不 同 了 。 
无 符号 右 移 运算 用 0 填充 所 有 空位 。 对 于 正 数 ， 这 与 有 符号 右 移 运算 的 操作 一 样 ， 
而 负数 则 被 作为 正 数 来 处 理 。 


由 于 无 符号 右 移 运 算 的 结果 是 一 个 32 位 的 正 数 ， 所 以 负数 的 无 符号 右 移 运 算得 到 
的 总 是 一 个 非常 大 的 数字 。 例 如 ， 如 果 把 -64 右 移 5 位 ， 将 得 到 134217726。 如 何 
得 到 这 种 结果 的 呢 ? 


要 实现 这 一 点 ， 需 要 把 这 个 数字 转换 成 无 符号 的 等 价 形式 (尽管 该 数字 本 身 还 是 有 
符号 的 ) ， 可 以 通过 以 下 代码 获得 这 种 形式 : 


var iUnsigned64 = -64 >>> 0; 


然后 ， 用 Number 类 型 的 toString) 获取 它 的 真正 的 位 表示 ， 采 用 的 基 为 2 : 


alert(iUnsigned64.toString(2)); 


这 将 生成 11111111111111111111111111000000， 即 有 符号 整数 -64 的 二 进 制 补 码 表 
示 ， 不 过 它 等 于 无 符号 整数 4294967232。 


出 于 这 种 原因 ， 使 用 无 符号 右 移 运算 符 要 小 心 。 


ECMAScript Boolean 运算 符 


Boolean 运算 符 非 常 重要 ， 它 使 得 程序 语言 得 以 正常 运行 。 
Boolean 运算 符 有 三 种 : NOT, AND 和 OR, 


ToBoolean 操作 


在 学 习 各 种 逻辑 运算 符 之 前 ， 让 我 们 先 了 解 一 下 ECMAScript-262 v5 规范 中 描述 的 
ToBoolean 操作 。 


抽象 操作 ToBoolean 将 其 参数 按照 下 表 中 的 规则 转换 为 逻辑 值 : 


参数 类 型 结果 

Undefined false 

Null false 

Boolean 结果 等 于 输入 的 参数 (不 转换 ) 

Number 如 果 参 数 为 +0, -0 或 NaN， 则 结果 为 false ; 否则 为 true。 
String 如 果 参 数 为 空 字符 串 ， 则 结果 为 false ; 否则 为 true, 
Object true 


逻辑 NOT 运算 符 


在 ECMAScript Fh, 24 NOT 运算 符 与 C 和 Java 中 的 逻辑 NOT 运算 符 相 同 ， 都 
由 感叹 号 (!) 表示 。 


与 逻辑 OR F248 AND 运算 符 不 同 的 是 ， 逮 辑 NOT 运算 符 返 回 的 一 定 是 
Boolean 值 。 


逻辑 NOT 运算 符 的 行为 如 下 : 


e 如 果 运 算数 是 对 象 ， 返 回 false 

e 如 果 运 算数 是 数字 0， 返 回 true 

e 如 果 运 算数 是 0 以 外 的 任何 数字 ， 返 回 false 
e 如 果 运 算数 是 null， 返 回 true 

e 如 果 运 算数 是 NaN， 返 回 true 

e 如 果 运 算数 是 undefined， 发 生 错 误 


通常 ， 该 运算 符 用 于 控制 循环 : 


var bFound = false; 
var i= 0; 


"while (!bFound)' { 


if (aValue[i] == vSearchValues) ( 
bFound = true; 

) else ( 
i++; 

} 


} 


在 这 个 例子 中 ，Boolean 变量 (bFound) 用 于 记录 检索 是 否 成 功 。 找 到 问题 中 的 数 
据 项 时 ，bFound 将 被 设置 为 true，!bFound 将 等 于 false， 意 味 着 运行 将 跳出 
while 循环 。 


判断 ECMAScript 变量 的 Boolean 值 时 ， 也 可 以 使 用 逻辑 NOT 运算 符 。 这 样 做 需 
要 在 一 行 代 码 中 使 用 两 个 NOT 运算 符 。 无 论 运算 数 是 什么 类 型 ， 第 一 个 NOT 运算 
符 返 回 Boolean 值 。 第 二 个 NOT 将 对 该 Boolean 值 求 负 ， 从 而 给 出 变量 真正 的 
Boolean 值 。 


var bFalse = false; 

var sRed = "red"; 

var iZero = 0; 

var iThreeFourFive = 345; 
var oObject = new Object; 


document .write("bFalse 的 逻辑 值 是 " + (!!bFalse)); 
document.write("sRed 的 逻辑 值 是 " + (!!sRed)); 
document.write("izero 的 逻辑 值 是 " + (!!iZero)); 
document.write("iThreeFourFive 的 逻辑 值 是 " + (!!iThreeFourFive)); 
document.write("oObject 的 逻辑 值 是 " + (!100bject)); 
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bFalse 的 逻辑 值 是 false 

sRed 的 逻辑 值 是 true 

iZero 的 逻辑 值 是 false 
iThreeFourFive 的 逻辑 值 是 true 
oObject 的 逻辑 值 是 true 


逻辑 AND 运算 符 
在 ECMAScript F, 24 AND 运算 符 用 双 和 号 (&&) RM: 
例如 : 


var bTrue = true; 
var bFalse = false; 
var bResult = bTrue && bFalse; 


下 面 的 真 值 表 描述 了 逻辑 AND 运算 符 的 行为 : 


运算 数 1 运算 数 2 结果 
true true true 
true false false 
false true false 
false false false 


逻辑 AND 运算 的 运算 数 可 以 是 任何 类 型 的 ， 不 止 是 Boolean 值 。 


如 果 某 个 运算 数 不 是 原始 的 Boolean H4, 244 AND 运算 并 不 一 定 返 回 Boolean 
值 : 


如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 Boolean 值 ， 返 回 该 对 象 。 
如 果 两 个 运算 数 都 是 对 象 ， 返 回 第 二 个 对 象 。 

如 果 某 个 运算 数 是 null， 返 回 null, 

如 果 某 个 运算 数 是 NaN， 返 回 NaN. 

如 果 某 个 运算 数 是 undefined， 发 生 错 误 。 


与 Java 中 的 逻辑 AND 运算 相似 ，ECMAScript 中 的 逻辑 AND 运算 也 是 简便 运 

算 ， 即 如 果 第 一 个 运算 数 决定 了 结果 ， 就 不 再 计算 第 二 个 运算 数 。 对 于 逻辑 AND 
运算 来 说 ， 如 果 第 一 个 运算 数 是 false， 那 么 无 论 第 二 个 运算 数 的 值 是 什么 ， 结 果 都 
不 可 能 等 于 true。 


考虑 下 面 的 例子 : 


var bTrue = true; 
var bResult = (bTrue && bUnknown); // 发 生 错 误 
alert(bResult); // 这 一 行 不 会 执行 


这 段 代 码 在 进行 逻辑 AND 运算 时 将 引发 错误 ， 因 为 变量 bUnknown 是 未 定义 的 。 
变量 bTrue 的 值 为 true， 因 为 逻辑 AND 运算 将 继续 计算 变量 bUnknown。 这 样 做 
就 会 引发 错误 ， 因 为 bUnknown 的 值 是 undefined， 不 能 用 于 逻辑 AND 运算 。 


如 果 修 改 这 个 例子 ， 把 第 一 个 数 设 为 false， 那 么 就 不 会 发 生 错误 : 
var bFalse = false; 


var bResult = (bFalse && bUnknown); 
alert(bResult); //iàth "false" 


在 这 段 代 码 中 ， 脚 本 将 输出 逻辑 AND 运算 返回 的 值 ， 即 字符 串 "false", BD em 
bUnknown 的 值 为 undefined， 它 也 不 会 被 计算 ， 因 为 第 一 个 运算 数 的 值 是 false. 


提示 : 在 使 用 逻辑 AND 运算 符 时 ， 必 须 记 住 它 的 这 种 简便 计算 特性 。 
逻辑 OR 运算 符 
ECMAScript 中 的 逻辑 OR 运算 符 与 Java 中 的 相同 ， 都 由 双 坚 线 (||) 表示 : 


var bTrue = true; 
var bFalse = false; 
var bResult = bTrue || bFalse; 


下 面 的 真 值 表 描述 了 逻辑 OR 运算 符 的 行为 : 


运算 数 1 运算 数 2 结果 
true true true 
true false true 
false true true 
false false false 


与 逻辑 AND 运算 符 相 似 ， 如 果 某 个 运算 数 不 是 Boolean 4, 24 OR 运算 并 不 一 
定 返 回 Boolean 值 : 


e 如 果 一 个 运算 数 是 对 象 ， 并 且 该 对 象 左边 的 运算 数值 均 为 false， 则 返回 该 对 


象 。 
e 如 果 两 个 运算 数 都 是 对 象 ， 返 回 第 一 个 对 象 。 
e 如 果 最 后 一 个 运算 数 是 null， 并 且 其 他 运算 数值 均 为 false， 则 返回 null, 
e 如 果 最 后 一 个 运算 数 是 NaN， 并 且 其 他 运算 数值 均 为 false， 则 返回 NaN. 
e 如 果 某 个 运算 数 是 undefined， 发 生 错 误 。 


与 逻辑 AND 运算 符 一 样 ， 远 辑 OR 运算 也 是 简便 运算 。 对 于 逻辑 OR 运算 符 来 
说 ， 如 果 第 一 个 运算 数值 为 true， 就 不 再 计算 第 二 个 运算 数 。 


例如 : 
var bTrue = true; 
var bResult = (bTrue || bUnknown); 
alert(bResult); // 输 出 "true" 


与 前 面 的 例子 相同 ， 变 量 bUnknown 是 未 定义 的 。 不 过 ， 由 于 变量 bTrue 的 值 为 
true, bUnknown 不 会 被 计算 ， 因 此 输出 的 是 "true"。 


如 果 把 bTrue 改 为 false， 将 发 生 错 误 : 


var bFalse = false; 
var bResult = (bFalse || bUnknown); // 发 生 错 误 
alert(bResult); // 不 会 执行 这 一 行 


ECMAScript 乘 性 运算 符 

ECMAScript 的 乘 性 运算 符 与 Java, C, Perl 等 于 语言 中 的 同类 运算 符 的 运算 方 
式 相 似 。 

需要 注意 的 是 ， 乘 性 运算 符 还 具有 一 些 自动 转换 功能 。 


乘法 运算 符 


乘法 运算 符 由 星 号 C) 表示 ， 用 于 两 数 相 乘 。 
ECMAScript 中 的 乘法 语法 与 C 语言 中 的 相同 : 


var iResult = 12 * 34 


， 在 处 理 特殊 值 时 ，ECMAScript 中 的 乘法 还 有 一 些 特殊 行为 : 


e 如 果 结 果 太 大 或 太 小 ， 那 么 生成 的 结果 是 Infinity 或 -Infinity。 
如 果 某 个 运算 数 是 NaN， 结 果 为 NaN。 

Infinity 乘 以 0， 结果 为 NaN. 

Infinity RL 0 以 外 的 任何 数字 ， 结 果 为 Infinity 或 -Infinity。 
Infinity 乘 以 Infinity， 结 果 为 Infinity。 


注释 : 如 果 运 算数 是 数字 ， 那 么 执行 常规 的 乘法 运算 ， 即 两 个 正 数 或 两 个 负数 为 正 
数 ， 两 个 运算 数 符号 不 同 ， 结 果 为 负数 。 


除法 运算 符 
除法 运算 符 由 斜 杠 () 表示 ， 用 第 二 个 运算 数 除 第 一 个 运算 数 : 


var iResult = 88 /11; 


与 乘法 运算 符 相 似 ， 在 处 理 特殊 值 时 ， 除 法 运算 符 也 有 一 些 特殊 行为 : 


如 果 结 果 太 大 或 太 小 ， 那 么 生成 的 结果 是 Infinity 或 -Infinity。 
如 果 某 个 运算 数 是 NaN， 结 果 为 NaN。 

Infinity 被 Infinity 除 ， 结 果 为 NaN。 

Infinity 被 任何 数字 除 ， 结 果 为 Infinity。 

0 除 一 个 任何 非 无 穷 大 的 数字 ， 结 果 为 NaN。 

Infinity 被 0 以 外 的 任何 数字 除 ， 结 果 为 Infinity 或 -Infinity。 


注释 : 如 果 运 算数 是 数字 ， 那 么 执行 常规 的 除法 运算 ， 即 两 个 正 数 或 两 个 负数 为 正 
数 ， 两 个 运算 数 符号 不 同 ， 结 果 为 负数 。 


取 模 运算 符 
除法 (RA) 运算 符 由 百 分 号 (%) 表示 ， 使 用 方法 如 下 : 


var iResult = 26%5; //SF 1 


与 其 他 乘 性 运算 符 相 似 ， 对 于 特殊 值 ， 取 模 运 算 符 也 有 特殊 的 行为 : 


e 如 果 被 除数 是 Infinity， 或 除数 是 0， 结 果 为 NaN. 
e Infinity 被 Infinity 除 ， 结 果 为 NaN. 

e 如 果 除 数 是 无 穷 大 的 数 ， 结 果 为 被 除数 。 

e 如 果 被 除数 为 0， 结 果 为 0。 


Hd : 如 果 运 算数 是 数字 ， 那 么 执行 常规 的 算术 除法 运算 ， 返 回 除法 运算 得 到 的 余 


ECMAScript 加 性 运算 符 
人 ge 
在 ECMAScript 中 ， 加 性 运算 符 有 大 量 的 特殊 行为 。 


加 法 运算 符 
法 运算 符 由 加 号 (+) Rm: 


var iResult = 1+ 2 


与 乘 性 运算 符 一 样 ， 在 处 理 特殊 值 时 ，ECMAScript 中 的 加 法 也 有 一 些 特殊 行为 : 


某 个 运算 数 是 NaN， 那 么 结果 为 NaN. 
-Infinity 加 -Infinity， 结 果 为 -Infinity。 
Infinity 加 -Infinity， 结 果 为 NaN. 

+0 加 +0， 结 果 为 +0。 

-0 加 +0， 结 果 为 +0。 

-0 加 -0， 结 果 为 -0。 


过 ， 如 果 某 个 运算 数 是 字符 串 ， 那 么 采用 下 列 规则 : 


e 如果 两 个 运算 数 都 是 字符 串 ， 把 第 二 个 字符 串 连 接 到 第 一 
。 如 果 只 有 一 个 运算 数 是 字符 串 ， 把 另 一 人 S HBU AT, 结果 是 两 个 字 
符 串 连接 成 的 字符 串 。 


例如 : 
var result = 5 + 5; // 两 个 数字 
alert(result); // 输 出 "10" 
var result2 = 5 + "5"; // 一 个 数字 和 一 个 字符 串 
alert(result); // 输 出 "55" 


这 段 代 码 说 明了 加 法 运算 符 的 两 种 模式 之 间 的 差别 。 正 常情 况 下 ，5+5 等 于 10 m 
始 数值 ) ， 如 上 述 代码 中 前 两 行 所 示 。 不 过 ， 如 果 把 一 个 运算 数 改 为 字符 串 "5"， 
那么 结果 将 变 为 "55" (GAP ， 因为 另 一 个 运算 数 也 会 被 转换 为 字符 


o 


注意 : 为 了 避免 JavaScript 中 的 一 种 常见 错误 ， 在 使 用 加 法 运算 符 时 ， 一 定 要 仔细 
检查 运算 数 的 数据 类 型 。 


减法 运算 符 
减法 运算 符 (-) ， 也 是 一 个 常用 的 运算 符 : 


Var iResult = 2 - 1; 


与 加 法 运算 符 一 样 ， 在 处 理 特 殊 值 时 ， 减 法 运算 符 也 有 一 些 特殊 行为 : 


某 个 运算 数 是 NaN， 那 么 结果 为 NaN。 
Infinity 减 Infinity， 结 果 为 NaN。 
-Infinity 减 -Infinity， 结 果 为 NaN. 
Infinity 减 -Infinity, RA Infinity. 
-Infinity 减 Infinity, 2458 A -Infinity. 

+0 减 +0, HIR +0。 

-0 减 -0， 结 果 为 -0。 

+0 减 -0， 结 果 为 +0。 

某 个 运算 符 不 是 数字 ， 那 么 结果 为 NaN, 


注释 : 如 果 运 算数 都 是 数字 ， 那 么 执行 常规 的 减法 运算 ， 并 返回 结果 。 


ECMAScript 关系 运算 符 


关系 运算 符 执行 的 是 比较 运算 。 每 个 关系 运算 符 都 返回 一 个 布尔 值 。 


S ALICE X 


关系 运算 符 小 于 、 大 于 、 小 于 等 于 和 大 于 等 于 执行 的 是 两 个 数 的 比较 运算 ， 比 较 方 
式 与 算术 比较 运算 相同 。 
每 个 关系 运算 符 都 返回 一 个 布尔 值 : 


//true 
//false 


var bResult1 
var bResult2 


Be Al 
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不 过 ， 对 两 个 字符 串 频 用 关系 运算 符 ， 它 们 的 行为 则 不 同 。 许 多 人 认为 小 于 表示 “在 
字母 顺序 上 靠 前 ”， 大 于 表示 “在 字母 顺序 上 靠 后 ”， 但 事实 并 非 如 此 。 对 于 字符 串 ， 
第 一 个 字符 串 中 每 个 字符 的 代码 都 与 会 第 二 个 字符 串 中 对 应 位 置 的 字符 的 代码 进行 
数值 比较 。 完 成 这 种 比较 操作 后 ， 返 回 一 个 Boolean 值 。 问 题 在 于 大 写字 母 的 代码 
都 小 于 小 写字 母 的 代码 ， 这 意味 这 着 可 能 会 遇 到 下 列 情况 : 


var bResult = "Blue" < "alpha"; 
alert(bResult); // 输 出 true 


在 上 面 的 例子 中 ， 字 符 串 "Blue" 小 于 "alpha"， 因 为 字母 B 的 字符 代码 是 66， 字 母 
a 的 字符 代码 是 97。 要 强制 性 得 到 按照 真正 的 字母 顺序 比较 的 结果 ， 必 须 把 两 个 数 
转换 成 相同 的 大 小 写 形式 (全 大 写 或 全 小 写 的 ) ， 然 后 再 进行 比较 : 


var bResult = "Blue".toLowerCase() < "alpha".toLowerCase(); 
alert(bResult); // 输 出 false 


把 两 个 运算 数 都 转换 成 小 写 ， 确 保 了 正确 识别 出 "alpha" 在 字母 顺序 上 位 于 "Blue" 
之 前 。 


比较 数字 和 字符 串 
另 一 种 赤 手 的 状况 发 生 在 比较 两 个 字符 囊 形式 的 数字 时 ， 比 如 : 


var bResult = "25" < "3"; 
alert(bResult); // 输 出 "true" 


上 面 这 段 代 码 比 较 的 是 字符 串 "25" 和 "3"。 两 个 运算 数 都 是 字符 串 ， 所 以 比较 的 是 
它们 的 字符 代码 ("2" 的 字符 代码 是 50，"3" 的 字符 代码 是 51) 。 


不 过 ， 如 果 把 某 个 运算 数 该 为 数字 ， 那 么 结果 就 有 趣 了 : 


var bResult = "25" < 3; 
alert(bResult); // 输 出 "false" 


这 里 ， 字 符 串 "25" 将 被 转换 成 数字 25， 然 后 与 数字 3 进行 比较 ， 结 果 不 出 所 料 。 


无 论 何 时 比较 一 个 数字 和 一 个 字符 串 ，ECMAScript 都 会 把 字符 串 转 换 成 数字 ， 然 
后 按照 数字 顺序 比较 它们 。 


不 过 ， 如 果 字 符 串 不 能 转换 成 数字 又 该 如 何 呢 ? 考虑 下 面 的 例子 : 


var bResult = "a" < 3; 
alert(bResult); 


你 能 预料 到 这 段 代 码 输出 什么 吗 ? 字 母 "a" 不 能 转换 成 有 意义 的 数字 。 不 过 ， 如 果 
对 它 调用 parselnt() 方法 ， 返 回 的 是 NaN。 根 据 规则 ， 任 何 包含 NaN 的 关系 运算 
符 都 要 返回 false， 因 此 这 段 代 码 也 输出 false : 


var bResult = "a" >= 3; 
alert(bResult); 


通常 ， 如 果 小 于 运算 的 两 个 值 返回 false， 那 么 大 于 等 于 运算 必须 返回 true， 不 过 如 
果 某 个 数字 是 NaN， 情 况 则 非 如 此 。 


ECMAScript 等 性 运算 符 
判断 两 个 变量 是 否 相等 是 程序 设计 中 非常 重要 的 运算 。 在 处 理 原始 值 时 ， 这 种 运算 
相当 简单 ， 但 涉及 对 象 ， 任 务 就 稍 有 点 复 条 。 


ECMAScript 提供 了 两 套 等 性 运算 符 : 等 号 和 非 等 号 用 于 义理 原始 值 ， 全 等 号 和 非 
全 等 号 用 于 义理 对 象 。 


等 号 和 非 等 号 


在 ECMAScript 中 ， 等 号 由 双 等 号 (==) 表示 ， 当 且 仅 当 两 个 运算 数 相 等 时 ， 它 返 
E true。 非 等 号 由 感 以 号 加 等 号 (=) 表示 ， 当 且 仅 当 两 个 运算 数 不 相 等 时 ， 它 返 
[B] true。 为 确定 两 个 运算 数 是 否 相等 ， 这 两 个 运算 符 都 会 进行 类 型 转换 。 


执行 类 型 转换 的 规则 如 下 : 


e 如 果 一 个 运算 数 是 Boolean 值 ， 在 检查 相等 性 之 前 ， 把 它 转 换 成 数字 值 。false 
转换 成 0，true 为 1。 
e 如 果 一 个 运算 数 是 字符 串 ， 另 一 个 是 数字 ， 在 检查 相等 性 之 前 ， 要 党 试 把 字符 


串 转换 成 数字 。 
e 如果 一 个 运算 数 是 对 象 ， 另 一 个 是 字符 串 ， 在 检查 相等 性 之 前 ， 要 尝试 把 对 象 
转换 成 字符 串 。 


e 如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 数字 ， 在 检查 相等 性 之 前 ， 要 尝试 把 对 象 转 
换 成 数字 。 


在 比较 时 ， 该 运算 符 还 遵守 下 列 规则 : 


值 null 和 undefined 相等 。 

在 检查 相等 性 时 ， 不 能 把 null 和 undefined 转换 成 其 他 值 。 

如 果 某 个 运算 数 是 NaN， 等 号 将 返回 false， 非 等 号 将 返回 true. 

如 果 两 个 运算 数 都 是 对 象 ， 那 么 比较 的 是 它们 的 引用 值 。 如 果 两 个 运算 数 指向 
同一 对 象 ， 那 么 等 号 返回 true， 否 则 两 个 运算 数 不 等 。 


重要 提示 : 即使 两 个 数 都 是 NaN， 等 号 仍然 返回 false， 因 为 根据 规则 ，NaN 不 等 
于 NaN。 


下 表 列 出 了 一 些 特殊 情况 ， 以 及 它们 的 结果 : 


null == undefined true 
"NaN" == NaN false 
5 == NaN false 
NaN == NaN false 
NaN != NaN true 
false == true 
true == true 
true == false 
undefined == false 
null == false 
"D" == 5 true 
全 等 号 和 非 全 等 号 


等 号 和 非 等 号 的 同类 运算 符 是 全 等 号 和 非 全 等 号 。 这 两 个 运算 符 所 做 的 与 等 号 和 非 
等 号 相同 ， 只 是 它们 在 检查 相等 性 前 ， 不 执行 类 型 转换 。 


全 等 号 由 三 个 等 号 表示 (===) ， 只 有 在 无 需 类 型 转换 运算 数 就 相等 的 情况 下 ， 才 
返回 true。 


例如 : 
var sNum = "66"; 
var INum = 66; 
alert(sNum == iNum); //iàtd "true" 
alert(sNum === iNum); // 输 出 "false" 


在 这 段 代 码 中 ， 第 一 个 alert 使 用 等 号 来 比较 字符 串 "66" 和 数字 66， 输 出 "true", 
如 前 所 述 ， 这 是 因为 字符 串 "OO" 将 被 转换 成 数字 66，， 然 后 才 与 另 一 个 数字 66 
进行 比较 。 第 二 个 alert 使 用 全 等 号 在 没有 类 型 转换 的 情况 下 比较 字符 串 和 数字 ， 
当然 ， 字 符 串 不 等 于 数字 ， 所 以 输出 "false", 


非 全 等 号 由 感叹 号 加 两 个 等 号 (==) 表示 ， 只 有 在 无 需 类 型 转换 运算 数 不 相等 的 
情况 下 ， 才 返回 true。 


例如 : 


var SNum = "66"; 

var iNum = 66; 

alert(sNum != iNum); // 输 出 "false" 
alert(sNum !== iNum); // 输 出 "true" 


这 里 ， 第 一 个 alert 使 用 非 等 号 ， 把 字符 串 "66" 转换 成 数字 66， 使 得 它 与 第 二 个 运 
算数 66 相等 。 因 此 ， 计 算 结 果 为 "false"， 因 为 两 个 运算 数 是 相等 的 。 第 二 个 alert 
使 用 的 非 全 等 号 。 该 运算 是 在 问 : "sNum" 5 "Num" 不 同 吗 ? 这 个 问题 的 答案 是 : 
是 的 (true) ， 因 为 sNum 是 字符 串 ， 而 iNum 是 数字 ， 它 们 当然 不 同 。 


ECMAScript 条 件 运算 符 


条 件 运 算 符 
条 件 运 算 符 是 ECMAScript 中 功能 最 多 的 运算 符 ， 它 的 形式 与 Java 中 的 相同 。 


_variable = boolean expression ? true value : false value ; 


该 表达 式 主要 是 根据 boolean expression 的 计算 结果 有 条 件 地 为 变量 赋值 。 如 果 
Boolean expression 为 true， 就 把 true value 赋 给 变量 ; 如 果 它 是 false， 就 把 
false value 赋 给 变量 。 


例如 : 


var iMax = (iNum1 > iNum2) ? iNumi : iNum2; 


在 这 里 例子 中 ，iMax 将 被 赋予 数字 中 的 最 大 值 。 表 达 式 声明 如 果 iNum1 大 于 
iNum2， 则 把 iNum1 赋予 iMax。 但 如 果 表 达 式 为 false (BU iNum2 大 于 或 等 于 
iNum1) ， 则 把 iNum2 赋予 iMax。 


ECMAScript 赋值 运算 符 


赋值 运算 符 


简单 的 赋值 运算 符 由 等 号 (=) 实现 ， 只 是 把 等 号 右边 的 值 赋予 等 号 左边 的 变量 。 
例如 : 


var iNum = 10; 


合 赋值 运算 是 由 乘 性 运算 符 、 加 性 运算 符 或 位 移 运算 符 加 等 号 (=) 实现 的 。 这 
些 赋值 运算 符 是 下 列 这 些 常见 情况 的 缩写 形式 : 


var iNum = 10; 
iNum = iNum + 10; 


可 以 用 一 个 复合 赋值 运算 符 改 写 第 二 行 代 码 : 


var iNum = 10; 
iNum += 10; 


每 种 主要 的 算术 运算 以 及 其 他 几 个 运算 都 有 复合 赋值 运算 符 : 


乘法 /赋值 ( *= ) 
除法 /赋值 〈 /= ) 
取 模 /赋值 ( %= ) 
加 法 /赋值 ( += ) 


减法 /赋值 ( -= ) 
左 移 /赋值 (<<= ) 
有 符号 右 移 /赋值 ( >>= ) 
无 符号 右 移 /赋值 ( >>>= ) 


ECMAScript 喜 号 运算 符 


用 逗号 运算 符 可 以 在 一 条 语句 中 执行 多 个 运算 。 


var iNum1 = 1, iNum = 2, iNum3 = 3; 


喜 号 运算 符 常用 变量 声明 中 。 


ECMAScript 语句 


ECMAScript if 语句 


if a ECMAScript 中 最 常用 的 语句 之 一 。 


ECMAScript 语句 


ECMA - 262 描述 了 ECMAScript 的 几 种 语句 (statement) 。 


语句 主要 定义 了 ECMAScript 的 大 部 分 语句 ， 通 常 采用 一 个 或 多 个 关键 字 ， 完 成 给 
定 的 任务 。 


语句 可 以 非常 简单 ， 例 如 通知 函数 退出 ， 也 可 以 非常 复杂 ， 如 声明 一 组 要 反复 执行 


的 命 邻 。 


在 《ECMAScript 语句 》 这 一 章 ， 我 们 介绍 了 所 有 标准 的 ECMAScript 语句 。 


if 语句 

if 语句 是 ECMAScript 中 最 常用 的 语句 之 一 ， 事 实 上 在 许多 计算 机 语言 中 都 是 如 
此 。 

if 语句 的 语法 : 


if” (_condition_) _statement1 “else” _statement2_ 


其 中 condition 可 以 是 任何 表达 式 ， 计 算 的 结果 甚至 不 必 是 真正 的 boolean 值 ， 
ECMAScript 会 把 它 转换 成 boolean 值 。 


如 果 条 件 计算 结 果 为 true， 则 执行 statement? ; 如 果 条 件 计算 结果 为 false， 则 执 
行 statement2, 


每 个 语句 都 可 以 是 单行 代码 ， 也 可 以 是 代码 块 。 
例如 : 
if (i > 30) 
{alert(" 大 于 30");} 


else 
{alert(" 小 于 等 于 30");} 


提示 : 使 用 代码 块 被 认为 是 一 种 最 佳 的 编程 实践 ， 即 使 要 执行 的 代码 只 有 一 行 。 这 
样 做 可 以 使 每 个 条 件 要 执行 什么 一 目 了 然 。 


还 可 以 串联 多 个 并 语句 。 就 像 这 样 : 


"if^ ( conditioni ) _statement1_ “else if' ( condition2 ) _statemer 
‘| _ F 
例如 : 








if Ga- o) 
alert(" 大 于 30"); 

} else if (i < 0) { 
alert(" 小 于 0"); 

} else { 
alert(" 在 0 到 30 Ziq"); 


ECMAScript i&(ti4 ^5] 

迭代 语句 又 叫 循环 语句 ， 声 明 一 组 要 反复 执行 的 命 舍 ， 直 到 满足 某 些 条 件 为 目 。 
循环 通常 用 于 迭代 数组 的 值 〈 因 此 而 得 名 ) ， 或 者 执行 重复 的 算术 任务 。 

本 节 为 您 介绍 ECMAScript 提供 的 四 种 迭代 语句 。 

do-while 语句 


do-while 语句 是 后 测试 循环 ， 即 退出 条 件 在 执行 循环 内 部 的 代码 之 后 计算 。 这 意味 
着 在 计算 表达 式 之 前 ， 至 少 会 执行 循环 主体 一 次 。 


它 的 语法 如 下 : 


‘do ( statement ? "while (_expression_); 


例子 : 

var i = 0; 

do {i += 2;} while (i < 10); 
while 语句 


while 语句 是 前 测试 循环 。 这 意味 着 退出 条 件 是 在 执行 循环 内 部 的 代码 之 前 计算 
的 。 因 此 ， 循 环 主体 可 能 根本 不 被 执行 。 


它 的 语法 如 下 : 
"while? ( expression ) _statement_ 


例子 : 


var i = 0; 
while (i < 10) { 
t= 25 


} 


for 语句 


for 语句 是 前 测试 循环 ， 而 且 在 进入 循环 之 前 ， 能 够 初始 化 变量 ， 并 定义 循环 后 要 
执行 的 代码 。 


它 的 语法 如 下 : 


"for? (_initialization; expression; post-loop-expression ) statem: 


«| zm 








XX : post-loop-expression 之 后 不 能 写 分 号 ， 否 则 无 法 运行 。 


例子 : 


iCount = 6; 

for (var i = 0; i < iCount; i++) { 
alert(i); 

} 


这 段 代 码 定义 了 初始 值 为 0 的 变量 i。 只 有 当 条 件 表达 式 (i < iCount) 的 值 为 true 
时 ， 才 进入 for 循环 ， 这 样 循环 主体 可 能 不 被 执行 。 如 果 执 行 了 循环 主体 ， 那 么 将 
执行 循环 后 表达 式 ， 并 迭代 变量 i。 

for-in 语句 

for 语句 是 严格 的 迭代 语句 ， 用 于 枚 举 对 象 的 属性 。 

它 的 语法 如 下 : 


“for” ( property `in` _expression_) statement 


例子 : 


for (SProp in window) { 
alert(sProp); 


} 


这 里 ，for-in 语句 用 于 显示 window 对 象 的 所 有 属性 。 


前 面 讨 论 过 的 PropertylsEnumerable() 是 ECMAScript 中 专门 用 于 说 明 属 性 是 否 可 
以 用 for-in 语句 访问 的 方法 。 


ECMAScript 标签 语句 


有 标签 的 语句 
可 以 用 下 列 语句 给 语句 加 标签 ， 以 便 以 后 调用 : 


label : statement 


在 这 个 例子 中 ， 标 签 start 可 以 被 之 后 的 break 或 continue 语句 引用 。 
提示 : 在 下 面 的 章节 ， 我 们 将 为 您 介绍 break 和 continue 语句 。 


ECMAScript break 和 continue 语句 


break 和 continue 语句 对 循环 中 的 代码 执行 提供 了 更 严格 的 控制 。 


break 和 continue 语句 的 不 同 之 义 


break 语句 可 以 立即 退出 循环 ， 阻 止 再 次 反复 执行 任何 代码 。 
而 continue 语句 只 是 退出 当前 循环 ， 根 据 控制 表达 式 还 允许 继续 进行 下 一 次 循环 。 
例如 : 


var iNum = 0; 
for (var i-1; i«10; i++) { 
if (19 5 2 0) [ 
"break; 
iNum++; 
} 
alert(iNum); // 输 出 "4" 
在 以 上 代码 中 ，for 循环 从 1 到 10 迭代 变量 i。 在 循环 主体 中 ，if 语句 将 〈 使 用 取 
模 运 算 符 ) 检查 i 的 值 是 否 能 被 5 整除 。 如 果 能 被 5 整除 ， 将 执行 break 语句 。 
alert 显示 "4"， 即 退出 循环 前 执行 循环 的 次 数 。 
如 果 用 continue 语句 代替 这 个 例子 中 的 break 语句 ， 结 果 将 不 同 : 


var iNum = 0; 
for (var i=1; i<10; i++) { 
if (i % 5 == 0) { 
`continue; ` 
iNum++; 
} 
alert(iNum); // 输 出 "8" 


这 里 ，alert 将 显示 "8"， 即 执行 循环 的 次 数 。 可 能 执行 的 循环 总 数 为 9， 不 过 当 B5 
值 为 5 时 ， 将 执行 continue 语句 ， 会 使 循环 跳 过 表达 式 iNum++， 返 回 循环 开头 。 


与 有 标签 的 语句 一 起 使 用 


break 语句 和 continue 语句 都 可 以 与 有 标签 的 语句 联合 使 用 ， 返 回 代 码 中 的 特定 位 


En 


通常 ， 当 循环 内 部 还 有 循环 时 ， 会 这 样 做 ， 例 如 : 


var iNum = 0; 


outermost: 
for (var i=0; i<10; i++) { 
for (var j=0; j«10; j++) { 
if (i == 5 & j == 5) { 
"break outermost; ` 


iNum++; 
} 
} 


alert(iNum); // 输 出 "55" 


在 上 面 的 例子 中 ， 标 签 outermost 表示 的 是 第 一 个 for 语句 。 正 常情 况 下 ， 每 个 for 
语句 执行 10 次 代码 块 ， 这 意味 着 iNum++ 正常 情况 下 将 被 执行 100 次 ， 在 执行 完 
成 时 ，iNum 应 该 等 于 100。 这 里 的 break 语句 有 一 个 参数 ， 即 停止 循环 后 要 跳 转 
到 的 语句 的 标签 。 这 样 break 语句 不 止 能 跳出 内 部 for 语句 (即使 用 变量 j 的 语 
句 ) ， 还 能 跳出 外 部 for 语句 〈 即 使 用 变量 i 的 语句 ) 。 因 此 ，iNum 最 后 的 值 是 
55， 因 为 当 i 和 j 的 值 都 等 于 5 时 ， 循 环 将 终止 。 


可 以 以 相同 的 方式 使 用 continue 语句 : 


var iNum = 0; 


outermost: 
for (var i=0; i<10; i++) { 
for (var j=0; j«10; j++) { 
if (i == 5 && j == 5) { 
"continue outermost; ` 
} 
iNum--; 
} 
} 


alert(iNum); // 输 出 "95" 


在 上 例 中 ，continue 语句 会 迫使 循环 继续 ， 不 止 是 内 部 循环 ， 外 部 循环 也 如 此 。 当 
j 等 于 5 时 出 现 这 种 情况 ， 意 味 着 内 部 循环 将 减少 5 次 迭代 ， 致 使 iNum 的 值 为 
95。 


提示 : 可 以 看 出 ， 和 与 break 和 continue 联合 使 用 的 有 标签 语句 非常 强大 ， 不 过 过 度 
使 用 它们 会 给 调试 代码 荤 来 乃 烦 。 要 确保 使 用 的 标签 县 有 说 明 性 ， 同 时 不 要 嵌 套 太 
多 层 循 环 。 


W3School 前 端 教程 合集 


提示 : 想 了 解 什 么 是 有 标签 语句 ， 请 阅读 ECMAScript 标签 语句 这 一 节 。 
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ECMAScript with 语句 


有 标签 的 语句 
with 语句 用 于 设置 代码 在 特定 对 象 中 的 作用 域 。 


它 的 语法 : 


with (_expression_) _statement_ 


例如 : 


var sMessage = "hello"; 
with(sMessage) { 
alert(toUpperCase()); // 输 出 "HELLO" 


} 


在 这 个 例子 中 ，with 语句 用 于 字符 串 ， 所 以 在 调用 toUpperCase() 方法 时 ， 解 释 程 
序 将 检查 该 方法 是 否 是 本 地 画 数 。 如 果 不 是 ， 它 将 检查 伪 对 象 SMessage， 看 它 是 
否 为 该 对 象 的 方法 。 然 后 ，alert 输出 "HELLO"， 因 为 解释 程序 找到 了 字符 串 
"hello" 的 toUpperCase() 方法 。 


提示 : with 语句 是 运行 缓慢 的 代码 块 ， 尤 其 是 在 已 设置 了 属性 值 时 。 大 多 数 情况 
下 ， 如 果 可 能 ， 最 好 避免 使 用 它 。 


ECMAScript switch 语句 


switch 语句 


switch 语句 是 if 语句 的 兄弟 语句 。 
开发 者 可 以 用 switch 语句 为 表达 式 提供 一 系列 的 情况 (case) 。 
switch 语句 的 语法 : 


switch (_expression_) 


case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 


default: statement ; 


每 个 情况 (case) 都 是 表示 “如 果 expression 等 于 value， 就 执行 statement’. 


关键 字 break 会 使 代码 跳出 switch 语句 。 如 果 没 有 关键 字 break， 代 码 执 行 就 会 继 
续 进 入 下 一 个 case. 


关键 字 default 说 明了 表达 式 的 结果 不 等 于 任何 一 种 情况 时 的 操作 (事实 上 ， 它 相 
对 于 else M^) 。 


switch 语句 主要 是 为 避免 让 开发 者 编写 下 面 的 代码 : 


if (i == 20) 
alert("20"); 
else if (i -- 30) 
alert("30"); 
else if (i -- 40) 
alert("40"); 

else 
alert("other"); 


等 价 的 switch 语句 是 这 样 的 : 


switch (i) { 

case 20: alert("20"); 
break; 

case 30: alert("30"); 
break; 

case 40: alert("40"); 
break; 

default: alert("other"); 


} 


ECMAScript 和 Java 中 的 switch 3% 


ECMAScript 和 Java 中 的 switch 语句 有 两 点 不 同 。 在 ECMAScript P, switch 语 
句 可 以 用 于 字符 串 ， 而 且 能 用 不 是 常量 的 值 说 明 情 况 : 


var BLUE = "blue", RED = "red", GREEN = "green"; 


switch (sColor) { 
case BLUE: alert("Blue"); 


break; 

case RED: alert("Red"); 
break; 

case GREEN: alert("Green"); 
break; 

default: alert("Other"); 


j 


ix B, switch 语句 用 于 字符 串 SColor， 声 明 case 使 用 的 是 变量 BLUE. RED 和 
GREEN， 这 在 ECMAScript 中 是 完全 有 效 的 。 


ECMAScript 西数 


ECMAScript 函数 概述 


A XE ER EA? 


函数 是 一 组 可 以 随时 随地 运行 的 语句 。 
az ECMAScript 的 核心 。 


画 数 是 由 这 样 的 方式 进行 声明 的 : 关键 字 function、 画 数 名 、 一 组 参数 ， 以 及 置 于 
括号 中 的 待 执 行 代 码 。 


数 的 基本 语法 是 这 样 的 : 


function functionName(arg0O, argi, ... argN) { 
statements 


} 


例如 : 


function sayHi(sName, sMessage) { 
alert("Hello " + sName + sMessage); 


349] 38 FH ERX ? 


KAA LB RASS PHSRHTAA, SUSRUB TES 
如 果 您 想 调 用 上 例 中 的 那个 汞 数 ， 可 以 使 用 如 下 的 代码 : 


sayHi("David", " Nice to meet you!") 
调用 上 面 的 函数 sayHi() 会 生成 一 个 警告 窗口 。 您 可 以 亲自 试 一 试 这 个 例子 


E AUAM (A RIG f. 7? 


函数 sayHi() 未 返回 值 ， 不 过 不 必 专 门 声明 它 ( 像 在 Java 中 使 用 void 那样 ) 。 


即使 画 数 确实 有 值 ， 也 不 必 明 确 地 声明 它 。 该 落 数 只 需要 使 用 return 运算 符 后 跟 要 
返回 的 值 即 可 。 


function sum(iNumi, iNum2) { 
return iNum1 + iNum2; 


} 


下 面 的 代码 把 sum BAORE B^) [8 t e — I 3E : 


var iResult - sum(1,1); 
alert(iResult); // 输 出 "2" 


另 一 个 重要 概念 是 ， 与 在 Java 中 一 样 ， 回 数 在 执行 过 return 语句 后 立即 停止 代 
码 。 因 此 ，return i 二 句 后 的 代码 都 不 会 被 执行 。 


例如 ， 在 下 面 的 代码 中 ，alert 窗口 就 不 会 显示 出 来 : 


function sum(iNumi, iNum2) { 
return iNum1 + iNum2; 
alert(iNumi + iNum2); 


} 


—PHAHALAA ST return 语句 ， 如 下 所 示 : 


function diff(iNumi, iNum2) { 
if (iNum1 > iNum2) { 
return iNum1 - iNum2; 
} else { 
return iNum2 - iNum1; 


} 
} 


上 面 的 函数 用 于 返回 两 个 数 的 差 。 要 实现 这 一 点 ， 必 须 用 较 大 的 数 减 去 较 小 的 数 ， 
因此 用 if 语句 决定 执行 哪个 return 语句 。 


如 果 辑 数 无 返回 值 ， 那 么 可 以 调用 没有 参数 的 return 运算 符 ， 随 时 退出 函数 。 
例如 : 


function sayHi(sMessage) { 
if (sMessage == "bye") { 
return; 


} 


alert(sMessage); 


} 


这 段 代 码 中 ， 如 果 sMessage SF "bye"， 就 永远 不 显示 警告 框 。 


注释 : 如 果 画 数 无 明确 的 返回 值 ， 或 调用 了 没有 参数 的 return 语句 ， 那 么 它 真 正 返 
回 的 值 是 undefined, 


ECMAScript arguments 对 象 


arguments 对 象 


在 豆 数 代码 中 ， 使 用 特殊 对 象 arguments， 开 发 者 无 需 明 确 指 出 参数 名 ， 就 能 访问 
它们 。 


例如 ， 在 函数 sayHi() 中 ， 第 一 个 参数 是 message. FB arguments[0] 也 可 以 访问 
即 第 一 个 参数 的 值 〈 第 一 个 参数 位 于 位 置 0， 第 二 个 参数 位 于 位 置 1， 依 
此 类 推 ) 。 


因此 ， 无 需 明 确 命名 参数 ， 就 可 以 重 写 事 数 : 


function sayHi() { 
if ("arguments[0]^ == "bye") { 
return; 


j 


alert(arguments[0]); 


仿 测 参数 个 数 


还 可 以 用 arguments 对 象 检 测 画 数 的 参数 个 数 ， 引 用 属性 arguments.length BD 


可 


o 


TARRA SH HH ER US FLEX USE FH B9 UT : 


function howManyArgs() { 
alert(arguments.length); 


howManyArgs("string", 45); 
howManyArgs(); 
howManyArgs(12); 


上 面 这 段 代码 将 依次 显示 "2"、"0" 和 "1"。 


注释 : 与 其 他 程序 设计 语言 不 同 ，ECMAScript 不 会 验证 传递 给 贺 数 的 参数 个 数 是 
否 等 于 函数 定义 的 参数 个 数 。 开 发 者 定义 的 函数 都 可 以 接受 任意 个 数 的 参数 (根据 
Netscape 的 文档 ， 最 多 可 接受 255 个 ) ， 而 不 会 引发 任何 错误 。 任 何 遗 漏 的 参数 
都 会 以 undefined 传递 给 画 数 ， 多 余 的 函 JAUJA, 


s AER SACER. 3X 
用 arguments xi RPNE A 5 AROS, DATA LES A, : 


function doAdd() { 
if(arguments.length -- 1) ( 
alert(arguments[0] + 5); 
) else if(arguments.length -- 2) ( 
alert(arguments[0] + arguments[1]); 
} 
} 


doAdd(10); // 输 出 "15" 
doAdd(40, 20); // 输 出 "60" 


当 只 有 一 个 参数 时 ，doAdd() HAASI 5。 如 果 有 两 个 参数 ， 则 会 把 两 个 参数 
相 加 ， 返 回 它们 的 和 。 所 以 ，doAdd(10) 输出 的 是 "15"， 而 doAdd(40, 20) 输出 的 


是 "60", 


虽然 不 如 重 载 那 么 好 ， 不 过 已 足以 避 开 ECMAScript 的 这 种 限制 。 


ECMAScript Function 对 象 (类 ) 
ECMAScript 的 函数 实际 上 是 功能 完整 的 对 象 。 


Function 对 象 (类 ) 


ECMAScript 最 令 人 感 兴趣 的 可 能 莫 过 于 本 数 实际 上 是 功能 完整 的 对 象 。 
Function 类 可 以 表示 开发 者 定义 的 任何 男 数 。 
用 Function 类 直接 创建 男 数 的 语法 如 下 : 


var function name = new function(_argi_, arg2 , ..., _ 











在 上 面 的 形式 中 ， 每 个 arg eBzE— 1:939, Ra-TSRERAER 〈 要 执行 的 代 
码 ) 。 这 些 参数 必须 是 字符 串 。 


记得 下 面 这 个 函数 吗 ? 


function sayHi(sName, sMessage) { 
alert("Hello " + sName + sMessage); 
} 


还 可 以 这 样 定义 它 : 


var sayHi 


new Function("sName", "sMessage", "alert(\"Hello \" + SName + sMes: 
SS 


虽然 由 于 字符 串 的 关系 ， 这 种 形式 写 起 来 有 些 困 难 ， 但 有 助 于 理解 画 数 只 = 
种 引用 类 型 ， 它 们 的 行为 与 用 Function 类 明确 创建 的 囊 数 a 


请 看 下 面 这 个 例子 





function doAdd(iNum) { 
alert(iNum + 20); 


} 


function doAdd(iNum) { 
alert(iNum + 10); 


} 
doAdd(10); //#@H4 "20" 


如 你 所 知 ， 第 二 个 函数 重 载 了 第 一 个 函数 ， 使 doAdd(10) 输出 了 "20"， 而 不 是 
"30". 


如 果 以 下 面 的 形式 重 写 该 代码 块 ， 这 个 概念 就 清楚 了 : 


var doAdd = new Function("iNum", "alert(iNum + 20)"); 
var doAdd = new Function("iNum", "alert(iNum + 10)"); 
doAdd(10); 
请 观察 这 段 代 码 ， 很 显然 ，doAdd ARAR TATA RAH. WAAR 


BERI T 行为 就 像 其 他 对 象 一 样 。 甚 至 可 以 使 两 个 变量 指向 同一 个 
ENN : 


var doAdd = new Function("iNum", "alert(iNum + 10)"); 
var alsodoAdd = doAdd; 

doAdd(10); // 输 出 "20" 

alsodoAdd(10); // 输 出 "20" 


Ítix B, d Æ doAdd 被 定义 为 函数 ， 然 后 alsodoAdd 被 声明 为 指向 同一 个 玉 数 的 
指针 。 用 这 两 个 变量 都 可 以 执行 该 范 数 的 代码 ， 并 输出 相同 的 结果 - "20"。 因 此 ， 
如 果 画 数 名 只 是 指向 函数 的 变量 ， 那 么 可 以 把 函数 作为 参数 传递 给 另 一 个 图 数 吗 ? 


答 是 肯定 的 ! 


function callAnotherFunc(fnFunction, vArgument) { 
fnFunction(vArgument); 


j 


var doAdd = new Function("iNum", "alert(iNum + 10)"); 
callAnotherFunc(doAdd, 10); // 输 出 "20" 


在 上 面 的 例子 中 ， callAnotherFunc() 有 两 个 参数 - 要 调用 的 函数 和 传递 给 该 函数 的 
参数 。 这 段 代 码 把 doAdd() 传递 给 callAnotherFunc() H&, BBG 10, AH 


"20", 


注意 : 尽管 可 以 使 用 Function 构造 画 数 创建 画 数 ， 但 最 好 不 要 使 用 它 ， 因 为 用 它 定 
义 图 数 比 用 传统 方式 要 慢 得 多 。 不 过 ， 所 有 函数 都 应 看 作 Function 类 的 实例 。 


Function 对 象 的 length 属性 


如 前 所 述 ， 画 数 属于 引用 类 型 ， 所 以 它们 也 有 属性 和 方法 。 
ECMAScript 定义 的 属性 length 声明 函数 期 望 的 参数 个 数 。 例 如 : 
function doAdd(iNum) { 


alert(iNum + 10); 
j 


function sayHi() { 
alert("Hi"); 
j 


alert(doAdd.length); // 输 出 "1" 

alert(sayHi.length); // 输 出 "o" 
函数 doAdd() 定义 了 一 个 参数 ， 因 此 它 的 length 是 1 ; sayHi() 没有 定义 参数 ， 所 
以 length 是 0。 
记 住 ， 无 论 定 义 了 几 个 参数 ，ECMAScript 可 以 接受 任意 多 个 参数 (最 多 25 个 ) ， 


这 一 点 在 《函数 概述 》 这 一 章 中 讲解 过 。 属 性 length 只 是 为 查看 默认 情况 下 预期 的 
参数 个 数 提供 了 一 种 简便 方式 。 


Function 对 象 的 方法 


Function 对 象 也 有 与 所 有 对 象 共享 的 valueOf() AA toString) 方法 。 这 两 个 方 
法 返回 的 都 是 函数 的 源 代码 ， 在 调试 时 尤其 有 用 。 例 如 : 


function doAdd(iNum) { 
alert(iNum + 10); 


document .write(doAdd.toString()); 


上 面 这 段 代 码 输 出 了 doAdd()PSZRBS SCA, ! 


ECMAScript i & (closure) 


ECMAScript 最 易 让 人 误解 的 一 点 是 ， 它 支持 闭 包 (closure). 


闭 包 ， 指 的 是 词法 表示 包括 不 被 计算 的 变量 的 画 数 ， 也 就 是 说 ， 回 数 可 以 使 用 函数 
之 外 定义 的 变量 。 


简单 的 闭 包 实例 
在 ECMAScript 中 使 用 全 局 变量 是 一 个 简单 的 闭 包 实例 。 请 思考 下 面 这 段 代码 : 


var sMessage = "hello world"; 


function sayHelloworld() { 
alert(sMessage); 


j 


sayHelloworld(); 


在 上 面 这 段 代 码 中 ， 脚 本 被 载 入 内 存 后 ， 并 没有 为 函数 sayHelloWorld() 计算 变量 
sMessage 的 值 。 该 吏 数 捕获 sMessage 的 值 只 是 为 了 以 后 的 使 用 ， 也 就 是 说 ， 解 
释 程序 知道 在 调用 该 本 数 时 要 检查 sMessage 的 值 。sMessage EH AGA FB 
sayHelloWorld() 时 (最 后 一 行 ) 被 赋值 ， 显 示 消 息 "hello world". 


复杂 的 闭 包 实例 
在 一 个 函数 中 定义 另 一 个 会 使 闭 包 变 得 更 加 复杂 。 例 如 : 


var iBaseNum = 10; 


function addNum(iNumi, iNum2) { 
function doAdd() { 
return iNumi + iNum2 + iBaseNum; 


} 
return doAdd(); 


KHZ addNum() GisHRM doAdd() (Ae). ARARE-ThHe, Axe 
on BY ER AE d iNum1 和 iNum2 以 及 全 局 变量 iBaseNum 的 值 。 
addNum() 的 最 后 一 步调 用 了 doAdd()， 把 两 个 参数 和 全 局 变量 相 加 ， 并 返回 它们 
的 和 。 


这 里 要 掌握 的 重要 概念 是 ，doAdd() 本 数 根本 不 接受 参数 ， 它 使 用 的 值 是 从 执行 环 
境 中 获取 的 。 


可 以 看 到 ， 闭 包 是 ECMAScript 中 非常 强大 多 用 的 一 部 分 ， 可 用 于 执行 复 灯 的 计 
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ECMAScript 对 象 


ECMAScript 面向 对 象 技 术 


面向 对 象 术语 


xt RR 


ECMA-262 把 对 象 (object) 定义 为 “属性 的 无 序 集 合 ， 每 个 属性 存放 一 个 原始 值 、 
对 象 或 函数 "。 严 格 来 说 ， 这 意味 着 对 象 是 无 特定 顺序 的 值 的 数组 。 


尽管 ECMAScript 如 此 定义 对 象 ， 但 它 更 通用 的 定义 是 基于 代码 的 名 词 (人 、 地 点 
或 事物 ) 的 表示 。 


每 个 对 象 都 由 类 定义 ， 可 以 把 类 看 做 对 象 的 配方 。 类 不 仅 要 定义 对 象 的 接口 
(interface) (开发 者 访问 的 属性 和 方法 ) ， 还 要 定义 对 象 的 内 部 工作 (使 属性 和 
方法 发 挥 作用 的 代码 ) 。 编 译 器 和 解释 程序 都 根据 类 的 说 明 构 建 对 象 。 


实例 

程序 使 用 类 创建 对 象 时 ， 生 成 的 对 象 叫 作 类 的 实例 (instance) 。 对 类 生成 的 对 象 
的 个 数 的 唯一 限制 来 自 于 运行 代码 的 机 器 的 物理 内 存 。 每 个 实例 的 行为 相同 ， 但 实 
例 处 理 一 组 独立 的 数据 。 由 类 创建 对 象 实 例 的 过 程 叫做 实例 化 (instantiation) 。 


在 前 面 的 章节 我 们 提 到 过 ，ECMAScript 并 没有 正式 的 类 。 相 反 ，ECMA-262 把 对 
象 定义 描述 为 对 象 的 配方 。 这 是 ECMAScript 逻辑 上 的 一 种 折 中 方案 ， 因 为 对 象 定 
义 实 际 上 是 对 象 自身 。 即 使 类 并 不 真正 存在 ， 我 们 也 把 对 象 定义 叫做 类 ， 因 为 大 多 
数 开发 者 对 此 术语 更 熟悉 ， 而 且 从 功能 上 说 ， 两 者 是 等 价 的 。 


面向 对 象 语言 的 要 求 

一 种 面向 对 象 语言 需要 向 开发 者 提供 四 种 基本 能 

1. 封装 - 把 相关 的 信息 (无 论 数据 或 方法 ) 存储 在 对 象 中 的 能 
2. 聚集 - 把 一 个 对 象 存储 在 另 一 个 对 象 内 的 能 力 

3. 继承 - 由 另 一 个 类 (或 多 个 类 ) 得 来 类 的 属性 和 方法 的 能 
4. 多 态 - 编写 能 以 多 种 方法 运行 的 函数 或 方法 的 能 力 
ECMAScript 支持 这 些 要 求 ， 因 此 可 被 是 看 做 面向 对 象 的 。 


对 象 的 构成 


在 ECMAScript 中 ， 对 象 由 特性 (attribute) 构成 ， 特 性 可 以 是 原始 值 ， 也 可 以 是 
引用 值 。 如 果 特 性 存放 的 是 画 数 ， 它 将 被 看 作对 象 的 方法 (method) ， 否 则 该 特性 
被 看 作对 象 的 属性 (property) 。 


ECMAScript 对 象 应 用 


对 象 的 创建 和 销毁 都 在 JavaScript 执行 过 程 中 发 生 ， 理 解 这 种 范式 的 含义 对 理解 


整个 语言 至 关 重 要 。 


声明 和 实例 化 
对 象 的 创建 方式 是 用 关键 字 new 后 面 跟 上 实例 化 的 关 的 名 字 : 


var oObject = new Object(); 
var oStringObject - new String(); 


第 一 行 代 码 创 建 了 Object 类 的 一 个 实例 ， 并 把 它 存储 到 变量 oObject 中 。 第 二 行 
代码 创建 了 String 类 的 一 个 实例 ， 把 它 存储 在 变量 oStringObject P. WREN 
数 无 参数 ， 括 号 则 不 是 必需 的 。 因 此 可 以 采用 下 面 的 形式 重 写 上 面 的 两 行 代 码 : 


var oObject = new Object; 
var oStringObject = new String; 


对 象 引 用 


在 前 面 的 章节 中 ， 我 们 介绍 了 引用 类 型 的 概念 。 在 ECMAScript 中 ， 不 能 访问 对 象 
的 物理 表示 ， 只 能 访问 对 象 的 引用 。 每 次 创建 对 象 ， 存 储 在 变量 中 的 都 是 该 对 象 的 
引用 ， 而 不 是 对 象 本 身 。 


对 象 废除 


ECMAScript 拥有 无 用 存储 单元 收集 程序 (garbage collection routine) ， 意 味 着 不 
必 专 门 销毁 对 象 来 释放 内 存 。 当 再 没有 对 对 象 的 引用 时 ， 称 该 对 象 被 废除 
(dereference) 了 。 运 行 无 用 存储 单元 收集 程序 时 ， 所 有 废除 的 对 象 都 被 销毁 。 每 
当 函 数 执行 完 它 的 代码 ， 无 用 存储 单元 收集 程序 都 会 运行 ， 释 放 所 有 的 局 部 变量 ， 
还 有 在 一 些 其 他 不 可 预知 的 情况 下 ， 无 用 存储 单元 收集 程序 也 会 运行 。 


把 对 象 的 所 有 引用 都 设置 为 null， 可 以 强制 性 地 废除 对 象 。 例 如 : 
var oObject = new Object; 


// do something with the object here 
oObject = null; 


当 变 量 oObject 设置 为 null 后 ， 对 第 一 个 创建 的 对 象 的 引用 就 不 存在 了 。 这 意味 着 
下 次 运行 无 用 存储 单元 收集 程序 时 ， 该 对 象 将 被 销毁 。 


每 用 完 一 个 对 象 后 ， 就 将 其 废除 ， 来 释放 内 存 ， 这 是 个 好 习惯 。 这 样 还 确保 不 再 使 
用 已 经 不 能 访问 的 对 象 ， 从 而 防止 程序 设计 错误 的 出 现 。 此 外 ， 旧 的 浏览 器 〈 如 

IE/MAC) 没有 全 面 的 无 用 存储 单元 收集 程序 ， 所 以 在 卸载 页 面 时 ， 对 象 可 能 不 能 
被 正确 销毁 。 废 除 对 象 和 它 的 所 有 特性 是 确保 内 存 使 用 正确 的 最 好 方法 。 


注意 : 废除 对 象 的 所 有 引用 时 要 当心 。 如 果 一 个 对 象 有 两 个 或 更 多 引用 ， 则 要 正确 
废除 该 对 象 ， 必 须 将 其 所 有 引用 都 设置 为 null。 


FA ie XE AQ AEE XE. 


所 谓 绑 定 (binding) ， 即 把 对 象 的 接口 与 对 象 实例 结合 在 一 起 的 方法 。 


Fyre (early binding) 是 指 在 实例 化 对 象 之 前 定义 它 的 属性 和 方法 ， 这 样 编译 器 
或 解释 程序 就 能 够 提前 转换 机 器 代码 。 在 Java 和 Visual Basic 这 样 的 语言 中 ， 有 
了 早 绑 定 ， 就 可 以 在 开发 环境 中 使 用 IntelliSense ( 即 给 开发 者 提供 对 象 中 属性 和 
方法 列表 的 功能 ) o ECMAScript 不 是 强 类 型 语言 ， 所 以 不 支持 早 绑 定 。 


AA, Rez (late binding) 指 的 是 编译 器 或 解释 程序 在 运行 前 ， 不 知道 对 象 
的 类 型 。 使 用 晚 绑 定 ， 无 需 检 查 对 象 的 类 型 ， 只 需 检 查 对 象 是 否 支 持 属性 和 方法 即 
可 。ECMAScript 中 的 所 有 变量 都 采用 晚 绑 定 方法 。 这 样 就 允许 执行 大 量 的 对 象 操 
作 ， 而 无 任何 惩罚 。 


ECMAScript 对 象 类 型 


在 ECMAScript 中 ， 所 有 对 象 并 非 同等 创建 的 。 
一 般 来 说 ， 可 以 创建 并 使 用 的 对 象 有 三 种 : 本 地 对 象 、 内 置 对象 和 宿主 对 象 。 


本 地 对 象 


ECMA-262 把 本 地 对 象 (native object) 定义 为 “独立 于 宿主 环境 的 ECMAScript 实 
现 提 供 的 对 象 ” ”简单 来 说 ， 本 地 对 象 就 是 ECMA-262 定义 的 类 (引用 类 型 ) 。 它 
们 包括 : 


Object 
Function 
Array 

String 
Boolean 
Number 
Date 
RegExp 
Error 
EvalError 
RangeError 
ReferenceError 
SyntaxError 
TypeError 
URIError 


相关 页 面 

JavaScript 高 级 教程 : ECMAScript 引用 类 型 
JavaScript 高 级 教程 : ECMAScript Function 类 
JavaScript 参考 手册 : Array 对 象 

JavaScript 参考 手册 : Boolean 对 象 
JavaScript 参考 手册 : Date 对 象 

JavaScript 参考 手册 : Number x1 R 
JavaScript 参考 手册 : String 对 象 

JavaScript 参考 手册 : RegExp 对 象 


内 置 对 象 


ECMA-262 把 内 置 对 象 (built-in object) 定义 为 "由 ECMAScript 实现 提供 的 、 独 立 
于 宿主 环境 的 所 有 对 象 ， 在 ECMAScript 程序 开始 执行 时 出 现 "。 这 意味 着 开发 者 不 
必 明 确实 例 化 内 置 对 象 ， 它 已 被 实例 化 了 。ECMA-262 只 定义 了 两 个 内 置 对 象 ， 即 
Global 和 Math (它们 也 是 本 地 对 象 ， 根 据 定义 ， 每 个 内 置 对 象 都 是 本 地 对 象 )。 
相关 页 面 


JavaScript 参考 手册 : Global 对 象 
JavaScript 参考 手册 : Math 对 象 


宿主 对 象 

所 有 非 本 地 对 象 都 是 宿主 对 象 (host object) ， 即 由 ECMAScript 实现 的 宿主 环境 
提供 的 对 象 。 

所 有 BOM 和 DOM 对 象 都 是 宿主 对 象 。 

相关 页 面 

JavaScript 高 级 教程 : JavaScript 实现 


W3School 参考 手册 : JavaScript 参考 手册 
W3School 教程 : HTML DOM 教程 


ECMAScript 对 象 作 用 域 


作用 域 指 的 是 变量 的 适用 范围 。 
公用 、 私 有 和 受 保 扩 作用 域 


在 传统 的 面向 对 象 程序 设计 中 ， 主 要 关注 于 公用 和 私有 作用 域 。 公 用 作用 域 中 的 对 
象 属性 可 以 从 对 象 外 部 访问 ， 即 开发 者 创建 对 象 的 实例 后 ， 就 可 使 用 它 的 公用 属 
NES ee El A ne eA 这 些 属性 
dM 这 意味 着 如 果 类 定义 了 私有 属性 和 方法 ， 则 它 的 子 类 也 不 能 访问 这 些 属 
性 和 方 ; 


受 保护 作用 域 也 是 用 于 定义 私有 的 属性 和 方法 ， 只 是 这 些 属性 和 方法 还 能 被 其 子 类 
访问 。 
ECMAScript 只 有 公用 作用 域 


对 ECMAScript 讨论 上 面 这 些 作 用 域 几乎 毫 无 意义 ， 因 为 ECMAScript 中 只 存在 一 
种 作用 域 - SAFAR., ECMAScript 中 的 所 有 对 象 的 所 有 属性 和 方法 都 是 公用 

的 。 因 此 ， 定 义 自己 的 类 和 对 象 时 ， 必 须 格外 小 心 。 记 住 ， 所 有 属性 和 方法 默认 都 
是 公用 的 ! 

建议 性 的 解决 方法 


许多 开发 者 都 在 网 上 提出 了 有 效 的 属性 作用 域 模式 ， 解 决 了 ECMAScript 的 这 种 问 


题 。 


由 于 缺少 私有 作用 域 ， 开 发 者 确定 了 一 个 规约 ， 说 明 哪 些 属性 和 方法 应 该 被 看 做 私 
有 的 。 这 种 规约 规定 在 属性 前 后 加 下 划 线 : 


obj._color_ = "blue"; 


段 代码 中 ， 属 性 color 是 私有 的 。 注 意 ， 下 划 线 并 不 改变 属性 是 公用 属性 的 事 
它 只 是 告诉 其 他 开发 者 ， 应 该 把 该 属性 看 作 私 有 的 。 


有 些 开发 者 还 喜欢 用 单 下 划 线 说 明 私 有 成 员 ， 例 如 : obj._color。 


静态 作用 域 


这 
实 


静态 作用 域 定义 的 属性 和 方法 任何 时 候 都 能 从 同一 位 置 访 问 。 在 Java 中 ， 类 可 具 
有 属性 和 方法 ， 无 需 实例 化 该 类 的 对 象 ， 即 可 访问 这 些 属性 和 方法 ， 例 如 
java.net.URLEncoder X, CAYEN& encode() 就 是 静态 方法 。 


ECMAScript 没有 静态 作用 域 


严格 来 说 ，ECMAScript 并 没有 静态 作用 域 。 不 过 ， 它 可 以 给 构 迄 画 数 提供 属性 和 
~ infe, HERARERS. MAENZ, GRAVSREMDR. Bl 
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function sayHello() { 
alert("hello"); 


sayHello.alternate = function() { 
alert("hi"); 


sayHello(); // 输 出 "hello" 
sayHello.alternate(); // 输 出 "hi" 


TIY 


这 里 ， 方 法 alternate() 实际 上 是 函数 sayHello 的 方法 。 可 以 像 调 用 常规 画 数 一 样 
调用 sayHello() 输出 "hello"， 也 可 以 调用 sayHello.alternate() 输出 "hi"。 即 使 如 
此 ，alternate() 也 是 sayHello() 公用 作用 域 中 的 方法 ， 而 不 是 静态 方法 。 


关键 字 this 


this 的 功能 


在 ECMAScript 中 ， 要 掌握 的 最 重要 的 概念 之 一 是 关键 字 this 的 用 法 ， 它 用 在 对 象 
的 方法 中 。 关 键 字 this 总 是 指向 调用 该 方法 的 对 象 ， 例 如 : 


var oCar = new Object; 

oCar.color = "red"; 

oCar.showColor = function() { 
alert( this.color'); 


Hh 


oCar .showColor(); // 输 出 "red" 


TIY 


在 上 面 的 代码 中 ， 关 键 字 this 用 在 对 象 的 showColor() 方法 中 。 在 此 环境 中 ，this 
等 于 oCar。 下 面 的 代码 与 上 面 的 代码 的 功能 相同 : 


var oCar = new Object; 

oCar.color = "red"; 

oCar.showColor = function() { 
alert( oCar.color'); 


e 


oCar . showColor(); // 输 出 "red" 


TIY 


使 用 this 的 原因 


为 什么 使 用 this 呢 ? 因为 在 实例 化 对 象 时 ， 总 是 不 能 fcc neue 
量 名 。 使 用 this， 即 可 在 任何 多 个 地 方 重用 同一 个 浪 数 。 请 思考 下 面 的 例子 


function showColor() { 
alert( this.color ); 


m 


var oCari = new Object; 
oCari.color = "red"; 
oCari.showColor = showColor; 


var oCar2 - new Object; 
oCar2.color - "blue"; 
oCar2.showColor - showColor; 


oCari.showColor(); // 输 出 "red" 

oCar2.showColor(); // 输 出 "blue" 
TIY 
在 上 面 的 代码 中 ， 首 先 用 this ELH el 后 创建 两 个 对 象 (oCar1 
和 oCar2) ， 一 个 对 象 的 color 属性 被 设置 为 "red"， 另 一 个 对 象 的 color 属性 被 设 


iB "blue"; a a showColor, 指向 原始 的 showColor () 函数 

(注意 这 里 不 存在 命名 问题 ， 因 为 一 个 是 全 局 函数 ， 而 另 一 个 是 对 象 的 属性 ) 。 调 
用 每 个 对 象 的 showColor(), oCar1 mum "red", im oCar2 的 输出 是 "blue"。 这 是 
因为 调用 oCar1.showColor() t, KRAI this 关键 字 等 于 oCar1。 调 用 
oCar2.showColor() "t, KAÉ this 关键 字 等 于 oCar2。 


注意 ， 引 用 对 象 的 属性 时 ， 必 须 使 用 this 关键 字 。 例 如 ， 如 果 采 用 下 面 的 代码 ， 
showColor() 方法 不 能 运行 : 


function showColor() { 
alert('color' ); 


x 


如 果 不 用 对 象 或 this 关键 字 引 用 变量 ，ECMAScript 就 会 把 它 看 作 局 部 变量 或 全 局 
变量 。 然 后 该 范 数 将 查找 名 为 coor 的 局 部 或 全 局 变量 ， 但 是 不 会 找到 。 结 果 如 何 
We ? 该 函数 将 在 警告 中 显示 "null". 


ECMAScript 定义 类 或 对 象 

使 用 预定 义 对 象 只 是 面向 对 象 语言 的 能 力 的 一 部 分 ， 它 真正 强大 之 处 在 于 能 够 创建 
自己 专用 的 类 和 对 象 。 

ECMAScript 拥有 很 多 创建 对 象 或 类 的 方法 。 


工厂 方式 


原始 的 方式 


因为 对 象 的 属性 可 以 在 对 象 创建 后 动态 定义 ， 所 有 许多 开发 者 都 在 JavaScript 最 初 
引入 时 编写 类 似 下 面 的 代码 : 


var oCar = new Object; 
oCar.color = "blue"; 
oCar.doors = 4; 

oCar.mpg = 25; 

oCar.showColor = function() { 
alert(this.color); 


H 
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在 上 面 的 代码 中 ， 创 建 对 象 car。 然 后 给 它 设 置 几 个 属性 : 它 的 颜色 是 蓝 色 ， 有 四 
个 门 ， 每 加 仓 油 可 以 跑 25 英里 。 最 后 一 个 属性 实际 上 是 指向 范 数 的 指针 ， 意 味 着 
该 属性 是 个 方法 。 执 行 这 段 代 码 后 ， 就 可 以 使 用 对 象 car 


不 过 这 里 有 一 个 问题 ， 就 是 可 能 需要 创建 多 个 car 的 实例 。 


解决 方案 : 工厂 方式 


要 解决 该 问题 ， 开 发 者 创造 了 能 创建 并 返回 特定 类 型 的 对 象 的 工厂 函数 (factory 
function) 。 


例如 ， 画 数 createCar() 可 用 于 封装 前 面 列 出 的 创建 car 对 象 的 操作 : 


function createCar() { 
var oTempCar = new Object; 
oTempCar.color = "blue"; 
oTempCar.doors = 4; 
oTempCar.mpg = 25; 
oTempCar.showColor = function() { 
alert(this.color); 


55 
return oTempCar; 
} 
var oCar1 = createCar(); 
var oCar2 = createCar(); 
TIY 


在 这 里 ， 第 一 个 例子 中 的 所 有 代码 都 包含 在 createCar() HAH, Ib, ic 131 
额外 的 代码 ， 返 回 car 对 象 (oTempCar) 作为 函数 值 。 调 用 此 函数 ， 闻 创建 新 对 
象 ， 并 赋予 它 所 有 必要 的 属性 ， 复 制 出 一 个 我 们 在 前 面 说 明 过 的 car 对 象 。 因 此 ， 
通过 这 种 方法 ， 我 们 可 以 很 容易 地 创建 car 对 象 的 两 个 版 本 (oCar1 和 oCar2) , 
它们 的 属性 完全 一 样 。 


为 图 数 传递 参数 


我 们 还 可 以 修改 createCar() 函数 ， 给 它 传递 各 个 属性 的 默认 值 ， 而 不 是 简单 地 赋 
予 属 性 默认 值 : 


function createCar(sColor,iDoors,iMpg) { 
var oTempCar = new Object; 
oTempCar.color = sColor; 
oTempCar.doors = iDoors; 
oTempCar.mpg = iMpg; 
oTempCar.showColor = function() { 
alert(this.color); 


3 

return oTempCar; 
} 
var oCari = createCar("red",4, 23); 
var oCar2 = createCar("blue",3,25); 
oCari.showColor(); // 输 出 "red" 
oCar2.showColor(); // 输 出 "blue" 
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给 createCar() 函数 加 上 参数 ， 即 可 为 要 创建 的 car 对 象 的 color, doors 和 mpg 属 
性 赋值 。 这 使 两 个 对 象 具有 相同 的 属性 ， 却 有 不 同 的 属性 值 。 


在 工厂 沙 数 外 定义 对 象 的 方法 


虽然 ECMAScript 越 来 越 正 式 化 ， 但 创建 对 象 的 方法 却 被 置之不理 ， 且 其 规范 化 至 
今 还 遭 人 反对 。 一 部 分 是 语义 上 的 原因 ( 它 看 起 来 不 像 使 用 带 有 构造 函数 new 运算 
符 那 么 正规 ) ， 一 部 分 是 功能 上 的 原因 。 功 能 原因 在 于 用 这 种 方式 必须 创建 对 象 的 
ASE. HANIF, RAAKA createCar(), A= 4) 3231 showColor(), 

每 享 同 一 个 


ale 己 的 showColor() 版 本 。 而 事实 上 ， 每 个 对 象 都 共享 同 
Iz o 
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个 问题 : 


"function showColor() ( 
alert(this.color); 

i 

function createCar(sColor,iDoors,iMpg) ( 
var oTempCar - new Object; 
oTempCar.color - sColor; 
oTempCar.doors - iDoors; 
oTempCar.mpg - iMpg; 
"oTempCar.showColor = showColor;' 
return oTempCar; 


} 

var oCari = createCar("red",4,23); 

var oCar2 = createCar("blue",3,25); 

oCari.showColor(); // 输 出 "red" 

oCar2.showColor(); // 输 出 "blue" 
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在 上 面 这 段 重 写 的 代码 中 ， 在 画 数 createCar() ZAI XL T ENR showColor(), f£ 
createCar() 内 部 ， 赋 予 对 象 一 个 指向 已 经 存在 的 | showColor() FX 函数 的 指针 。 从 功能 
上 讲 ， 这 样 解决 了 重复 创建 画 数 对 象 的 问题 ; 但 是 从 语义 上 讲 ， 该 本 数 不 太 像 是 对 
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构造 图 数 方式 
创建 构造 画 数 就 像 创 建 工 厂 丁 数 一 样 容易 。 第 一 步 选 择 类 名 ， 即 构造 画 数 的 名 字 。 


根据 惯例 ， 这 个 名 字 的 首 字 母 大 写 ， 人 是 小 写 的 变量 名 分 开 。 除 
了 这 点 不 同 ， 构 造 画 数 看 起 来 很 像 工 厂 函 数 。 请 考虑 下 面 的 例子 : 


function Car(sColor,iDoors,iMpg) { 
“this .color = sColor; 
"this .doors = iDoors; 
"this'.mpg = iMpg; 
"this '.showColor = function() { 
alert(this.color); 


3 
} 
var oCari = “new Car("red",4, 23); 
var oCar2 = “new Car("blue",3,25); 
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是 使 用 this 关键 字 。 使 用 new 运算 符 构 造 画 数 时 ， 在 执行 第 一 行 代 码 前 先 创 建 一 
个 对 象 ， 只 有 用 this 才能 访问 该 对 象 。 然 后 可 以 直接 赋予 this 属性 ， 默 认 情 况 下 是 
构造 画 数 的 返回 值 (不 必 明 确 使 用 return 运算 符 ) 。 


m, H new 运算 符 和 类 名 Car 创建 对 象 ， 就 更 像 ECMAScript 中 一 般 对 象 的 创 
建 方 式 了 。 


你 也 许 会 问 ， 这 种 方式 在 管理 范 数 方面 是 否 存 在 于 前 一 种 方式 相同 的 问题 呢 ? 是 
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任何 意义 。 这 正 是 下 面 要 讲 的 原型 方式 的 优势 所 在 。 


原型 方式 


该 方式 利用 了 对 象 的 prototype 属性 ， 可 以 把 它 看 成 创建 新 对 象 所 依赖 的 原型 。 


这 里 ， 首 先 用 空 构 造 画 数 来 设置 类 名 。 然 后 所 有 的 属性 和 方法 都 被 直接 赋予 
prototype 属性 。 我 们 重 写 了 前 面 的 例子 ， 代 码 如 下 : 


function Car() { 


Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25; 
Car.prototype.showColor = function() { 
alert(this.color); 


3 
var oCari = new Car(); 
var oCar2 - new Car(); 
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在 这 段 代 码 中 ， 首 先 定义 构造 函数 (Car) ， 其 中 无 任何 代码 。 接 下 来 的 几 行 代 
码 ， 通 过 给 Car 的 prototype 属性 添加 属性 去 定义 Car 对 象 的 属性 。 调 用 new 
Car() 时 ， 原型 的 所 有 属性 都 被 立即 赋予 要 创 建 的 对 象 ， 意 味 着 所 有 Car J 
的 都 是 指向 showColor() 函数 的 指针 。 从 语义 上 讲 ， 所 有 属性 看 起 来 都 属于 一 个 对 
象 ， 因 此 解决 了 前 面 两 种 方式 存在 的 问题 。 


此 外 ， 使 用 这 种 方式 ， 还 能 用 instanceof 运算 符 检 查 变量 指向 的 对 象 的 类 型 。 
因此 ， 下 面 的 代码 将 输出 TRUE : 


alert(oCar1 instanceof Car); // 输 出 "true" 
原型 方式 的 问题 


原型 方式 看 起 来 是 个 不 错 的 解决 方案 。 遗 憾 的 是 ， 它 并 不 尽 如 人 意 。 


首先 ， 这 个 构造 画 数 没有 参数 。 使 用 原型 方式 ， 不 能 通过 给 构造 画 数 传递 参数 来 初 
始 化 属性 的 值 ， 因 为 Car1 和 Car2 的 color 属性 都 等 于 "blue", doors 属性 都 等 于 
4, mpg 属性 都 等 于 25。 这 意味 着 必须 在 对 象 创 建 后 才能 改变 属性 的 默认 值 ， 这 点 
很 令 人 讨厌 ， 但 还 没完 。 真 正 的 问题 出 现在 属性 指向 的 是 对 象 ， EX 
数 共 享 不 会 造成 问题 ， 但 对 象 却 很 少 被 多 个 实例 共享 。 请 思考 下 面 的 例子 


function Car() { 


Car.prototype.color = "blue"; 

Car.prototype.doors = 4; 

Car.prototype.mpg = 25; 

"Car.prototype.drivers = new Array("Mike","John");^ 

Car.prototype.showColor = function() { 
alert(this.color); 


, 


var oCari 
var oCar2 


new Car(); 
new Car(); 


"oCari.drivers.push("Bill");^ 


alert(oCari.drivers); // 输 出 "Mike, John, Bill" 
alert(oCar2.drivers); // 输 出 "Mike, John, Bill" 
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上 面 的 代码 中 ， 属 性 drivers 是 指向 Array 对 象 的 指针 ， 该 数组 中 包含 两 个 名 字 
"Mike" 和 "John", Fi drivers 是 引用 值 ，Car 的 两 个 实例 都 指向 同一 个 数组 。 这 
意味 着 给 oCar1.drivers 添加 值 "Bill"， 在 oCar2.drivers 中 也 能 看 到 。 输 出 这 两 个 
指针 中 的 任何 一 个 ， 结 果 都 是 显示 字符 串 "Mike,John ,Bill"。 


由 于 创建 对 象 时 有 这 人 么 多 问题 ， 你 一 定 会 想 ， 是 否 有 种 合理 的 创建 对 象 的 方法 呢 ? 
答案 是 有 ， 需 要 联合 使 用 构造 酚 数 和 原型 方式 。 


混合 的 构造 男 数 /原型 方式 


联合 使 用 构造 丽 数 和 原型 方式 ， 就 可 像 用 其 他 程序 设计 语言 一 样 创建 对 象 。 这 种 概 
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属性 实例 。 


我 们 重 宇 了 前 面 的 例子 ， 代 码 如 下 : 


function Car(sColor,iDoors,iMpg) { 
this.color = sColor; 
this.doors = iDoors; 
this.mpg = iMpg; 
this.drivers = new Array("Mike", "John"); 


} 


Car.prototype.showColor = function() { 
alert(this.color); 


3 
var oCar1 = new Car("red",4, 23); 
var oCar2 = new Car("blue",3,25); 


oCari.drivers.push("Bill"); 


alert(oCari.drivers); // 输 出 "Mike, John, Bill" 
alert(oCar2.drivers); // 输 出 "Mike, John" 
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现在 就 更 像 创 建 一 般 对 象 了 。 所 有 的 非 函 数 属 性 都 在 构造 画 数 中 创建 ， 意 味 着 又 能 
够 用 构造 画 数 的 参数 赋予 属性 默认 值 了 。 因 为 只 创建 showColor() HAP — AE 
例 ， 所 以 没有 内 存 浪 费 。 此 外 ， 给 oCar1 的 drivers 数组 添加 "Bill" 值 ， 不 会 影响 
到 oCar2 的 数组 ， 所 以 输出 这 些 数 组 的 值 时 ，oCar1.drivers 显示 的 是 
"Mike,John,Bil"， 而 oCar2.drivers 显示 的 是 "Mike,John"。 因 为 使 用 了 原型 方式 ， 
所 以 仍然 能 利用 instanceof 运算 符 来 判断 对 象 的 类 型 。 


这 种 方式 是 ECMAScript 采用 的 主要 方式 ， 它 具有 其 他 方式 的 特性 ， 却 没有 他 们 的 
副作用 。 不 过 ， 有 些 开发 者 仍 觉得 这 种 方法 不 够 完美 。 


动态 原型 方法 


对 于 习惯 使 用 其 他 语言 的 开发 者 来 说 ， 使 用 混合 的 构造 画 seated ee 
谐 。 LE, 定义 类 时 ， 大 多 数 面向 对 象 语言 都 对 属性 和 方法 进行 了 视觉 上 的 封装 
请 考虑 下 面 的 Java X : 


class Car { 
public String color = "blue"; 
public int doors = 4; 
public int mpg = 


public Car(String color, int doors, int mpg) { 
this.color = color; 
this.doors = doors; 
this.mpg = mpg; 

} 


public void showColor() { 
System.out.println(color); 
} 
} 


Java 很 好 地 打包 了 Car 类 的 所 有 属性 和 方法 ， 因 此 看 见 这 段 代 码 就 知道 它 要 实现 
什么 功能 ， 它 定义 了 一 个 对 象 的 信息 。 批 评 混合 的 构造 本 数 /原型 方式 的 人 认为 ， 在 
构造 本 数 内 部 找 属性 ， 在 其 外 部 找 方法 的 做 法 不 合 逮 辑 。 因 此 ， 他 们 设计 了 动态 原 
型 方法 ， 以 提供 更 友好 的 编码 风格 。 


动态 原型 方法 的 基本 想法 与 混合 的 构造 本 数 /原型 方式 相同 ， 即 在 构造 本 数 内 定义 非 
函数 属性 ， 而 函数 属性 则 利用 原型 属性 定义 。 唯 一 的 区 别 是 赋予 对 象 方法 的 位 置 。 
下 面 是 用 动态 原型 方法 重 写 的 Car 类 


function Car(sColor,iDoors,iMpg) { 
this.color = sColor; 
this.doors = iDoors; 
this.mpg = iMpg; 
this.drivers = new Array("Mike", "John"); 


if (typeof Car. initialized == "undefined"') { 
Car.prototype.showColor = function() { 
alert(this.color); 


Hh 


"Car. initialized = true;' 
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直到 检查 typeof Car. initialized 是 否 等 于 "undefined" 之 前 ， 这 个 构造 画 数 都 未 发 
4. 这 行 代码 是 动态 原型 方法 中 最 重要 的 部 分 。 如 果 这 个 值 未 定义 ， 构 造 画 数 
将 用 原型 方式 继续 定义 对 象 的 方法 ， 然 后 把 Car._initialized 设置 为 true。 如 果 这 个 


WELT ( 它 的 值 为 true 时 ，typeof 的 值 为 Boolean) ， 那 么 就 不 再 创建 该 方法 。 
简 而 言 之 ， 该 方法 使 用 标志 (initialized) 来 判断 是 否 已 给 原型 赋予 了 任何 方法 。 
该 方法 只 创建 并 赋值 一 次 ， 传 统 的 OOP 开发 者 会 高 兴 地 发 现 ， 这 段 代 码 看 起 来 更 
像 其 他 语言 中 的 类 定义 了 。 


混合 工厂 方式 
这 种 方式 通常 是 在 不 能 应 用 前 一 种 方式 时 的 变通 方法 。 它 的 目的 是 创建 假 构造 范 
数 ， 只 返回 另 一 种 对 象 的 新 实例 。 
这 上段 代码 看 起 来 与 工厂 函数 非常 相似 : 
function Car() { 
“var oTempCar = new Object;. 
oTempCar.color = "blue"; 
oTempCar.doors = 4; 
oTempCar.mpg = 25; 
oTempCar.showColor = function() { 
alert(this.color); 
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return oTempCar; 
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与 经 典 方式 不 同 ， 这 种 方式 使 用 new 运算 符 ， 使 它 看 起 来 像 真正 的 构造 画 数 : 


var car = new Car(); 
由 于 在 Car() 构造 画 数 内 部 调用 了 new 运算 符 ， 所 以 将 忽略 第 二 个 new 运算 符 
(FERAI) ， 在 构造 画 数 内 部 创建 的 对 象 被 传递 回 交 量 car. 
这 种 方式 在 对 象 方法 的 内 部 管理 方面 与 经 典 方式 有 着 相同 的 问题 。 强 烈 建议 : 除非 
万 不 得 已 ， 还 是 避免 使 用 这 种 方式 。 


来 用 哪 种 方式 
如 前 所 述 ， 目 前 使 用 最 广泛 的 是 混合 的 构造 画 数 /原型 方式 。 此 外 ， 动 态 原始 方法 也 


很 流行 ， 在 功能 上 和 与 构造 函数 /原型 方式 等 价 。 可 以 采用 这 两 种 方式 中 的 任何 一 种 。 
不 过 不 要 单独 使 用 经 典 的 构造 范 数 或 原型 方式 ， 因 为 这 样 会 给 代码 引入 问题 。 


实例 


对 象 全 人 感 尖 趣 的 一 点 是 用 它们 解决 问题 的 方式 。ECMAScript 中 最 常见 的 一 个 问 
题 是 字符 串 连 接 的 性 能 。 与 其 他 语言 类 似 ，ECMAScript 的 字符 串 是 不 可 变 的 ， 即 
它们 的 值 不 能 改变 。 请 考虑 下 面 的 代码 : 


var str = "hello "; 
str += "world"; 


实际 上 ， 这 段 代 码 在 幕后 执行 的 步骤 如 下 : 


. 创建 存储 "hello " 的 字符 串 。 

. 创建 存储 "world" 的 字符 串 。 

. 创建 存储 连接 结果 的 字符 串 。 

. 把 str 的 当前 内 容 复制 到 结果 中 。 
. 把 "world" 复制 到 结果 中 。 

. 更 新 str， 使 它 指向 结果 。 


每 次 完成 字符 串 连接 都 会 执行 步骤 2 到 6， 使 得 这 种 操作 非常 消耗 资源 。 如 果 重 复 
这 一 过 程 几 百 次 ， 甚 至 几 千 次 ， 就 会 造成 性 能 问题 。 解 决 方法 是 用 Array 对 象 存储 
字符 串 ， 然 后 用 join) 方法 〈 参 数 是 空 字 符 串 ) 创建 最 后 的 字符 串 。 想 象 用 下 面 的 
代码 代 蔡 前 面 的 代码 : 
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var arr = new Array(); 
arr[0] "hello "; 
arr[1] "world"; 

var str - arr.join(""); 


这 样 ， 无 论 数 组 中 引入 多 少 字 符 串 都 不 成 问题 ， 因 为 只 在 调用 join) 方法 时 才 会 发 
生 连 接 操作 。 此 时 ， 执 行 的 步骤 如 下 : 


1. 创建 存储 结果 的 字符 串 
2. 把 每 个 字符 串 复 制 到 结果 中 的 合适 位 置 


虽然 这 种 解决 方案 很 好 ， 但 还 有 更 好 的 方法 。 问 题 是 ， 这 段 代 码 不 能 确切 反映 出 它 
的 意图 。 要 使 它 更 容易 理解 ， 可 以 用 StringBuffer 类 打包 该 功能 : 


function StringBuffer () { 
this._strings_ = new Array(); 


StringBuffer.prototype.append = function(str) { 
this. strings .push(str); 


}; 


StringBuffer.prototype.toString = function() { 
return this._strings_.join(""); 


, 


这 段 代 码 首先 要 注意 的 是 strings 属性 ， 本 意 是 私有 属性 。 它 只 有 两 个 方法 ， 即 
append() 和 toString() 方法 。append() 方法 有 一 个 参数 ， 它 把 该 参数 附加 到 字符 串 
数组 中 ，toString() 方法 调用 数组 的 join 方法 ， 返 回 真正 连 接 成 的 字符 串 。 要 用 
StringBuffer 对 象 连接 一 组 字符 串 ， 可 以 用 下 面 的 代码 : 


var buffer = new StringBuffer (); 
buffer.append("hello "); 
buffer.append("world"); 

var result - buffer.toString(); 
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可 用 下 面 的 代码 测试 StringBuffer 对 象 和 传统 的 字符 串 连 接 方 法 的 性 能 : 


var di = new Date(); 

var str = ""; 

for (var i=0; i < 10000; i++) { 
Stn = ext; 

} 


var d2 = new Date(); 


document .write("Concatenation with plus: 
+ (d2.getTime() - di.getTime()) + " milliseconds"); 


var buffer = new StringBuffer(); 

d1 = new Date(); 

for (var i-0; i < 10000; i++) { 
buffer.append("text"); 

} 


var result = buffer.toString(); 
d2 = new Date(); 


document .write("<br />Concatenation with StringBuffer: " 
+ (d2.getTime() - di.getTime()) + " milliseconds"); 
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这 段 代 码 对 字符 串 连 接 进 行 两 个 测试 ， 第 一 个 使 用 加 号 ， 第 二 个 使 用 StringBuffer 

类 。 每 个 操作 都 连接 10000 个 字符 串 。 日 期 值 d1 和 d2 用 于 判断 完成 操作 需要 的 

时 间 。 请 注意 ， 创 建 Date 对 象 时 ， 如 果 没 有 参数 ， 赋 予 对 象 的 是 当前 的 日 期 和 时 

间 。 要 计算 连接 操作 历经 多 少时 间 ， 把 日 期 的 毫秒 表示 (FH getTime() 方法 的 返回 

值 ) 相 减 即 可 。 这 是 衡量 JavaScript 性 能 的 常见 方法 。 该 测试 的 结果 可 以 帮助 您 比 
较 使 用 StringBuffer 类 与 使 用 加 号 的 效率 差异 。 


ECMAScript 修改 对 象 


通过 使 用 ECMAScript， 不 仅 可 以 创建 对 象 ， 还 可 以 修改 已 有 对 象 的 行为 。 


prototype 属性 不 仅 可 以 定义 构造 画 数 的 属性 和 方法 ， 还 可 以 为 本 地 对 象 添加 属性 
和 方法 。 


创建 新 方法 


通过 已 有 的 方法 创建 新 方法 


可 以 用 prototype 属性 为 任何 已 有 的 类 定义 新 方法 ， 就 像 处 理 自己 的 类 一 样 。 例 
如 ， 还 记得 Number 类 的 toString() 方法 吗 ? 如 果 给 它 传递 参数 16， 它 将 输出 十 六 
进 制 的 字符 串 。 如 果 这 个 方法 的 参数 是 2， 那么 它 将 输出 二 进 制 的 字符 串 。 我 们 可 
以 创建 一 个 方法 ， 可 以 把 数字 对 象 直 接 转 换 为 十 六 进 制 字符 串 。 创 建 这 个 方法 非常 
简单 : 


Number.prototype.toHexString = function() { 
return this.toString(16); 


, 


在 此 环境 中 ， 关 键 字 this 指向 Number 的 实例 ， 因 此 可 完全 访问 Number 的 所 有 方 
法 。 有 了 这 段 代 码 ， 可 实现 下 面 的 操作 : 


var iNum = 15; 


alert(iNum.toHexString()); //iytb "F" 
TIY 
由 于 数字 15 等 于 十 六 进 制 中 的 F， 因 此 警告 将 显示 "F"。 
重 命 名 已 有 方法 


我 们 还 可 以 为 已 有 的 方法 命名 更 易 懂 的 名 称 。 例 如 ， 可 以 给 Array 类 添加 两 个 方法 
enqueue() 和 dequeue()， 只 让 它们 反复 调用 已 有 的 push() 和 shift() 方法 即 可 : 


Array.prototype.enqueue = function(vItem) { 
this.push(vItem); 


Array.prototype.dequeue = function() { 
return this.shift(); 


br 
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添加 与 已 有 方法 无 天 的 方法 


当然 ， 还 可 以 添加 与 已 有 方法 无 关 的 方法 。 例 如 ， 假 设 要 判断 某 个 项 在 数组 中 的 位 
置 ， 没 有 本 地 方法 可 以 做 这 种 事情 。 我 们 可 以 轻松 地 创建 下 面 的 方法 : 


Array.prototype.indexOf = function (vItem) { 
for (var i=0; i<this.length; i++) { 
if (vItem == this[i]) { 
return i; 


j 


return -1; 


该 方法 indexOf() 与 String 类 的 同名 方法 保持 一 致 ， 在 数组 中 检索 每 个 项 ， 直 到 发 
现 与 传 进 来 的 项 相同 的 项 目 为 止 。 如 果 找 到 相同 的 项 ， 则 返回 该 项 的 位 置 ， 否 则 ， 
返回 -1。 有 了 这 种 定义 ， 我 们 可 以 编写 下 面 的 代码 : 


var aColors = new Array("red", "green", "blue"); 
alert(aColors.indexOf ("green") ); // 输 出 "1" 


TIY 


为 本 地 对 象 添 加 新 方法 


最 后 ， 如 果 想 给 ECMAScript 中 每 个 本 地 对 象 添加 新 方法 ， 必 须 在 Object 对 象 的 
prototype 属性 上 定义 它 。 前 面 的 章节 我 们 讲 过 ， 所 有 本 地 对 象 都 继承 了 Object 对 
象 ， 所 以 对 Object 对 象 做 任何 改变 ， 都 会 反应 在 所 有 本 地 对 象 上 。 例 如 ， 如 果 想 
添加 一 个 用 和 警告 输出 对 象 的 当前 值 的 方法 ， 可 以 采用 下 面 的 代码 : 


Object.prototype.showValue = function () { 
alert(this.valueOf()); 


lj 

var str - "hello"; 

var iNum - 25; 

str.showValue(); // 输 出 "hello" 

iNum.showValue(); // 输 出 "25" 
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这 里 ，String 和 Number 对 象 都 从 Object 对 象 继承 了 showValue() 方法 ， 分 别 在 
它们 的 对 象 上 调用 该 方法 ， 将 显示 "hello" 和 "25". 


重 定义 已 有 方法 


就 像 能 给 已 有 的 类 定义 新 方法 一 样 ， 也 可 重 定义 已 有 的 方法 。 如 前 面 的 章节 所 述 ， 
画 数 名 只 是 指向 函数 的 指针 ， 因 此 可 以 轻松 地 指向 其 他 函数 。 如 果 修 改 了 本 地 方 
法 ， 如 toString()， 会 出 现 什么 情况 呢 ? 


Function.prototype.toString = function() { 
return "Function code hidden"; 


} 


前 面 的 代码 完全 合法 ， 运 行 结果 完全 符合 预期 : 


function sayHi() { 
alert("hi"); 


alert(sayHi.toString()); // 输 出 "Function code hidden" 
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也 许 你 还 记得 ，Function 对 象 这 一 章 中 介绍 过 Function 的 toString() 方法 通常 输出 
的 是 函数 的 源 代码 。 覆 盖 该 方法 ， 可 以 返回 另 一 个 字符 串 (在 这 个 例子 中 ， 可 以 返 
[B] "Function code hidden") 。 不 过 ，toString() 指向 的 原始 画 数 怎么 了 呢 ? CHR 
无 用 存储 单元 回收 程序 回收 ， 因 为 它 被 完全 废弃 了 。 没 有 能 够 恢复 原始 函数 的 方 

法 ， 所 以 在 覆盖 原始 方法 前 ， 上 比较 安全 的 做 法 是 存储 它 的 指针 ， 以 便 以 后 的 使 用 。 
有 时 你 甚至 可 能 在 新 方法 中 调用 原始 方法 : 


*Function.prototype.originalToString = Function.prototype.toString, 


Function.prototype.toString = function() { 
if (this.originalToString().length > 100) { 
return "Function too long to display."; 
) else { 
return this.originalToString(); 
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在 这 段 代 码 中 ， 第 一 行 代 码 把 对 当前 toString() 方法 的 引用 保存 在 属性 
originalToString 中 。 然 后 用 定制 的 方法 覆盖 了 toString() 方法 。 新 方法 将 检查 该 加 
数 源 代码 的 长 度 是 否 大 于 100。 如 果 是 ， 就 返回 错误 信息 ， 说 明 该 画 数 代码 太 长 ， 
否则 调用 originalToString() FA, ROWAN. 


极 晚 绑 定 (Very Late Binding) 


从 技术 上 讲 ， 根 本 不 存在 极 晚 绑 定 。 本 书 采 用 该 术语 描述 ECMAScript 中 的 一 种 现 
象 ， 即 能 够 在 对 象 实例 化 后 再 定义 它 的 方法 。 例 如 : 


var 0 = new Object(); 
Object.prototype.sayHi = function () { 
alert("hi"); 

3 


o.sayHi(); 


TIY 


在 大 多 数 程 序 设计 语言 中 ， 必 须 在 实例 化 对 象 之 前 定义 对 象 的 方法 。 这 里 ， 方 法 

sayHi() 是 在 创建 Object 类 的 一 个 实例 之 后 来 添加 进来 的 。 在 传统 语言 中 不 仅 没 听 
说 过 这 种 操作 ， 也 没 听 说 过 该 方法 还 会 自动 赋予 Object 对 象 的 实例 并 能 立即 使 用 
( 接 下 来 的 一 行 ) 。 


注意 : 不 建议 使 用 极 晚 绑 定 方法 ， 因 为 很 难 对 其 跟踪 和 记录 。 不 过 ， 还 是 应 该 了 解 
这 种 可 能 。 


ECMAScript 继承 


ECMAScript 继承 机 制 实例 


本 节 使 用 一 个 经 典 的 例子 解释 ECMAScript 的 继承 机 制 。 


继承 机 制 实例 


说 明 继 承 机 制 最 简单 的 方式 是 ， 利 用 一 个 经 典 的 例子 - 几何 形状 。 实 际 上 ， 几 何 形 
状 只 有 两 种 ， 即 椭圆 形 (是 圆 形 的 ) 和 多 边 形 (具有 一 定数 量 的 边 ) o AEA b 
一 种 ， 它 只 有 一 个 焦点 。 三 角形 、 短 形 和 五 边 形 都 是 多 边 形 的 一 种 ， 具有 不 同 数量 
的 边 。 正 方形 是 矩 形 的 一 种 ， 所 有 的 边 等 长 。 这 就 构成 了 一 种 完美 的 继承 关系 。 


在 这 个 例子 中 ， 形 状 (Shape) 是 椭圆 形 (Ellipse) 和 多 边 形 (Polygon) 的 基 类 

(base class) (所 有 类 都 由 它 继承 而 来 ) 。 椭 圆 具有 一 个 属性 foci， 说 明 椭 圆 县 

有 的 焦点 的 个 数 。 BW (Circle) 继承 了 椭圆 形 ， 因 此 圆 形 是 椭圆 形 的 子 类 

(subclass) ， 椭 圆 形 是 圆 形 的 超 类 (superclass) 。 同样 三 角形 (Triangle) 、 

(Rectangle) 和 五 边 形 (Pentagon) 都 是 多 边 AME ， 多 边 形 是 它们 的 超 
最 后 ， 正 方形 (Square) 继承 了 和 矩形。 


最 好 用 图 来 解释 这 种 继承 关系 ， 这 是 UML (统一 建 模 语言 ) 的 用 武之 地 。UML 的 
主要 用 途 之 一 是 ， 可 视 化 地 表示 像 继 承 这 样 的 复 条 对 象 关系 。 下 面 的 图 示 是 解释 
Shape 和 它 的 子 类 之 间 天 系 的 UML AR : 





在 UML 中 ， 每 个 方 框 表 示 一 个 类 ， 由 类 名 说 明 。 三 角形 、 和 矩形 和 五 边 形 顶部 的 线 
段 汇 集 在 一 起 ， 指 向 形状 ， 说 明 过 些 类 都 由 形状 继承 而 来 , 同样 ， 从 正方 形 指向 答 
形 的 箭头 说 明了 它们 之 间 的 继承 关系 。 


ECMAScript 继承 机 制 实现 


继承 机 制 的 实现 


要 用 ECMAScript 实现 继承 机 制 ， 您 可 以 从 要 继承 的 基 类 入 手 。 所 有 开发 者 定义 的 
类 都 可 作为 基 类 。 出 于 安全 原因 ， 本 地 类 和 宿主 类 不 能 作为 基 类 ， 这 样 可 以 防止 公 
用 访问 编译 过 的 浏览 器 级 的 代码 ， 因 为 这 些 代码 可 以 被 用 于 恶意 攻击 。 


选 定 基 类 后 ， 就 可 以 创建 它 的 子 类 了 。 是 否 使 用 基 类 完全 由 你 决定 。 有 时 ， 你 可 能 
想 创建 一 个 不 能 直接 使 用 的 基 类 ， 它 只 是 用 于 给 子 类 提供 通用 的 画 数 。 在 这 种 情况 
下 ， 基 类 被 看 作 抽象 类 。 


Re ECMAScript 并 没有 像 其 他 语言 那样 严格 地 定义 抽象 类 ， 但 有 时 它 的 确 会 创建 
一 些 不 允许 使 用 的 类 。 通 常 ， 我 们 称 这 种 类 为 抽象 类 。 


创建 的 子 类 将 继承 超 类 的 所 有 属性 和 方法 ， 包 括 构 造 事 数 及 方法 的 实现 。 记 住 ， 所 
有 属性 和 方法 都 是 公用 的 ， 因 此 子 类 可 直接 访问 这 些 方法 。 子 类 还 可 添加 超 类 中 没 
有 的 新 属性 和 方法 ， 也 可 以 覆盖 超 类 的 属性 和 方法 。 


继承 的 方式 


和 其 他 功能 一 样 ，ECMAScript 实现 继承 的 方式 不 止 一 种 。 这 是 因为 JavaScript 中 
的 继承 机 制 并 不 是 明确 规定 的 ， 而 是 通过 模仿 实现 的 。 这 意味 着 所 有 的 继承 细节 并 
非 完 全 由 解释 程序 处 理 。 作 为 开发 者 ， 你 有 权 决 定 最 适用 的 继承 方式 。 


下 面 为 您 介绍 几 种 具体 的 继承 方式 。 


对 象 冒充 


构想 原始 的 ECMAScript 时 ， 根 本 没 打算 设 计 对 象 冒充 (object masquerading) 。 
它 是 在 开发 者 开始 理解 玉 数 的 工作 方式 ， 尤 其 是 如 何在 函数 环境 中 使 用 this 关键 字 
后 才 发 展 出 来 。 


其 原理 如 下 : Hie SUE this 关键 字 给 所 有 属性 和 方法 赋值 〈 即 采用 类 声明 的 构 
ERRADA) 。 因 为 构造 函数 只 是 一 个 函数 ， 所 以 可 使 ClassA Hic S25 EX 7j 
ClassB 的 方法 ， 然 后 调用 它 。ClassB 就 会 收 到 ClassA 的 构造 函数 中 定义 的 属性 
和 方法 。 例 如 ， 用 下 面 的 方式 定义 ClassA 和 ClassB : 


function ClassA(sColor) { 
this.color = sColor; 
this.sayColor = function () { 
alert(this.color); 


tee 
} 
function ClassB(sColor) { 
} 


还 记得 吗 ?关键 字 this 引用 的 是 构造 葬 数 当前 创建 的 对 象 。 不 过 在 这 个 方法 中 ， 
this 指向 的 所 属 的 对 象 。 这 个 原理 是 把 ClassA 作为 常规 函数 来 建立 继承 机 制 ， 而 
不 是 作为 构造 画 数 。 如 下 使 用 构造 画 数 ClassB 可 以 实现 继承 机 制 : 


function ClassB(sColor) { 
this.newMethod = ClassA; 
this.newMethod(sColor); 
delete this.newMethod; 


在 这 段 代 码 中 ， 为 ClassA 赋予 了 方法 newMethod Girit, BEgZg Hit 
指针 ) 。 然 后 调用 该 方法 ， 传 递 给 它 的 是 ClassB HEKRA% sSColor。 最 后 一 
行 代 码 删除 了 对 ClassA 的 引用 ， 这 样 以 后 就 不 能 再 调用 它 。 


所 有 新 属性 和 新 方法 都 必须 在 删除 了 新 方法 的 代码 行 后 定义 。 否 则 ， 可 能 会 履 盖 超 
类 的 相关 属性 和 方法 : 


function ClassB(sColor, sName) { 
this.newMethod = ClassA; 
this .newMethod(sColor); 
delete this.newMethod; 


this.name = sName; 
this.sayName = function () { 
alert(this.name) ; 


ty 


为 证 明 前 面 的 代码 有 效 ， 可 以 运行 下 面 的 例子 


var objA = new ClassA("blue"); 

var objB = new ClassB("red", "John"); 
objA.sayColor(); // 输 出 "blue" 
objB.sayColor(); // 输 出 "red" 
objB.sayName(); // 输 出 "John" 


对 象 冒充 可 以 实现 多 重 继承 


有 趣 的 是 ， 对 象 冒充 可 以 支持 多 重 继 承 。 也 就 是 说 ， 一 个 类 可 以 继承 多 个 超 类 。 用 
UML 表示 的 多 重 继承 机 制 如 下 图 所 示 : 


Classy 








Classx 









例如 ， 如 果 存 在 两 个 类 ClassX #l ClassY, ClassZ 想 继承 这 两 个 类 ， 可 以 使 用 下 
面 的 代码 : 


function ClassZ() { 
this.newMethod = ClassX; 
this.newMethod(); 
delete this.newMethod; 


this.newMethod = Classy; 


this.newMethod(); 
delete this.newMethod; 
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这 里 存在 一 个 尊 端 ， 如 果 存 在 两 个 类 ClassX 和 ClassY 具有 同名 的 属性 或 方法 ， 
ClassY 具有 高 优先 级 。 因 为 它 从 后 面 的 类 继承 。 除 这 点 小 问题 之 外 ， 用 对 象 冒充 
实现 多 重 继承 机 制 轻而易举 。 


由 于 这 种 继承 方法 的 流行 ，ECMAScript 的 第 三 版 为 Function 对 象 加 入 了 两 个 方 
法 ， 即 call() 和 apply()。 


call() 方法 


call() 方法 是 与 经 典 的 对 象 冒 充 方法 最 相似 的 方法 。 它 的 第 一 个 参数 用 作 this 的 对 
象 。 其 他 参数 都 直接 传递 给 函数 自身 。 例 如 : 


function sayColor(sPrefix,sSuffix) { 
alert(sPrefix + this.color + sSuffix); 


HH 


var obj - new Object(); 
obj.color = "blue"; 


sayColor.call(obj, "The color is ", "a very nice color indeed."); 


«| cmm i 





在 这 个 例子 中 ， 画 数 sayColor() 在 对 象 外 定义 ， 即 使 它 不 属于 任何 对 象 ， 也 可 以 引 
用 关键 字 this。 对 象 obj 的 color 属性 等 于 blue。 调 用 call) 方法 时 ， 第 一 个 参数 是 
obj， 说 明 应 该 赋予 sayColor() 函数 中 的 this 关键 字 值 是 obj。 第 二 个 和 第 三 个 参数 
是 字符 串 。 它 们 与 sayColor() 函数 中 的 参数 sPrefix 和 sSuffix 匹配 ， 最 后 生成 的 消 
息 "The color is blue, a very nice color indeed." 将 被 显示 出 来 。 


要 和 与 继承 机 制 的 对 象 冒充 方法 一 起 使 用 该 方法 ， 只 需 将 前 三 行 的 赋值 、 调 用 和 删除 
(So ES ABI RT : 


function ClassB(sColor, sName) ( 
//this.newMethod - ClassA; 
/ /this.newMethod(color); 
//delete this.newMethod; 
ClassA.call(this, sColor); 


this.name - sName; 


this.sayName = function () { 
alert(this.name) ; 


ia 
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这 里 ， 我 们 需要 让 ClassA 中 的 关键 字 this 等 于 新 创建 的 ClassB 对 象 ， 因 此 this 
是 第 一 个 参数 。 第 二 个 参数 sColor 对 两 个 类 来 说 都 是 唯一 的 参数 。 


apply() 方法 


apply() 方法 有 两 个 参数 ， 用 作 this 的 对 象 和 要 传递 给 函数 的 参数 的 数组 。 例 如 : 


function sayColor(sPrefix,sSuffix) { 
alert(sPrefix + this.color + sSuffix); 


HH 


var obj - new Object(); 
obj.color = "blue"; 


sayColor.apply(obj, new Array("The color is ", "a very nice color : 








这 个 例子 与 前 面 的 例子 相同 ， 只 是 现在 调用 的 是 apply() 方法 。 调 用 apply() 方法 
时 ， 第 一 个 参数 仍 是 obj， 说 明 上 应 该 赋予 sayColor() 函数 中 的 this 关键 字 值 是 
obj。 第 二 个 参数 是 由 两 个 字符 串 构 成 的 数组 ， 与 sayColor() 函数 中 的 参数 sPrefix 
和 sSuffix 匹配 ， 最 后 生成 的 消息 仍 是 "The color is blue, a very nice color 
indeed."， 将 被 显示 出 来 。 


该 方法 也 用 于 蔷 换 前 三 行 的 赋值 、 调 用 和 删除 新 方法 的 代码 : 


function ClassB(sColor, sName) { 
//this.newMethod = ClassA; 
//this.newMethod(color); 
//delete this.newMethod; 
ClassA.apply(this, new Array(sColor)); 


this.name = sName; 
this.sayName = function () { 
alert(this.name); 


同样 的 ， 第 一 个 参数 仍 是 this， 第 二 个 参数 是 只 有 一 个 值 color 的 数组 。 可 以 把 
ClassB 的 整个 arguments 对 象 作 为 第 二 个 参数 传递 给 apply() 方法 : 


function ClassB(sColor, sName) { 
//this.newMethod = ClassA; 
//this.newMethod(color); 
//delete this.newMethod; 
ClassA.apply(this, arguments); 


this.name = sName; 
this.sayName = function () { 
alert(this.name); 


Hh 
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然 ， 只 有 超 类 中 的 参数 顺序 与 子 类 中 的 参数 顺序 完全 一 致 时 才 可 以 传递 参数 对 
rà 如 果 不 是 是 ， 就 必须 创建 一 个 单独 的 数组 ， 按 照 正 确 的 顺序 放置 参数 。 此 外 ， 还 
可 使 用 call() 方法 。 


原型 链 (prototype chaining) 


继承 这 种 形式 在 ECMAScript 中 原本 是 用 于 原型 链 的 。 上 一 章 介 绍 了 定义 类 的 原型 
方式 。 原 型 链 扩 展 了 这 种 方式 ， 以 一 种 有 趣 的 方式 实现 继承 机 制 。 


在 上 一 章 学 过 ，prototype 对 象 是 个 模板 ， 要 实例 化 的 对 象 都 以 这 个 模板 为 基础 。 
imme, prototype 对 象 的 任何 属性 和 方法 都 被 传递 给 那个 类 的 所 有 实例 。 原 型 
链 利用 这 种 功能 来 实现 继承 机 制 。 


如 果 用 原型 方式 重 定义 前 面 例 子 中 的 类 ， 它 们 将 变 为 下 列 形 式 : 


function ClassA() { 
} 


ClassA.prototype.color = "blue"; 
ClassA.prototype.sayColor = function () { 
alert(this.color); 


, 


function ClassB() { 
} 


"ClassB.prototype = new ClassA();' 


ERU BRE je RET EH EDT i GUT. ix EB, 18 ClassB 的 prototype 
属性 设置 成 ClassA 的 实例 。 这 很 有 意思 ， 因为 想 要 ClassA 的 所 有 属性 和 方法 ， 但 
又 不 想 逐 个 将 它们 ClassB 的 prototype 属性 。 还 有 比 把 ClassA 的 实例 赋予 
prototype 属性 更 好 的 方法 吗 ? 


注意 : 调用 ClassA 的 构造 函数 ， 没 有 给 参数 。 这 在 原型 链 中 是 标准 做 法 。 
要 确保 构造 画 数 没有 任何 参数 。 


与 对 象 冒充 相似 ， 子 类 的 所 有 属性 和 方法 都 必须 出 现在 prototype BH RMA, 
因为 在 它 之 前 赋值 的 所 有 方法 都 会 被 出 除 。 为 什么 ? 因为 prototype 属性 被 替换 成 
了 新 对 象 ， 添 加 了 新 方法 的 原始 对 象 将 被 销毁 。 所 以 ， 为 ClassB 类 添加 name Æ 
性 和 sayName() 方法 的 代码 如 下 : 


function ClassB() { 
} 


ClassB.prototype = new ClassA(); 


ClassB.prototype.name = ""; 
ClassB.prototype.sayName = function () { 
alert(this.name); 


}; 


可 通过 运行 下 面 的 例子 测试 这 段 代 码 : 


var objA = new ClassA(); 
var objB = new ClassB(); 
objA.color = "blue"; 
objB.color = "red"; 
objB.name = "John"; 
0bjA.sayColor(); 
objB.sayColor(); 
objB.sayName(); 
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此 外 ， 在 原型 链 中 ，instanceof 运算 符 的 运行 方式 也 很 独特 。 对 ClassB 的 所 有 实 
例 ，instanceof 为 ClassA 和 ClassB 都 返回 true。 例 如 : 


var objB = new ClassB(); 
alert(objB instanceof ClassA); // 输 出 "true" 
alert(objB instanceof ClassB); // 输 出 "true" 


在 ECMAScript 的 弱 类 型 世界 中 ， 这 是 极其 有 用 的 工具 ， 不 过 使 用 对 象 冒充 时 不 能 
使 用 它 。 


原型 链 的 弊端 是 不 支持 多 重 继承 。 记 住 ， 原 型 链 会 用 另 一 类 型 的 对 象 重 写 类 的 
prototype 属性 。 


混合 方式 


这 种 继承 方式 使 用 构造 函数 定义 类 ， 并 非 使 用 任何 原型 。 对 象 冒 充 的 主要 问题 是 必 
须 使 用 构造 画 数 方式 ， 这 不 是 最 好 的 选择 。 不 过 如 果 使 用 原型 链 ， 就 无 法 使 用 带 套 
效 的 构造 本 数 了 。 开 发 者 如 何 选择 呢 ? 答案 很 简单 ， 两 者 都 用 。 


在 前 一 章 ， 我 们 便 经 讲解 过 创建 类 的 最 好 方式 是 用 构造 酌 数 定义 属性 ， 用 原型 定义 
方法 。 这 种 方式 同样 适用 于 继承 机 制 ， 用 对 象 冒充 继承 构造 画 数 的 属性 ， 用 原型 链 
继承 prototype 对 象 的 方法 。 用 这 两 种 方式 重 写 前 面 的 例子 ， 代 码 如 下 : 


function ClassA(sColor) { 
this.color = sColor; 
} 


ClassA.prototype.sayColor = function () { 
alert(this.color); 


e 


function ClassB(sColor, sName) ( 
"ClassA.call(this, sColor);' 
this.name - sName; 


} 
"ClassB.prototype = new ClassA();. 


ClassB.prototype.sayName = function () { 
alert(this.name) ; 


HH 


在 此 例子 中 ， 继 承 机 制 由 两 行 突出 显示 的 蓝 色 代码 实现 。 在 第 一 行 突出 显示 的 代码 
中 ， 在 ClassB KERNA, AREA ClassA 类 的 sColor 属性 。 在 第 二 行 
突出 显示 的 代码 中 ， 用 原型 链 继承 ClassA 类 的 方法 。 由 于 这 种 混合 方式 使 用 了 原 
型 链 ， 所 以 instanceof 运算 符 仍 能 正确 运行 。 


下 面 的 例子 测试 了 这 段 代 码 : 


var objA = new ClassA("blue"); 

var objB = new ClassB("red", "John"); 
objA.sayColor(); // 输 出 "blue" 
objB.sayColor(); // 输 出 "red" 
objB.sayName(); // 输 出 "John" 
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W3School jQuery 教程 


来 源 : jQuery 教程 
整理 : 飞龙 


jQuery 基础 


jQuery 简介 


jQuery 库 可 以 通过 一 行 fa] 单 的 标记 被 添加 到 网 页 中 。 





jQuery = - 


jQuery 是 一 个 JavaScript HAVE. 
jQuery 库 包含 以 下 特性 : 


HTML 元 素 选 取 

HTML 元 素 操 作 

CSS 操作 

HTML 事件 函数 
JavaScript 特效 和 动画 
HTML DOM 通 万 和 修改 
AJAX 

Utilities 


向 您 的 页 A 面 添加 jQuery 库 


jQuery 库 位 于 一 个 JavaScript 文件 中 ， 其 中 包含 了 所 有 的 jQuery HA, 
可 以 通过 下 面 的 标记 把 jQuery 添加 到 网 页 中 : 


<head> . . . ~ 
“<script type="text/javascript" src="jquery.js"></script> 
</head> 


请 注意 ，<script> 标签 应 该 位 于 页 面 的 <head> 部 分 。 
基础 jQuery 实例 
下 面 的 例子 演示 了 jQuery 的 hide() RX, rei f. HTML 文档 中 所 有 的 <p> 元 素 。 


实例 


«html» 

«head» 

“<script type="text/javascript" src="jquery.js"></script>- 
<script type="text/javascript"> 
$(document ) . ready(function() { 

S button ).clrck(function()t 

"S("p").hide();' 


, 
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«/script» 
«/head» 


«body» 

<h2>This is a heading</h2> 

<p>This is a paragraph.</p> 

<p>This is another paragraph.</p> 
«button type="button">Click me</button> 
</body> 

</html> 


下 载 jQuery 

共有 两 个 版 本 的 jQuery TEFA : 一 份 是 精简 过 的 ， 另 一 份 是 未 压缩 的 〈 供 调试 
或 阅读 ) 。 

这 两 个 版 本 都 可 从 jQuery.com 下 载 。 
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Google 和 Microsoft 对 jQuery 的 支持 都 很 好 。 


如 果 您 不 愿意 在 自己 的 计算 机 上 存放 jQuery 库 ， 那 么 可 以 从 Google 或 Microsoft 
加 载 CDN jQuery 核心 文件 。 


使 用 Google 的 CDN 


<head> 

<script type="text/javascript" src="http://ajax.googleapis.com/aja) 
/jquery/1.4.0/jquery.min.js"></script> 

</head> 





使 用 Microsoft 的 CDN 


<head> 

<script type="text/javascript" src="http://ajax.microsoft.com/ajax, 
/jquery-1.4.min.js"></script> 

</head> 








jQuery 安装 


把 jQuery 添加 到 您 的 网 页 


如 需 使 用 jQuery， 您 需要 下 载 jQuery € (会 在 下 面 为 您 讲解 ) ， 然 后 把 它 包 含 在 
希望 使 用 的 网 页 中 。 


jQuery 库 是 一 个 JavaScript 文件 ， 您 可 以 使 用 HTML 的 «script» 标签 引用 它 : 


<head> 
<script src="jquery.js"></script> 
</head> 


请 注意 ，<script> 标签 应 该 位 于 页 面 的 <head> 部 分 。 


提示 : 您 是 否 很 疑惑 为 什么 我 们 没有 在 <script> 标签 中 使 用 type="text/javascript" 
? 


在 HTML5 中 ， 不 必 那 样 做 了 。JavaScript 是 HTML5 以 及 所 有 现代 浏览 器 中 的 默 
认 脚 本 语言 ! 


Re jQuery 


有 两 个 版 本 的 jQuery 可 供 下 载 : 


e Production version - 用 于 实际 的 网 站 中 ， 已 被 精简 和 压缩 。 
e Development version - 用 于 测试 和 开发 (RE, BAHN) 


这 两 个 版 本 都 可 以 从 jQuery.com 下 载 。 
提示 : 您 可 以 把 下 载 文件 放 到 与 页 面相 同 的 目录 中 ， 这 样 更 方便 使 用 。 
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如 果 您 不 希望 下 载 并 存放 jQuery, 那么 也 可 以 通过 CDN (ABD AMA) 引用 


它 。 
谷歌 和 微软 的 服务 器 都 存 有 jQuery 。 
如 需 从 谷歌 或 微软 引用 jQuery， 请 使 用 以 下 代码 之 一 : 


Google CDN: 


<head> 

«script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jque 
</script> 

</head> 


_ B 
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提示 : 通过 Google CDN 来 获得 最 新 可 用 的 版 本 : 


如 果 您 观察 上 什么 的 Google URL - 4 URL 中 规定 了 jQuery 版 本 (1.8.0)。 如 果 您 
希望 使 用 最 新 版 本 的 jQuery， 也 可 以 从 版 本 字符 串 的 末尾 (比如 本 例 1.8) 删除 一 
TRF, AMARA 1.8 系列 中 最 新 的 可 用 版 本 (1.8.0、1.8.1 等 等 ) ， 或 者 也 可 
ee 那么 谷歌 会 返回 1 系列 中 最 新 的 可 用 版 本 (M 1.1.0 到 

1.9.9) 。 





Microsoft CDN: 


<head> 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js' 
</script> 

</head> 


| 
提示 : 使 用 谷歌 或 微软 的 jQuery， 有 一 个 很 大 的 优势 : 

许多 用 户 在 访问 其 他 站 点 时 ， 已 经 从 谷歌 或 微软 加 载 过 jQuery。 所 有 结果 是 ， 当 他 
们 访问 您 的 站 点 时 ， 会 从 缓存 中 加 载 jQuery， 这 样 可 以 减少 加 载 时 间 。 同 时 ， 大 多 


数 CDN 都 可 以 确保 当 用 户 向 其 请 求 文件 时 ， 会 从 离 用 户 最 近 的 服务 器 上 返回 响 
应 ， 这 样 也 可 以 提高 加 载 速度 。 


jQuery 语法 


通过 jQuery， 您 可 以 选取 (查询 ，query) HTML 元 素 ， 并 对 它们 执行 “ 操 
作 ” (actions) 。 


jQuery 语法 实例 
$(this).hide() 
演示 jQuery hide() 2X, rie SA BUS HTML 元 素 。 


«html» 

«head» 

«script type="text/javascript" src="/jquery/jquery.js"></script> 

<script type="text/javascript"> 

$(document ). ready(function() { 
$("button").click(function(){ 
$(this).hide(); 

3): 

3): 

«/script» 

«/head» 


<body> 
<button type="button">Click me</button> 
</body> 


</html> 


$("#test").hide() 
演示 jQuery hide() ENR, Feist id="test" 的 元 素 。 


«html» 
«head» 
«script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document ). ready(function() { 
$("button").click(function(){ 
$("#test").hide(); 
3); 
3): 
«/script» 
«/head» 


«body» 

<h2>This is a heading</h2> 

<p>This is a paragraph.</p> 

«p id="test">This is another paragraph.</p> 
«button type="button">Click me</button> 
</body> 


</html> 


$("p").hide() 
演示 jQuery hide() 函数 ， 隐 藏 所 有 
元 素 。 


«html» 

«head» 

«script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 

$(document ). ready(function(){ 

$("button").click(function() { 

$("p").hide(); 
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«/script» 
«/head» 


«body» 

<h2>This is a heading</h2> 

<p>This is a paragraph.</p> 

<p>This is another paragraph.</p> 
«button type="button">Click me</button> 
</body> 

</html> 


$(".test").hide() 
演示 jQuery hide() EEX, KRIA class="test" 的 元 素 。 


<html> 

<head> 

<script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() 


$("button").click(function() 


$(".test").hide(); 

3); 
3); 
«/script» 
«/head» 
«body» 
«h2 class="test">This is a heading</h2> 
«p class="test">This is a paragraph.</p> 
<p>This is another paragraph.</p> 
«button type="button">Click me</button> 


</body> 
</html> 


jQuery 语法 


jQuery 语法 是 为 HTML 元 素 的 选取 编制 的 ， 可 以 对 元 素 执 行 某 些 操作 。 
基础 语法 是 : $(selector).action() 
。 美元 符号 定义 jQuery 
e 选择 符 (selector)“ 查 询 " 和 “查找 ”HTML 元 素 
e jQuery 的 action() 执行 对 元 素 的 操作 
示例 
$(this).hide() - 隐藏 当前 元 素 
$("p").hide() - 隐藏 所 有 段落 
$(".test").hide() - 隐藏 所 有 class="test" 的 所 有 元 素 
$("#test").hide() - 隐藏 所 有 id="test" 的 元 素 


jQuery 使 用 的 语法 是 XPath 与 CSS 选择 器 语法 的 组 合 。 在 本 教程 接 下 来 的 
， 您 将 学 习 到 更 多 有 关 选 先 择 器 的 语 X. 


XC 2 HN 


您 也 许 已 经 注意 到 在 我 们 的 实例 中 的 所 有 jQuery 函数 位 于 一 个 document ready ES 
数 中 : 


$(document ) .ready(function(){ 
- jQuery functions go here ---- 
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这 是 为 了 防止 文档 在 完全 加 载 CLE) 之 前 运行 jQuery 代码 。 
如 果 在 文档 没有 完全 加 载 之 前 就 运行 画 数 ， 操 作 可 能 失败 。 下 面 是 两 个 具体 的 例 
Fy 


e 试图 隐藏 一 个 不 存在 的 元 素 
。 获得 未 完全 加 载 的 图 像 的 大 小 


jQuery 选择 十 


选择 器 允许 您 对 元 素 组 或 单个 元 素 进 行 操作 。 


jQuery 选择 外 
在 前 面 的 章节 中 ， 我 们 展示 了 一 些 有 关 如 何 选 取 HTML 元 素 的 实例 。 
关键 点 是 学 习 jQuery 选择 器 是 如 何 准确 地 选取 您 希望 应 用 效果 的 元 素 。 


jQuery 元 素 选 择 器 和 属性 选择 器 允许 您 通 Jii TÄ 签名 、 属性 名 或 内 容 对 HTML 元 素 
进行 选择 。 


选择 器 允许 您 对 HTML 元 素 组 或 单个 元 素 进行 操作 。 
在 HTML DOM 术语 中 : 
选择 器 允许 您 对 DOM 元 素 组 或 单个 DOM 节点 进行 操作 。 


jQuery 元 来 选 择 器 

jQuery 使 用 CSS 选择 器 来 选取 HTML 元 素 。 
$("p") 选取 <p> 元 素 。 

$("p.intro") 选取 所 有 class="intro" 的 <p> 元 素 。 
$("p#demo") 选取 所 有 id="demo" 的 <p> 元 素 。 


jQuery 属性 选择 器 


jQuery 使 用 XPath 表达 式 来 选择 带 有 给 定 属性 的 元 素 。 
$("[href]") 选取 所 有 带 有 href 属性 的 元 素 。 
$("[href=#]") 选取 所 有 带 有 href 值 等 于 "H" 的 元 素 。 
$("[hrefl="#']") 选取 所 有 带 有 href 值 不 等 于 "#" 的 元 素 。 
$("[href$-'.jpg']") 选取 所 有 href 值 以 "jpg" 结尾 的 元 素 。 


jQuery CSS 选择 器 


jQuery CSS 选择 器 可 用 于 改变 HTML 元 素 的 CSS 属性 。 


下 面 的 例子 把 所 有 p 元 素 的 背景 颜色 更 改 为 红色 : 
实例 


$("p").css("background-color", "red"); 


更 多 的 选择 器 实例 
语法 描述 
$(this) 当前 HTML 元 素 
$("p") 所 有 «p» 元 素 
$("p.intro") 所 有 class-"intro" 的 «p» 元 素 
$(".intro") 所 有 class-"intro" 的 元 素 
$("#intro") id="intro" 的 元 素 
$("ul li:first") 每 个 <ul> 的 第 一 个 <1i> 元 素 
$("[href$-'.jpg']") FI si EA "jpg" 结尾 的 属性 值 的 href 属性 
$("div#intro id="intro" BY <div> 元 素 中 的 所 有 class="head" 的 元 
.head") 素 


如 需 完整 的 参考 手册 ， 请 访问 我 们 的 jQuery 选择 器 参考 手册 。 


jQuery 事件 


jQuery 是 为 事件 义理 特别 设计 的 。 


jQuery 事件 函数 


jQuery 事件 处 理 方 法 是 jQuery 中 的 核心 男 数 。 


事件 处 理 程序 指 的 是 当 HTML 中 发 生 某 些 事件 时 所 调用 的 方法 。 术 语 由 事件 “ 触 
R” (RAR) 经 常会 被 使 用 。 


通常 会 把 jQuery 代码 放 到 <head> 部 分 的 事件 处 理 方法 中 : 
实例 


<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document ) .ready(function(){ 
~$("button").click(function(){ 
$("p").hide(); 


3); 

«/script» 

«/head» 

«body» 

<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button>Click me</button> 

</body> 


</html> 


FEL MAF rh, SHA d RUE A HEUS FI — EA : 


$("button").click(function() {..some code... } ) 


该 方法 隐藏 所 有 <p> 元 素 : 


$("p").hide(); 


单独 文件 中 的 函数 

如 果 您 的 网 站 包含 许多 页 面 ， 并 且 您 希望 您 的 jQuery 函数 易于 维护 ， 那 么 请 把 您 
的 jQuery 画 数 放 到 独立 的 .js 文件 中 。 

当 我 们 在 教程 中 演示 jQuery 时 ， 会 将 芳 数 直接 添加 到 «head» 部 分 中 。 不 过 ， 把 
它们 放 到 一 个 单独 的 文件 中 会 更 好 ， 就 像 这 样 (通过 src 属性 来 引用 文件 ) 

实例 


<head> 

<script type="text/javascript" src="jquery.js"></script> 

«script type="text/javascript" src-"my jquery functions.js'»«/scri| 
</head> 


i 


jQuery 名 称 冲 突 


jQuery 使 用 $ 符号 作为 jQuery 的 简介 方式 。 

某 些 其 他 JavaScript E PARA (比如 Prototype) 同样 使 用 $ 符号 。 

jQuery 使 用 名 为 noConflict() 的 方法 来 解决 该 问题 。 
varj9=jQuery.noConflict()， 帮 助 您 使 用 自己 的 名 称 (比如 jq) KRE $ RES. 





结论 
由 于 jQuery 是 为 处理 HTML 事件 而 特别 设计 的 ， 那 么 当 您 遵循 以 下 原则 时 ， 您 的 
代码 会 更 恰当 且 更 易 维 护 : 


e 把 所 有 jQuery 代码 置 于 事件 处 理 芳 数 中 

e 把 所 有 事件 处 理 函 数 置 于 文档 就 绪 事 件 处 理 器 中 
e 把 jQuery 代码 置 于 单独 的 .js 文件 中 

e 如 果 存 在 名 称 冲突 ， 则 重 命 名 jQuery E 


jQuery 事件 
下 面 是 jQuery 中 事件 方法 的 一 些 例子 : 


Event 2X Jt XE ESAE 
FF EB XE BUSCA SBE 〈 当 文档 完成 


$(document).ready(function) 


加 载 时 ) 
$(selector).click(function) 触发 或 将 函数 绑 定 到 被 选 元 素 的 点 击 事件 
$(selector).dblclick(function) 触发 或 将 函数 绑 定 到 被 选 元 素 的 双击 事件 
or O E ESI Ze 元 素 的 获得 焦点 事 


$(selector).mouseover(function) oo PISA XE ABL TUS BU BSH 3 FE 


如 需 完整 的 参考 手册 ， 请 访问 我 们 的 jQuery 事件 参考 手册 。 


jQuery 效果 


jQuery 效果 - 隐藏 和 显示 


eA. Xon. Wik, a, RAR, Uma, ER | 


TA 


实例 


jQuery hide() 
演示 一 个 简单 的 jQuery hide() 方法 。 


<!DOCTYPE html» 

«html» 

«head» 

«script src="/jquery/jquery-1.11.1.min.js"> 
«/script» 

«script» 
$(document ) . ready(function() { 
$("p").click(function(){ 
$(this).hide(); 

3); 
3); 
«/script» 
</head> 
<body> 
<p> 如 果 您 点 击 我 ， 我 会 消失 。</p> 
<p> 点 击 我 ， 我 会 消失 。</p> 
<p> 也 要 点 击 我 哦 。</p> 
</body> 
</html> 


jQuery hide() 
另 一 个 hide() 演示 。 如 何 隐藏 部 分 文本 。 


<!DOCTYPE html» 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$(document ). ready(function() { 
$(".ex .hide").click(function(){ 
$(this).parents(".ex").hide("slow"); 
3); 
3); 
«/script» 
«style type="text/css"> 
div.ex 


background-color :#e5eecc; 
padding:7px; 

border:solid 1px #c3c3c3; 
} 

</style> 

</head> 


<body> 


<h3> 中 国 办 事 处 </h3> 

<div class="ex"> 

«button class="hide" type="button"> 隐 藏 </button> 
<p> 联 系 人 : 张 先生 <br /> 

北三 环 中 路 100 号 <br /> 

北京 </p> 

</div> 


«h3»23€ Bl 738 4 «/ h3» 

«div class="ex"> 

«button class="hide" type="button"> 隐 藏 </button> 
<p> 联 系 人 : David<br /> 

第 五 大 街 200 号 <br /> 

纽约 </p> 

</div> 


</body> 
</html> 


jQuery hide() 和 show() 


通过 jQuery， 您 可 以 使 用 hide() 和 show() 方法 来 隐藏 和 显示 HTML 元 素 : 


$("#hide").click(function(){ 
$("p").hide(); 

3); 

$("#show").click(function(){ 
$("p").show(); 

3); 


语法 : 


$(selector).hide(speed,callback); 


$(selector).show(speed, callback); 


可 选 的 speed 参数 规定 隐藏 /显示 的 速度 ， 可 以 取 以 下 值 : "slow", 


可 选 的 callback 参数 是 隐藏 或 显示 完成 后 所 执行 的 画 数 名 称 。 
下 面 的 例子 演示 了 带 有 speed 参数 的 hide) 方法 


实例 


$("button").click(function(){ 
$("p").hide(1000); 


, 


jQuery toggle() 


"fast" KEP. 


通过 jQuery， 您 可 以 使 用 toggle() 方法 来 切换 hide() 和 show() 方法 。 


显示 被 隐藏 的 元 素 ， 并 人 隐藏 已 显示 的 元 素 : 
实例 


$("button").click(function(){ 
SERR 


语法 : 


$(selector).toggle(speed, callback); 


可 选 的 speed 参数 规定 隐藏 /显示 的 速度 ， 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 toggle) 方法 完成 后 所 执行 的 函数 名 称 。 


jQuery 效果 参考 手册 


如 需 全面 查 阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery 效果 -RARE 
通过 jQuery， 您 可 以 实现 元 素 的 淡 入 淡出 效果 。 


实例 


jQuery fadeln() 
演示 jQuery fadeln() 方法 。 


<!DOCTYPE html» 
«html» 
«head» 
«script src="/jquery/jquery-1.11.1.min.js"></script> 
«script» 
$(document).ready(function()( 
$("button").click(function(){ 
$("#divi").fadeIn(); 
$("#div2").fadeIn("slow"); 
$("4div3").fadeIn(3000); 
3); 
3); 
«/script» 
«/head» 


<body> 

<p> 演 示 带 有 不 同 参数 的 fadeIn() Zik. </p> 

<button> 点 击 这 里 ， 使 三 个 矩形 淡 入 </button> 

<br><br> 

«div id="divi" style-z"width:80px;height:80px;display:none;backgrour 
«br» 

«div id="div2" style-'width:80px;height:80px;display:none;backgrour 
«br» 

«div id="div3" style-z"width:80px;height:80px;display:none;backgrour 
«/body» 

«/html» 





mmn] 
jQuery fadeOut() 
演示 jQuery fadeOut() 方法 。 


<!DOCTYPE html» 
«html» 
«head» 
«script src="/jquery/jquery-1.11.1.min.js"></script> 
«script type="text/javascript"> 
$(document ). ready(function() { 
$("button").click(function(){ 
$("#divi").fadeOut(); 
$("#div2").fadeOut("slow"); 
$("#div3").fadeOut (3000) ; 
3); 
3); 
«/script» 
</head> 


<body> 

<p> 演 示 带 有 不 同 参数 的 fadeOut() AX </p> 

<button> 点 击 这 里 ， 使 三 个 矩形 淡出 </button> 

<br><br> 

«div id="divi" style="width: 80px; height :80px;background-color:red;' 
<br> 

«div id="div2" style="width: 80px; height: 80px; background-color: greer 
<br> 

«div id="div3" style="width: 80px; height: 80px; background-color :blue, 
</body> 


</html> 
E 





jQuery fadeToggle() 
演示 jQuery fadeToggle() 方法 。 


<!DOCTYPE html» 
«html» 
«head» 
«script src="/jquery/jquery-1.11.1.min.js"></script> 
«script» 
$(document ). ready(function() { 
$("button").click(function(){ 
$("#divi").fadeToggle(); 
$("#div2").fadeToggle("slow"); 
$("#div3").fadeToggle( 3000); 
3); 
3); 
«/script» 
«/head» 


«body» 


<p> 演 示 带 有 不 同 参数 的 fadeToggle() HÆ. </p> 

<button> 点 击 这 里 ， 使 三 个 矩形 淡 和 淡出 </button> 

<br><br> 

«div id="divi" style="width: 80px;height:80px;background-color:red;' 
<br> 

«div id="div2" style="width: 80px; height :80px; background-color: greer 
<br> 

«div id="div3" style="width: 80px; height :80px;background-color:blue, 
</body> 


</body> 
</html> 


Bm] 
jQuery fadeTo() 
演示 jQuery fadeTo() 方法 。 





<!DOCTYPE html» 
«html» 
«head» 
«script src="/jquery/jquery-1.11.1.min.js"></script> 
«script» 
$(document).ready(function()( 
$("button").click(function(){ 
$("#divi").fadeTo("slow",0.15); 
$("#div2").fadeTo("slow",0.4); 
$("#div3").fadeTo("slow",0.7); 
3); 
3); 
«/script» 
«/head» 


«body» 


<p> 演 示 带 有 不 同 参数 的 fadeTo( ) Zik. </p> 

<button> 点 击 这 里 ， 使 三 个 矩形 淡出 </button> 

<br><br> 

«div id="divi" style="width: 80px; height :80px;background-color:red;' 
<br> 

«div id="div2" style="width: 80px; height :80px; background-color: greer 
<br> 

«div id="div3" style="width: 80px; height :80px; background-color :blue, 


</body> 
</html> 


HE 





jQuery Fading 方法 


通过 jQuery， 您 可 以 实现 元 素 的 淡 入 淡出 效果 。 
jQuery 拥有 下 面 四 种 fade 方法 : 


fadeln() 
fadeOut() 
fadeToggle() 
fadeTo() 


jQuery fadeln() 方法 


jQuery fadeln() 用 于 淡 入 已 隐藏 的 元 素 。 


语法 : 


$(selector).fadeIn(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow". "fast" 或 毫秒 。 
可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 

下 面 的 例子 演示 了 带 有 不 同 参 数 的 fadeln() 方法 : 

实例 


$("button").click(function(){ 
$("#divi").fadeIn(); 
$("#div2").fadeIn("slow"); 
$("#div3").fadeIn(3000) ; 
3); 


jQuery fadeOut() 方法 
jQuery fadeOut() 方法 用 于 淡出 可 见 元 素 。 
语法 : 
$(selector).fadeOut(speed, callback); 
可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow". "fast" 或 毫秒 。 


可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 
下 面 的 例子 演示 了 带 有 不 同 参数 的 fadeOut() 方法 : 


实例 


$("button").click(function(){ 
$("#divi").fadeOut(); 
$("#div2").fadeOut("slow"); 
$("#div3") .fadeOut (3000); 
3); 


jQuery fadeToggle() 方法 


jQuery fadeToggle() 方法 可 以 在 fadeln() 5 fadeOut() 方法 之 间 进 行 切 换 。 


如 果 元 素 已 淡出 ， 则 fadeToggle() 会 向 元 素 添加 淡 入 效果 。 
如 果 元 素 已 淡 入 ， 则 fadeToggle() 会 向 元 素 添 加 淡出 效果 。 


语法 : 


$(selector).fadeToggle(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", 


可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 
下 面 的 例子 演示 了 带 有 不 同 参数 的 fadeToggle() 方法 


实例 


$("button").click(function(){ 
$("#div1").fadeToggle(); 
$("#div2").fadeToggle("slow"); 
$("#div3").fadeToggle(3000); 
}); 


jQuery fadeTo() 方法 


"ast" KEP. 


jQuery fadeTo() 方法 允许 渐变 为 给 定 的 不 透明 度 ( 值 介 于 0 与 1 之 间 ) 。 


语法 : 


$(selector).fadeTo(speed, opacity, callback); 


必需 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow". 
为 给 定 的 不 透明 度 AN 


fadeTo() 方法 中 必需 的 opacity 参数 将 淡 入 淡出 效果 设置 
于 0 与 1 之 间 ) 。 


可 选 的 callback 参数 是 该 函数 完成 后 所 执行 的 函数 名 称 。 
下 面 的 例子 演示 了 带 有 不 同 参数 的 fadeTo() 方法 


实例 


"fast" KEP. 


$("button").click(function() { 
$("#divi").fadeTo("slow",0.15); 
$("#div2").fadeTo("slow",0.4); 
$("#div3").fadeTo("slow",0.7); 
3); 


jQuery 效果 参考 手册 


如 需 全 面 查阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery 效果 - 滑动 
jQuery 滑动 方法 可 使 元 素 上 下 滑动 。 


实例 


jQuery slideDown() 
演示 jQuery slideDown() 方法 。 


<!DOCTYPE html» 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$(document ). ready(function() { 
$(".flip").click(function(){ 
$(".panel").slideDown("slow"); 
}); 
}); 


</script> 


<style type="text/css"> 
div.panel,p.flip 
{ 


margin:0px; 

padding: 5px; 
text-align:center; 
background: #e5eecc; 
border:solid 1px #c3c3c3; 


} 


div.panel 


{ 
height:120px; 
display:none; 


</style> 
</head> 


<body> 
«div class="panel"> 
<p>W3School - 领先 的 Web 技术 教程 站 点 </p> 
<p> 在 W3School， 你 可 以 找到 你 所 需要 的 所 有 网 站 建设 教程 。</p> 
</div> 
<p class="flip"> 请 点 击 这 里 </p> 
</body> 
</html> 
jQuery slideUp() 


演示 jQuery slideUp() 方法 。 


<!DOCTYPE html» 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$(document ). ready(function() { 
$(".flip").click(function(){ 
$(".panel").slideUp("slow"); 
3); 
3); 


«/script» 


«style type="text/css"> 
div.panel,p.flip 
{ 


margin:0px; 

padding: 5px; 
text-align:center; 
background: #e5eecc; 
border:solid 1px #c3c3c3; 


j 

div.panel 

{ 

height :120px; 


</style> 
</head> 


<body> 
«div class="panel"> 
<p>W3School - 领先 的 Web 技术 教程 站 点 </p> 
<p> 在 W3School， 你 可 以 找到 你 所 需要 的 所 有 网 站 建设 教程 。</p> 
</div> 
<p class="flip"> 请 点 击 这 里 </p> 
</body> 
</html> 
jQuery slideToggle() 


演示 jQuery slideToggle() 方法 。 


<!DOCTYPE html» 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$(document) .ready(function(){ 
$(".flip").click(function(){ 
$(".panel").slideToggle("slow"); 
3); 
3); 


«/script» 


«style type="text/css"> 
div.panel,p.flip 
{ 


margin:0px; 

padding: 5px; 
text-align:center; 
background: #e5eecc; 
border:solid 1px #c3c3c3; 


} 


div.panel 


{ 
height :120px; 
display:none; 


</style> 
</head> 


<body> 

«div class="panel"> 

<p>W3School - 领先 的 web 技术 教程 站 点 </p> 

<p> 在 W3Schoo1， 你 可 以 找到 你 所 需要 的 所 有 网 站 建设 教程 。</p> 
</div> 


<p class="flip"> 请 点 击 这 里 </p> 


</body> 
</html> 


jQuery 滑动 方法 
通过 jQuery， 您 可 以 在 元 素 上 创建 滑动 效果 。 
jQuery 拥有 以 下 滑动 方法 : 


e slideDown() 
e slideUp() 
e slideToggle() 


jQuery slideDown() 方法 
jQuery slideDown() 方法 用 于 向 下 滑动 元 素 。 
语法 : 

$(selector).slideDown(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow". "fast" 或 毫秒 。 
可 选 的 callback 参数 是 滑动 完成 后 所 执行 的 范 数 名 称 。 
下 面 的 例子 演示 了 slideDown() 方法 : 


实例 


$("#flip").click(function(){ 
$("#panel").slideDown(); 
3); 


jQuery slideUp() 方法 
jQuery slideUp() 方法 用 于 向 上 滑动 元 素 。 
语法 : 

$(selector).slideUp(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow". "fast" 或 毫秒 。 
可 选 的 callback 参数 是 滑动 完成 后 所 执行 的 画 数 名 称 。 
下 面 的 例子 演示 了 slideUp() 方法 : 


实例 


$("#flip").click(function(){ 
$("4panel").slideUp(); 


, 


jQuery slideToggle() 方法 


jQuery slideToggle() 方法 可 以 在 slideDown() & slideUp() 方法 之 间 进 行 切换 。 
如 果 元 素 向 下 滑动 ， 则 slideToggle() 可 向 上 滑动 它们 。 
如 果 元 素 向 上 滑动 ， 则 slideToggle() 可 向 下 滑动 它们 。 


$(selector).slideToggle(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 滑动 完成 后 所 执行 的 函数 名 称 。 
下 面 的 例子 演示 了 slideToggle() 方法 : 


实例 


$("#flip").click(function(){ 
$("#panel").slideToggle(); 


, 


jQuery 效果 参考 手册 


如 需 全 面 查阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery 效果 - 动 男 
jQuery animate() 方法 允许 您 创建 自 定 义 的 动画 。 
jQuery 动画 - animate() 方法 
jQuery animate() 方法 用 于 创建 自 定义 动画 。 
语法 : 
$(selector).animate({params}, speed, callback); 
必需 的 params 参数 定义 形成 动画 的 CSS 属性 。 
可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow". "fast" 或 毫秒 。 


可 选 的 callback 参数 是 动画 完成 后 所 执行 的 范 数 名 称 。 


下 面 的 例子 演示 animate() 方法 的 简单 应 用 ; CHE <div> TRB MEAL, EF left 
属性 等 于 250 像素 为 止 : 


实例 


$("button").click(function(){ 
$("div").animate({left:'250px'}); 
}); 


提示 : 默认 地 ， 所 有 HTML 元 素 都 有 一 个 静态 位 置 ， 且 无 法 移动 。 


如 需 对 位 置 进 行 操作 ， 要 记得 首先 把 元 素 的 CSS position 属性 设置 为 relative, 
fixed 或 absolute ! 


jQuery animate() - 操作 多 个 属性 
请 注意 ， 生 成 动画 的 过 程 中 可 同时 使 用 多 个 属性 : 


实例 


$("button").click(function() { 
$("div").animate({ 
left: '250px', 
opacity:'0.5', 
height:'150px', 
width: '150px' 
3); 
3); 


提示 : 可 以 用 animate() 方法 来 操作 所 有 CSS 属性 吗 ? 


是 的 ， 几 乎 可 以 上 不过， 需要 记 住 一 件 重 要 的 事情 : 当 使 用 animate() 时 ， 必 须 使 
用 Camel 标记 法 书写 所 有 的 属性 名 ， 比 如 ， 必 须 使 用 paddingLeft 而 不 是 padding- 
left， 使 用 marginRight 而 不 是 margin-right， 等 等 。 


同时 ， 色 彩 动画 并 不 包含 在 核心 jQuery 库 中 。 
如 果 需 要 生成 颜色 动画 ， 您 需要 从 jQuery.com FA Color Animations 插件 。 


jQuery animate() - 使 用 相对 值 


也 可 以 定义 相对 值 (该 值 相对 于 元 素 的 当前 值 ) 。 需 要 在 值 的 前 面 加 上 += 或 -= : 
实例 


$("button").click(function() { 
$("div").animate({ 
left: '250px', 
height: '+=150px', 
width: '+=150px' 
3); 
3); 


jQuery animate() - 使 用 预定 义 的 值 


您 甚至 可 以 把 属性 的 动画 值 设 置 为 "show"、"hide" 或 "toggle" : 


实例 


$("button").click(function() { 
$("div").animate({ 
height: 'toggle' 
3); 
3); 


jQuery animate() - 使 用 队列 功能 


默认 地 ，jQuery 提供 针对 动画 的 队列 功能 。 


这 意味 着 如 果 您 在 彼此 之 后 编写 多 个 animate() 调用 ，jQuery 会 创建 包含 这 些 方法 
调用 的 “内 部 ”队列 。 然 后 逐一 运行 这 些 animate 调用 。 


实例 1 
隐藏 ， 如 果 您 希望 在 彼此 之 后 执行 不 同 的 动画 ， 那 么 我 们 要 利用 队列 功能 : 


$("button").click(function() { 
var div=$("div"); 
div.animate({height:'300px', opacity: '0.4'},"slow"); 
div.animate({width: '300px', opacity: '0.8'},"slow"); 
div.animate({height:'100px', opacity: '0.4'},"slow"); 
div.animate({width: '100px', opacity: '0.8'},"slow"); 
3); 


实例 2 
下 面 的 例子 把 «div» 元 素 移 动 到 右边 ， 然 后 增加 文本 的 字号 : 


$("button").click(function(){ 
var div=$("div"); 
div.animate({left:'100px'}, "slow"); 
div.animate({fontSize: '3em'}, "slow"); 


3): 


jQuery 停止 动画 
jQuery stop() 方法 用 于 在 动画 或 效果 完成 前 对 它们 进行 停止。 


实例 


jQuery stop() 滑动 
演示 jQuery stop() 方法 。 


<!DOCTYPE html» 
«html» 
«head» 
«script src="/jquery/jquery-1.11.1.min.js"></script> 
«script» 
$(document).ready(function()( 
$("#flip").click(function(){ 
$("#panel").slideDown(5000); 
}); 
$("#stop").click(function(){ 
$("#panel").stop(); 
}); 
}); 


</script> 


<style type="text/css"> 
Zpanel, #flip 


{ 

padding: 5px; 
text-align:center; 
background-color :#e5eecc; 
border:solid 1px #c3c3c3; 
} 

#panel 


{ 
padding:50px; 
display:none; 


</style> 
</head> 


<body> 
<button id="stop"> 停 止 滑动 </button> 
«div id="flip"> 点 击 这 里 ， 向 下 滑动 面板 </div> 
<div id="panel">Hello world!</div> 
</body> 
</html> 

jQuery stop() 动画 ( 带 有 参数 ) 

演示 jQuery stop() 方法 。 


<!DOCTYPE html» 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"> 
</script> 
<script> 
$(document ) . ready(function() { 
$("#start").click(function(){ 
$("div").animate({left:'100px'}, 5000); 
$("div").animate({fontSize: '3em'},5000); 
3): 


$("#stop").click(function(){ 
$("div").stop(); 
1) 


$("#stop2").click(function(){ 
$("div").stop(true); 
3); 


$("#stop3").click(function(){ 
$("div").stop(true, true); 
3); 
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«/script» 
</head> 
<body> 


«button id="start"> 开 始 </button> 

<button id="stop"> 停 止 </button> 

<button id="stop2"> 停 止 所 有 </button> 

«button id="stop3"> 停 止 但 要 完成 </button> 

<p><b>" 开 始 "</b> 按钮 会 启动 动画 。</p> 

<p><b>" 停 止 "</b> 按钮 会 停止 当前 活动 的 动画 ， 但 允许 已 排队 的 动画 向 前 执行 。</p> 
<p><b>" 停 止 所 有 "</b> 按钮 停止 当前 活动 的 动画 ， 并 清空 动画 队列 ; 因此 元 素 上 的 所 有 
<p><b>" 停 止 但 要 完成 "</b> 会 立即 完成 当前 活动 的 动画 ， 然 后 停 下 来 。</p> 


«div style="background:#98bf21;height:100px;width:200px;position:at 


</body> 
</html> 


E 





jQuery stop() 方法 


jQuery stop() 方法 用 于 停止 动画 或 效果 ， 在 它们 完成 之 前 。 
stop() 方法 适用 于 所 有 jQuery 效果 加 数 ， 包 括 滑动 、 淡 入 淡出 和 自 定义 动画 。 


语法 
$(selector).stop(stopAll, goToEnd); 


可 选 的 stopAll 参数 规定 是 否 应 该 清除 动画 队列 。 默 认 是 false， 即 仅 停止 活动 的 动 
画 ， 允 许 任何 排 人 队列 的 动画 向 后 执行 。 


可 选 的 goToEnd 参数 规定 是 否 立即 完成 当前 动画 。 默 认 是 false, 
因此 ， 默 认 地 ，stop() 会 清除 在 被 选 元 素 上 指定 的 当前 动画 。 
下 面 的 例子 演示 stop) 方法 ， 不 带 参 数 : 


实例 


$("#stop").click(function(){ 
$("#panel").stop(); 


, 


jQuery 效果 参考 手册 


如 需 全 面 查阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery Callback 函数 
Callback EN2¢ 744 Bij a E 100% 完成 之 后 执行 。 


jQuery 动 男 的 问题 


许多 jQuery 画 数 涉及 动画 。 这 些 函 数 也 许 会 将 speed 或 duration 作为 可 选 参数 。 
例子 : $("p").hide("slow") 

speed 或 duration 参数 可 以 设置 许多 不 同 的 值 ， 比 如 "slow", "fast", "normal" k= 
秒 。 

实例 


$("button").click(function(){ 
$("p").hide(1000) ; 
3); 


Fen JavaScript 语句 (FES) 是 逐一 执行 的 - 按照 次 序 ， 动 画 之 后 的 语句 可 能 会 产 
生 错 误 或 页 面 冲突 ， 因为 动画 还 没有 完成 。 


为 了 避免 这 个 情况 ， 您 可 以 以 参数 的 形式 添加 Callback HWA. 
jQuery Callback EX 
当 动 画 100% 完成 后 ， 即 调用 Callback HR. 
典型 的 语法 : 

$(selector).hide(speed, callback) 
callback 参数 是 一 个 在 hide 操作 完成 后 被 执行 的 范 数 。 
错误 (没有 callback) 


$("p").hide(1000); 
alert("The paragraph is now hidden"); 


正确 (4 callback) 


$("p").hide(1000, functxon()t 
alert("The paragraph is now hidden"); 


3); 


结论 : 如 果 您 希望 在 一 个 涉及 动画 的 函数 之 后 来 执行 语句 ， 请 使 用 callback WAX. 


jQuery - Chaining 


通过 jQuery， 您 可 以 把 动作 /方法 链接 起 来 。 
Chaining 人 允许 我 们 在 一 条 语句 中 人 允许 多 个 jQuery 方法 (在 相同 的 元 素 上 ) 。 


jQuery 方法 链接 


直到 现在 ， 我 们 都 是 一 次 写 一 条 jQuery 语句 (一 条 接着 另 一 条 ) 。 
不 过 ， 有 一 种 名 为 链接 (chaining) 的 技术 ， 人 允许 我 们 在 相同 的 元 素 上 运行 多 条 


jQuery AP, RREK. 

提示 : 这 样 的 话 ， 浏 览 器 就 不 必 多 次 查找 相同 的 元 素 。 

如 需 链接 一 个 动作 ， 您 只 需 简单 地 把 该 动作 追加 到 之 前 的 动作 上 。 
例子 1 


下 面 的 例子 把 css(), slideUp(), and slideDown() 链接 在 一 起 。"p1" 元 素 首先 会 变 为 
红色 ， 然 后 向 上 滑动 ， 然 后 向 下 滑动 : 


$("Zp1").css("color","red").slideUp(2000).slideDown(2000); 


如 果 需 要 ， 我 们 也 可 以 添加 多 个 方法 调用 。 


提示 : 当 进 行 链接 时 ， 代 码 行 会 变 得 很 差 。 不 过 ，jQuery 在 语法 上 不 是 很 严格 ; 您 
可 以 按照 希望 的 格式 来 写 ， 包 含 折 行 和 缩 进 。 


例子 2 
这 样 写 也 可 以 运行 : 


$("#p1").css("color","red") 
.SlideUp(2000) 
.SlideDown( 2000); 


jQuery 会 抛 掉 多 余 的 空格 ， 并 按照 一 行 长 代码 来 执行 上 面 的 代码 行 。 


jQuery HTML 


jQuery - 获得 内 容 和 属性 
jQuery 拥有 可 操作 HTML 元 素 和 属性 的 强大 方法 。 


jQuery DOM 操作 


jQuery 中 非常 重要 的 部 分 ， 就 是 操作 DOM 的 能 

jQuery 提供 一 系列 与 DOM 相关 的 方法 ， 这 使 访问 和 操作 元 素 和 属性 变 得 很 容易 。 
提示 : DOM = Document Object Model (文档 对 象 模型 ) 

DOM 定义 访问 HTML 和 XML 文档 的 标准 : 


"W3C 文档 对 象 模型 独立 于 平台 和 语言 的 界面 ， 多 许 程序 和 脚本 动态 访问 和 更 新 文 
档 的 内 容 、 结 构 以 及 样式 。” 


获得 内 容 - text()、html() 以 及 val() 


三 个 简单 实用 的 用 于 DOM 操作 的 jQuery 方法 : 
e text() - 设置 或 返回 所 选 元 素 的 文本 内 容 
e html() - 设置 或 返回 所 选 元 素 的 内 容 (包括 HTML 标记 ) 
e val() - 设置 或 返回 表单 字段 的 值 


下 面 的 例子 演示 如 何 通过 jQuery text() 和 html() 方法 来 获得 内 容 : 
实例 


$("#btn1").click(function(){ 
alert("Text: ”+ $("#test").text()); 

3); 

$("#btn2").click(function(){ 
alert("HTML: + $("#test").html()); 

3); 


下 面 的 例子 演示 如 何 通 过 jQuery val() 方法 获得 输入 字段 的 值 : 


实例 


$("#btni").click(function(){ 
alert("Value: " + $("#test").val()); 
3); 


获取 属性 - attr() 


jQuery attr() 方法 用 于 获取 属性 值 。 
下 面 的 例子 演示 如 何 获 得 链接 中 href 属性 的 值 : 


实例 


$("button").click(function(){ 
alert($("#w3s").attr("href")); 
}); 


下 一 章 会 讲解 如 何 设置 (改变) 内 容 和 属性 值 。 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 设置 内 容 和 属性 


STAR -text(). html() 以 及 val() 


我 们 将 使 用 前 一 章 中 的 三 个 相同 的 方法 来 设置 内 容 : 
e text() - 设置 或 返回 所 选 元 素 的 文本 内 容 
e html() - 设置 或 返回 所 选 元 素 的 内 容 (包括 HTML 标记 ) 
e val() - 设置 或 返回 表单 字段 的 值 


下 面 的 例子 演示 如 何 通过 text()、html() 以 及 val() 方法 来 设置 内 容 : 
实例 
$("#btni").click(function(){ 
$("#testi").text("Hello world!"); 


$("#btn2").click(function(){ 
$("4test2").html("«b»Hello world!«/b»"); 


3); 
$("#btn3").click(function(){ 


$("#test3").val("Dolly Duck"); 
de 


text(), html() 以 及 val() 的 回调 函数 


上 面 的 三 个 jQuery 方法 : text()、html() 以 及 val()， 同 样 拥有 回调 函数 。 回 调 画 数 
由 两 个 参数 : 被 选 元 素 列表 中 当前 元 素 的 下 标 ， 以 及 原始 ( 旧 的 ) 值 。 然 后 以 函数 
新 值 返回 您 希望 使 用 的 字符 串 。 


下 面 的 例子 演示 带 有 回调 本 数 的 text() 和 html() : 


实例 


$("#btn1").click(function(){ 
$("#testi").text(function(i, origText){ 


return "Old text: " + origText + " New text: Hello world! 
(Index: " + a  ")'" 
3); 


3); 


$("#btn2").click(function(){ 
$("#test2").html(function(i, origText){ 
return "Old html: " + origText + " New html: Hello <b>world!</t 
但 mdex epe qe 


}); 





设置 属性 - attr() 


jQuery attr() 方法 也 用 于 设置 /改变 属性 值 。 
下 面 的 例子 演示 如 何 改变 (设置 ) 链接 中 href 属性 的 值 : 


实例 


$("button").click(function() { 
$("#w3s").attr( "href", "http://www.w3school.com.cn/jquery"); 
3); 


attr() 方法 也 允许 您 同时 设置 多 个 属性 。 
下 面 的 例子 演示 如 何 同时 设置 href 和 title 属性 : 


实例 


$("button").click(function() { 
$("#w3s").attr({ 
"href" : "http://www.w3school.com.cn/jquery", 
"title" : "W3School jQuery Tutorial" 
3); 
3); 


attr() 的 回调 函数 


jQuery 方法 attr()， 也 提供 回调 画 数 。 回 调 画 数 由 两 个 参数 : 被 选 元 素 列 表 中 当前 
元 素 的 下 标 ， 以 及 原始 〈 旧 的 ) 值 。 然 后 以 函数 新 值 返回 您 希望 使 用 的 字符 串 。 


下 面 的 例子 演示 带 有 回调 函数 的 attr() 方法 : 


实例 


$("button").click(function() { 


$("#w3s").attr("href", function(i, origValue) { 
return origValue + "/jquery"; 

3); 

3); 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 添加 元 素 


通过 jQuery， 可 以 很 容易 地 添加 新 元 素 / 内 容 。 


添加 新 的 HTML 内 容 


我 们 将 学 习 用 于 添加 新 内 容 的 四 个 jQuery 方法 : 


append() - 在 被 选 元 素 的 结尾 插入 内 容 
prepend() - 在 被 选 元 素 的 开头 插入 内 容 
after() - 在 被 选 元 素 之 后 插入 内 容 
before() - 在 被 选 元 素 之 前 插入 内 容 


jQuery append() 方法 
jQuery append() 方法 在 被 选 元 素 的 结尾 插入 内 容 。 
实例 


$("p").append("Some appended text."); 


jQuery prepend() 方法 
jQuery prepend() 方法 在 被 选 元 素 的 开头 插入 内容。 


实例 


$("p").prepend("Some prepended text."); 


通过 append() 和 prepend() 方法 添加 若干 新 元 素 


在 上 面 的 例子 中 ， 我 们 只 在 被 选 元 素 的 开头 /结尾 插入 文本 /HTML。 


不 过 ，append() 和 prepend() 方法 能 够 通过 参数 接收 无 限 数 量 的 新 元 素 。 可 以 通过 
jQuery 来 生成 文本 /HTML (就 像 上 面 的 例子 那样 ) ， 或 者 通过 JavaScript 代码 和 
DOM 元 素 。 


在 下 面 的 例子 中 ， 我 们 创建 若干 个 新 元 素 。 这 些 元 素 可 以 通过 text/HTML. jQuery 
或 者 JavaScrip/DOM 来 创建 。 然 后 我 们 通过 append() 方法 把 这 些 新 元 素 追 加 到 文 
本 中 (对 prepend() 同样 有 效 ) 


实例 


function appendText() 


{ 
var txt1="<p>Text.</p>"; // 以 HTML 创建 新 元 素 


var txt2-$("«p»«/p»").text("Text.");  // 以 jQuery 创建 新 元 素 
var txt3=document.createElement("p"); // 以 DOM 创建 新 元 素 
txt3.innerHTML="Text."; 

$("p").append(txt1, txt2, txt3); // 追加 新 元 素 

} 


jQuery after() 和 before() 方法 
jQuery after() 方法 在 被 选 元 素 之 后 插入 内 容 。 
jQuery before() 方法 在 被 选 元 素 之 前 插入 内 容 。 
实例 


$("img").after("Some text after"); 


$("img").before("Some text before"); 


通过 after() 和 before() 方法 添加 若干 新 元 素 


after() 和 before() 方法 能 够 通过 参数 接收 无 限 数 量 的 新 元 素 。 可 以 通过 
text/HTML、jQuery 8 或 者 JavaScript/DOM 来 创建 新 元 素 。 


在 下 面 的 例子 中 ， 我 们 创建 若干 新 元 素 。 这 些 元 素 可 以 通过 tex// HTML, jQuery 或 
者 JavaScript/DOM 来 创建 。 然 后 我 们 通过 after() 方法 把 这 些 新 元 素 插 到 文本 中 
(对 before() 同样 有 效 ) 


实例 


function afterText() 


var txt1="<b>I </b>"; // 以 HTML 创建 新 元 素 
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建 新 元 素 


var txt3=document.createElement("big"); // 通过 DOM 创建 新 元 素 
txt3.innerHTML="jQuery!"; 


$("img").after(txt1, txt2, txt3); // f£ img 之 后 插入 新 元 素 
} 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 删除 元 素 
通过 jQuery， 可 以 很 容易 地 删除 已 有 的 HTML 元 素 。 


删除 元 素 / 内 容 


如 需 删 除 元 素 和 内 容 ， 一 般 可 使 用 以 下 两 个 jQuery 方法 : 


e remove() - 删除 被 选 元 素 〈 及 其 子 元 素 ) 
e empty() - 从 被 选 元 素 中 删除 子 元素 


jQuery remove() 方法 
jQuery remove() 方法 删除 被 选 元 素 及 其 子 元 素 。 
实例 


$("#divi").remove(); 


jQuery empty() 方法 
jQuery empty() 方法 删除 被 选 元 素 的 子 元 素 。 


实例 


$("#divi").empty(); 


it 7 AK Ht ERU 


jQuery remove() 方法 也 可 接受 一 个 参数 ， 人 允许 您 对 被 删 元 素 进 行 过 滤 。 
该 参数 可 以 是 任何 jQuery 选择 器 的 语法 。 
下 面 的 例子 删除 class="italic" 的 所 有 <p> 元 素 : 


实例 


$("p").remove(".italic"); 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 获取 并 设置 CSS X 
通过 jQuery， 可 以 很 容易 地 对 CSS 元 素 进 行 操作 。 


切换 类 


jQuery 操作 CSS 

jQuery 拥有 若干 进行 CSS 操作 的 方法 。 我 们 将 学 习 下 面 这 些 : 
addClass() - 向 被 选 元 素 添加 一 个 或 多 个 类 

removeClass() - 从 被 选 元 素 删 除 一 个 或 多 个 类 


toggleClass() - 对 被 选 元 素 进 行 添加 /删除 类 的 切换 操作 
css() - 设置 或 返回 样式 属性 


实例 样式 表 
下 面 的 样式 表 将 用 于 本 页 的 所 有 例子 : 
,. Important 


font-weight:bold; 
font-size:xx-large; 


} 
.blue 


color :blue; 


jQuery addClass() 方法 


下 面 的 例子 展示 如 何 向 不 同 的 元 素 添加 class 属性 。 当 然 ， 在 添加 类 时 ， 您 也 可 以 
选取 多 个 元 素 : 


实例 


$("button").click(function() { 
$("h1,h2,p").addClass("blue"); 
$("div").addClass("important"); 
3); 


您 也 可 以 在 addClass() 方法 中 规定 多 个 类 : 
实例 


$("button").click(function() { 


$("#divi").addClass("important blue"); 
3); 


jQuery removeClass() 方法 
下 面 的 例子 演示 如 何不 同 的 元 素 中 删除 指定 的 class 属性 : 


实例 


$("button").click(function() { 


$("h1,h2,p").removeClass("blue"); 
3): 


jQuery toggleClass() 方法 


下 面 的 例子 将 展示 如 何 使 用 jQuery toggleClass() 方法 。 该 方法 对 被 选 元 素 进 行 添 
加 /删除 类 的 切换 操作 : 


实例 


$("button").click(function(){ 


$("hi1,h2,p").toggleClass("blue"); 
3); 


jQuery css() 方法 


我 们 将 在 下 一 章 讲解 jQuery css() 方法 。 


jQuery HTML 参考 手册 


如 需 有 关 jQuery CSS 方法 的 完整 内 容 ， 请 访问 我 们 的 jQuery CSS 操作 参考 手册 


jQuery - css() 方法 

jQuery css() 方法 

css() 方法 设置 或 返回 被 选 元 素 的 一 个 或 多 个 样式 属性 。 

返回 CSS 属性 

如 需 返 回 指定 的 CSS 属性 的 值 ， 请 使 用 如 下 语法 : 
css("propertyname"); 

下 面 的 例子 将 返回 首 个 匹配 元 素 的 background-color 值 : 

实例 


$("p").css("background-color"); 


设置 CSS 属性 

如 需 设 置 指定 的 CSS 属性 ， 请 使 用 如 下 语法 : 
css("propertyname","value"); 

下 面 的 例子 将 为 所 有 匹配 元 素 设置 background-color 值 : 

实例 


$("p").css("background-color", "yellow"); 


设置 多 个 CSS 属性 


0 需 设 置 多 个 CSS 属性 ， 请 使 用 如 下 语法 : 


vc 


css({"propertyname": "value", "propertyname":"value",...}); 


下 面 的 例子 将 为 所 有 匹配 元 素 设 置 background-color 和 font-size : 
实例 
头 


$("p").css({"background-color": "yellow", "font-size":"200%"}); 


jQuery HTML 参考 手册 


如 需 有 关 jQuery CSS 方法 的 完整 内 容 ， 请 访问 我 们 的 jQuery CSS 操作 参考 手册 


jQuery - 尺寸 


通过 jQuery， 人 很 容易 义理 元 素 和 浏览 器 窗口 的 尺寸 。 


jQuery 尺寸 方法 


jQuery 提供 多 个 义理 尺寸 的 重要 方法 : 


width() 
height() 
innerWidth() 
innerHeight() 
outerWidth() 
outerHeight() 


jQuery width() 和 height() 方法 


width() 方法 设置 或 返回 元 素 的 宽度 (不 包括 内 边 距 、 边 框 或 外 边 距 ) 。 
height) 方法 设置 或 返回 元 素 的 高 度 (不 包括 内 边 踊 、 边 框 或 外 边 距 ) 。 
下 面 的 例子 返回 指定 的 <div> 元 素 的 宽度 和 高 度 : 


实例 


$("button").click(function(){ 
var txt=""; 
txt+="Width: " + $("#divi").width() + "</br>"; 
txtr-"Height: ”+ $("#divi").height(); 
$("Zdivi").html(txt); 

3); 


jQuery innerWidth() 和 innerHeight() 方法 


innerWidth() 方法 返回 元 素 的 宽度 (包括 内 边 距 ) 。 
innerHeight() 方法 返回 元 素 的 高 度 (包括 内 边 距 ) 。 
下 面 的 例子 返回 指定 的 <div> 元 素 的 inner-width/height : 


实例 


$("button").click(function() { 
var txts' 
txtt="Inner width: " + $("#divi").innerWidth() + "</br>"; 
txt+="Inner height: " + $("#divi").innerHeight(); 
$("#divi").html(txt); 

3); 


jQuery outerWidth() 和 outerHeight() 方法 


outerWidth() 方法 返回 元 素 的 宽度 (包括 内 边 距 和 边框 ) 。 
outerHeight() 方法 返回 元 素 的 高 度 (包括 内 边 距 和 边框 ) 。 
下 面 的 例子 返回 指定 的 <div> 元 素 的 outer-width/height : 


实例 


$("button").click(function(){ 
var txt=""; 
txt+="Outer width: " + $("#divi").outerWidth() + "</br>"; 
txt+="Outer height: " + $("#div1").outerHeight(); 
$("4divi1").html(txt); 

3); 


outerWidth(true) 方法 返回 元 素 的 宽 
outerHeight(true) 方法 返回 元 素 的 高 


实例 


(包括 内 边 距 、 边 框 和 外 边 距 ) 。 
(包括 内 边 距 、 边 框 和 外 边 距 ) 。 


$("button").click(function(){ 
var txt=""; 
txt+="Outer width (+margin): " + $("#divi").outerWidth(true) + "< 
txt+="Outer height (+margin): " + $("#divi").outerHeight(true); 
$("#divi") .html(txt); 

3); 





jQuery - 更 多 的 width() 和 height() 
下 面 的 例子 返回 文档 (HTML 文档 ) 和 窗口 ERO) 的 宽度 和 高 度 : 


实例 


$("button").click(function() { 
var txt=""; 
txt+="Document width/height: " + $(document).width(); 
txt+="x" + $(document).height() + "Xn"; 
txt--"Window width/height: " + $(window) .width(); 
txt+="x" + $( window) .height(); 
alert(txt); 

3); 


下 面 的 例子 设置 指定 的 «div» 元 素 的 宽度 和 高 度 : 
实例 


$("button").click(function() { 
$("#divi").width(500).height (500); 
3); 


jQuery CSS 参考 手册 


如 需 关 于 jQuery Dimensions 的 完整 参考 ， 请 访问 我 们 的 jQuery 尺寸 参考 手册 。 


jQuery 


hj 


iis 


EJ 


ag 


jQuery 通 历 ， 意 为 “移动 "” 用 于 根据 其 相对 于 其 他 元 素 的 关系 来 “查找 ”( 或 选取 ) 
HTML 元 素 。 以 某 项 选择 开始 ， 并 治 着 这 个 选择 移动 ， 直 到 抵达 您 期 望 的 元 素 为 


下 图 展示 了 一 个 家 族 树 。 通 过 jQuery HH, MRE MAR (SATB) 元 素 开始 ， 


轻松 地 在 家 族 树 中 向 上 移动 (和 祖先) ， 向 下 移动 (子孙) ， 水 平移 动 (同胞 ) 。 这 
种 移动 被 称 为 对 DOM 2t $1385. 


示 解 释 : 


<div> 


e <div> 元 素 是 <ul> 的 父 元 素 ， 同 时 是 其 中 所 有 内 容 的 祖先 。 

e «ul» 元 素 是 «li» 元 素 的 父 元 素 ， 同 时 是 «div» 的 子 元 素 

e 左边 的 <li> JME <span> WAR, <ul> 的 子 元 素 ， 同 时 是 

<div> 的 后 代 。 

e <span> 元 素 是 <li> 的 子 元 素 ， 同 时 是 «ul» 和 <div> 的 后 代 。 

e 两 个 <li> 元 素 是 同胞 (拥有 相同 的 父 元 素 ) 。 

e 右边 的 <li> 元 素 是 «b» 的 父 元 素 ， <ul> 的 子 元 素 ， 同 时 是 <div> 
的 后 代 。 

e «b» 元 素 是 右边 的 «li» 的 子 元 素 ， 同 时 是 «ul» 和 <div> Wat. 


提示 : 祖先 是 父 、 祖 父 、 鲁 祖父 等 等 。 后 代 是 子 、 孙 、 人 鲁 孙 等 等 。 同 胞 拥有 相同 的 
父 。 

18/5 DOM 

jQuery tà £& T fios DOM 的 方法 。 

通 历 方法 中 最 大 的 种 类 是 树 通 历 (tree-traversal) 。 

下 一 章 会 讲解 如 何在 DOM 树 中 向 上 、 下 以 及 同 级 移动 。 


jQuery BAER 


如 需 了 解 所 有 的 jQuery AAT, wisi BiH jQuery RASS SM. 


jQuery 通 历 - 18 ^c 


祖先 是 父 、 祖 父 或 便 祖 父 等 等 。 
通过 jQuery， 您 能 够 向 上 通 历 DOM 树 ， 以 查找 元 素 的 祖先 。 


[A] _ i 75; DOM j 


这 些 jQuery 方法 很 有 用 ， 它 们 用 于 向 上 通 历 DOM 树 : 


e parent() 
e parents() 
e parentsUntil() 


jQuery parent() 方法 

parent() 方法 返回 被 选 元 素 的 直接 父 元 素 。 

该 方法 只 会 向 上 一 级 对 DOM WATEA. 

下 面 的 例子 返回 每 个 <span> 元 素 的 的 直接 父 元 素 : 


实例 


$(document ) ,ready(function(){ 
$("span").parent(); 
3); 


jQuery parents() 方法 


parents() 方法 返回 被 选 元 素 的 所 有 祖先 元 素 ， 它 一 路 向 上 直到 文档 的 根 元 素 
(«html»), 


下 面 的 例子 返回 所 有 «span» 元 素 的 所 有 祖先 : 
实例 


$(document ).ready(function() { 
$("span").parents(); 
3); 


您 也 可 以 使 用 可 选 参数 来 过 滤 对 祖先 元 素 的 搜索 。 
下 面 的 例子 返回 所 有 «span» 元 素 的 所 有 祖先 ， 并 且 它 是 «ul» 元 素 : 


实例 


$(document ).ready(function() { 
$("span").parents("ul"); 
3); 
jQuery parentsUntil() 方法 


parentsUntil() 方法 返回 介 于 两 个 给 定 元 素 之 间 的 所 有 祖先 元 素 。 
下 面 的 例子 返回 介 于 <span> & <div> 元 素 之 间 的 所 有 祖先 元 素 : 


实例 


$(document ).ready(function() { 
$("span").parentsUntil("div"); 
3); 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery 通 历 方法 ， 请 访问 我 们 的 jQuery EALE, 


jQuery 38/5 - 后代 

后 代 是 子 、 孙 、 便 孙 等 等 。 

通过 jQuery, KREA FEA DOM 树 ， 以 查找 元 素 的 后 代 。 
B p aA DOM 树 


Tata SAFE Fig 5 DOM RB jQuery 方法 : 


e children() 
e find() 


jQuery children() 方法 


children() 方法 返回 被 选 元 素 的 所 有 直接 子 元 素 。 
该 方 法 只 会 向 下 一 级 对 DOM 树 进 行 通 历 。 
下 面 的 例子 返回 每 个 «div» 元 素 的 所 有 直接 子 元 素 : 


实例 


$(document).ready(function() { 
$("div").children(); 
3); 


您 也 可 以 使 用 可 选 参数 来 过 滤 对 子 元 素 的 搜索 。 
下 面 的 例子 返回 类 名 为 "1" 的 所 有 «p» 元 素 ， 并 且 它 们 是 «div» 的 直接 子 元 素 : 


实例 


$(document ).ready(function() { 
$("div").children("p.1"); 
3); 
jQuery find() 方法 
find() 方法 返回 被 选 元 素 的 后 代 元 素 ， 一 路 向 下 直到 最 后 一 个 后 代 。 


下 面 的 例子 返回 属于 <div> 后 代 的 所 有 <span> 元 素 : 
实例 


$(document).ready(function(){ 
$("div").find("span"); 
3); 


下 面 的 例子 返回 «div» 的 所 有 后 代 : 
实例 
LH 


$(document ). ready(function() { 
$("div") pean (ey 
d 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery 通 历 方法 ， 请 访问 我 们 的 jQuery EALE, 


jQuery 通 历 - 同胞 


同胞 拥有 相同 的 父 元 素 。 
通过 jQuery， 您 能 够 在 DOM 树 中 逗 历 元 素 的 同胞 元 素 。 


在 DOM 树 中 水 平 通 历 


有 许多 有 用 的 方法 让 我 们 在 DOM 树 进 行 水 平 通 历 : 


siblings() 
next() 
nextAll() 
nextUntil() 
prev() 
prevAll() 
prevUntil() 


jQuery siblings() 方法 
siblings() 方法 返回 被 选 元 素 的 所 有 同胞 元 素 。 
下 面 的 例子 返回 <h2> 的 所 有 同胞 元 素 : 


实例 


$(document ).ready(function(){ 
$("h2").siblings(); 
}); 


您 也 可 以 使 用 可 选 参数 来 过 滤 对 同胞 元 素 的 搜索 。 
下 面 的 例子 返回 属于 <h2> 的 同胞 元 素 的 所 有 «p» 元 素 : 


实例 


$(document ).ready(function() { 
$("h2").siblings("p"); 
}); 


jQuery next() 方法 


next() 方法 返回 被 选 元 素 的 下 一 个 同胞 元 素 。 
该 方法 只 返回 一 个 元 素 。 
下 面 的 例子 返回 <h2> 的 下 一 个 同胞 元 素 : 


实例 


$(document ). ready(function() { 
$("h2").next(); 
}); 


jQuery nextAll() 方法 


nextAll() 方法 返回 被 选 元 素 的 所 有 跟随 的 同胞 元 素 。 
下 面 的 例子 返回 <h2> 的 所 有 跟随 的 同胞 元 素 : 


实例 


$(document).ready(function(){ 
$("h2").nextAll(); 
3); 


jQuery nextUntil() 方法 


nextUntil() 方法 返回 介 于 两 个 给 定 参数 之 间 的 所 有 跟随 的 同胞 元 素 。 
下 面 的 例子 返回 介 于 <h2> 与 <h6> 元 素 之 间 的 所 有 同胞 元 素 : 


实例 


$(document ). ready(function(){ 
$("h2").nextUntil("h6"); 
}); 


jQuery prev(), prevAll() & prevUntil() 方法 


prev(), prevAll() 以 及 prevUntil() 方法 的 工作 方式 与 上 面 的 方法 类 似 ， 只 不 过 方向 相 
zn 人 (在 DOM 树 中 治 着 同胞 元 素 向 后 通 历 ， 而 
不 是 A 前 o 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery 通 历 方法 ， 请 访问 我 们 的 jQuery 通 万 参考 手册 。 


jQuery ys 777 i ij YR 


^g BARRICADE E 


三 个 最 基本 的 过 滤 方 法 是 fit) last() 和 eq()， 它 们 人 允许 您 基于 其 在 一 组 元 素 中 的 
位 置 来 选择 一 个 特定 的 元 素 。 


其 他 过 滤 方 法 ， 比 如 filter() 和 not() 允许 您 选取 匹配 或 不 匹配 某 项 指定 标准 的 元 


INO 


jQuery first() 方法 


first() 方法 返回 被 选 元 素 的 首 个 元 素 。 
下 面 的 例子 选取 首 个 «div» 元 素 内 部 的 第 一 个 «p» 元 素 : 


实例 


$(document ). ready(function() { 
$("div p").first(); 
}); 
jQuery last() 方法 


last() 方法 返回 被 选 元 素 的 最 后 一 个 元 素 。 
下 面 的 例子 选择 最 后 一 个 <div> 元 素 中 的 最 后 一 个 «p» TH : 


实例 


$(document).ready(function()([ 
$("div p").last(); 
3); 
jQuery eq() 方法 
eq() 方法 返回 被 选 元 素 中 带 有 指定 索引 号 的 元 素 。 


索引 号 从 0 开始 ， 因 此 首 个 元 素 的 索引 号 是 0 而 不 是 1。 下 面 的 例子 选取 第 二 个 
<p> 元 素 《索引 号 1) : 


实例 


$(document ) . ready(function() { 
$("p").eq(1); 
jQuery filter() 方法 


filter() 方法 允许 您 规定 一 个 标准 。 不 匹配 这 个 标准 的 元 素 会 被 从 集合 中 删除 ， 匹 配 
的 元 素 会 被 返回 。 


下 面 的 例子 返回 带 有 类 名 "intro" 的 所 有 <p> TR : 
实例 


$(document).ready(function(){ 
S(p) filter( t intron); 
}); 


jQuery not() 方法 


not() 方法 返回 不 匹配 标准 的 所 有 元 素 。 
提示 : not() 方法 与 filter() FAR. 
下 面 的 例子 返回 不 带 有 类 名 "intro" 的 所 有 «p» 元 素 : 


实例 


$(document).ready(function()([ 
$("p").not(".intro"); 
H); 
jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery 通 历 方法 ， 请 访问 我 们 的 jQuery 通 历 参考 手册 。 


jQuery - AJAX 


jQuery - AJAX 简介 


AJAX 是 与 服务 器 交换 数据 的 艺术 ， 它 在 不 重 载 全 部 页 面 的 情况 下 ， 实 现 了 对 部 分 
网 页 的 更 新 。 


jQuery AJAX 实例 


<script>$(document).ready(function(){ $("#btni").click(function(){ 
<h3> 请 点 击 下 面 的 按钮 ， 通 过 jQuery AJAX 改变 这 段 文 本 。</h3> 
«button id="btni" type="button"> 获 得 外 部 的 内 容 </button> 
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什么 是 AJAX ? 


AJAX = 异步 JavaScript 和 XML (Asynchronous JavaScript and XML) 。 


简短 地 说 ， 在 不 重 载 整个 网 页 的 情况 下 ，AJAX 通过 后 台 加 载 数据 ， 并 在 网 砚 上 进 
行 显示 。 


使 用 AJAX 的 应 用 程序 案例 : 谷歌 地 图 、 腾 讯 微 博 、 优 酷 视 频 、 人 人 网 等 等 。 
您 可 以 在 我 们 的 AJAX 教程 中 学 到 更 多 有 关 AJAX 的 知识 。 


关于 jQuery 与 AJAX 


jQuery 提供 多 个 与 AJAX 有 关 的 方法 。 


通过 jQuery AJAX 方法 ， 您 能 够 使 用 HTTP Get 和 HTTP Post 从 远程 服务 器 上 请 
HTML, XML 或 JSON - 同时 您 能 够 把 这 些 外 部 数据 直接 载 人 网 页 的 被 选 
元 素 中 


提示 : 如 果 没 有 jQuery, AJAX 编程 还 是 有 些 难度 的 。 


编写 常规 的 AJAX 代码 并 不 容易 ， 因 为 不 同 的 浏览 器 对 AJAX 的 实现 并 不 相同 。 这 
意味 着 您 必须 编写 额外 的 代码 对 浏览 器 进行 测试 。 不 过 ，jQuery 团 ee 
这 个 难题 ， 我 们 只 需要 一 行 简单 的 代码 ， 就 可 以 实现 AJAX 功能 。 


jQuery AJAX 方法 


在 下 面 的 章节 ， 我 们 将 学 习 到 最 重要 的 jQuery AJAX 方法 。 


jQuery - AJAX load() 方法 


jQuery load() 方法 


jQuery load() 方法 是 简单 但 强大 的 AJAX 方法 。 
load() 方法 从 服务 器 加 载 数据 ， 并 把 返回 的 数据 放 人 被 选 元 素 中 。 


语法 : 


$( selector ).load( URL , data , callback ); 





必需 的 URL 参数 规定 您 希望 加 载 的 URL. 

可 选 的 data 参数 规定 与 请 求 一 同 发 送 的 查询 字符 串 键 / 值 对 集合 。 
可 选 的 callback 参数 是 load() 方法 完成 后 所 执行 的 函数 名 称 。 

这 是 示例 文件 ("demo_test.txt") 的 内 容 : 


<h2>jQuery and AJAX is FUN!!!</h2> 
<p id="pi">This is some text in a paragraph.</p> 


下 面 的 例子 会 把 文件 "demo test.txt" 的 内 容 加 载 到 指定 的 «div» TRH : 
示例 


$("#divi").load("demo_test.txt"); 


也 可 以 把 jQuery 选择 器 添加 到 URL 参数 。 
下 面 的 例子 把 "demo test.txt" 文件 中 id="p1" 的 元 素 的 内 容 ， 加 载 到 指定 的 <div> 


元 素 中 
实例 


$("#divi").load("demo_test.txt #p1"); 


可 选 的 callback 参数 规定 当 load() FASTMAIL US ES S Eh RRE A 
设置 不 同 的 参数 : 


e responseTxt - 包含 调用 成 功 时 的 结果 内 容 
e statusTXT - 包含 调用 的 状态 
e xhr - && XMLHttpRequest 对 象 


下 面 的 例子 会 在 load() 方法 完成 后 显示 一 个 提示 框 。 如 果 load() 方法 已 成 功 ， 则 显 
示 “ 外 部 内 容 加 载 成 功 1 "”， 而 如 果 失 败 ， 则 显示 错误 消息 : 


实例 


$("button").click(function() { 
$("#divi").load("demo_test.txt", function(responseTxt, statusTxt, xt 
if(statusTxt=="success") 
alert(" 外 部 内 容 加 载 成 功 1"); 
if(statusTxt=="error") 
alert("Error: "+xhr.status+": "+xhr.statusText); 
3); 
3); 





jQuery AJAX 参考 手册 


如 需 完 整 的 AJAX 方法 参考 ， 请 访问 我 们 的 jQuery AJAX 参考 手册 。 


jQuery - AJAX get() 和 post() 方法 


jQuery get() 和 post() 方法 用 于 通过 HTTP GET 或 POST 请 求 从 服务 器 请 求 数 


o 


HTTP 请 求 : GET vs. POST 


两 种 在 客户 端 和 服务 器 端 进行 请 求 -响应 的 常用 方法 是 : GET 和 POST. 


e GET - 从 指定 的 资源 请 求 数据 
e POST - 向 指定 的 资源 提交 要 处 理 的 数据 


a 基本 上 用 于 从 服务 器 获得 ( 取 回 ) 数据 。 注 释 : GET 方法 可 能 返回 缓存 数 
Ho 


POST 也 可 用 于 从 服务 器 获取 数据 。 不 过 ，POST 方法 不 会 缓存 数据 ， 并 且 常 用 于 
连同 请 求 一 起 发 送 数据 。 


如 需 学 习 更 多 有 关 GET 和 POST 以 及 两 方法 差异 的 知识 ， 请 阅读 我 们 的 HTTP 7; 
法 - GET xt Eb POST, 

jQuery $.get() 方法 

$.get() 方法 通过 HTTP GET 请 求 从 服务 器 上 请 求 数据 。 

jM 


$.get( URL ,. callback ); 


必需 的 URL 参数 规定 您 希望 请 求 的 URL. 
可 选 的 callback 参数 是 请 求 成 功 后 所 执行 的 范 数 名 。 
下 面 的 例子 使 用 $.get() 方法 从 服务 器 上 的 一 个 文件 中 取 回 数据 : 


实例 


$("button").click(function(){ 
$.get("demo_test.asp", function(data, status) { 
alert("Data: " + data + "“\nStatus: " + status); 
3); 
3); 


$.get() 的 第 一 个 参数 是 我 们 希望 请 求 的 URL ("demo_test.asp") 。 


第 二 个 参数 是 回调 函数 。 第 一 个 回调 参数 存 有 被 请 求 页 面 的 内 容 ， 第 二 个 回调 参数 
存 有 请 求 的 状态 。 


提示 : 这 个 ASP 文件 ("demo test.asp") 类 似 这 样 : 


<% 
response.write("This is some text from an external ASP file.") 
%> 


jQuery $.post() 方法 


$.post) 方法 通过 HTTP POST 请 求 从 服务 器 上 请 求 数据 。 
语法 : 


$.post( URL , data , callback ); 





必需 的 URL 参数 规定 您 希望 请 求 的 URL, 

可 选 的 data 参数 规定 连同 请 求 发 送 的 数据 。 

可 选 的 callback 参数 是 请 求 成 功 后 所 执行 的 落 数 名 。 
下 面 的 例子 使 用 $.post() 连同 请 求 一 起 发 送 数 据 : 


实例 


$("button").click(function(){ 
$.post("demo_test_post.asp", 
{ 
name: "Donald Duck", 
city :"Duckburg" 


ty 
function(data, status) { 
alert("Data: " + data + "\nStatus: " + status); 
3); 
3); 


$.post() 的 第 一 个 参数 是 我 们 希望 请 求 的 URL ("demo test post.asp"). 
然后 我 们 连同 请 求 (name 和 city) 一 起 发 送 数 据 。 


"demo test post.asp" 中 的 ASP 脚本 读 取 这 些 参数 ， 对 它们 进行 处理 ， 然 后 返回 
结果 。 


第 三 个 参数 是 回调 函数 。 第 一 个 回调 参数 存 有 被 请 求 页 面 的 内 容 ， 而 第 二 个 参数 存 
有 请 求 的 状态 。 


提示 : 这 个 ASP 文件 ("demo test post.asp") 类 似 这 样 : 


<% 

dim fname, city 
fname-Request.Form("name") 
city-Request.Form("city") 


Response.Write("Dear " & fname & ". ") 
Response.Write("Hope you live well in " & city & ".") 
%> 

jQuery AJAX 参考 手册 


如 需 完整 的 AJAX 方法 参考 ， 请 访问 我 们 的 jQuery AJAX 参考 手册 。 


jQuery 杀 项 


jQuery - noConflict() 方法 


如 何在 页 面 上 同时 使 用 jQuery 和 其 他 框架 ? 


jQuery 和 其 他 JavaScript 框架 


正如 您 已 经 了 解 到 的 ，jQuery 使 用 $ 符号 作为 jQuery 的 简写 。 
如 果 其 他 JavaScript 框架 也 使 用 $ 符号 作为 简写 怎么 办 ? 


其 他 一 些 JavaScript 框架 包括 : MooTools、Backbone、Sammy、Cappuccino、 
Knockout, JavaScript MVC, Google Web Toolkit. Google Closure, Ember, 
Batman 以 及 Ext JS. 


Ap REHEARSE iS (R jQuery) ， 如 果 您 在 用 的 两 种 不 同 的 框 
架 正 在 使 用 相同 的 简写 符号 ， 有 可 能 导致 脚本 停止 运行 。 


jQuery 的 团队 考虑 到 了 这 个 问题 ， 并 实现 了 noConflict() 方法 。 


jQuery noConflict() 方法 
noConflict() 方法 会 释放 会 $ 标识 符 的 控制 ， 这 样 其 他 脚本 就 可 以 使 用 它 了 。 


实例 
当然 ， 您 仍然 可 以 通过 全 名 替代 简写 的 方式 来 使 用 jQuery : 


$.noConflict(); 
jQuery(document ).ready(function(){ 
jQuery("button").click(function()( 
jQuery("p").text("jQuery 仍 在 运行 1 ")，; 


, 


3): 


实例 


您 也 可 以 创建 自己 的 简写 。noConflict() 可 返回 对 jQuery 的 引用 ， 您 可 以 把 它 存 入 
变量 ， 以 供 稍 后 使 用 。 请 看 这 个 例子 : 


var jq = $.noConflict(); 
jq( document ). ready(function(){ 
jq("button").click(function(){ 
jq("p").text("jQuery 仍 在 运行 ! "); 


r 


}); 


实例 


如 果 你 的 jQuery 代码 块 使 用 $ 简写， 并 且 您 不 愿意 改变 这 个 快捷 方式 ， 那 么 您 可 
以 把 $ 符号 作为 变量 传递 给 ready 方法 。 这 样 就 可 以 在 本 数 内 使 用 $ 符号 了 -而 在 
函数 外 ， 依 旧 不 得 不 使 用 "jQuery" : 


$.noConflict(); 
jQuery(document ). ready(function($) { 
$("button").click(function(){ 
$("p").text("jQuery He !"); 


3); 
3): 
jQuery 核心 参考 手册 


如 需 完整 的 jQuery 核心 方法 概览 ， 请 访问 我 们 的 jQuery 核心 参考 手册 。 


W3School jQuery 参考 手册 


来 源 : jQuery 参考 手册 
整理 : 飞龙 


jQuery 参考 手册 - 选择 器 


jQuery 选择 外 


zid 
.class 


element 
.class.class 
‘first 

‘last 


;even 


:odd 
:eq(index) 


:gt(no) 
:lt(no) 


:not(se/lector) 


:header 


:animated 


:contains(text) 


:empty 
:hidden 
‘visible 
$1,s2,s3 
[attribute] 


实例 
$e) 
$("#lastname") 
$(".intro") 
$i p") 
$(".intro.demo") 
$("p:first") 
$("p:last") 
$("tr:even") 


$("tr:odd") 
$("ul li:eq(3)") 


$("ul li:gt(3)") 

$("ul li:It(3)") 
$("input:not(:empty)") 
$(":header") 


$(":contains('W3School')") 
$(":empty") 


$("p:hidden") 
$("table:visible") 
$("th,td, intro") 
$("[href]") 


选取 
所 有 元 素 
id="lastname" 的 元 素 
所 有 class="intro" 的 元 素 
所 有 <p> 元 素 


所 有 class="intro" 且 
class="demo" 的 元 素 


第 一 个 <p> 元 素 

最 后 一 个 <p> 元 素 
所 有 偶数 <tr> 元 素 
所 有 奇数 <tr> 元 素 


列表 中 的 第 四 个 元 素 (index 
从 0 开始 ) 


列 出 index 大 于 3 的 元 素 
列 出 index 小 于 3 的 元 素 
所 有 不 为 空 的 input 元 素 
所 有 标题 元 素 <h1> - <h6> 
所 有 动画 元 素 

包含 指定 字符 串 的 所 有 元 素 
无 子 (元素 ) 节点 的 所 有 元 


所 有 隐藏 的 <p> 元 素 

所 有 可 见 的 表格 

所 有 带 有 匹配 选择 的 元 素 
MARA href 属性 的 元 素 
所 有 href 属性 的 值 等 于 "H" 


[attribute!=value] 


IX AAA -一 全 


$("[href!="#']") 


[attribute$-value] | $("[href$-'.jpg']") 


的 元 素 


所 有 href 属性 的 值 不 等 于 
"#" 的 元 素 


所 有 href 属性 的 值 包含 以 
"jpg" 结尾 的 元 素 


:input $(":input") 所 有 «input» 元 素 
‘text $(":text") iiia type-"text" 的 «input» 
:checkbox $(":checkbox") 。 的 
‘submit $(":submit") i sien 的 
:reset $(":reset") | 1 Ecl 的 
:button $(":button") FG ee E 的 
:image $("image") Pg Xue 的 
‘file $(":file") iid type="file" 的 «input» 
‘enabled $(":enabled") 所 有 激活 的 input 元素 
:disabled $(":disabled") 所 有 禁用 的 input 元 素 
:selected $(":selected") 所 有 被 选取 的 input 元 素 
:checked $(":checked") 所 有 被 选中 的 input 元 素 
人 参阅 


教程 : jQuery 元 素 选择 器 语法 


jQuery 参考 手册 - 事件 


jQuery 事件 方法 


事件 方法 会 触发 匹配 元 素 的 事件 ， 或 将 函数 绑 定 到 所 有 匹配 元 素 的 某 个 事件 。 
触发 实例 : 


$("button#demo") .click() 


上 面 的 例子 将 触发 id="demo" 的 button 元 素 的 click 事件 。 


HERBI : 


$("button#demo").click(function(){$("img") .hide()}) 


上 面 的 例子 会 在 点 击 id="demo" 的 按钮 时 隐藏 所 有 图 像 。 


方法 描述 

bind() 向 匹配 元 素 附加 一 个 或 更 多 事件 义理 器 

blur() 触发 、 或 将 函数 绑 定 到 指定 元 素 的 blur 事件 

change() ARR. BOR EAs = SUTRXEZUSRHJ change 事件 

click() 触发 、 或 将 函数 绑 定 到 指定 元 素 的 click 事件 

dblclick() den 或 将 函数 绑 定 到 指定 元 素 的 double click 
- THEM 34 Bl e A 3c 04 3 3E RIA ARES 

WERTE ET dia 前 或 未 来 的 子 元 素 附加 一 个 或 多 

die() 移 除 所 有 通过 live() 画 数 添加 的 事件 处 理 程序 。 

error() 触发 、 或 将 范 数 绑 定 到 指定 元 素 的 error 事件 


返回 event 对 象 上 是 否 调 用 了 


event.isDefaultPrevented() event.preventDefault() 


event.pageX 相对 于 文档 左边 缘 的 鼠标 位 置 。 
event.pageY 相对 于 文档 上 边缘 的 鼠标 位 置 。 
event.preventDefault() 阻止 事件 的 默认 动作 。 


包含 由 被 指定 事件 触发 的 事件 义理 器 返回 的 最 后 


event.target 


event.timeStamp 


event.type 
event.which 


focus() 


keydown() 


keypress() 


keyup() 
live() 
load() 


mousedown() 


mouseenter() 


mouseleave() 


mousemove() 


mouseout() 


mouseover() 


mouseup() 


one() 


ready() 
resize() 


scroll() 


dx diss I— IL 
ary Bee. 2844 
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I—— SAAT 大 


一 个 值 。 
触发 该 事件 的 DOM 元 素 。 


属性 返回 从 1970 年 1 月 1 日 到 事件 发 生 时 的 
毫秒 数 。 


描述 事件 的 类 型 。 
指示 按 了 哪个 键 或 按钮 。 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 focus 事件 


触发 、 或 将 函 数 绑 定 到 指定 元 素 的 key down 事 
件 


触发 、 或 将 范 数 绑 定 到 指定 元 素 的 key press 事 
件 


触发 、 或 将 函数 绑 定 到 指定 元 素 的 key up 事件 


为 当前 或 未 来 的 匹配 元 素 添 加 一 个 或 多 个 事件 处 
理 器 


触发 、 或 将 函数 绑 定 到 指定 元 素 的 load 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 mouse down 
事件 


触发 、 或 业 辑 数 绑 定 到 指定 元 素 的 mouse enter 
事件 


触发 、 或 业 男 数 绑 定 到 指定 元 素 的 mouse leave 
事件 


触发 、 或 业 男 数 绑 定 到 指定 元 素 的 mouse move 
事件 


触发 、 或 料 函 数 绪 定 到 指定 元 素 的 mouse out 事 
件 


触发 、 或 业 男 数 绑 定 到 指定 元 素 的 mouse over 
事件 


触发 、 或 业 函 数 绑 定 到 指定 元 素 的 mouse up 事 
件 


向 匹配 元 素 添 加 事件 处 理 器 。 每 元 素 只 能 触发 
一 次 该 处 理 器 。 


文档 就 绪 事 件 ( 当 HTML 文档 就 绪 可 用 时 ) 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 resize 事件 
触发 、 或 将 范 数 绑 定 到 指定 元 素 的 scroll 事件 


A/RQAhAA| eundo. 
W3School RII mz e A S 


AN ARE 


select() 
submit() 
toggle() 


trigger() 
triggerHandler() 
unbind() 


undelegate() 


unload() 


参阅 


教程 : jQuery 元 素 选择 器 语法 


触发 、 或 将 函数 绑 定 到 指定 元 素 的 select 事件 


触发 、 或 将 函数 绑 定 到 指定 元 素 的 submit 事件 


BRE SRS SSE BE, SRE TTY 
click 事件 时 执行 。 


所 有 匹配 元 素 的 指定 事件 
第 一 个 被 匹配 元 素 的 指定 事件 


或 将 来 


触发 、 或 将 范 数 绑 定 到 指定 元 素 的 unload 事件 


jQuery 事件 - bind() 方法 


ap 

实例 

当 点 击 鼠 标 时 ， 隐 藏 或 显示 p 元 素 : 
$("button").bind("click",function(){ 


$("p").slideToggle(); 
}); 


定义 和 用 法 

bind() 方法 为 被 选 元 素 添加 一 个 或 多 个 事件 处 理 程序 ， 并 规定 事件 发 生 时 运行 的 函 
将 事件 和 函数 绑 定 到 元 素 

规定 向 被 选 元 素 添 加 的 一 个 或 多 个 事件 义理 程序 ， 以 及 当 事 件 发 生 时 运行 的 函数 。 


语法 


$( selector ).bind( event , data , function ) 


参数 描述 


必需 。 规 定 添加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事件 。 
必须 是 有 效 的 事件 。 


data At, MEE EIA MABE. 
function 必需。 规定 当 事 件 发 生 时 运行 的 函数 。 


蔡 代 语法 


$(_selector_).bind({_event_:_function_, _event_:_function_, ...}) 





E 





参数 摘 述 


{event:function, 必需 。 规 定 事件 映射 ， 其 中 包含 一 个 或 多 个 添加 到 元 素 
event:function, ...} ”的 事件 ， 以 及 当 事 件 发 生 时 运行 的 函数 。 


jQuery 事件 - blur() 方法 
实例 


$("input").blur(function() { 
$("input").css("background-color", "#D6D6FF") ; 
3); 


定义 和 用 法 
当 元 素 失 去 焦点 时 发 生 blur 事件 。 


blur() 函数 触发 blur 事件 ， 或 者 如 果 设 置 了 function 参数 ， 该 函数 也 可 规定 当 发 生 
blur 事件 时 执行 的 代码 。 


: BI, blur 事件 仅 发 生 于 表单 元 素 上 。 在 新 浏览 器 中 ， 该 事件 可 用 于 任何 元 


触发 blur 事件 
触发 被 选 元 素 的 blur 事件 。 
语法 


$(_selector_).blur() 


将 函数 绑 定 到 blur 事件 
规定 当 被 选 元 素 的 blur 事件 发 生 时 运行 的 函数 。 
语法 


$(_selector_).blur(_function_) 


W3School 前 端 教程 合 


参数 描述 
function 可 选 。 规 定 当 blur 事件 发 生 时 运行 的 函数 。 


jQuery 事件 - blur() 方法 2290 


jQuery 事件 - change() 方法 


实例 
当 输 入 域 发 生变 化 时 改变 其 颜色 : 


$(".field").change(function(){ 
$(this).css("background-color", 'ZFFFFCC"); 


, 


定义 和 用 法 

当 元 素 的 值 发 生 改 变 时 ， 会 发 生 change 事件 。 

该 事件 仅 适用 于 文本 域 (text field) ， 以 及 textarea 和 select 元 素 。 
change() 函数 触发 change 事件 ， 或 规定 当 发 生 change 事件 时 运行 的 画 数 。 


注释 : 当 用 于 select 元 素 时 ，change 事件 会 在 选择 某 个 选项 时 发 生 。 当 用 于 text 
field 或 text area 时 ， 该 事件 会 在 元 素 失 去 焦点 时 发 生 。 


触发 change 事件 
触发 被 选 元 素 的 change 事件 。 
语法 


$( selector ).change() 


将 函数 绑 定 到 change 事件 
规定 当 被 选 元 素 的 change 事件 发 生 时 运行 的 画 数 。 
语法 


$(_selector_).change(_function_) 


W3School 前 端 教程 合 


参数 描述 
function 可 选 。 规 定 当 change 事件 发 生 时 运行 的 函数 。 


jQuery 事件 - change() 方法 2292 


jQuery 事件 - click() 方法 


实例 
当 点 击 按钮 时 ， 人 隐藏 或 显示 元 素 : 


$("button").click(function(){ 
$("p").slideToggle(); 
3); 


定义 和 用 法 

当 点 击 元 素 时 ， 会 发 生 click 事件 。 

当 鼠 标 指 针 停 留 在 元 素 上 方 ， 然 后 按 下 并 松 开 鼠 标 左 键 时 ， 就 会 发 生 一 次 click 
click() 方法 触发 click 事件 ， 或 规定 当 发 生 click 事件 时 运行 的 函数 。 


触发 click 事件 
语法 
$(_selector_).click() 
FARR EE click 事件 
语法 
$(_selector_).click(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 click 事件 时 运行 的 画 数 。 


jQuery 事件 - dblclick() 方法 


实例 
当 双击 按钮 时 ， 人 隐藏 或 显示 元 素 : 


$("button").dblclick(function(){ 
$("p").slideToggle(); 
}); 


定义 和 用 法 

当 双 击 元 素 时 ， 会 发 生 dblclick 事件 。 

当 鼠 标 指针 停留 在 元 素 上 方 ， 然 后 按 下 并 松 开 鼠 标 左 键 时 ， 就 会 发 生 一 次 click。 
在 很 短 的 时 间 内 发 生 两 次 click， 即 是 一 次 double click 事件 。 

dblclick() 方法 触发 dblclick 事件 ， 或 规定 当 发 生 dblclick 事件 时 运行 的 函数 。 
提示 : 如 果 把 dblclick 和 click 事件 应 用 于 同一 元 素 ， 可 能 会 产生 问题 。 


触发 dblclick 事件 
语法 
$(_selector_).dblclick() 
iF LYE TE SI dblclick 事件 
语法 
$( selector ).dblclick( function ) 


参数 描述 
function 可 选 。 规 定 当 发 生 dblclick 事件 时 运行 的 函数 。 


jQuery 事件 - delegate() 方法 
实例 


当 点 击 鼠 标 时 ， 隆 藏 或 显示 p 元 素 : 


$("div").delegate("button", "click", function(){ 
$("p").slideToggle(); 
3): 


定义 和 用 法 


delegate() 方法 为 指定 的 元 素 (属于 被 选 元 素 的 子 元 素 ) 添加 一 个 或 多 个 事件 处 理 
程序 ， 并 规定 当 这 些 事件 发 生 时 运行 的 函数 。 


方法 的 事件 义理 程序 适用 于 当前 或 未 来 的 元 素 (比如 由 脚本 创建 的 
折 元 素 ) o 


语法 


$( selector ).delegate( childSelector , event , data , function ) 


参数 描述 
childSelector ”必需 。 规 定 要 附加 事件 处 理 程序 的 一 个 或 多 个 子 元 素 。 
ere 必需 。 规 定 附加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事 
件 值 。 必 须 是 有 效 的 事件 。 
data 可 选 。 规 定 传递 到 加 数 的 额外 数据 。 
function 必需 。 规 定 当 事件 发 生 时 运行 的 函数 。 


亲 目 试 一 试 - 实例 


向 未 来 的 元 素 添加 事件 处 理 程序 
如 何 使 用 delegate() 方法 向 尚未 创建 的 元 素 添加 事件 处 理 程序 。 


jQuery 事件 - die() 方法 


实例 
移 除 所 有 通过 live) 方法 向 p 元 素 添加 的 事件 处 理 程序 : 


$("p").die(); 


定义 和 用 法 

die() 方法 移 除 所 有 通过 live() 方法 向 指定 元 素 添加 的 一 个 或 多 个 事件 处 理 程序 。 
语法 

$(_selector_).die(_event_,_function_) 


参数 描述 


必需 。 规 定 要 移 除 的 一 个 或 多 个 事件 处 理 程序 。 由 空格 分 隔 多 个 事 
件 值 。 必 须 是 有 效 的 事件 。 


function 可 选 。 规 定 要 移 除 的 特定 函数 。 


event 


亲自 试 一 试 - 实例 


移 除 通 过 live() 添加 的 特定 函数 
如 何 使 用 live) 方法 移 除 事件 处 理 程 序 的 特定 范 数 。 


jQuery 事件 - error() 方法 


实例 
如 果 图 像 不 存在 ， 则 用 一 段 预 定义 的 文本 取代 它 : 


$("img").error(function(){ 
$("img").replaceWith(" 


Missing image! 


D 
}); 


定义 和 用 法 

当 元 素 遇 到 错误 (没有 正确 载 和 人 ) 时 ， 发 生 eror 事件 。 

error() 方法 触发 error 事件 ， 或 规定 当 发 生 error 事件 时 运行 的 函数 。 
提示 : 该 方法 是 bind('error', handler) 的 简写 方式 。 


触发 error 事件 
语法 
$(_selector_).error() 
TERROUR EE error 事件 
语法 
$(_selector_).error(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 error 事件 时 运行 的 函数 。 


jQuery 事件 -isDefaultPrevented() 方法 


实例 
防止 链接 打开 URL， 并 声明 来 自 isDefaultPrevented() 的 结果 : 


$("a").click(function(event) { 
event .preventDefault(); 
alert("Default prevented: " + event.isDefaultPrevented()); 


3); 


定义 和 用 法 


isDefaultPrevented() 方法 返回 指定 的 event 对 象 上 是 否 调用 了 preventDefault() 75 


法 : 
语法 


.event .isDefaultPrevented() 


参数 描述 
event ” 必需。 规定 需要 检查 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - pageX 属性 


实例 
显示 鼠标 指针 的 位 置 : 


$(document ) .mousemove(function(e) { 
$("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
3); 


定义 和 用 法 
pageX() 属性 是 鼠标 指针 的 位 置 ， 相 对 于 文档 的 左边 缘 。 
语法 

event .pageX 


参数 描述 
event | 必需。 规定 要 使 用 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - pageY 属性 


实例 
ERRAI HHE: 


$(document ) .mousemove(function(e) { 
$("span").text("X: " + e.pagex + ", Y: " + e.pageY); 
3); 


定义 和 用 法 

pageY() 属性 是 鼠标 指针 的 位 置 ， 相 对 于 文档 的 上 边缘 。 
语法 

_event_.pageY 


参数 描述 
event | 必需。 规定 要 使 用 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - preventDefault() 方法 


实例 
防止 链接 打开 URL : 


$("a").click(function(event) { 
event.preventDefault(); 


3); 


定义 和 用 法 


preventDefault() 方法 阻止 元 素 发 生 默认 的 行为 (例如 ， 当 点 击 提交 按钮 时 阻止 对 
表单 的 提交 ) 。 


语法 


.event .preventDefault() 


参数 描述 


Sune 必需 。 规 定 阻止 哪个 事件 的 默认 动作 。 这 个 event 参数 来 自 事 件 绑 定 
HR. 


jQuery 事件 - result 属性 


实例 
显示 最 后 一 次 点 击 事件 返回 的 结果 : 


$("button").click(function(e) { 
$("p").html(e.result); 
3); 


定义 和 用 法 
result 属性 包含 由 被 指定 事件 触发 的 事件 处 理 器 返回 的 最 后 一 个 值 ， 除 非 这 个 值 未 
定义 。 


语法 


event .result 


参数 描述 


必需 。 规 定 返回 的 最 后 一 个 值 来 自 哪 个 事件 。 这 个 event 参数 来 自 事 


t o ALA 
CVENT hae ER. 


jQuery 事件 - target 属性 


实例 
显示 哪个 DOM 元 素 触 发 了 事件 : 


$("p, button, h1, h2").click(function(event){ 
$("div").html("Triggered by a " + event.target.nodeName + " elem: 


3); 
定义 和 用 法 


target 属性 规定 哪个 DOM 元 素 触 发 了 该 事件 。 





语法 


_event_.target 


参数 描述 
event ， 必需。 规定 需要 检查 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - timeStamp 属性 


实例 
显示 出 当 对 按钮 元 素 的 点 击 事件 发 生 时 的 时 间 戳 : 


$("button").click(function(event) { 
$("span")html(event.timeStamp); 


, 


定义 和 用 法 

timeStamp 属性 包含 从 1970 年 1 月 1 日 到 事件 被 触发 时 的 毫秒 数 。 
语法 

_event_.timeStamp 


event 数 


jQuery 事件 - type 属性 
实例 
显示 触发 了 哪 种 类 型 的 事件 : 


$("p").bind('click dblclick mouseover mouseout', function(event ) { 
$("div").html("Event: " + event.type); 
3); 


定义 和 用 法 
type 属性 描述 触发 哪 种 事件 类 型 。 
语法 

_event_.type 


参数 描述 
event | 必需。 规定 要 检查 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - which 属性 
例 


显示 按 了 哪个 键 : 


将 


$("input").keydown(function(event ) { 
$("div").html("Key: " + event.which); 
3); 


定义 和 用 法 
which 属性 指示 按 了 哪个 键 或 按钮 。 
语法 

event .which 


参数 描述 
event ， 必 需 。 规 定 要 检查 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - focus() 方法 


实例 
当 输 入 框 获得 焦点 时 ， 改 变 它 的 背景 


$("input").focus(function(){ 
$("input").css("background-color", "#FFFFCC") ; 
3); 


< 、 

定义 和 用 法 

当 元 素 获 得 焦点 时 ， 发 生 focus 事件 。 

当 通 过 鼠标 点 击 选 中 元 素 或 通过 tab 键 定位 到 元 素 时 ， 该 元 素 就 会 获得 焦点 。 


focus() 方法 触发 focus 事件 ， 或 规定 当 发 生 focus 事件 时 运行 的 画 数 。 
触发 focus 事件 
语法 
$( selector ).focus() 
将 函数 绑 定 到 focus 事件 
语法 
$( selector ).focus( function ) 


参数 描述 
function At, WEY KE focus 事件 时 运行 的 函数 。 


jQuery 事件 - keydown() 方法 
实例 


当 按 下 按键 时 ， 改 变 文本 域 的 颜色 : 


$("input").keydown(function( ){ 
$("input").css("background-color", "#FFFFCC") ， 
3); 


定义 和 用 法 

完整 的 key press 过 程 分 为 两 个 部 分 : 1. 按键 被 按 下 ; 2. 按键 被 松 开 。 

当 按钮 被 按 下 时 ， 发 生 keydown 事件 。 

keydown() 方法 触发 keydown 事件 ， 或 规定 当 发 生 keydown 事件 时 运行 的 画 数 。 
注释 : 如 果 在 文档 元 素 上 进行 设置 ， 则 无 论 元 素 是 否 获得 焦点 ， 该 事件 都 会 发 生 。 
提示 : 请 使 用 which 属性 来 确定 按 下 了 哪个 按键 (亲自 试 一 试 ) o 


触发 keydown 事件 
语法 
$( selector. ).keydown() 
i Le GE SJ keydown 事件 
语法 
$(_selector_).keydown(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 keydown 事件 时 运行 的 函数 。 


jQuery 事件 - keypress() 方法 
实例 


计算 在 输入 域 中 的 按键 次 数 : 


$("input").keydown(function()([ 
$("span").text(i*-1); 


, 


定义 和 用 法 

keypress 事件 与 keydown 事件 类 似 。 当 按钮 被 按 下 时 ， 会 发 生 该 事件 。 它 发 生 在 
当前 获得 焦点 的 元 素 上 。 

Ait, 5 keydown 事件 不 同 ， 每 插入 一 个 字符 ， 就 会 发 生 keypress 事件 。 
keypress() 方法 触发 keypress 事件 ， 或 规定 当 发 生 keypress 事件 时 运行 的 范 数 。 
注释 : 如 果 在 文档 元 素 上 进行 设置 ， 则 无 论 元 素 是 否 获得 焦点 ， 该 事件 都 会 发 生 。 


触发 keypress 事件 
语法 


$(_selector_).keypress() 


将 函数 绑 定 到 keypress 事件 
语法 


$(_selector_).keypress(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 keypress By 2 THR, 


jQuery 事件 - keyup() 方法 


实例 
当 按 下 按键 时 ， 改 变 文本 域 的 颜色 : 


$("input").keyup(function(){ 
$("input").css("background-color", "#D6D6FF") ; 
3): 


定义 和 用 法 
完整 的 key press 过 程 分 为 两 个 部 分 ， 按 键 被 按 下 ， 然 后 按键 被 松 开 并 复位 。 
当 按 钮 被 松 开 时 ， 发 生 keyup 事件 。 它 发 生 在 当前 获得 焦点 的 元 素 上 。 


keyup() 方法 触发 keyup 事件 ， 或 规定 当 发 生 keyup BAH THR, 


注释 : 如 果 在 文档 元 素 上 进行 设置 ， 则 无 论 元 素 是 否 获得 焦点 ， 该 事件 都 会 发 生 。 


提示 : 请 使 用 which 属性 来 确定 按 下 了 哪个 按键 (亲自 试 一 试 ) 。 
触发 keyup 事件 
语法 
$(_selector_).keyup() 
将 函数 绑 定 到 keyup 事件 
语法 
$(_selector_).keyup(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 keyup 事件 时 运行 的 函数 。 


jQuery 事件 - live() 方法 
实例 


当 点 击 按钮 时 ， 隐 藏 或 显示 p 元 素 : 


$("button").live("click",function()( 
$("p").slideToggle(); 
3); 


定义 和 用 法 


live() 方法 为 被 选 元 素 附 加 一 个 或 多 个 事件 义理 程序 ， 并 规定 当 这 些 事件 发 生 时 运 
行 的 函数 。 


通过 live() 方法 附加 的 事件 处 理 程序 适用 于 匹配 选择 器 的 当前 及 未 来 的 元 素 (比如 
由 脚本 创建 的 新 元 素 ) 。 


语法 
$(_selector_).live(_event_,_data_,_function_) 


参数 描述 


ovont | 必需。 规定 附加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事件 
必须 是 有 效 的 事件 


data 可 选 。 规 定 传递 到 该 男 数 的 额外 数据 。 
function 必需。 规定 当 事 件 发 生 时 运行 的 函数 。 


亲 目 试 一 试 - 实例 
如 何 使 用 live() 方法 向 尚未 创建 的 元 素 添加 事件 处 理 器 。 


jQuery 事件 - load() 方法 


实例 
当 图 像 加载 时 ， 改 变 div 元 素 的 文本 : 


$("img").load(function(){ 
$("div").text("Image loaded"); 
}); 


定义 和 用 法 

当 指 定 的 元 素 (及 子 元 素 ) 已 加 载 时 ， 会 发 生 load) 事件 。 

该 事件 适用 于 任何 带 有 URL 的 元 素 (比如 图 像 、 脚 本 、 框 架 、 内 联 框架 ) 。 
RULES (Firefox #0 IE) ， 如 果 图 像 已 被 缓存 ， 则 也 许 不 会 触发 load 事 


注释 : 还 存在 一 个 名 为 load() 的 jQuery Ajax 方法 ， 根 据 不 同 的 参数 而 定 。 
语法 


$(_selector_).load(_function_) 


参数 描述 
function 必需 。 规 定 当 指定 元 素 加 载 完 成 时 运行 的 函数 。 


jQuery 事件 - mousedown() 方法 


实例 
当 按 下 鼠标 按钮 时 ， 人 隐藏 或 显示 元 来 : 


$("button").mousedown(function(){ 
$("p").slideToggle(); 
}); 


定义 和 用 法 

当 鼠 标 指针 移动 到 元 素 上 方 ， 并 按 下 鼠标 按键 时 ， 会 发 生 mousedown 事件 。 

与 click 事件 不 同 ，mousedown 事件 仅 需要 按键 被 按 下 ， 而 不 需要 松 开 即 可 发 生 。 
mousedown() 方法 触发 mousedown 事件 ， 或 规定 当 发 生 mousedown 事件 时 运行 
的 函数 。 

触发 mousedown 事件 


语法 

$( selector ).mousedown() 
FERREE] mousedown 事件 
语法 

$( selector ).mousedown( function ) 


参数 描述 
function 可 选 。 规 定 当 发 生 mousedown Bat is $3 B ERAN, 


jQuery 事件 - mouseenter() 方法 


实例 
MRA (BM) TR, WERNER 


$("p'").mouseenter (function(){ 
$("p").css("background-color", "yellow") ; 


3): 


定义 和 用 法 
当 鼠 标 指 针 穿 过 元 素 时 ， 会 发 生 mouseenter 事件 。 
该 事件 大 多 数 时 候 会 与 mouseleave 事件 一 起 使 用 。 


mouseenter() 方法 触发 mouseenter 事件 ， 或 规定 当 发 生 mouseenter 事件 时 运行 
的 函数 。 


注释 : 与 mouseover 事件 不 同 ， 只 有 在 鼠标 指针 穿 过 被 选 元 素 时 ， 才 会 触发 
mouseenter 事件 。 如 果 鼠 标 指针 穿 过 任何 子 元素 ， 同 社会 触发 mouseover 事件 。 
请 看 下 面 例子 的 演示 。 


亲自 试 一 试 : mouseenter 与 mouseover 的 不 同 
触发 mouseenter 事件 
语法 


$( selector ).mouseenter() 
将 函数 绑 定 到 mouseenter 事件 


语法 


$( selector ).mouseenter( function ) 


W3School 前 端 教程 合 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseenter 事件 时 运行 的 函数 。 


jQuery 事件 - mouseenter() 方法 2315 


jQuery 事件 - mouseleave() 方法 


实例 
当 最 标 指针 离开 元 素 时 ， 改 变 元 素 的 背景 


$("p").mouseleave(function()( 
$("p").css("background-color","4ZE9E9E4"); 
3); 


定义 和 用 法 
当 鼠 标 指 针 离 开元 素 时 ， 会 发 生 mouseleave 事件 。 
该 事件 大 多 数 时 候 会 与 mouseenter 事件 一 起 使 用 。 


mouseleave() 方法 触发 mouseleave 事件 ， 或 规定 当 发 生 mouseleave 事件 时 运行 
的 函数 。 


注释 : 与 mouseout 事件 不 同 ， 只 有 在 鼠标 指针 离开 被 选 元 素 时 ， 才 会 触发 
mouseleave 事件 。 如 果 妃 标 指针 离开 任何 子 元 素 ， 同 样 会 触发 mouseout 事件 。 
请 看 下 面 例子 的 演示 。 


亲自 试 一 试 : mouseleave 与 mouseout 的 不 同 
触发 mouseleave 事件 
语法 


$( selector ).mouseleave() 
将 函数 绑 定 到 mouseleave 事件 


语法 


$( selector ).mouseleave( function ) 


W3School 前 端 教程 合 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseleave 事件 时 运行 的 函数 。 


jQuery 事件 - mouseleave() 方法 2317 


jQuery 事件 - mousemove() 方法 


实例 
获得 鼠标 指针 在 页 面 中 的 位 置 


$(document ) .mousemove(function(e) { 
$("span").text(e.pageX + ", " + e.pageY); 


, 


定义 和 用 法 
当 鼠 标 指 针 在 指定 的 元 素 中 移动 时 ， 就 会 发 生 mousemove 事件 。 


mousemove() 方法 触发 mousemove 事件 ， 或 规定 当 发 生 mousemove 事件 时 运行 
的 函数 。 


注意 : 用 户 把 鼠标 移动 一 个 像素 ， 就 会 发 生 一 次 mousemove B+, REEMA 
mousemove 事件 会 耗费 系统 资源 。 请 谨慎 使 用 该 事件 。 
触发 mousemove 事件 


语法 

$( selector ).mousemove() 
FERRAR 3E SI] mousemove 事件 
语法 

$( selector ).mousemove( function ) 


参数 描述 
function 可 选 。 规 定 当 发 生 mousemove 事件 时 运行 的 函数 。 


jQuery 事件 - mouseout() 方法 


实例 
当 鼠 标 从 元 素 上 移 开 时 ， 改 变 元 素 的 背景 


$("p").mouseout(function(){ 
$("p").css("background-color", "#E9E9E4") ; 
3); 


定义 和 用 法 

当 鼠 标 指针 从 元 素 上 移 开 时 ， 发 生 mouseout 事件 。 

该 事件 大 多 数 时 候 会 与 mouseover 事件 一 起 使 用 。 

mouseout() 方法 触发 mouseout 事件 ， 或 规定 当 发 生 mouseout 事件 时 运行 的 函 


o 


注释 : 5 mouseleave 事件 不 同 ， 不 论 鼠 标 指针 离开 被 选 元 素 还 是 任何 子 元 素 ， 都 
会 触发 mouseout 事件 。 只 有 在 鼠标 指针 离开 被 选 元 素 时 ， 才 会 触发 mouseleave 
事件 。 请 看 下 面 例子 的 演示 。 


亲自 试 一 试 : mouseleave 与 mouseout 的 不 同 
触发 mouseout 事件 
语法 


$( selector ).mouseout() 
i LYK 3E $J mouseout 事件 


语法 


$( selector ).mouseout( function ) 


W3School 前 端 教程 合 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseout SHH iz TAIRA 


jQuery 事件 - mouseout() 方法 2320 


jQuery 事件 - mouseover() 方法 


实例 
当 最 标 指针 位 于 元 素 上 方 时 时 ， 改 变 元 素 的 背景 


$("p").mouseover(function()( 
$("p").css("background-color", "yellow"); 


3): 


定义 和 用 法 
当 鼠 标 指针 位 于 元 素 上 方 时 ， 会 发 生 mouseover 事件 。 
该 事件 大 多 数 时 候 会 与 mouseout 事件 一 起 使 用 。 


mouseover() 方法 触发 mouseover 事件 ， 或 规定 当 发 生 mouseover 事件 时 运行 的 


注释 : 与 mouseenter 事件 不 同 ， 不 论 鼠 标 指 针 穿 过 被 选 元 素 或 其 子 元 素 ， 都 会 触 
发 mouseover 事件 。 只 有 在 鼠标 指针 穿 过 被 选 元 素 时 ， 才 会 触发 mouseenter $ 
件 。 请 看 下 面 例子 的 演示 。 


亲自 试 一 试 : mouseenter 与 mouseover 的 不 同 
触发 mouseover 事件 
语法 


$( selector ).mouseover() 
IFRA GE JJ mouseover 事件 


语法 


$( selector ).mouseover( function ) 


W3School 前 端 教程 合 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseover 事件 时 运行 的 函数 。 


jQuery 事件 - mouseover() 方法 2322 


jQuery 事件 - mouseup() 方法 
实例 


当 松 开 鼠标 按钮 时 ， 隐 藏 或 显示 元 素 : 


$("button") .mouseup(function() { 
$("p").slideToggle(); 
3); 


定义 和 用 法 
当 在 元 素 上 放松 鼠标 按钮 时 ， 会 发 生 mouseup 事件 。 


与 click 事件 不 同 ，mouseup 事件 久 需 要 放松 按钮 。 当 鼠标 指针 位 于 元 素 上 方 时 ， 
放松 鼠标 按钮 就 会 触发 该 事件 。 


mouseup() 方法 触发 mouseup 事件 ， 或 规定 当 发 生 mouseup 事件 时 运行 的 函数 。 
触发 mouseup 事件 
语法 
$( selector ).mouseup() 
将 函数 绑 定 到 mouseup 事件 
语法 
$(_selector_).mouseup(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseup 4H iz 43 89 EL 


jQuery 事件 - one() 方法 


实例 
当 点 击 p 元 素 时 ， 增 加 该 元 素 的 文本 大 小 : 


$("p").one("click",function(){ 
$(this).animate({fontSize:"+=6px"}); 
}); 


定义 和 用 法 


one) 方法 为 被 选 元 素 附加 一 个 或 多 个 事件 处 理 程序 ， 并 规定 当 事 件 发 生 时 运行 的 


当 使 用 one() 方法 时 ， 每 个 元 素 只 能 运行 一 次 事件 义理 器 函数 。 
语法 
$(_selector_).one(_event_,_data_,_function_) 


参数 描述 


Avent 必需 。 规 定 添加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事件 。 
必须 是 有 效 的 事件 。 


data At, Meee EBAY RABE. 
function 必需。 规定 当 事 件 发 生 时 运行 的 函数 。 


jQuery 事件 - ready() 方法 


实例 
在 文档 加 载 后 激活 画 数 : 


$(document ) .ready(function() { 
$(".btni").click(function() { 
$("p").slideToggle(); 


J); 
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定义 和 用 法 


当 DOM (文档 对 象 模型 ) 已 经 加 载 ， 并 且 页 面 (GHAR) 已 经 完全 呈现 时 ， 会 
发 生 ready 事件 。 


由 于 该 事件 在 文档 就 绪 后 发 生 ， 因 此 把 所 有 其 他 的 jQuery 事件 和 画 数 置 于 该 事件 
中 是 非常 好 的 做 法 。 正 如 上 面 的 例子 中 那样 。 


ready() 函数 规定 当 ready 事件 发 生 时 执行 的 代码 。 
ready() 函数 仅 能 用 于 当前 文档 ， 因 此 无 需 选 择 器 。 
允许 使 用 以 下 三 种 语法 : 


语法 1 

$(document).ready( function ) 
语法 2 

$().ready(_function_) 
语法 3 


$(_function_) 


参数 描述 
function 必需 。 规 定 当 文档 加 载 后 要 运行 的 函数 。 


提示 和 注释 


提示 : ready() ERMA z -5 <body onload=""> 一 起 使 用 。 


jQuery 事件 - resize() 方法 
实例 
对 浏览 器 窗口 调整 大 小 进行 计数 : 


$(window).resize(function() { 
$('span').text(x+=1); 
3); 


定义 和 用 法 
当 调 整 浏览 器 窗口 的 大 小 时 ， 发 生 resize 事件 。 
resize() 方法 触发 resize 事件 ， 或 规定 当 发 生 resize 事件 时 运行 的 函数 。 


触发 resize 事件 
语法 


$( selector ).resize() 


将 函数 绑 定 到 resize 事件 
语法 


$( selector ).resize( function ) 


参数 描述 
function 可 选 。 规 定 当 发 生 resize 事件 时 运行 的 函数 。 


jQuery 事件 - scroll() 方法 
实例 
对 元 素 滚动 的 次 数 进行 计数 : 


$("div").scroll(function() { 
$("span").text(x+=1); 
}); 


定义 和 用 法 

当 用 户 滚动 指定 的 元 素 时 ， 会 发 生 scroll 事件 。 

scroll 事件 适用 于 所 有 可 滚动 的 元 素 和 Window 对 象 ( 浏 览 器 窗口 ) 。 
scroll() 方法 触发 scroll 事件 ， 或 规定 当 发 生 scroll 事件 时 运行 的 函数 。 


触发 scroll 事件 
语法 
$(_selector_).scroll() 
将 函数 绑 定 到 scroll 事件 
语法 
$(_selector_).scroll(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 scroll 事件 时 运行 的 函数 。 


jQuery 事件 - select() 方法 


实例 
在 文本 域 后 添加 文本 ， 以 显示 出 提示 文本 : 


$("input").select(function(){ 
$("input").after(" Text marked!"); 
3); 


定义 和 用 法 
当 textarea 或 文本 类 型 的 input 元 素 中 的 文本 被 选择 时 ， 会 发 生 select 事件 。 
select() 方法 触发 select 事件 ， 或 规定 当 发 生 select 事件 时 运行 的 函数 。 


触发 select 事件 
语法 
$(_selector_).select() 
FAR XE SI select 事件 
语法 
$(_selector_).select(_function_) 


参数 描述 
function At, MEY KE select 事件 时 运行 的 函数 。 


jQuery 事件 - submit() 方法 


实例 


$("form").submit(function(e){ 
alert("Submitted"); 


, 


定义 和 用 法 

当 提 交 表 单 时 ， 会 发 生 submit 事件 。 

该 事件 只 适用 于 表单 元 素 。 

submit() 方法 触发 submit 事件 ， 或 规定 当 发 生 submit SR (Fat iz (109ER 


触发 submit 事件 
语法 
$( selector ).submit() 
将 函数 绑 定 到 submit 事件 
语法 


$(_selector_).submit(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 submit 事件 时 运行 的 函数 。 


亲 目 试 一 试 - 实例 


阻止 提交 按钮 的 默认 action 
使 用 preventDefault() 函数 来 阻止 对 表单 的 提交 。 


jQuery 事件 - toggle() 方法 


实例 
切换 不 同 的 背景 


$("p").toggle( 
function()( 
$("body").css("background-color","green");}, 
function(){ 
$("body").css("background-color","red");}, 
function()( 
$("body").css("background-color","yellow");) 


): 


定义 和 用 法 


= a a a 
{ 


o 


该 方法 也 可 用 于 切换 被 选 元 素 的 hide() 与 show() 方法 。 


[3] Toggle 事件 绑 定 两 个 或 更 多 加 数 


当 指 定 元 素 被 点 击 时 ， 在 两 个 或 多 个 范 数 之 间 轮 流 切 换 。 

如 果 规 定 了 两 个 以 上 的 函数 ， 则 toggle() 方法 将 切换 所 有 男 数 。 例 如 ， 如 果 存 在 三 
个 函数 ， 则 第 一 次 点 击 将 调用 第 一 个 函数 ， 第 二 次 点 击 调用 第 二 个 函数 ， 第 三 次 点 
击 调用 第 三 个 函数 。 第 四 次 点 击 再 次 调用 第 一 个 画 数 ， 以 此 类 推 。 


语法 


$(_selector_).toggle(_function1i()_,_function2()_,_functionN()_,... 


AUU O 





function1() 必需 。 规 定 当 元 素 在 每 偶数 次 被 点 击 时 要 运行 的 
function2() 必需 。 规 定 当 元 素 在 每 奇数 次 被 点 击 时 要 运行 的 
定 需要 切换 的 其 他 西数 。 


JA 
JZ 


E E 


functionN(),... 可 选 。 规 


切换 Hide() 和 Show() 


检查 每 个 元 素 是 否 可 见 。 
如 果 元 素 已 隐藏 ， 则 运行 show()。 如 果 元 素 可 见 ， 则 元 素 hide()。 这 样 就 可 以 创造 
切换 效果 。 


语法 


$(_selector_).toggle(_speed_,_callback_) 


参数 描述 
speed 可 选 。 规 定 hide/show 效果 的 速度 。 默 认 是 "0"。 可 能 的 值 : sedo 
(比如 1500) "slow" "normal" "fast" 


ibak a e 当 toggle() 方法 完成 时 执行 TAM, WBS DI B ANA 
callback 的 知识 ， 请 访问 我 们 的 Berean 画 数 教程 


规定 是 否 只 显示 “或 只 隐 藏 所 有 匹配 的 元 素 。 


$(_selector_).toggle(_switch_) 


参数 描述 


必需 。 布 尔 值 ， 规 定 toggle() 是 否 
各 


Switch | mema - no 示 元 来 GP - n 


jQuery 事件 - trigger() 方法 


实例 
触发 input 元 素 的 select 事件 : 
$("button").click(function()( 


$("input").trigger("select"); 


, 


定义 和 用 法 
trigger() 方法 触发 被 选 元 素 的 指定 事件 类 型 。 
触发 事件 


规定 被 选 元 素 要 触发 的 事件 。 
语法 


$( selector ).trigger( event ,[ parami , param2 ,...]) 


参数 Fah 


必需 。 规 定 指 定 元 素 要 触发 的 事件 。 可 以 使 自 定义 事件 
(使 用 bind() 函数 来 附加 ) ， 或 者 任何 标准 事件 。 


[paramf.param2,.] Tite LARS ARASH. woe Be 


event 


使 用 Event 对 象 来 触发 事件 


规定 使 用 事件 对 象 的 被 选 元 素 要 触发 的 事件 。 
语法 


$( selector ).trigger( eventObj ) 


W3School 前 端 教程 合 


参数 描述 
eventObj We. MIE BE RE at a THR 
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jQuery 事件 - triggerHandler() 方法 


实例 
触发 input 元 素 的 select 事件 : 


$("button").click(function(){ 
$("input").triggerHandler("select"); 


, 


定义 和 用 法 


triggerHandler() 方法 触发 被 选 元 素 的 指定 事件 类 型 。 但 不 会 执行 浏览 器 默认 动作 ， 
也 不 会 产生 事件 冒 泡 。 


triggerHandler() 方法 与 trigger() 方法 类 似 。 不 同 的 是 它 不 会 触发 事件 (上 比如 表单 提 
Z) 的 默认 行为 ， 而 且 只 影响 第 一 个 匹配 元 素 。 


与 trigger() 方法 相 比 的 不 同 之 处 


e 它 不 会 引起 事件 〈 比 如 表单 提交 ) 的 默认 行为 

trigger() 会 操作 jQuery 对 象 匹配 的 所 有 元 素 ， 而 .triggerHandler() 只 影响 第 一 

个 匹配 元 素 。 

由 .triggerHandler() 创建 的 事件 不 会 在 DOM tit Sid ; 如 果 目 标 元 素 不 直接 

处 理 它们 ， 则 不 会 发 生 任何 事情 。 

e 该 方法 的 返回 的 是 事件 处 理事 数 的 返回 值 ， 而 不 是 具有 可 链 性 的 jQuery 对 
象 。 此 外 ， 如 果 没 有 处 理 程序 被 触发 ， 则 这 个 方法 返回 undefined. 


触发 事件 


规定 被 选 元 素 要 触发 的 事件 。 


语法 


$( selector ).triggerHandler( event ,[ parami , param2 ,...]) 


W3School 前 端 教程 合集 


参数 描述 
event 必需 。 规 定 指定 元 素 要 触发 的 事件 。 
[param1,param2,...] 可 选 。 传 递 到 事件 处 理 程序 的 额外 参数 。 
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jQuery 事件 - unbind() 方法 


实例 
移 除 所 有 p 元 素 的 事件 处 理 器 : 


$("button") .click(function(){ 
$("p").unbind(); 
}); 


定义 和 用 法 
unbind() 方法 移 除 被 选 元 素 的 事件 义理 程序 。 
该 方法 能 够 移 除 所 有 的 或 被 选 的 事件 处 理 程序 ， 或 者 当 事 件 发 生 时 终止 指定 函数 的 


运行 。 


ubind() 适用 于 任何 通过 jQuery 附加 的 事件 处 理 程 序 。 


BY IF 28 XE TU SR BY SR FR EB AS A ELA 


规定 从 指定 元 素 上 删除 的 一 个 或 多 个 事件 处 理 程序 。 
如 果 没 有 规定 参数 ，unbind() 方法 会 删除 指定 元 素 的 所 有 事件 处 理 程序 。 


语法 


$(_selector_).unbind(_event_,_function_) 


ent ， 可 选 。 规 定 副 除 元 素 的 一 个 或 多 个 事件 由 空格 分 隔 多 个 事件 值 。 如 


果 只 规定 了 该 参数 ， 则 会 删除 绑 定 到 指定 事件 的 所 有 函数 。 
function 可 选 。 规 定 从 元 素 的 指定 事件 取消 绑 定 的 函数 名 。 


使 用 Event 对 象 来 取消 绑 定 事件 处 理 程序 


规定 要 删除 的 事件 对 象 。 用 于 对 自身 内 部 的 事件 取消 绑 定 (比如 当 事 件 已 被 触发 一 
定 次 数 之 后 ， 删 除 事件 处 理 程序 ) 。 


如 果 未 规定 参数 ， 则 unbind() 方法 会 删除 指定 元 素 的 所 有 事件 处 理 程序 。 
语法 


$(_selector_).unbind(_eventObj_) 


BB 描述 
可 选 。 规 定 要 使 用 的 事件 对 象 。 这 个 eventObj 参数 来 自 事件 绑 定 


eventObj ERE 


亲 目 试 一 试 - 实例 


取消 绑 定 特定 的 函数 
如 何 使 用 unbind() 方法 取消 绑 定 元 素 指定 事件 的 具体 西数 。 


jQuery 事件 - undelegate() 方法 


实例 
从 所 有 元 素 删 除 由 delegate() 方法 添加 的 所 有 事件 义理 器 : 


$("body").undelegate(); 

定义 和 用 法 
undelegate() 方法 删除 由 delegate() 方法 添加 的 一 个 或 多 个 事件 处 理 程序 。 
语法 


$( selector ).undelegate( selector , event , function ) 


参数 描述 
selector 可 选 。 规 要 删除 事件 义理 程序 的 选择 器 。 


定 需 
event 可 选 。 规 定 需要 删除 义理 函数 的 一 个 或 多 个 事件 类 型 
定 要 删除 的 具体 事件 处 理 范 数 。 


function Alte, AL 


亲 目 试 一 试 - 实例 


删除 事件 处 理 程序 ， 由 delegate() 添加 ， 来 自 有 具体 选择 器 

如 何 使 用 undelegate() 方法 从 指定 元 素 删 除 所 有 事件 义理 程序 。 

删除 指定 事件 类 型 的 事件 处 理 程序 ， 由 delegate() 添加 ， 来 自 指定 元 素 

如 何 使 用 undelegate() 方法 从 指定 元 素 删 除 有 具体 事件 类 型 的 所 有 事件 处 理 程序 。 
删除 由 delegate() 添加 的 具体 辑 数 

如 何 使 用 undelegate() 方法 为 事件 处 理 程序 删除 来 自 特定 事件 类 型 的 特定 函数 。 


jQuery 事件 - unload 属性 


实例 
当 用 户 点 击 链接 离开 本 页 时 ， 弹 出 一 个 消息 框 : 


$(window) .unload(function(){ 
alert("Goodbye!"); 
3); 


定义 和 用 法 
当 用 户 离开 页 面 时 ， 会 发 生 unload 事件 。 
具体 来 说 ， 当 发 生 以 下 情况 时 ， 会 发 出 unload 事件 : 


e 点 击 某 个 离开 页 面 的 链接 
e 在 地 址 栏 中 键入 了 新 的 URL 
e 使 用 前 进 或 后 退 按钮 
e 关闭 浏览 器 
e 重新 加 载 页 面 
unload() 方法 将 事件 义理 程序 绑 定 到 unload 事件 。 


unload() 方法 只 应 用 于 window 对 象 。 
语法 


.event .unload( function ) 


参数 描述 
function 必需 。 规 定 当 触发 unload 事件 时 运行 的 函数 。 


jQuery 参考 手册 - 效果 


slide Toggle() 
slideUp() 
stop() 
toggle() 


jQuery MRA 
方法 描述 
animate() 对 被 选 元 素 应 用 “ 自 定义 ”的 动画 
clearQueue() 对 被 选 元 素 移 除 所 有 排队 的 函数 〈 仍 未 运行 的 ) 
delay() 对 被 选 元 素 的 所 有 排队 函数 ( 仍 未 运行 ) 设置 延迟 
dequeue() ik 47 Rik TUSRB F — 1 SEPLER ZR 
fadeln() 逐渐 改变 被 选 元 素 的 不 透明 度 ， 从 隐藏 到 可 见 
fadeOut() 逐渐 改变 被 选 元 素 的 不 透明 度 ， 从 可 见 到 隐藏 
fadeTo() 把 被 选 元 素 逐 渐 改 变 至 给 定 的 不 透明 度 
hide() 隐藏 被 选 的 元 素 
queue() 显示 被 选 元 素 的 排队 函数 
show() 显示 被 选 的 元 素 
slideDown() 通过 调整 高 度 来 滑动 显示 被 选 元 素 


对 被 选 元 素 进 行 滑动 隐藏 和 滑动 显示 的 切换 
通过 调整 高 度 来 滑动 隐藏 被 选 元 素 

停止 在 被 选 元 素 上 运行 动画 

对 被 选 元 素 进 行 隐藏 和 显示 的 切换 


jQuery 效果 - animate() 方法 


实例 
改变 "div" 元 素 的 高 度 : 
$(".btn1").click(function(){ 


$("#box").animate({height:"300px"}); 


, 


定义 和 用 法 
animate() 方法 执行 CSS 属性 集 的 自 定义 动画 。 


该 方法 通过 CSS 样 式 将 元 素 从 一 个 状态 改变 为 另 一 个 状态 。CSS 属 性 值 是 逐渐 改变 
的 ， 这 样 就 可 以 创建 动画 效果 。 


只 有 数字 值 可 创建 动画 (比如 "margin:30px") 。 字 符 串 值 无 法 创建 动画 (比如 
"background-color:red") 。 


注释 : 使 用 "+=" 或 "-=" 来 创建 相对 动画 (relative animations) 。 
语法 1 


$( selector ).animate( styles , speed , easing , callback ) 





MMA/2QAhAn| En it 
W3School Rl mz TET 


参数 描述 
必需 。 规 定 产生 动画 效果 的 CSS 样式 和 值 。 可 能 的 CSS 样式 值 
(提供 实例 ) : backgroundPosition borderwidth 


borderBottomwidth borderLeftWidth borderRightWidth 
borderTopWidth borderSpacing margin marginBottom 
marginLeft marginRight  marginTop outlineWidth 

styles padding paddingBottom  paddingLeft paddingRight 
paddingTop height width maxHeight maxWidth 
minHeight minWidth font fontSize bottom left 
right top  letterSpacing  wordSpacing  lineHeight 
textIndent 注释 : CSS 样式 使 用 DOM 名 称 (上 比如 "fontSize") 
来 设置 ， 而 非 CSS 名 称 (比如 "font-size") 。 


可 选 。 规 定 动 画 的 速度 。 上 默认 是 "normal"。 可 能 的 值 : 毫秒 (比如 
1500) "slow" "normal" "fast" 

可 选 。 规 定 在 不 同 的 动画 点 中 设置 动画 速度 的 easing HR. ABH 
easing easing HIZX: swing linear 扩展 插件 中 提供 更 多 easing FX 
数 。 


Speed 


callback Ay 3b, animate WATS, 要 执行 的 函数 。 如 需 学 习 更 多 有 
关 callback 的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 
语法 2 


$( selector ).animate( styles , options ) 


参数 描述 
styles 必需 。 规 定 产生 动画 效果 的 CSS 样式 和 值 (同上 ) 。 


可 选 。 规 定 动画 的 额外 选项 。 可 能 的 值 : speed -设置 动画 的 速度 
easing -规定 要 使 用 的 easing HA callback -规定 动画 完成 

options ”之 后 要 执行 的 图 数 step_- 规定 动画 的 每 一 步 完成 之 后 要 执行 的 了 
数 queue -布尔 值 。 指 示 是 否 在 效果 队列 中 放置 动画 。 如 果 为 
false， 则 动画 将 立即 开始 specialEasing -XA styles 参数 的 一 
个 或 多 个 CSS 属性 的 映射 ， 以 及 它们 的 对 应 easing HR 


jQuery 效果 - clearQueue() 方法 


实例 
停止 当前 正在 运行 的 动画 : 


$("#stop").click(function(){ 
$("#box").clearQueue(); 
3): 


定义 和 用 法 
clearQueue() 方法 停止 队列 中 所 有 仍 未 执行 的 函数 。 
与 stop) 方法 不 同 ， (只 适用 于 动画 ) , clearQueue() 能 够 清除 任何 排队 的 函数 
(通过 .queue() 方法 添加 到 通用 jQuery 队列 的 任何 范 数 ) 。 
语法 
$(_selector_).clearQueue(_queueName_) 


参数 描述 
queueName ”可 选 。 规 定 要 停止 的 队列 的 名 称 。 默 认 是 "fx"， 标 准 效果 队列 。 


jQuery 效果 - fadeln() 方法 


实例 
使 用 淡 入 效果 来 显示 一 个 隐藏 的 <p> 元 素 : 
$(".btn2").click(function(){ 


$("p").fadeIn(); 
3); 


定义 和 用 法 
fadeln() 方法 使 用 淡 入 效果 来 显示 被 选 元 素 ， 假 如 该 元 素 是 隐藏 的 。 
语法 


$( selector ).fadeIn( speed , callback ) 


参数 描述 


可 选 。 规 定 元 素 从 隐藏 到 可 见 的 速度 。 默 认为 "normal"。 可 能 的 
值 : 毫秒 (比如 Le "slow" "normal" "fast" 在 设置 速度 的 情况 
下 ， 元 素 从 隐藏 到 可 见 的 过 程 中 ， 会 逐渐 地 改变 其 透明 度 (这 样 会 
创造 淡 入 效果 ) o 

可 选 。fadeln 函数 执行 完 后 ， 要 执行 的 函数 。 如 需 


callback callback 的 内 容 ， _ 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 
了 speed 参数 ， 否 则 不 能 设置 该 参数 。 


提示 和 注释 
提示 : 如 果 元 素 已 经 显示 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback WR, 


注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 
素 (但 不 适用 于 visibility:hidden 的 元 素 ) 。 


亲 目 试 一 试 - 实例 


使 用 speed 参数 


使 用 speed 参数 来 对 淡 入 或 淡出 元 素 。 


jQuery 效果 - fadeOut() 方法 


实例 
使 用 淡出 效果 来 隐藏 一 个 <p> 元 素 : 


$(".btn1").click(function(){ 
$("p").fadeOut(); 
3); 


定义 和 用 法 
fadeOut() 方法 使 用 淡出 效果 来 隐藏 被 选 元 素 ， 假 如 该 元 素 是 隐藏 的 。 
语法 


$( selector ).fadeOut( speed , callback ) 


参数 描述 


可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 。 默 认为 "normal", WAN 
值 : 毫秒 (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 
下 ， 元 素 从 可 见 到 隐藏 的 过 程 中 ， 会 逐渐 地 改变 其 透明 度 (这 样 会 
创造 淡出 效果 ) 。 


可 选 。fadeOut É 函数 执行 完 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 
callback 关 callback 的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 
设置 了 speed 参数 ， 否 则 不 能 设置 该 参数 。 


提示 和 注释 
提示 : 如 果 元 素 已 经 隐藏 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback WA. 
亲 目 试 一 试 - 实例 


使 用 speed 参数 
使 用 speed 参数 来 对 淡 入 或 淡出 元 素 。 


jQuery 效果 - fadeTo() 方法 
实例 


使 用 淡出 效果 来 隐藏 一 个 <p> 元 素 : 


$(".btn1").click(function(){ 
$("p").fadeTo(1000,0.4); 
}); 


定义 和 用 法 
fadeTo() 方法 将 被 选 元 素 的 不 透明 度 逐 渐 地 改变 为 指定 的 值 。 
语法 


$( selector ).fadeTo( speed , opacity , callback ) 


参数 描述 
spega 可 选 。 规 定 元 素 从 当前 透明 度 到 指定 透明 度 的 速度 。 可 能 的 值 : € 
秒 (比如 1500) "slow" "normal" "fast" 


必需 。 规 定 要 淡 入 或 淡出 的 透明 度 。 必 须 是 介 于 0.00 5 1.00 之 间 
opacity | age 


可 选 。fadeTo 图 数 执行 完 之 后 ， Fath, We ne] BEAR 
callback callback 的 内 容 ， Ej 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设置 
了 speed 参数 ， 否 则 不 能 设置 该 参数 。 


jQuery 效果 - hide() 方法 
实例 


隐藏 可 见 的 «p» 元 素 : 
$(".btn1").click(function(){ 
$("p").hide(); 
定义 和 用 法 
如 果 被 选 的 元 素 已 被 显示 ， 则 隐藏 该 元 素 。 


语法 


$(_selector_).hide(_speed_,_callback_) 


参数 描述 


可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 。 黑 认为 "0"。 可 能 的 值 : = 

speed 秒 (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 
从 可 见 到 隐藏 的 过 程 中 ， 会 逐渐 地 改变 其 高 度 、 宽 度 、 外 边 距 、 内 
边 距 和 透明 度 。 


可 选 。hide 函数 执行 守之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 关 
callback callback INA, EK 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 
了 speed 参数 ， 否 则 不 能 设置 该 参数 。 
提示 和 注释 


如 果 元 素 已 经 是 完全 可 见 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规 定 了 callback 
a} 


亲 目 试 一 实例 


使 用 speed 参数 
使 用 speed 参数 来 隐藏 和 显示 元 素 。 


使 用 speed 和 callback 参数 
使 用 speed 和 callback 参数 来 隐藏 和 显示 元 素 。 


jQuery 效果 - show() 方法 
实例 


显示 出 隐藏 的 <p> 7558. 


$(".btn2").click(function()( 
$("p").show(); 
3); 


定义 和 用 法 
如 果 被 选 元 素 已 被 隐藏 ， 则 显示 这 些 元 素 : 
语法 


$(_selector_).show(_speed_,_callback_) 


参数 描述 


可 选 。 规 定 元素 从 隐藏 到 完全 可 见 的 速度 。 默 认为 "0"。 可 能 的 值 : 

speed 毫秒 (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 
素 从 隐藏 到 完全 可 见 的 过 程 中 ， 会 逐 淅 地 改变 其 高 度 、 宽 度 、 外 边 
距 、 内 边 距 和 透明 度 。 


可 选 。show 函数 执行 完 之 后 ， 要 执行 的 画 数 。 如 需 学 习 更 多 有 关 
callback ”callback 的 内 容 ， E 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 
了 speed 参数 ， 否 则 不 能 设置 该 参数 。 


提示 和 注释 

提示 : 如 果 元 素 已 经 是 完全 可 见 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规 定 了 callback 
注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 
素 (但 不 适用 于 visibility:hidden 的 元 素 ) © 


亲 目 试 一 试 - 实例 


使 用 speed 参数 

使 用 speed 参数 来 隐藏 和 显示 元 素 。 

使 用 speed 和 callback 参数 

使 用 speed 和 callback 参数 来 隐藏 和 显示 元 素 。 


jQuery 效果 - slideDown() 方法 


实例 
以 滑动 方式 显示 隐藏 的 <p> 元 素 : 


$(".btn2").click(function(){ 
$("p").slideDown(); 


3): 

定义 和 用 法 

slideDown() 方法 通过 使 用 滑动 效果 ， 显 示 隐 藏 的 被 选 元 素 。 
语法 


$(_selector_).slideDown(_speed_,_callback_) 


参数 描述 


规定 元 素 从 隐藏 到 可 见 的 速度 (或 者 相反 ) 。 默认 为 
al"。 可 能 的 值 : 毫秒 (比如 1500) "slow" "normal" "fast" 在 
cmm zs 况 下 ， 元 素 从 隐藏 到 可 见 的 过 程 中 ， 会 逐渐 地 改变 其 


E M c 


Æo slideDown 函数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 
callback #* callback HAA, 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 
非 设 置 了 speed 参数 ， 否 则 不 能 设置 该 参数 。 


提示 和 注释 


sae : 如 果 元 素 已 经 是 完全 可 见 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback 
ANZ o 


注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 
素 (但 不 适用 于 visibility:hidden 的 元 素 ) © 


亲 目 试 一 试 - 实例 


W3School 前 端 教程 合集 


使 用 speed 参数 
使 用 speed 参数 来 隐藏 和 显示 元 素 。 


jQuery 效果 - slideDown() 方法 2355 


jQuery 效果 - slideToggle() 方法 


实例 


通过 使 用 滑动 效果 ， 在 显示 和 隐藏 状态 之 间 切 换 <p> 元 素 : 


$(".btn1").click(function(){ 
$("p").slideToggle(); 


, 


定义 和 用 法 


slide Toggle() 


方法 通过 使 用 滑动 效果 (高 度 变 化 ) 来 切换 元 素 的 可 见 状态 


如 果 被 选 元 素 是 可 见 的 ， 则 隐藏 这 些 元 素 ， 如 果 被 选 元 素 是 隐藏 的 ， 则 显示 这 些 元 


INO 


语法 


$( selector ).slideToggle( speed , callback ) 


参数 描述 

可 选 。 规 定 元 素 从 隐藏 到 可 见 的 速度 (或 者 相反 ) 。 默 认为 

Ma al"。 可 能 的 值 : 毫秒 (比如 1500) "slow" "normal" "fast" ft 

p 速度 的 情况 下 ， 元 素 在 切换 的 过 程 中 ， 会 逐渐 地 改变 其 高 度 
这 样 会 创造 滑动 效果 ) 。 
可 选 。toggle 函数 执行 守之 后 ， Fath. We od deus 

callback callback HAR, i 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 
了 speed 参数 ， 否 则 不 能 设置 该 参数 。 

提示 和 注释 


提示 : 如 果 元 素 已 经 隐藏 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback WR. 


亲自 试 一 


试 - 实例 


使 用 speed 参数 


使 用 speed 参数 来 切换 上 下 滑动 地 显示 和 隐藏 元 素 。 


jQuery 效果 - slideUp() 方法 


实例 


以 滑动 方式 隐藏 <p> 元 素 : 


$(".btn1").click(function(){ 
$("p").slideUp(); 


3): 


定义 和 用 法 
通过 使 用 滑动 效果 ， 人 隐藏 被 选 元 素 ， 如 果 元 素 已 显示 出 来 的 话 。 


语法 


$( selector ).slideUp( speed , callback ) 


参数 描述 
可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 (或 者 相反 ) o MAA 
ee "normal". 可 能 的 值 : 毫秒 (比如 1500) "slow" "normal" "fast" 在 
p 设置 速度 的 情况 下 ， 元 素 从 可 见 到 隐藏 的 过 程 中 ， 会 逐渐 地 改变 其 
高 度 (这 样 会 创造 滑动 效果 ) o 
可 选 。slideUp 画 数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 ae 
callback callback HANA, E 青 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 
了 speed 参数 ， 否 则 不 能 设置 该 参数 。 
提示 和 注释 


提示 : 如 果 元 素 已 经 隐藏 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规 定 了 callback WAX. 


亲自 试 一 


iX - 实例 


使 用 speed 参数 
使 用 speed 参数 来 隐藏 和 显示 元 素 。 


jQuery 效果 - stop() 方法 
实例 


停止 当前 正在 运行 的 动画 


$("#stop").click(function(){ 
$("#box").stop(); 
3); 


定义 和 用 法 
stop() 方法 停止 当前 正在 运行 的 动画 。 
语法 


$( selector ).stop( stopAll , goToEnd ) 


参数 描述 


stopAll 可 选 。 规 定 是 否 停止 被 选 元 素 的 所 有 加 入 队列 的 动画 
否 允 许 完 成 当前 的 动画 。 该 参数 只 能 在 设置 了 stopAIl 


= EI 


可 选 。 规 定 是 
goloEnd 参数 时 使 用 。 


亲自 试 一 实例 


停止 动画 队列 

停止 被 选 元 素 的 所 有 加 入 队列 的 动画 。 

在 当前 动画 完成 后 停止 动画 队列 

停止 被 选 元 素 的 所 有 加 入 队列 的 动画 ， 但 允许 完成 当前 动画 。 


jQuery 效果 - toggle() 方法 


实例 
切换 <p> 元 素 的 显示 与 隐藏 状态 : 


$(".btni").click(function()( 
$("p").hide(); 
3); 


定义 和 用 法 
toggle() 方法 切换 元 素 的 可 见 状态 。 
如 果 被 选 元 素 可 见 ， 则 隐藏 这 些 元 素 ， 如 果 被 选 元 素 隐 藏 ， 则 显示 这 些 元 素 。 


语法 


$( selector ).toggle( speed , callback , switch ) 


参数 描述 


可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 (或 者 相反 ) 。 默 认为 "0"。 可 

能 的 值 : 毫秒 (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情 
Speed 况 下 ， 元 素 从 可 见 到 隐藏 的 过 程 中 ， 会 逐渐 地 改变 其 高 度 、 宽 度 、 

人 内 边 距 和 和 透明度。 如 果 设 置 此 参数 ， 则 无 法 使 用 switch 参 


可 选 。toggle 豆 数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 关 
callback callback 的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 
了 speed 参数 ， 否 则 不 能 设置 该 参数 。 


可 选 。 布 尔 值 。 规 定 toggle 是 否 隐 藏 或 显示 所 有 被 选 元 素 。 True - 
switch 显示 所 有 元 素 False - 隐藏 所 有 元 素 如 果 设置 此 参数 ， 则 无 法 使 用 
speed 和 callback 参数 。 


提示 和 注释 


注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 
素 (但 不 适用 于 visibility:hidden 的 元 素 ) © 


亲 目 试 一 试 - 实例 
使 用 speed 参数 
使 用 speed 参数 来 隐藏 和 显示 元 素 。 


使 用 switch 参数 
使 用 switch 参数 来 显示 所 有 隐藏 的 段落 。 


jQuery 参考 手册 - 文档 操作 
jQuery 文档 操作 方法 


这 些 方法 对 于 XML 文档 和 HTML 文档 均 是 适用 的 ， 除 了 : html()。 


方法 
addClass() 
after() 
append() 
append To() 
attr() 
before() 
clone() 
detach() 
empty() 
hasClass() 
html() 
insertAfter() 
insertBefore() 
prepend() 
prependTo() 
remove() 
removeAttr() 
removeClass() 
replaceAll() 
replaceWith() 
text() 
toggleClass() 
unwrap() 
val() 
wrap() 
wrapAll() 


wrapinner() 


I—— SAAT + 


fü 
向 匹配 的 元 素 添加 指定 的 类 名 。 
在 匹配 的 元 素 之 后 插入 内 容 。 
向 匹配 元 素 集合 中 的 每 个 元 素 结尾 插入 由 参数 指定 的 内 容 。 
向 目标 结尾 插入 匹配 元 素 集 合 中 的 每 个 元 素 。 
设置 或 返回 匹配 元 素 的 属性 和 值 。 
在 每 个 匹配 的 元 素 之 前 插入 内 容 。 
创建 匹配 元 素 集合 的 副本 。 
从 DOM 中 移 除 匹 配 元 素 集合 。 
删除 匹配 的 元 素 集 合 中 所 有 的 子 节点 。 
检查 匹配 的 元 素 是 否 拥 有 指定 的 类 。 
设置 或 返回 匹配 的 元 素 集合 中 的 HTML 内 容 。 
把 匹配 的 元 素 插入 到 另 一 个 指定 的 元 素 集 合 的 后 面 。 
把 匹配 的 元 素 插 入 到 另 一 个 指定 的 元 素 集合 的 前 面 。 
向 匹配 元 素 集 合 中 的 每 个 元 素 开 头 插 入 由 参数 指定 的 内 容 。 
向 目标 开头 插入 匹配 元 素 集 合 中 的 每 个 元 素 。 
移 除 所 有 [匹配 的 元 素 。 
从 所 有 匹配 的 元 素 中 移 除 指定 的 属性 。 
从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 类 。 
用 匹配 的 元 素 蔡 换 所 有 匹配 到 的 元 素 。 
用 新 内 容 蔡 换 匹配 的 元 素 。 
设置 或 返回 匹配 元 素 的 内 容 。 
从 匹配 的 元 素 中 添加 或 删除 一 个 类 。 
移 除 并 替换 指定 元 素 的 父 元 素 。 
设置 或 返回 匹配 元 素 的 值 。 
把 匹配 的 元 素 用 指定 的 内 容 或 元 素 包 应 起 来 。 
把 所 有 匹配 的 元 素 用 指定 的 内 容 或 元 素 包 应 起 来 。 
将 每 一 个 匹配 的 元 素 的 子 内 容 用 指定 的 内 容 或 元 素 包 应 起 


o 


学 


jQuery 属性 操作 - addClass() 方法 


实例 
向 第 一 个 p 元 素 添加 一 个 类 : 


$("button").click(function(){ 
$("p:first").addClass("intro"); 
3); 


定义 和 用 法 
addClass() 方法 向 被 选 元 素 添加 一 个 或 多 个 类 。 
该 方法 不 会 移 除 已 存在 的 class 属性 ， 人 友信 添加 一 个 或 多 个 class 属性 。 


提示 : 如 需 添加 多 个 类 ， 请 使 用 空格 分 隔 类 名 。 
语法 


$(selector).addClass(_class_) 


参数 描述 
class 必需 。 规 定 一 个 或 多 个 cass 名 称 。 


使 用 函数 来 添加 类 
使 用 函数 向 被 选 元 素 添加 类 。 
语法 


$(selector).addClass( function ( index , oldclass) ) 


描述 


必需 。 规定 返 一 个 或 多 个 待 添加 BNR RESE 
index - 可 选 。 pair index iR. class - n] 3t 
选择 器 的 旧 的 类 名 。 


参数 


function(index,oldclass) 


亲自 试 一 实例 


向 元 素 添 加 两 个 类 
如 何 向 被 选 元 素 添 加 两 个 class。 


改变 元 素 的 类 
如 任何 使 用 addClass() 和 removeClass() 来 移 除 class， 并 添加 新 的 class。 


jQuery 文档 操作 - after() 方法 


实例 
在 每 个 p 元 素 后 插入 内 容 : 


$("button").click(function() { 
$("p").after("<p>Hello world!</p>"); 


3); 


定义 和 用 法 


after() 方法 在 被 选 元 素 后 插入 指定 的 内 容 。 


语法 


$(selector).after( content ) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


使 用 范 数 来 插入 内 容 


使 用 函数 在 被 选 元 素 之 后 插入 指定 的 内 容 。 


语法 


$(selector).after( function ( index )) 


参数 


function(index) 


vy 


AN 


必需 。 规 定 返 回 待 插入 内 容 的 函数 。 jndex - 可 选 。 接 收 选择 
器 的 index 位 置 。 


Br 


jQuery 文档 操作 - append() 方法 


实例 
在 每 个 p 元 素 结尾 插入 内 容 : 


$("button").click(function(){ 
$("p").append(" <b>Hello world!</b>"); 
}); 


定义 和 用 法 
append() 方法 在 被 选 元 素 的 结尾 (仍然 在 内 部 ) 插入 指定 内 容 。 
提示 : append() 和 appendTo() 方法 执行 的 任务 相同 。 不 同 之 处 在 于 : 内 容 的 位 置 
和 选择 器 。 
语法 

$(selector).append( content ) 

参数 描述 

content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 
使 用 函数 来 附加 内 容 
使 用 函数 在 指定 元 素 的 结尾 插入 内 容 。 
语法 

$(selector).append(_function(index,html)_) 


参数 fh 


必需 。 规 定 返 回 待 插 入 内 容 的 函数 。 index- 可 选 。 接 收 
function(index,html) ”选择 器 的 index WE., html- 可 选 。 接 收 选择 器 的 当前 
HTML。 


W3School 前 端 教 程 合 


jQuery 文档 操作 - append() 方法 2368 


jQuery 文档 操作 - appendTo() 方法 


实例 
在 每 个 p 元 素 结尾 插入 内 容 : 


$("button").click(function() { 
$("«b»Hello World!</b>").appendTo("p"); 
3); 


定义 和 用 法 

appendTo() 方法 在 被 选 元 素 的 结尾 〈 仍 然 在 内 部 ) 插入 指定 内 容 。 

提示 : append() 和 appendTo() 方法 执行 的 任务 相同 。 不 同 之 处 在 于 : 内 容 和 选择 
器 的 位 置 ， 以 及 append() 能 够 使 用 画 数 来 附加 内 容 。 


语法 


$(_content_).appendTo(_selector_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML E). 
selector 必需 。 规 定 把 内 容 追 加 到 哪个 元 素 上 。 


jQuery 属性 操作 - attr() 方法 


实例 
改变 图 像 的 width 属性 : 


$("button").click(function(){ 
$("img").attr("width","180"); 


, 


定义 和 用 法 
attr() 方法 设置 或 返回 被 选 元 素 的 属性 值 。 
根据 该 方法 不 同 的 参数 ， 其 工作 方式 也 有 所 差异 。 


返回 属性 值 
返回 被 选 元 素 的 属性 值 。 
语法 


$(_selector_).attr(_attribute_) 


参数 描述 
attribute 规定 要 获取 其 值 的 属性 。 
设置 属性 / 值 


设置 被 选 元 素 的 属性 和 值 。 
语法 


$( selector ).attr( attribute , value ) 


b 
gr 
Bt 
BE 


attribute 规定 属性 的 名 称 。 
value 规定 属性 的 值 。 


使 用 函数 来 设置 属性 / 值 
设置 被 选 元 素 的 属性 和 值 。 
语法 


$(_selector_).attr(_attribute_,_function(index, oldvalue)_) 


参数 Tax 
attribute 规定 属性 的 名 称 。 


规定 返回 属性 值 的 辑 数 。 该 图 数 可 接收 并 使 用 选择 
器 的 index 值 和 当前 属性 值 。 


iE 


function(index,oldvalue) 


& iE SS m EH xt 
为 被 选 元 素 设置 一 个 以 上 的 属性 和 值 。 
语法 
$( selector ).attr(( attribute:value , _attribute:value_ ...}) 


参数 描述 
attribute:value 规定 一 个 或 多 个 属性 / 值 对 。 


jQuery 文档 操作 - before() 方法 


实例 


在 每 个 p 元 素 前 插入 内 容 : 


$("button").click(function() { 
$("p").before("«p»Hello world!</p>"); 


3); 


定义 和 用 法 


before() 方法 在 被 选 元 素 前 插入 指定 的 内 容 。 


语法 


$(selector).before( content ) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


使 用 范 数 来 插入 内 容 


使 用 函数 在 指定 的 元 素 前 面 插 入 内 容 。 


语法 


$(selector).before( function(index) ) 


参数 


function(index) 


vy 


AN 


必需 。 规 定 返 回 待 插入 内 容 的 函数 。 index- 可 选 。 接 收 选择 
器 的 index 位 置 。 


Br 


jQuery 文档 操作 - clone() 方法 


实例 
克隆 并 追加 一 个 p 元 素 : 


$("button").click(function(){ 
$("body").append($("p").clone()); 


}); 

定义 和 用 法 

clone() 方法 生成 被 选 元 素 的 副本 ， 包 含 子 节点 、 文 本 和 属性 。 
语法 


$(_selector_).clone(_includeEvents_) 


参数 描述 
| 可 选 。 布 尔 值 。 规 定 是 否 复制 元 素 的 所 有 事件 处 理 。 默 认 地 ， 
includeEvents ， 副 本 中 不 包含 事件 处 理 器 。 


亲 目 试 一 试 - 实例 


复制 一 个 元 素 ， 包 括 事 件 处 理 器 
使 用 clone() 方法 来 复制 元 素 ， 包 括 其 事件 处 理 器 。 


jQuery 文档 操作 - detach() 方法 


实例 
移 除 所 有 p 元 素 : 


$("button") .click(function(){ 
$("p").detach(); 


3): 
定义 和 用 法 
detach() 方法 移 除 被 选 元 素 ， 包 括 所 有 文本 和 子 节点 。 


这 个 方法 会 保留 jQuery 对 象 中 的 匹配 的 元 素 ， 因 而 可 以 在 将 来 再 使 用 这 些 匹 配 的 
元 素 。 


detach() 会 保留 所 有 绑 定 的 事件 、 附 加 的 数据 ， 这 一 点 与 remove() 不 同 。 
语法 


$( selector ).detach() 


亲 目 试 一 试 - 实例 

移动 元 素 

使 用 detach() 方法 来 移动 元 素 。 

删除 并 恢复 一 个 元 素 

使 用 detach() 方法 来 删除 并 恢复 一 个 元 素 。 
移动 元 素 并 保留 其 click 事件 

使 用 detach() 方法 来 移动 元 素 ， 并 保留 元 素 的 jQuery 数据 。 


jQuery 文档 操作 - empty() 方法 


实例 
移 除 p 元 素 的 内 容 : 


$(".btn1").click(function(){ 
SUP") empty); 


定义 和 用 法 

empty() 方法 从 被 选 元 素 移 除 所 有 内 容 ， 包 括 所 有 文本 和 子 节点 。 
语法 

$( selector ).empty() 

亲自 试 一 试 - 实例 


移 除 元 素 的 内 容 
使 用 empty() 方法 从 元 素 移 除 内 容 。 


jQuery 属性 操作 - hasClass() 方法 


ap 
实例 
检查 第 一 个 <p> 元 素 是 否 包含 "intro" 类 : 


$("button").click(function(){ 
alert($("p:first").hasClass("intro")); 


定义 和 用 法 
hasClass() 方法 检查 被 选 元 素 是 否 包含 指定 的 class. 
语法 


$( selector ).hasClass( class ) 


jQuery 文档 操作 - html() 方法 
实例 


设置 所 有 p 元 素 的 内 容 : 


$(".btni").click(function(){ 
$("p").html("Hello <b>world</b>!"); 


, 


定义 和 用 法 
html() 方法 返回 或 设置 被 选 元 素 的 内 容 (inner HTML), 
如 果 该 方法 未 设置 参数 ， 则 返回 被 选 元 素 的 当前 内 容 。 


返回 元 素 内 容 
当 使 用 该 方法 返回 一 个 值 时 ， 它 会 返回 第 一 个 匹配 元 素 的 内 容 。 
语法 


$(selector).html() 


设置 元 素 内 容 
当 使 用 该 方法 设置 一 个 值 时 ， 它 会 覆盖 所 有 匹配 元 素 的 内 容 。 
语法 


$( selector ).html( content ) 


参数 描述 
content ”可 选 。 规 定 被 选 元 素 的 新 内 容 。3 


" 


参数 可 包含 HTML 标签 。 


FARAR ET RAR 
使 用 画 数 来 设置 所 有 匹配 元 素 的 内 容 。 
语法 


$( selector ).html( function(index,oldcontent) ) 


参数 描述 


规定 一 个 返回 被 选 元 素 的 新 内 容 的 函数 。 index - 
function(index,oldcontent) ”可 选 。 接 收 选择 器 的 index 位 置 。 olacontent - 可 
选 。 接 收 选 择 器 的 当前 内 容 。 


jQuery 文档 操作 - insertAfter() 方法 


实例 
在 每 个 p 元 素 之 后 插入 span TR : 


$("button").click(function(){ 
$("<span>Hello world!</span>").insertAfter("p"); 


}); 


定义 和 用 法 
insertAfter() 方法 在 被 选 元 素 之 后 插入 HTML 标记 或 已 有 的 元 素 。 
注释 : 如 果 该 方法 用 于 已 有 元 素 ， 这 些 元 素 会 被 从 当前 位 置 移 走 ， 然 后 被 添加 到 被 


选 元 素 之 后 。 
语法 

$(_content_).insertAfter(_selector_) 

参数 描述 

content 必需。 规定 要 插入 的 内 容 。 可 能 的 值 : 选择 器 表达 式 HTML 标记 
selector ”必需 。 规 定 在 何 处 插入 被 选 元 素 。 

亲 目 试 一 试 - 实例 
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插入 已 有 的 元 素 
如 何 使 用 insertAfter() 方法 在 每 个 被 选 元 素 之 后 插入 已 存在 的 元 素 。 


jQuery 文档 操作 - insertBefore() 方法 


实例 
在 每 个 p 元 素 之 前 插入 span TR : 


$("button").click(function(){ 
$("<span>Hello world!</span>").insertBefore("p"); 


}); 


定义 和 用 法 
insertBefore() 方法 在 被 选 元 素 之 前 插入 HTML 标记 或 已 有 的 元 素 。 


注释 : 如 果 该 方法 用 于 已 有 元 素 ， 这 些 元 素 会 被 从 当前 位 置 移 走 ， 然 后 被 添加 到 被 
选 元 素 之 前 。 


语法 

$( content ).insertBefore( selector ) 

content 必需。 规定 要 插入 的 内 容 。 可 能 的 值 : 选择 器 表达 式 HTML 标记 
selector | 必需。 规定 在 何 处 插入 被 选 元 素 。 

亲 目 试 一 试 - 实例 


插入 已 有 的 元 素 
如 何 使 用 insertAfter() 方法 在 每 个 被 选 元 素 之 前 插入 已 存在 的 元 素 。 


jQuery 文档 操作 - prepend() 方法 


实例 
在 p 元 素 的 开头 插入 内 容 : 


$(".btn1").click(function(){ 
$("p").prepend("<b>Hello world!</b>"); 


, 


定义 和 用 法 

prepend() 方法 在 被 选 元 素 的 开头 〈 仍 位 于 内 部 ) 插入 指定 内 容 。 

提示 : prepend() 和 prependTo() 方法 作用 相同 。 差 异 在 于 语法 : 内 容 和 选择 器 的 
位 置 ， 以 及 prependTo() 无 法 使 用 函数 来 插入 内 容 。 


语法 


$( selector ).prepend( content ) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


使 用 范 数 来 附加 内 容 
使 用 函数 在 被 选 元 素 的 开头 插入 指定 的 内 容 。 
语法 


$( selector ).prepend( function(index,html) ) 


参数 fh 


必需 。 规 定 返 回 竺 插入 内 容 的 函数 。 index - Wik, 
function(index,html) ”接受 选择 器 的 index 位 置 。 html - 可 选 。 接 受 选择 器 
的 当前 HTML。 


jQuery 文档 操作 - prependTo() 方法 


实例 
在 每 个 p 元 素 的 开头 插入 内 容 : 


$(".btn1").click(function(){ 
$("<b>Hello World!</b>").prependTo("p"); 
}); 


定义 和 用 法 
prependTo() 方法 在 被 选 元 素 的 开头 〈 仍 位 于 内 部 ) 插入 指定 内 容 。 


提示 : prepend() 和 prependTo() 方法 作用 相同 。 差 异 在 于 语法 : 内 容 和 选择 器 的 
位 置 ， 以 及 prepend() 能 够 使 用 画 数 来 插入 内 容 。 


语法 
$( content ).prependTo(. selector ) 
参数 描述 


要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


content 必需 。 规 定 
selector 必需 。 规 定 在 何 外 插入 内 容 。 


jQuery 文档 操作 - remove() 方法 


实例 
移 除 所 有 <p> 元 素 : 


$("button") .click(function(){ 
$("p").remove(); 


3): 
定义 和 用 法 
remove() 方法 移 除 被 选 元 素 ， 包 括 所 有 文本 和 子 节点 。 


该 方法 不 会 把 匹配 的 元 素 从 jQuery 对 象 中 删除 ， 因 而 可 以 在 将 来 再 使 用 这 些 匹配 


的 元 素 。 


但 除了 这 个 元 素 本 身 得 以 保留 之 外 ，remove() 不 会 保留 元 素 的 jQuery 数据 。 其 他 
的 比如 绑 定 的 事件 、 附 加 的 数据 等 都 会 被 移 除 。 这 一 点 与 detach() 不 同 。 


语法 


$( selector ).remove() 


亲 目 试 一 试 - 实例 


移动 元 素 
使 用 remove() 方法 来 移动 元 素 。 


jQuery 属性 操作 - removeAttr() 方法 


实例 
从 任何 p 元 素 中 移 除 id 属性 : 


$("button").click(function(){ 
$("p").removeAttr("id"); 
3); 


定义 和 用 法 
removeAttr() 方法 从 被 选 元 素 中 移 除 属性 。 
语法 


$(_selector_).removeAttr(_attribute_) 


参数 描述 
attribute 必需 。 规 定 从 指定 元 素 中 移 除 的 属性 。 


jQuery 属性 操作 - removeClass() 方法 


实例 
移 除 所 有 «p» AY "intro" X : 


$("button").click(function() { 
$("p:first").removeClass("intro"); 


3); 


定义 和 用 法 
removeClass() 方法 从 被 选 元 素 移 除 一 个 或 多 个 类 。 
注释 : 如 果 没 有 规定 参数 ， 则 该 方法 将 从 被 选 元 素 中 删除 所 有 类 。 


语法 


$( selector ).removeClass( class ) 


参数 描述 


可 选 。 规 定 要 移 除 的 class 的 名 称 。 请 使 用 空格 来 分 


class ë 隔 关 名 。 如 果 不 设 置 该 参数 ， 则 会 移 除 所 有 类 


[e FH ER SR AS BR 2E 
使 用 画 数 来 删除 被 选 元 素 中 的 类 。 


$(_selector_).removeClass(_function(index,oldclass)_) 


参数 描述 
必需 。 通 过 运行 罚 数 来 移 除 指定 index - 


function(index,oldclass) ”可 选 。 接 受 选择 器 的 index m gms - 可 选 。 
接受 选择 器 的 旧 的 类 值 。 


亲自 试 一 试 - 实例 
改变 元 素 的 类 
如 何 使 用 addClass() 和 removeClass() 来 移 除 一 个 类 ， 并 添加 一 个 新 的 类 。 


jQuery 文档 操作 - replaceAll() 方法 


实例 
用 粗 体 文本 蔡 痪 每 个 段落 : 


$(".btni").click(function(){ 
$("p").replaceAll("<b>Hello world!</b>"); 
3); 


定义 和 用 法 

replaceAll() 方法 用 指定 的 HTML 内 容 或 元 素 蔡 换 被 选 元 素 。 

提示 : replaceAll() 与 replaceWith() 作用 相同 。 差 异 在 于 语法 : 内 容 和 选择 器 的 位 
iB, LAR replaceWith() 能 够 使 用 函数 进行 替换 。 


语法 


$( content ).replaceAll( selector ) 


参数 描述 


必需 。 规 定 蔡 换 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 -上 比如 (" 
<div></div>") 新 元 素 - 比如 (document.createElement("div")) 
已 存在 的 元 素 - 比如 ($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 
Sl, FORMAT. 


selector ”必需 。 规 定 要 蔡 换 的 元 素 。 


content 


亲 目 试 一 试 - 实例 


使 用 新 元 素来 替换 元 素 
使 用 document.createElement() 来 创建 一 个 新 的 DOM 元 素 ， 然 后 用 它 蔡 换 被 选 元 


-INO 


jQuery 文档 操作 - replaceWith() 方法 


实例 
用 粗 体 文本 蔡 痪 每 个 段落 : 


$(".btni").click(function(){ 
$("p").replacewith("<b>Hello world!</b>"); 
3); 


定义 和 用 法 

replaceWith() 方法 用 指定 的 HTML 内 容 或 元 素 蔡 换 被 选 元 素 。 

提示 : replaceWith() 与 replaceAll() 作用 相同 。 差 异 在 于 语法 : 内 容 和 选择 器 的 位 
iB, DUX replaceAll() 无 法 使 用 画 数 进行 替换 。 


语法 


$( selector ).replaceWith( content ) 


参数 描述 


必需 。 规 定 蔡 换 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 -上 比如 (" 
<div></div>") 新 元 素 - 比如 (document.createElement("div")) 

已 存在 的 元 素 - 比如 ($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 
Sl, FORMAT. 


selector 必需。 规定 要 替换 的 元 素 。 


content 


[s FH ER SLR ER TUR 
使 用 画 数 把 被 选 元 素 蔡 换 为 新 内 容 。 
语法 


$( selector ).replacewith( function() ) 


描述 


参数 
function() 必需 。 返 回 待 蔡 换 被 选 元 素 的 新 内 容 的 函数 。 


亲 目 试 一 试 - 实例 


使 用 新 元 素来 替换 元 素 
使 用 document.createElement() 来 创建 一 个 新 的 DOM 元 素 ， 然 后 用 它 替 换 被 选 元 


7INo 


jQuery 文档 操作 - text() 方法 
实例 


设置 所 有 <p> 元 素 的 内 容 : 


$(".btni").click(function(){ 
$("p").text("Hello <b>world</b>!"); 


, 


定义 和 用 法 
text() 方法 方法 设置 或 返回 被 选 元 素 的 文本 内 容 。 


返回 文本 内 容 


当 该 方法 用 于 返回 一 个 值 时 ， 它 会 返回 所 有 匹配 元 素 的 组 合 的 文本 内 容 (会 删除 
HTML 标记 ) 。 


语法 


$(_selector_).text() 


设置 文本 内 容 
当 该 方法 用 于 设置 值 时 ， 它 会 覆盖 被 选 元 素 的 所 有 内 容 。 


$(_selector_).text(_content_) 


参数 描述 
content ”规定 被 选 元 素 的 新 文本 内 容 。 注 释 : 特殊 字符 会 被 编码 。 


使 用 画 数 设置 文本 内 容 
使 用 画 数 设置 所 有 被 选 元 素 的 文本 内 容 。 


语法 


$( selector ).text( function(index,oldcontent) ) 


参数 描述 


必需 。 规 定 返 回 被 选 元 素 的 新 文本 内 容 的 画 数 。 
function(index,oldcontent) ^ index - 可 选 。 接 受 选择 器 的 index 位 置 。 
html -可 选 。 接受 选择 器 的 当前 内 容 。 


jQuery 属性 操作 - toggleClass() 方法 
实例 


对 设置 和 移 除 所 有 <p> 元 素 的 "main" 类 进行 切换 : 


$("button").click(function(){ 
$("p").toggleClass("main"); 
3); 


定义 和 用 法 

toggleClass() 对 设置 或 移 除 被 选 元 素 的 一 个 或 多 个 类 进行 切换 。 

该 方法 检查 每 个 元 素 中 指定 的 类 。 如 果 不 存 在 则 添加 类 ， 如 果 已 设置 则 删除 之 。 
就 是 所 谓 的 切换 效果 。 

个 过 过 使 用 "switch" 参数 ， TAB Eo 规定 定 只 删 1 除 或 只 添加 类 。 


语法 


$( selector ).toggleClass( class , switch ) 


参数 描述 
class ”必需 。 规 定 添加 或 移 除 class 的 指定 元 素 。 如 需 规定 若干 class， 请 使 


用 空格 来 分 隔 类 
switch ”可 选 。 布尔 值 。 规 定 是 否 添加 或 移 除 class。 


使 用 函数 来 切换 类 


$( selector ).toggleClass( function(index,class) , switch ) 


参数 描述 


必需 。 规 定 返 回 需要 添加 或 删除 的 一 个 或 多 个 类 名 的 函 
function(index,class) t. index -可 选 。 接 受 选择 器 的 index 位 置 。 
class - 可 选 。 接 受 选 择 器 的 当前 的 类 。 


switch 可 选 。 布 尔 值 。 规 定 是 否 添加 (true) 或 移 除 (false) 类 。 


jQuery 文档 操作 - unwrap() 方法 


实例 
删除 所 有 <p> 元 素 的 父 元 素 : 


$("button") .click(function(){ 
$("p").unwrap(); 
3): 


定义 和 用 法 

unwrap() 方法 删除 被 选 元 素 的 父 元 素 。 
语法 

$( selector ).unwrap() 
亲自 试 一 试 - 实例 


ER AEF ICR 
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jQuery 属性 操作 - val() 方法 


实例 
设置 输入 域 的 值 : 


$("button").click(function(){ 
$(":text").val( "Hello world"); 


, 


定义 和 用 法 

val() 方法 返回 或 设置 被 选 元 素 的 值 。 

元 素 的 值 是 通过 value 属性 设置 的 。 该 方法 大 多 用 于 input 元 素 。 
如 果 该 方法 未 设置 参数 ， 则 返回 被 选 元 素 的 当前 值 。 


语法 


$(_selector_).val(_value_) 


参数 描述 
value 可 选 。 规 定 被 选 元 素 的 新 内 容 。 


返回 Value 属性 


返回 第 一 个 匹配 元 素 的 value 属性 的 值 。 
语法 


$(_selector_).val() 


设置 Value 属性 的 值 


$(_selector_).val(_value_) 


参数 


value 设置 Value 属性 的 值 。 


Bt 
EH 


使 用 函数 设置 Value 属性 的 值 


$(_selector_).val(_function(index, oldvalue)_) 


参数 描述 


规定 返回 要 设置 的 值 的 画 数 。 index- 可 选 。 接 受 选 
function(index,oldvalue) ” 择 器 的 index 位 置 。 oldvalue - 可 选 。 接 受 选择 器 
的 当前 Value 属性 。 


jQuery 文档 操作 - wrap() 方法 
实例 


在 «div» 元 素 中 包 襄 每 个 段落 : 


$(".btn1").click(function(){ 
$("p").wrap("<div></div>"); 
}); 


定义 和 用 法 
wrap() 方法 把 每 个 被 选 元 素 放置 在 指定 的 HTML. 内 容 或 元 素 中 。 
语法 

$( selector ).wrap( wrapper. ) 


参数 描述 


必需 。 规 定 包 应 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 -比如 人 
<div></div>") 新 元 素 - 比如 (document.createElement("div")) 

已 存在 的 元 素 - 比如 ($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 
Sil, FORM TUR. 


wrapper 


se FH ER SK LR JUR 
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语法 


$(_selector_).wrap(_function()_) 


参数 描述 
function() 必需 。 规 定 返 回 包 于 元 素 的 函数 。 


亲自 试 一 试 - 实例 

使 用 新 元 素来 包 误 

创建 一 个 新 的 DOM scm KARST RICH. 
KMART ICR 
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jQuery 文档 操作 - wrapAll() 方法 


实例 
在 <div> PARTAR : 


$(".btn1").click(function(){ 
$("p").wrapAll("<div></div>"); 
}); 


定义 和 用 法 
wrapAll() 在 指定 的 HTML 内 容 或 元 素 中 放置 所 有 被 选 的 元 素 。 
语法 

$( selector ).wrapAll( wrapper. ) 


参数 描述 


必需 。 规 定 包 应 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 -上 比如 (" 
<div></div>") 新 的 DOM scs - 比如 
(document.createElement("div")) 已 存在 的 元 素 - 比如 ($(".div1")) 
已 存在 的 元 素 不 会 被 移动 ， 只 会 被 复制 ， 并 包 于 被 选 元 素 。 


wrapper 


亲 目 试 一 试 - 实例 


使 用 新 元 素来 包 庄 
创建 一 个 新 的 DOM 元 素来 包 事 每 个 被 选 元 素 。 


jQuery 文档 操作 - wraplnner() 方法 
实例 


在 每 个 p 元 素 的 内 容 上 包围 b TR: 


$(".btni").click(function(){ 
$("p").wrapInner ("<b></b>"); 
}); 


定义 和 用 法 
wraplnner() 方法 使 用 指定 的 HTML. 内 容 或 元 素 ， 来 包 库 每 个 被 选 元 素 中 的 所 有 内 
容 (inner HTML). 


语法 


$( selector ).wrapInner( wrapper ) 


参数 描述 


必需 。 规 定 包围 在 被 选 元 素 的 内 容 周转 的 内 容 。 可 能 的 值 : 
HTML 代码 -上 比如 ("<div></div>") 新 的 DOM m% - 比如 
(document.createElement("div")) 已 存在 的 元 素 -比如 ($(".div1")) 
已 存在 的 元 素 不 会 被 移动 ， 只 会 被 复制 ， 并 包 误 被 选 元 素 。 


wrapper 


使 用 函 效 包 应 内 容 


使 用 函数 来 规定 包围 在 每 个 被 选 元 素 周围 的 内 容 。 
语法 


$(_selector_).wrapInner(_function()_) 


参数 描述 
function() 必需 。 规 定 返回 包围 元 素 的 函数 。 


i 


亲自 试 一 试 - 实例 
使 用 新 元 素来 包 误 
创建 一 个 新 的 DOM scm KARST RICH. 


jQuery 参考 手册 - 属性 操作 
jQuery 属性 操作 方法 


下 面 列 出 的 这 些 方法 获得 或 设置 元 素 的 DOM 属性 。 
这 些 方法 对 于 XML 文档 和 HTML 文档 均 是 适用 的 ， 除 了 : html()。 


方法 描述 
addClass() 向 匹配 的 元 素 添 加 指定 的 类 名 。 
attr() 设置 或 返回 匹配 元 素 的 属性 和 值 。 
hasClass() 检查 匹配 的 元 素 是 否 拥有 指定 的 类 。 
html() 设置 或 返回 匹配 的 元 素 集 合 中 的 HTML AR., 
removeAttr() 从 所 有 匹配 的 元 素 中 移 除 指定 的 属性 。 
removeClass() 从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 类 。 
toggleClass() 从 匹配 的 元 素 中 添加 或 删除 一 个 类 。 
val() 设置 或 返回 匹配 元 素 的 值 。 


注释 : 中 也 列 出 了 以 上 方法 。 本 参考 页 的 作用 是 方便 用 户 单独 查阅 有 关 属 性 操作 方 
面 的 方法 。 


jQuery 参考 手册 - CSS 操作 


jQuery CSS 操作 函数 
下 面 列 出 的 这 些 方法 设置 或 返回 元 素 的 CSS 相关 属性 。 


CSS 属性 描述 

css() 设置 或 返回 匹配 元 素 的 样式 属性 。 

height() 设置 或 返回 匹配 元 素 的 高 度 。 

offset() 返回 第 一 个 匹配 元 素 相 对 于 文档 的 位 置 。 
offsetParent() 返回 最 近 的 定位 祖先 元 素 。 

position() 返回 第 一 个 匹配 元 素 相 对 于 父 元 素 的 位 置 。 
scrollLeft() 设置 或 返回 匹配 元 素 相 对 滚动 条 左 侧 的 偏 移 。 
scrollTop() 设置 或 返回 匹配 元 素 相 对 滚动 条 顶部 的 偏 移 。 
width() 设置 或 返回 匹配 元 素 的 宽度 。 
参阅 


教程 : CSS 教程 
参考 手册 : <a href="">CSS 参考 手册 </a> 


jQuery CSS 操作 - css() 方法 


实例 
设置 <p> 元 素 的 颜色 : 


$(".btn1").click(function(){ 
$("p") .css("color", "red"); 


, 


定义 和 用 法 

css() 方法 返回 或 设置 匹配 的 元 素 的 一 个 或 多 个 样式 属性 。 

返回 CSS 属性 值 

返回 第 一 个 匹配 元 素 的 CSS 属性 值 。 

注释 : 当 用 于 返回 一 个 值 时 ， 不 支持 简写 的 CSS 属性 (比如 "background" 和 
"border") 。 


$(_selector_).css(_name_) 


BB 描述 
name ”必需 。 规 定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 属性 。 上 比如 
"color" 
实例 


取得 第 一 个 段落 的 color 样式 属性 的 值 : 


PO GSS( ColLon oj 


设置 CSS 属性 


设置 所 有 匹配 元 素 的 指定 CSS 属性 。 


$(_selector_).css(_name_,_value_) 


参数 描述 
namo ”必需 。 规 定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 属性 ， 比 如 
"color". 


可 选 。 规 定 CSS 属性 的 值 。 该 参数 可 包含 任何 CSS 属性 值 ， 比 如 
"red"。 如 果 设 置 了 空 字 符 串 值 ， 则 从 元 素 中 删除 指定 属性 。 


Value 


实例 
将 所 有 段落 的 颜色 设 为 红色 : 


$("p").css("color","red"); 


使 用 函数 来 设置 CSS 属性 


设置 所 有 匹配 的 元 素 中 样式 属性 的 值 。 
此 画 数 返回 要 设置 的 属性 值 。 接 受 两 个 参数 ，index 为 元 素 在 对 象 集合 中 的 索引 位 
iB, value 是 原先 的 属性 值 。 


$(_selector_).css(_name_,_function(index, value)_) 


参数 描述 
必需 。 规 定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 
属性 ， 比 如 "color". 
规定 返回 CSS 属性 新 值 的 函数 。 index - 可 选 。 接 
function(index, value) 选择 器 的 index 位 置 oldvalue - 可 选 。 接 受 CSS 
高 性 的 当前 信 ， 


实例 1 
将 所 有 段落 的 颜色 设 为 红色 : 
$("button").click(function(){ 


$("p").css("color",function(){return "red"; }); 


3): 


实例 2 
逐渐 增加 div 的 宽度 : 


$("div").click(function() { 
$(this).css( 
"width", function(index, value) {return parseFloat(value) * 1.: 
); 
3); 





下 





设置 多 个 CSS 属性 / 值 对 
$(_selector_).css({_property:value_, _property:value_, ...}) 


把 “名 / 值 对 "对 象 设 置 为 所 有 匹配 元 素 的 样式 属性 。 
这 是 一 种 在 所 有 匹配 的 元 素 上 设置 大 量 样式 属性 的 最 佳 方式 。 


参数 描述 


必需 。 规 定 要 设置 为 样式 属性 的 “名 称 / 值 对 "对象 。 该 参数 可 
(property:value) ^ 包含 若干 对 CSS 属性 名 称 / 值 。 上 比如 {"color":"red","font- 
weight":"bold"} 


实例 


$("p").css({ 
"color":"white", 
"background-color" :"#98bf21", 
"font-family": "Arial", 
"font-size":"20px", 
"padding" ' "5px" 
}); 


jQuery CSS 操作 - height() 方法 
实例 


设置 «p» 元 素 的 高 度 : 


$(".btni").click(function(){ 
$("p").height (50); 
3); 


定义 和 用 法 

height() 方法 返回 或 设置 匹配 元 素 的 高 度 。 

返回 高 度 

返回 第 一 个 匹配 元 素 的 高 度 。 

如 果 不 为 该 方法 设置 参数 ， 则 返回 以 像素 计 的 匹配 元 素 的 高 度 。 


语法 

$( selector ).height() 

it iB SE 

设置 所 有 匹配 元 素 的 高 度 。 

语法 
$(_selector_).height(_length_) 


可 选 。 规 定 元 素 的 高 度 。 如 果 没有 规定 长 度 单位 ， 则 使 用 默认 的 px 3X 


使 用 函数 来 设置 高 度 
使 用 画 数 来 设置 所 有 匹配 元 素 的 高 度 。 
语法 
$( selector ).height( function(index,oldheight) ) 
HL TEA VR TORT SAL, index -可 


选 。 接 受 选择 器 的 index 位 置 oldvalue - Wik, 
接受 选择 器 的 当前 值 。 


参数 


function(index, oldheight) 


亲 目 试 一 试 - 实例 


获得 文档 和 窗口 元 素 的 高 度 
使 用 height() 方法 来 获得 document 和 window 元 素 的 当前 高 度 。 
使 用 em 和 96 值 来 设置 高 度 


使 用 指定 的 长 度 单位 来 设置 元 素 的 高 度 。 


jQuery CSS 操作 - offset() 方法 


实例 
获得 <p> 元 素 当前 的 偏 移 : 


$(".btni").click(function(){ 
x=$("p").offset(); 
$("#spani").text(x.left); 
$("#span2").text(x.top); 


}); 

定义 和 用 法 

offset) 方法 返回 或 设置 匹配 元 素 相对 于 文档 的 偏 移 (位置 ) 。 
返回 偏 移 坐 标 


返回 第 一 个 匹配 元 素 的 偏 移 坐 标 。 
该 方法 返回 的 对 象 包含 两 个 整 型 属性 : top 和 left， 以 像素 计 。 此 方法 只 对 可 见 元 素 
有 效 。 


语法 

$(_selector_).offset() 
设置 偏 移 坐 标 
设置 所 有 匹配 元 素 的 偏 移 坐 标 。 
语法 


$(_selector_).offset(_value_) 


描述 


"€ 必需 。 规 定 以 像素 计 的 top 和 left 坐标 。 可 能 的 值 
{top:100,left:0} ; 带 有 top 和 left 属性 的 对 象 。 


参数 
: 值 对 ， 比 如 


使 用 范 数 来 设置 偏 移 坐 标 
使 用 画 数 来 设置 所 有 匹配 元 素 的 偏 移 坐 标 。 


语法 


$( selector ).offset( function(index,oldoffset) ) 


描述 


规定 返回 被 选 元 素 新 偏 移 坐标 的 函数 。 
function(index,oldoffset) ”可 选 。 接 受 选择 器 的 index 位 置 oldvalue -可 
选 。 接 受 选择 器 的 当前 坐标 。 


参数 
index - 


亲自 试 一 试 - 实例 
使 用 对 象 来 为 对 象 设置 新 的 offset 4 


使 用 新 对 象 中 的 坐标 来 定位 元 素 。 
使 用 另 一 个 元 素 的 位 置 来 为 元 素 设 置 新 的 offset 值 


使 用 已 有 对 象 的 位 置 来 定位 元 素 。 


jQuery CSS 操作 - offsetParent() 方法 


实例 
设置 最 近 的 祖先 定位 元 素 的 背景 颜色 : 


$("button").click(function(){ 
$("p").of fsetParent().css("background-color","red"); 


3); 


定义 和 用 法 
offsetParent() 方法 返回 最 近 的 祖先 定位 元 素 。 


定位 元 素 指 的 是 元 素 的 CSS position 属性 被 设置 为 relative, absolute s fixed 的 
元 素 。 


可 以 通过 jQuery 设置 position， 或 者 通过 CSS 的 position 属性 。 


语法 


$( selector ).offsetParent() 


jQuery CSS 操作 - position() 方法 


实例 
获得 <p> 元 素 的 当前 位 置 : 


$(".btni").click(function(){ 
x=$("p").position(); 
$("#spani").text(x.left); 
$("#span2").text(x.top); 
3); 


定义 和 用 法 

position() 方法 返回 匹配 元 素 相 对 于 父 元 素 的 位 置 ( 偏 移 ) 。 
该 方法 返回 的 对 象 包含 两 个 整 型 属性 top 和 left， 以 像素 计 。 
此 方法 只 对 可 见 元 素 有 效 。 


语法 


$( selector ).position() 


jQuery CSS 操作 - scrollLeft() 方法 


实例 
设置 «div» 元 素 中 滚动 条 的 水 平 偏 移 : 


$(".btni").click(function(){ 
$("div").scrollLeft(100) ; 
3); 


定义 和 用 法 
scrollLeft() 方法 返回 或 设置 匹配 元 素 的 滚动 条 的 水 平 位 置 。 


滚动 条 的 水 平 位 置 指 的 是 从 其 左 侧 滚动 过 的 像素 数 。 当 滚动 条 位 于 最 左 侧 时 ， 位 置 


Æ 0。 

返回 水 平 滚动 条 位 置 

返回 第 一 个 匹配 元 素 的 水 平 滚动 条 位 置 。 
语法 

$( selector ).scrollLeft() 
设置 水 平 滚动 条 位 置 

设置 所 有 匹配 元 素 的 水 平 滚动 条 位 置 。 

语法 
$(_selector_).scrollLeft(_position_) 


参数 描述 
position 可 选 。 规 定 以 像素 计 的 新 位 置 。 


jQuery CSS 操作 - scrollTop() 方法 


实例 
设置 «div» 元 素 中 滚动 条 的 垂直 偏 移 : 


$(".btn1").click(function(){ 
$("div").scrollLeft(100); 
}); 


定义 和 用 法 

scrollTop() 方法 返回 或 设置 匹配 元 素 的 滚动 条 的 垂直 位 置 。 

scroll top offset 指 的 是 滚动 条 相对 于 其 顶部 的 偏 移 。 

如 果 该 方法 未 设置 参数 ， 则 返回 以 像素 计 的 相对 滚动 条 顶部 的 偏 移 。 


语法 


$(_selector_).scrollTop(_offset_) 


参数 描述 
offset 可 选 。 规 定 相 对 滚动 条 顶部 的 偏 移 ， 以 像素 计 。 
提示 和 注释 


注释 : 该 方法 对 于 可 见 元 素 和 不 可 见 元 素 均 有 效 。 
注释 : 当 用 于 获取 值 时 ， 该 方法 只 返回 第 一 个 匹配 元 素 的 scroll top offset。 
注释 : 当 用 于 设置 值 时 ， 该 方法 设置 所 有 匹配 元 素 的 scroll top offset. 


亲 目 试 一 试 - 实例 
获得 当前 的 scroll top offset 


使 用 scrollTop() 方法 获得 scroll top offset。 


jQuery CSS 操作 - width() 方法 


实例 
设置 <p> 元 素 的 宽度 : 


$(".btni").click(function(){ 
$("p") .width( 200); 
3); 


定义 和 用 法 
width() 方法 返回 或 设置 匹配 元 素 的 宽度 。 


返回 宽度 


返回 第 一 个 匹配 元 素 的 宽度 。 
如 果 不 为 该 方法 设置 参数 ， 则 返回 以 像素 计 的 匹配 元 素 的 宽度 。 


语法 


$( selector ).width() 


设置 宽度 
设置 所 有 匹配 元 素 的 宽度 。 
语法 


$( selector ).width( length ) 


可 选 。 规 定 元 素 的 宽度 。 如 果 没有 规定 长 度 单位 ， 则 使 用 默认 的 px 3X 


使 用 函数 来 设置 宽度 
使 用 画 数 来 设置 所 有 匹配 元 素 的 宽度 。 
语法 
$(_selector_) .width(_function(index,oldwidth)_) 
规定 返回 被 选 元 素 新 宽度 的 图 数 。 index -可 


选 。 接 受 选 择 器 的 index 位 置 oldvalue - Wik, 
接受 选择 器 的 当前 值 。 


参数 


function(index, oldwidth) 


亲自 试 一 试 - 实例 

获得 文档 和 窗口 元 素 的 宽度 

使 用 width() 方法 来 获得 document 和 window 元 素 的 当前 宽度 。 
使 用 em 和 96 值 来 设置 宽度 

使 用 指定 的 长 度 单位 来 设置 元 素 的 宽度 。 


jQuery 参考 手册 - Ajax 


jQuery Ajax 操作 函数 


jQuery 库 拥有 完整 的 Ajax 兼容 套件 。 其 中 的 函数 和 方法 允许 我 们 在 不 刷新 浏览 器 
的 情况 下 从 服务 器 加 载 数据 。 


ER 2C 描述 
jQuery.ajax() 执行 异步 HTTP (Ajax) 请 求 。 


NP . 3 E mh 区 NE iE A 口 、 EIN 
.ajaxComplete() Jr E dise dd ME 


当 Ajax 请 求 完 成 且 出 现 错 误 时 注册 要 调用 的 义理 程序 。 
这 是 一 个 Ajax 事件 。 

.ajaxSend() 在 Ajax 请 求 发 送 之 前 显示 一 条 消息 。 
jQuery.ajaxSetup() ”设置 将 来 的 Ajax 请 求 的 默认 值 。 

当 首 个 Ajax 请 求 完 成 开始 时 注册 要 调用 的 处 理 程序 。 这 


.ajaxError() 


ajaxotari) 是 一 个 Ajax 事件 
. 当 所 有 Ajax 请 求 完成 时 注册 要 调用 的 处 理 程 序 。 这 是 一 
ay 个 Ajax 事件 。 
.ajaxSuccess() 当 Ajax 请 求 成 功 完 成 时 显示 一 条 消息 。 
jQuery.get() 使 用 HTTP GET 请 求 从 服务 器 加 载 数据 。 


jQuery.getJSON()  f&F8 HTTP GET 请 求 从 服务 器 加 载 JSON 编码 数据 。 
使 用 HTTP GET 请 求 从 服务 器 加 载 JavaScript 文件 ， 然 


jQuery.getScript() 后 执行 该 文件 。 

load() 从 服务 器 加 载 数据 ， 然 后 把 返回 到 HTML 放 入 匹配 元 
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jQuery.param() 2m aaa USE SATER 
jQuery.post() 使 用 HTTP POST 请 求 从 服务 器 加 载 数据 。 

.serialize() 将 表单 内 容 序列 化 为 字符 串 。 


.SerializeArray() 序列 化 表单 元 素 ， 返 回 ISON 数据 结构 数据 。 


参阅 


W3School 前 端 教程 合 


教程 : Ajax 教程 


jQuery 参考 手册 - Ajax 2419 


jQuery ajax - ajax() 方法 


实例 


通过 AJAX 加 载 一 段 文本 : 
jQuery 代码 : 
$(document).ready(function()([ 
$("#b01").click(function() { 


htmlobj=$.ajax({url:"/jquery/testi.txt",async:false}); 
$("#myDiv").html(htmlobj.responseText) ; 


T); 
+); 


HTML 代码 : 


<div id="myDiv"><h2>Let AJAX change this text</h2></div> 
<button id="b01" type="button">Change Content</button> 


定义 和 用 法 
ajax() 方法 通过 HTTP 请 求 加 载 远 程 数据 。 


该 方法 是 jQuery 底层 AJAX 实现 。 简 单 易 用 的 高 层 实 现 见 $.get, $.post 等 。 
$.ajax() 返回 其 创建 的 XMLHttpRequest 对 象 。 大 多 数 情 况 下 你 无 需 直 接 操 作 该 函 
数 ， 除 非 你 需要 操作 不 常用 的 选项 ， 以 获得 更 多 的 灵活 性 。 


最 简单 的 情况 下 ，$.ajax() 可 以 不 带 任何 参数 直接 使 用 。 
注意 : 所 有 的 选项 都 可 以 通过 $.ajaxSetup() KAREAR E. 


语法 


jQuery.ajax([_settings_]) 


参数 描述 


可 选 。 用 于 配置 Ajax 请 求 的 键 值 对 集合 。 可 以 通过 $.ajaxSetup() 


settings — 设置 任何 选项 的 默认 值 ， 


参 效 

options 

类 型 : Object 

可 选 。AJAX 请 求 设 置 。 所 有 选项 都 是 可 选 的 。 
async 

类 型 : Boolean 


默认 值 : true。 默 认 设 置 下， 所 有 请 求 均 为 异步 请 求 。 如 果 需 要 发 送 同步 请 求 ， 请 将 
此 选项 设置 为 false。 


注意 ， 同 步 请 求 将 锁 住 浏览 器 ， 用 户 其 它 操作 必须 等 待 请 求 完成 才 可 以 执行 。 
beforeSend(XHR) 
类 型 : Function 
请 求 前 可 修改 XMLHttpRequest 对 象 的 函数 ， 如 添加 自 定义 HTTP. ko 

XMLHttpRequest 对 象 是 唯一 的 参数 。 

是 一 个 Ajax 事件 。 如 果 返 回 false 可 以 取消 本 次 ajax 请 求 。 
cache 
类 型 : Boolean 


默认 值 : true，dataType 为 script 和 jsonp 时 默认 为 false。 设 置 为 false 将 不 缓存 
此 页 面 。 


jQuery 1.2 新 功能 。 
complete(XHR, TS) 
类 型 : Function 
请 求 完成 后 回调 本 数 (请 求 成 功 或 失败 之 后 均 调 用 )。 
参数 : XMLHttpRequest 对 象 和 一 个 描述 请 求 类 型 的 字符 串 。 
这 是 一 个 Ajax 事件 。 
contentType 
类 型 : String 
ia "application/x-www-form-urlencoded", 发送 信息 至 服务 器 时 内 容 编 码 类 


see 况 。 如 果 你 明确 地 传递 了 一 个 content-type 给 $.ajax() BATE 
必定 给 服务 器 〈 即 使 没有 数据 要 发 送 ) 。 


context 
类 型 : Object 


这 个 对 象 用 于 设置 Ajax 相关 回调 函数 的 上 下 文 。 也 就 是 说 ， 让 回调 函数 内 this 指 
向 这 个 对 象 (如 果 不 设 定 这 个 参数 ， 那 么 this 就 指向 调用 本 次 AJAX i oo 的 
options 参数 ) 。 比 如 指定 一 个 DOM 元 素 作为 context 参数 ， 这 样 就 设 

success 回调 画 5 数 的 上 下 文 为 这 文 个 DOM TR. 


就 像 这 样 : 
$.ajax({ url: "test.html", context: document.body, success: functic 


$(this).addClass("done") ; 
th); 





data 
类 型 : String 


发 送 到 服务 器 的 数据 。 将 自动 转换 为 请 求 字 符 串 格式 。GET 请 求 中 将 附加 在 URL 
后 。 查 看 processData 选项 说 明 以 禁止 此 自动 转换 。 必 须 为 Key/Value 格式 。 如 果 
为 数组 ，jQuery 将 自动 为 不 同 值 对 应 同一 个 名 称 。 如 {foo:["bar1", "bar2"]} 转换 为 
'&foo-bar1&foo-bar2', 


dataFilter 
类 型 : Function 


给 Ajax 返回 的 原始 数据 的 进行 预 处 理 的 函数 。 提 供 data 和 type 两 个 参数 data 
是 Ajax 返回 的 原始 数据 ，type 是 调用 jQuery.ajax 时 提供 的 dataType BR, HR 
返回 的 值 业 由 jQuery 进一步 处 理 。 


dataType 
类 型 : String 


预期 服务 器 返回 的 数据 类 型 。 如 果 不 指定 ，jQuery 将 自动 根据 HTTP @ MIME 信 
息 来 智能 判断 ， 比 如 XML MIME 类 型 就 被 识别 为 XML。 在 1.4 中 ，JSON 就 会 生 
成 一 个 JavaScript 对 象 ， 而 script 则 会 执行 这 个 脚本 。 随 后 服务 器 端 返回 的 数据 会 
根据 这 个 值 解 析 后 ， 传 递 给 回调 范 数 。 可 用 值 : 


"xml": 返回 XML 文档 ， 可 用 jQuery 4438, 

"html": 返回 纯 文本 HTML 信息 ; 包含 的 script 标签 会 在 插入 dom 时 执行 。 

e "script": 返回 纯 文本 JavaScript 代码 。 不 会 自动 缓存 结果 。 除 非 设置 了 
"cache" SX, 注意 : 在 远程 请 求 时 (不 在 同一 个 域 下 )， 所 有 POST if RABY 
转 为 GET 请 求 。 (因为 将 使 用 DOM 的 script 标 签 来 加 载 ) 

e "json": 返回 JSON 数据 。 

e "jsonp": JSONP 格式 。 使 用 JSONP 形式 调用 画 数 时 ， 如 "myurl?callback=?" 
jQuery 将 自动 替换 ? 为 正确 的 函数 名 ， 以 执行 回调 函数 。 

e "text": 返回 纯 文 本 字符 串 


error 

类 型 : Function 

默认 值 : 自动 判断 (xml 或 html)。 请 求 失 败 时 调用 此 函数 。 

有 以 下 三 个 参数 : XMLHttpRequest 对 象 、 错 误 信 息 、 (Ait) 捕获 的 异常 对 象 。 


如 果 发 生 了 错误 ， 错 误 信息 (第 二 个 参数 ) 除了 得 到 null 之 外 ， 还 可 能 是 
"timeout", "error", "notmodified" 和 "parsererror"。 


这 是 一 个 Ajax 事件 。 
global 
类 型 : Boolean 


是 否 触 发 全 局 AJAX 事件 。 黑 认 值 : true。 设 置 为 false 将 不 会 触发 全 局 AJAX 事 
件 ， 如 ajaxStart 或 ajaxStop 可 用 于 控制 不 同 的 Ajax 事件 。 


ifModified 
类 型 : Boolean 


仅 在 服务 器 数据 改变 时 获取 新 数据 。 黑 认 值 : false。 使 用 HTTP € Last-Modified 头 
f£ jQuery 1.4 中 ， 它 也 会 检查 服务 器 指定 的 'etag' 来 确定 数据 没有 被 修 
Ü 


jsonp 
类 型 : String 


在 一 个 jsonp 请 求 中 重 写 回 调 范 数 的 名 字 。 这 个 值 用 来 蔡 代 在 "callback=?" 这 种 
GET 或 POST 请 求 中 URL 参数 里 的 "callback" 部 分 ， 比 如 {jsonp:'onJsonPLoad'} 
RF RUF "onJsonPLoad=?" 传 给 服务 器 。 


jsonpCallback 
类 型 : String 


为 jsonp 请 求 指定 一 个 回调 函数 名 。 ee El x5 ^E PAUSE 
数 名 。 这 主要 用 来 让 jQuery 生成 度 独特 的 函数 名 ， 这 样 管理 请 求 更 容易 ， 也 能 
便 地 提供 回调 函数 和 错误 处 理 。 eae ee GET ; 青 求 的 时 候 ， 指 
4E 3X P [E 3 ER CA 


password 

类 型 : String 

用 于 响应 HTTP 访问 认证 请 求 的 密码 
processData 


类 型 : Boolean 


默认 情况 下 ， 通 过 data 选 项 传递 进来 的 数据 ， 如 果 是 一 个 对 象 (技术 

上 讲 只 要 不 是 字符 串 )， 都 会 处 理 转化 成 一 个 查询 字符 串 ， 以 配合 默认 内 容 类 型 
applcatonlx www-form-urlencoded"。 如 果 要 发 送 DOM 树 信息 或 其 它 不 希望 转换 
的 信息 ， ibi E% false, 


scriptCharset 
类 型 : String 


只 有 当 请 求 时 se ALA jsonp" s "script", 3£B type 是 "GET" RIT ssl 
修改 chaise: 通常 只 在 本 地 和 远程 的 内 容 编码 不 同时 使 用 。 


success 
类 型 : Function 
请 求 成 功 后 的 回调 函数 。 
参数 : 由 服务 器 返回 ， 并 根据 dataType 参数 进行 处 理 后 的 数据 ; 描述 状态 的 字符 


这 是 一 个 Ajax 事件 。 
traditional 
类 型 : Boolean 


如 果 你 想 要 用 传统 的 方式 来 序列 化 数据 ， 那 么 就 设置 为 true。 请 参考 工具 分 类 下 面 
的 jQuery.param 方法 。 


timeout 

类 型 : Number 

设置 请 求 超时 时 间 (Sh) 。 此 设置 将 覆盖 全 局 设置 。 
type 

类 型 : String 


默认 值 : "GET")。 请 求 方 式 ("POST" 或 "GET")， 默 认为 "GET"。 注 意 : HE 
HTTP 请 求 方法 ， 如 PUT 和 DELETE 也 可 以 使 用 ， 但 信 部 分 浏览 器 支持 。 


url 

类 型 : String 

默认 值 : 当前 页 地 址 。 发 送 请 求 的 地 址 。 
username 

类 型 : String 

用 于 响应 HTTP 访问 认证 请 求 的 用 户 名 。 


Xhr 

类 型 : Function 

需要 返回 一 个 XMLHttpRequest 对 象 。 默 认 在 IE 下 是 ActiveXObject 而 其 他 情况 
下 是 XMLHttpRequest 。 用 于 重 写 或 者 提供 一 个 增强 的 XMLHttpRequest 对 象 。 这 
个 参数 在 jQuery 1.3 以 前 不 可 用 。 


[2] 73 Ej 2X 


MSR S2 4438 $.ajax() 得 到 的 数据 ， 则 需要 使 用 回调 函数 : beforeSend, error, 
dataFilter、 success、complete。 


beforeSend 


在 发 送 请 求 之 前 调用 ， 并 且 传 入 一 个 XMLHttpRequest 作为 参数 。 


error 


在 请 求 出 错时 调用 。 传 入 XMLHttpRequest 对 象 ， 描 述 错误 类 型 的 字符 串 以 及 一 个 
异常 对 象 (如 果 有 的 话 ) 


dataFilter 


在 请 求 成 功 之 后 调用 。 传 入 返回 的 数据 以 及 "dataType" 参数 的 值 。 并 且 必 须 返 回 新 
的 数据 (可 能 是 处 理 过 的 ) 传递 给 success Eha K 


success 


当 请 求 之 后 调用 。 传 人 返回 后 的 数据 ， 以 及 包含 成 功 代 码 的 字符 串 。 


complete 


当 请 求 完成 之 后 调用 这 个 画 数 ， 无 论 成 功 或 失败 。 传 入 XMLHttpRequest 对 象 ， 以 
及 一 个 包含 成 功 或 错误 代码 的 字符 串 。 


效 据 类 型 


$.ajax() 画 数 依赖 服务 器 提供 的 信息 来 处 理 返 回 的 数据 。 如 果 服 务 器 报告 说 返回 的 
数据 是 XML， 那 么 返回 的 结果 就 可 以 用 普通 的 XML 方法 或 者 jQuery 的 选择 器 来 
通 历 。 如 果 见 得 到 其 他 类 型 ， 比 如 HTML， 则 数据 就 以 文本 形式 来 对 待 。 


通过 dataType 选项 还 可 以 指定 其 他 不 同 数据 处 理 方式 。 除 了 单纯 的 XML， 还 可 以 
指定 html、json、jsonp、script 或 者 text。 


Hh, text 和 xml 类 型 返回 的 数据 不 会 经 过 处 理 。 数 据 仅仅 简单 的 将 
XMLHttpRequest 的 responseText 或 responseHTML 属性 传递 给 success E4 Eg 


o 


注意 : 我 们 必须 确保 网 页 服务 器 报告 的 MIME 类 型 与 我 们 选择 的 dataType 所 匹 
配 。 比 如 说 ，XML 的 话 ， 服 务 器 端 就 必须 声明 text/xml 或 者 application/xml 来 获得 
一 致 的 结果 。 


如 果 指 定 为 html 3E Z8, HANA JavaScript 都 会 在 HTML 作为 一 个 字符 串 返 回 
之 前 执行 。 类 似 地 ， 指 定 script 类 型 的 话 ， 也 会 先 执行 服务 器 端 生 成 JavaScript, 
然后 再 把 脚本 作为 一 个 文本 数据 返回 。 


如 果 指 定 为 json 类 型 ， 则 会 把 获取 到 的 数据 作为 一 个 JavaScript 对 象 来 解析 ， 并 
且 把 构建 好 的 对 象 作为 结果 返回 。 为 了 实现 这 个 目的 ， 它 首先 尝试 使 用 
JSON.parse()。 如 果 浏 览 器 不 支持 ， 则 使 用 一 个 函数 来 构建 。 


JSON 数据 是 一 种 能 很 方便 通过 JavaScript 解析 的 结构 化 数据 。 如 果 获 取 的 数据 文 
件 存放 在 远程 服务 器 上 (域名 不 同 ， 也 就 是 跨 域 获取 数据 ) ， 则 需要 使 用 jsonp X 
型 。 使 用 这 种 类 型 的 话 ， 会 创建 一 个 查询 字符 串 参 数 callback=? ， 这 个 参数 会 加 在 
请 求 的 URL 后 面 。 服 务 器 端 应 当 在 JSON 数据 前 加 上 回调 画 数 名 ， 以 便 完成 一 个 
有 效 的 JSONP 请 求 。 如 果 要 指定 回调 范 数 的 参数 名 来 取代 默认 的 callback， 可 以 
通过 设置 $.ajax() 的 jsonp 参数 。 


注意 : JSONP 是 JSON 格式 的 扩展 。 它 要 求 一 些 服务 器 端的 代码 来 检测 并 义理 查 
询 字 符 串 参数 。 


如 果 指 定 了 script 或 者 jsonp 类 型 ， 那 么 当 从 服务 器 接收 到 数据 时 ， 实 际 上 是 用 了 
«script» 标签 而 不 是 XMLHttpRequest 对 象 。 这 种 情况 下 ，$.ajax() 不 再 返回 一 个 
XMLHttpRequest 对 象 ， 并 且 也 不 会 传递 事件 处 理 函 数 ， 上 比如 beforeSend. 


发 送 数 据 到 服务 器 


默认 情况 下 ，Ajax 请 求 使 用 GET 方法 。 如 果 要 使 用 POST 方法 ， 可 以 设 定 type 
参数 值 。 这 个 选项 也 会 影响 data 选项 中 的 内 容 如 何 发 送 到 服务 器 。 


data 选项 既 可 以 包含 一 个 查询 字符 串 ， 比 如 key1=value1&key2=value2 ， 也 可 以 

是 一 个 映射 ， 比 如 {key1: 'value1', key2: 'value2 。 如 果 使 用 了 后 者 的 形式 ， 则 数 

据 再 发 送 器 会 被 转换 成 查询 字符 串 。 这 个 义理 过 程 也 可 以 通过 设置 processData 选 
项 为 false 来 回避 。 如 果 我 们 希望 发 送 一 个 XML 对 象 给 服务 器 时 ， 这 种 处 理 可 能 3 

不 合适 。 并 且 在 这 种 情况 下 ， 我 们 也 应 当 改变 contentType 选项 的 值 ， 用 其 他 合适 
的 MIME 类 型 来 取代 默认 的 application/x-www-form-urlencoded 。 


高 级 选项 


global 选项 用 于 阻止 响应 注册 的 回调 函数 ， 上 比如 .ajaxSend， 或 者 ajaxError， 以 及 
类 似 的 方法 。 这 在 有 些 时 候 很 有 用 ， 上 比如 发 送 的 请 求 非常 频繁 且 简 短 的 时 候 ， 就 可 
以 在 ajaxSend 里 禁用 这 个 。 


如 果 服 务 器 需要 HTTP 认证 ， 可 以 使 用 用 户 名 和 密码 可 以 通过 username 和 
password 选项 来 设置 。 


Ajax 请 求 是 限时 的 ， 所 以 错误 警告 被 捕获 并 义理 后 ， 可 以 用 来 提升 用 户 体验 。 请 求 
超时 这 个 参数 通常 就 保留 其 默认 值 ， 要 不 就 通过 jQuery.ajaxSetup 来 全 局 设 定 ， 很 
少 为 特定 的 请 求 重 新 设置 timeout 选项 。 


默认 情况 下 ， 请 求 总 会 被 发 出 去 ， 但 浏览 器 有 可 能 从 它 的 缓存 中 调 取 数据 。 要 禁止 
使 用 缓存 的 结果 ， 可 以 设置 cache 参数 为 false。 如 果 希 望 判 断 数 据 自 从 上 次 请 求 
后 没有 更 改过 就 报告 出 错 的 话 ， 可 以 设置 ifModified 为 true, 


scriptCharset 人 允许 给 «script» 标签 的 请 求 设 定 一 个 特定 的 字符 集 ， 用 于 script 或 者 
jsonp 类 似 的 数据 。 当 脚本 和 页 面 字符 集 不 同时 ， 这 特别 好 用 。 


Ajax 的 第 一 个 字母 是 asynchronous 的 开头 字母 ， 这 意味 着 所 有 的 操作 都 是 并 行 
的 ， 完 成 的 顺序 没有 前 后 关系 。$.ajax() 的 async 参数 总 是 设置 成 true， 这 标志 着 
在 请 求 开 始 后 ， 其 他 代码 依然 能 够 执行 。 强 烈 不 建议 把 这 个 选项 设置 成 false， 这 意 
味 着 所 有 的 请 求 都 不 再 是 异步 的 了 ， 这 也 会 导致 浏览 器 被 锁 死 。 


$.ajax 画 数 返回 它 创建 的 XMLHttpRequest 对 象 。 通 常 jQuery 只 在 内 部 处 理 并 创 

建 这 个 对 象 ， 但 用 户 也 可 以 通过 xhr 选项 来 传递 一 个 自己 创建 的 xhr 对 象 。 返 回 的 
对 象 通 常 已 经 被 去 奔 了 ， 但 依然 提供 一 个 底层 接口 来 观察 和 操控 请 求 。 比 如 说 ， 调 
用 对 象 上 的 .abort() 可 以 在 请 求 完成 前 挂 起 请 求 。 


jQuery ajax - ajaxComplete() 方法 


实例 
当 AJAX 请 求 正 在 进行 时 显示 “正在 加 载 "的 指示 : 
$("#txt").ajaxStart(function(){ 
$("Zwait").css("display","block"); 
S HEEL ER AC np EL GO 


$("Zwait").css("display","none"); 


T) 


定义 和 用 法 

ajaxComplete() 方法 在 AJAX 请 求 完成 时 执行 画 数 。 它 是 一 个 Ajax 事件 。 

与 ajaxSuccess() 不 同 ， 通 过 ajaxComplete() 方法 规定 的 函数 会 在 请 求 完 成 时 运 
行 ， 即 使 请 求 并 未 成 功 。 


语法 


.jQueryajaxComplete( function(event,xhr,options) ) 


参数 描述 


必需 。 规 定 当 请 求 完成 时 运行 的 函数 。 额 外 的 参 
数 : event- ZZ event 对 象 xhr- 包含 
XMLHttpRequest 对 象 options - 包含 AJAX 请 求 
中 使 用 的 选项 


function(event,xhr,options) 


详细 说 明 
XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 画 数 。 


jQuery ajax - ajaxError() 方法 


实例 
M AJAX 请 求 失败 时 ， 触 发 提示 框 : 


$("div").ajaxError(function(){ 
alert("An error occurred!"); 


3): 


定义 和 用 法 
ajaxError() 方法 在 AJAX RARER THR. Cet Ajax 事件 。 
语法 


.ajaxError( function(event,xhr,options,exc) ) 


参数 描述 


必需 。 规 定 当 请 求 失败 时 运行 的 函数 。 额 外 
的 参数 : event- 包含 event 对 象 xhr - 包含 

function(event,xhr,options,exc) XMLHttpRequest xt options - 包含 AJAX 
请 求 中 使 用 的 选项 exc - 包含 JavaScript 
exception 


详细 说 明 


XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 函数 。 捕 捉 到 的 错误 可 作为 最 后 
一 个 参数 传递 : 


function (event, XMLHttpRequest, ajaxOptions, thrownError) { 
// thrownError 只 有 当 异 常 发 生 时 才 会 被 传递 this; 
} 


亲 目 试 一 试 - 实例 


使 用 xhr 和 options 参数 


如 何 使 用 options 参数 来 获得 更 有 用 的 错误 消息 。 


jQuery ajax - ajaxSend() 方法 


实例 
当 AJAX 请 求 即 将 发 送 时 ， 改 变 div 元 素 的 内 容 : 


$("div").ajaxSend(function(e, xhr, opt) { 
$(this).html("Requesting " + opt.url); 
3); 


定义 和 用 法 
ajaxSend() 方法 在 AJAX 请 求 开始 时 执行 函数 。 它 是 一 个 Ajax 事件 。 
语法 

.ajaxSend([_function(event, xhr,options)_]) 


参数 描述 


必需 。 规 定 当 请 求 开 始 时 执行 男 数 。 额 外 的 参 
数 : event- 包含 event 对 象 xhr - 包含 
XMLHttpRequest 对 象 options - 包含 AJAX 请 求 
中 使 用 的 选项 


function(event,xhr,options) 


详细 说 明 


XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 本 数 。 


jQuery ajax - ajaxSetup() 方法 


实例 
为 所 有 AJAX 请 求 设 置 默认 URL 和 success HR : 


$("button").click(function() { 
$.ajaxSetup({url:"demo_ajax_load.txt", success: function(result) { 
$("div").html( result );}}); 
$.ajax(); 
3): 


B|m———————————————————————————————ÉÉ— !ÀÀ 7 6] 
定义 和 用 法 
jQuery.ajaxSetup() 方法 设置 全 局 AJAX 默认 选项 。 


语法 


jQuery.ajaxSetup(_name:value_, _name:value_, ...) 


示例 


设置 AJAX 请 求 默认 地 址 为 "xmlhttp/"， 禁 止 触发 全 局 AJAX 事件 ， 用 POST RE 
默认 GET 方法 。 其 后 的 AJAX 请 求 不 再 设置 任何 选项 参数 : 


$.ajaxSetup({ 
url: "/xmlhttp/", 
global: false, 
type: "POST" 

3); 

$.ajax(( data: myData }); 


参数 描述 
name:value 可 选 。 使 用 名 称 / 值 对 来 规定 AJAX 请 求 的 设置 。 


注释 : 参数 见 '$.ajax' 说 明 。 


jQuery ajax - ajaxStart() 方法 


实例 
M AJAX 请 求 开始 时 ， 显 示 “ 加 载 中 "的 指示 : 


$("div").ajaxStart(function(){ 
$(this).html( "<img src='demo_wait.gif' />"); 
3); 


= : 

ajaxStart() 方法 在 AJAX 请 求 发 送 前 执行 画 数 。 它 是 一 个 Ajax 事件 。 

详细 说 明 

无 论 在 何 时 发 送 Ajax ik, jQuery 都 会 检查 是 否 存在 其 他 Ajax 请 求 。 如 果 不 存 


ft, m] jQuery 会 触发 该 ajaxStart 事件 。 在 此 时 ， 由 .ajaxStart() 方法 注册 的 任何 
函数 都 会 被 执行 。 


语法 


.ajaxStart( function() ) 


参数 描述 
function() 规定 当 AJAX 请 求 开 始 时 运行 的 函数 。 
示例 


AJAX 请 求 开始 时 显示 信息 : 


$("#loading").ajaxStart(function(){ 
$(this).show(); 
3); 


jQuery ajax - ajaxStop() 方法 


实例 
当 所 有 AJAX 请 求 完成 时 ， 触 发 一 个 提示 框 : 


$("div").ajaxStop(function(){ 
alert(" 所 有 AJAX 请 求 已 完成 ") ; 

3); 

定义 和 用 法 
ajaxStop() 方法 在 AJAX ja RAE RN TTR, EE Ajax 事件 。 

详细 说 明 
Tit Ajax 请 求 在 何 时 完成 jQuery 都 会 检查 是 否 存 在 其 他 Ajax 请 求 。 如 果 不 存 
ft, m] jQuery 会 触发 该 ajaxStop 事件 。 在 此 时 ， 由 .ajaxStop() 方法 注册 的 任何 画 
数 都 会 被 执行 。 


语法 


.ajaxStop(_function()_) 


function() 规定 当 AJAX i REAM At ITN. 
示例 


AJAX 请 求 结 束 后 隐藏 信息 : 


$("41oading").ajaxStop(function()([ 
$(this).hide(); 
3); 


jQuery ajax - ajaxSuccess() 方法 


实例 
M AJAX 请 求 成 功 完成 时 ， 触 发 提示 框 : 


$("div").ajaxSuccess(function(){ 
alert("AJAX 请 求 已 成 功 完 成 " ) ; 
3): 


定义 和 用 法 

ajaxSuccess() 方法 在 AJAX i& ka TR. Ces Ajax 事件 。 
详细 说 明 

XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 画 数 。 

Tit Ajax 请 求 在 何 时 成 功 完 成 jQuery 都 会 触发 该 ajaxSuccess 事件 。 在 此 时 ， 
由 .ajaxSuccess() 方法 注册 的 任何 函数 都 会 被 执行 。 


语法 


.ajaxSuccess(_function(event, xhr,options)_) 


参数 描述 


A MESA RMA eT, MANS 
数 : event- B£ event tR xhr - 包含 
XMLHttpRequest xt & options - 包含 AJAX 请 求 
中 使 用 的 选项 


function(event,xhr, options) 


示例 
AJAX 请 求 成 功 后 显示 消息 : 
$("#msg").ajaxSuccess(function(evt, request, settings) { 


$(this) .append("<p>i# KAKI ! «/p»" ) ; 
3); 


W3School 前 端 教 程 合 
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jQuery ajax - get() 方法 


实例 
使 用 AJAX 的 GET 请 求 来 改变 div 元 素 的 文本 : 


$("button").click(function() { 
$.get("demo ajax load.txt", function(result) { 
$("div").html(result); 


2r 
3); 
定义 和 用 法 
get() 方法 通过 远程 HTTP GET 请 求 载 入 信息 。 


这 是 一 个 简单 的 GET 请 求 功能 以 取代 复杂 $.ajax 。 请 求 成 功 时 可 调用 回调 画 数 。 
如 果 需 要 在 出 错时 执行 本 数 ， 请 使 用 $.ajax。 


语法 





$( selector ).get( url , data , success(response, status, xhr)_,_daté 





参数 描述 
url 必需 。 规 定 将 请 求 发 送 的 哪个 URL. 
data 可 选 。 规 定 连同 请 求 发 送 到 服务 器 的 数据 。 


可 选 。 规 定 当 请 求 成 功 时 运行 的 函数 。 额 外 的 
参数 : response - 包含 来 自 请 求 的 结果 数据 
status - 包含 请 求 的 状态 xhr - 包含 
XMLHttpRequest 对 象 


可 选 。 规 定 预计 的 服务 器 响应 的 数据 类 型 。 默 
dataType 认 地 ，jQuery 将 智能 判断 。 可 能 的 类 型 : 
"xml" "html" "text" "script" "json" "jsonp" 


success(response, status, xhr) 


详细 说 明 
ARAE GSN Ajax BR, SH: 


$.ajax({ 
ur ee eke 
data: _data_, 
success: success , 
dataType:  dataType 
3): 


根据 响应 的 不 同 的 MIME 类 型 ， 传 递 给 success GQ EX 2 BA] 3x [a] CR C3 783 PT I [8], 
这 些 数据 可 以 是 XML root 元 素 、 文 本 字符 串 、JavaScript 文件 或 者 JSON 对 象 。 
也 可 向 success 回调 图 数 传递 响应 的 文本 状态 。 


对 于 jQuery 1.4， 也 可 以 向 success Eha KZH% XMLHttpRequest 对 象 。 
示例 
请 求 test.php 网 页 ， 忽 略 返回 值 : 


$.get("test.php"); 


多 示例 
例子 1 


$.get("test.php", { name: "John", time: "2pm" } ); 


例子 2 


显示 test.php 返回 值 (HTML 或 XML， 取决 于 返回 值 ) : 


$.get("test.php", function(data) { 
alert("Data Loaded: " + data); 
3); 


例子 3 
显示 test.cgi 返回 值 (HTML 或 XML， 取决 于 返回 值 )， 添 加 一 组 请 求 参 数 : 


$.get("test.cgi", { name: "John", time: "2pm" }, 
function(data) { 
alert("Data Loaded: " + data); 


3): 


jQuery ajax - getJSON() 方法 


实例 
使 用 AJAX 请 求 来 获得 JSON 数据 ， 并 输出 结果 : 


$("button").click(function() { 
$.getJSON("demo ajax json.js",function(result)( 
$.each(result, function(i, field){ 
$("div").append(field + " "); 


}); 

T); 
3): 
定义 和 用 法 


通过 HTTP GET if KAA JSON 数据 。 


在 jQuery 1.2 中 ， 您 可 以 通过 使 用 JSONP 形式 的 回调 函数 来 加 载 其 他 网 域 的 
JSON 数据 ， 如 "myurl?callback=?", jQuery 将 自动 替换 ? 为 正确 的 函数 名 ， 以 执 
TEAR. 注意 : 此 行 以 后 的 代码 将 在 这 个 回调 范 数 执行 前 执行 。 


语法 





jQuery.getJSON(_url_,_data_,_success(data, status, xhr)_) 


url 必需 。 规 定 将 请 求 发 送 的 哪个 URL. 
data 可 选 。 规 定 连 同 请 求 发 送 到 服务 器 的 数据 。 


可 选 。 规 定 当 请 求 成 功 时 运行 的 画 数 。 人 额外 的 参 
success(data,status,xhr) %: response - 包含 来 自 请 求 的 结果 数据 status - 
包含 请 求 的 状态 xnr - ZS XMLHttpRequest 对 象 
详细 说 明 


ARAE AEH Ajax HR, SF: 


$.ajax({ 
úri: url, 
data: _data_, 
success: _Callback_, 
dataType: json 

3); 


发 送 到 服务 器 的 数据 可 作为 查询 字符 串 附 加 到 URL 之 后 。 如 果 data 参数 的 值 是 对 
R (映射 )， 那 么 在 附加 到 URL 之 前 将 转换 为 字符 串 ， 并 进行 URL 编码 。 

传递 给 callback 的 返回 数据 ， 可 以 是 JavaScript 对 象 ， 或 以 JSON 结构 定义 的 数 
组 ， 并 使 用 $.parseJSON() 方法 进行 解析 。 

示例 

从 test.js RA JSON 数据 并 显示 JSON 数据 中 一 个 name 字段 数据 : 


$.getJSON("test.js", function(json){ 
alert("JSON Data: " + json.users[3].name); 


3); 


更 多 示例 


例子 1 
M Flickr JSONP API RA 4 张 最 新 的 关于 猫 的 图 片 : 
HTML 代码 : 


«div id="images"></div> 


jQuery 代码 : 


$.getJSON("http://api.flickr.com/services/feeds/photos public.gne? 
tags-cat&tagmode-any&format-json&jsoncallback-?", function(data) { 
$.each(data.items, function(i, item) { 
$("<img/>").attr("src", item.media.m).appendTo("#images"); 
if ( i == 3 ) return false; 


3); 








M test.js RA JSON 数据 ， 附 加 参数 ， 显 示 JSON 数据 中 一 个 name 字段 数据 : 


$.getJSON("test.js", { name: "John", time: "2pm" }, function( json); 
alert("JSON Data: " + json.users[3].name); 


3); 
«| = — EE 








jQuery ajax - getScript() 方法 


实例 
通过 AJAX 请 求 来 获得 并 运行 一 个 JavaScript 文件 : 


$("button").click(function() { 
$.getScript("demo ajax script.js"); 


3); 


ch 、 : 
getScript() 方法 通过 HTTP GET 请 求 载 人 并 执行 JavaScript 文件 。 
语法 


jQuery.getScript(_url_,_success(response, status)_) 


参数 T3 
url 将 要 请 求 的 URL 字符 串 。 


可 选 。 规 定 请 求 成 功 后 执行 的 回调 函数 。 人 额外 的 参 
数 : response - 包含 来 自 请 求 的 结果 数据 status - 
包含 请 求 的 状态 ("success", "notmodified", 
"error", "timeout" 5% "parsererror") 


iE 


success(response, status) 


详细 说 明 
该 贺 数 是 简写 的 Ajax HM, SF: 


$.ajax({ 
Burdeos 
dataType: "script", 
success: success. 


3): 


ix EB PAISES ERA KAREN JavaScript 文件 。 这 通常 不 怎么 有 用 ， 因 为 那 时 脚本 
已 经 运行 了 。 


载 人 的 脚本 在 全 局 环境 中 执行 ， 因 此 能 够 引用 其 他 变量 ， 并 使 用 jQuery HR, 
比如 加 载 一 个 testjs 文件 ， 里 边 包 含 下 面 这 段 代 码 : 


$(".result").html("«p»Lorem ipsum dolor sit amet.</p>"); 
通过 引用 该 文件 名 ， 束 可 以 载 人 并 运行 这 段 脚本 : 


$.getScript("ajax/test.js", function() { 
alert("Load was performed."); 


3); 


注释 : jQuery 1.2 版 本 之 前 ，getScript 只 能 调用 同 域 JS 文件 。 1.2 中 ， 您 可 以 跨 
域 调用 JavaScript 文件 。 注 意 : Safari 2 或 更 早 的 版 本 不 能 在 全 局 作用 域 中 同步 执 
行 脚 本 。 如 果 通 过 getScript MAMA, MATT HR, 


更 多 实例 


例子 1 
加 载 并 执行 test.js : 


$.getScript("test.js"); 


例子 2 
加 载 并 执行 test.js ， 成 功 后 显示 信息 : 


$.getScript("test.js", function(){ 
alert("Script loaded and executed."); 


3); 
例子 3 
RA jQuery 官方 颜色 动画 插件 成 功 后 绑 定 颜色 变化 动画 : 
HTML 代码 : 


«button id="go">Run</button> 
«div class="block"></div> 


jQuery 代码 : 


jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/j« 
function(){ 
$("#go").click(function(){ 
$(".block").animate( { backgroundColor: 'pink' }, 1000) 
.animate( { backgroundColor: 'blue' }, 1000); 
3); 
3): 


‘| 








jQuery ajax - load() 方法 
实例 


使 用 AJAX 请 求 来 改变 div 元 素 的 文本 : 


$("button").click(function(){ 
$("div").load('demo ajax load.txt'); 
3); 


您 可 以 在 页 面 底部 找到 更 多 TIY 实例 


定义 和 用 法 
load() 方法 通过 AJAX 请 求 从 服务 器 加 载 数据 ， 并 把 返回 的 数据 放置 到 指定 的 元 素 


注释 : 还 存在 一 个 名 为 load 的 jQuery 事件 方法 。 调 用 哪个 ， 取 决 于 参数 。 
语法 


load( url , data , function(response,status,xhr) ) 





url 规定 要 将 请 求 发 送 到 哪个 URL. 
data 可 选 。 规 定 连 同 请 求 发 送 到 服务 器 的 数据 。 


Ait, MEM ARAN BTN, RAY 
参数 : response - 包含 来 自 请 求 的 结果 数据 
status - 包含 请 求 的 状态 ("success", 
"notmodified", "error", "timeout" 或 
"parsererror") xhr- @&& XMLHttpRequest 对 
象 


function(response, status, xhr) 


详细 说 明 


该 方法 是 最 简单 的 从 服务 器 获取 数据 的 方法 。 它 几乎 与 $.get(url, data, success) 等 
价 ， 不 同 的 是 它 不 是 全 局 男 数 ， 并 且 它 拥有 隐 式 的 回调 本 数 。 当 侦 测 到 成 功 的 响应 
时 (上 比如， 当 textStatus 为 "success" 或 "notmodified" 时 ) , .load() 将 匹配 元 素 


的 HTML 内 容 设置 为 返回 的 数据 。 这 意味 着 该 方法 的 大 多 数 使 用 会 非常 简单 : 


$("#result").load("ajax/test.html"); 


如 果 提 供 回 调 函 数 ， 则 会 在 执行 post-processing 之 后 执行 该 西数 : 


$("#result").load("ajax/test.html", function() { 
alert("Load was performed."); 


I2» 


上 面 的 两 个 例子 中 ， 如 果 当 前 文档 不 包含 "result" ID， 则 不 会 执行 .load() 方法 。 
如 果 提 供 的 数据 是 对 象 ， 则 使 用 POST 方法 ; 否则 使 用 GET 方法 。 


MR n AA E 


load() 方法 ， 与 $.get() 不 同 ， 人 允许 我 们 规定 要 插入 的 远程 文档 的 某 个 部 分 。 这 一 
点 是 通过 urb 参数 的 特殊 语法 实现 的 。 如 果 该 字符 串 中 包含 一 个 或 多 个 空格 ， 紧 接 
第 一 个 空格 的 字符 串 则 是 决定 所 加 载 内 容 的 jQuery 选择 器 。 


我 们 可 以 修改 上 面 的 例子 ， 这 样 就 可 以 使 用 所 获得 文档 的 某 部 分 : 


$("#result").load("ajax/test.html #container"); 


如 果 执 行 该 方法 ， 则 会 取 回 ajax/test.html 的 内 容 ， 不 过 然后 ，jQuery 会 解析 被 返 
回 的 文档 ， 来 查找 带 有 容器 ID 的 元 素 。 该 元 素 ， 连 同 其 内 容 ， 会 被 插入 带 有 结果 
ID 的 元 素 中 ， 所 取 回 文档 的 其 余部 分 会 被 丢弃 。 


jQuery 使 用 浏览 器 的 .innerHTML 属性 来 解析 被 取 回 的 文档 ， 并 把 它 插入 当前 文 
档 。 在 此 过 程 中 ， 浏 览 器 常会 从 文档 中 过 滤 掉 元 素 ， 上 比如 «html, «title» 或 
<head> 元 素 。 结 果 是 ， 由 .load() 取 回 的 元 素 可 能 与 由 浏览 器 直接 取 回 的 文档 不 完 
全 相同 。 


注释 : 由 于 浏览 器 安全 方面 的 限制 ， 大 多 数 "Ajax" 请 求 遵守 同 源 策略 ; 请 求 无 法 从 
不 同 的 域 、 子 域 或 协议 成 功 地 取 回 数据 。 


更 多 实例 


例子 1 
加 载 feeds.html 文件 内 容 : 


$("#feeds").load("feeds.html"); 


例子 2 
与 上 面 的 实例 类 似 ， 但 是 以 POST 形式 发 送 附加 参数 并 在 成 功 时 显示 信息 


$("#feeds").load("feeds.php", {limit: 25}, function(){ 
alert("The last 25 entries in the feed have been loaded"); 


3); 


例子 3 


加 载 文 章 侧 边 栏 导航 部 个 无 序列 表 : 
HTML 代码 : 


<b>jQuery Links:</b> 
<ul id="links"></ul> 


jQuery 代码 : 


$("4links").load("/Main Page #p-Getting-Started li"); 


更 多 TIY 实例 
生成 AJAX 请 求 ， 并 通过 该 请 求 发 送 数据 


i ads data 参数 通过 AJAX 请 求 来 发 送 数据 。 (本 例 在 AJAX 教程 中 解释 


生成 AJAX 请 求 ， 并 使 用 回调 函数 
如 何 使 用 function 参数 处 理 来 自 AJAX 请 求 的 数据 结果 。 
生成 带 有 错误 的 AJAX 请 求 


如 何 使 用 function 参数 来 处 理 AJAX 请 求 中 的 错误 (使 用 XMLHttpRequest 参 
WO. 


jQuery ajax - param() 方法 


实例 
序列 化 一 个 key/value 对 象 : 


var params = { width:1900, height:1200 }; 
var str = jQuery.param(params); 
$("#results").text(str); 


结果 : 


width=1680&height=1050 


TIY 实例 
输出 序列 化 对 象 的 结果 : 


$("button").click(function(){ 
$("div").text($.param(personObj)); 
3); 


定义 和 用 法 
param() 方法 创建 数组 或 对 象 的 序列 化 表示 。 
该 序列 化 值 可 在 进行 AJAX 请 求 时 在 URL 查询 字符 串 中 使 用 。 


语法 


jQuery.param(_object_,_traditional_) 


参数 描述 
object 要 进行 序列 化 的 数组 或 对 象 。 
traditional ”规定 是 否 使 用 传统 的 方式 浅 层 进行 序列 化 (参数 序列 化 ) 。 


详细 说 明 


param() 方法 用 于 在 内 部 将 元 素 值 转换 为 序列 化 的 字符 串 表示 。 请 参阅 .serialize() 
了 解 更 多 信息 。 


对 于 jQuery 1.3， 如 果 传 递 的 参数 是 一 个 画 数 ， 那 么 用 .param() 会 得 到 这 个 函数 的 
返回 值 ， 而 不 是 把 这 个 函数 作为 一 个 字符 串 来 返回 。 


对 于 jQuery 1.4, .param() 方法 将 会 通过 深度 递 注 的 方式 序列 化 对 象 ， 以 便 符 合 现 
代 化 脚本 语言 的 需求 ， 比 如 PHP, Ruby on Rails 等 。 你 可 以 通过 设置 
jQuery.ajaxSettings.traditional = true; 来 全 局 地 禁用 这 个 功能 。 


如 果 被 传递 的 对 象 在 数组 中 ， 则 必须 是 以 .serializeArray() 的 返回 值 为 格式 的 对 象 
数组 : 


[(name:"first",value:"Rick"), 
(name:"last",value:"Astley"), 
(name:"job", value:"Rock Star"}] 


注意 : 因为 有 些 框架 在 解析 序列 化 数字 的 时 候 能 力 有 限 ， 所 以 当 传 递 一 些 含有 对 象 
或 驻 套 数组 的 数组 作为 参数 时 ， 请 务必 小 心 ! 


在 jQuery 1.4 中 ，HTML5 的 input 元 素 也 会 被 序列 化 。 


多 实例 
我 们 可 以 如 下 显示 对 象 的 查询 字符 串 表示 以 及 URI 编码 版 本 : 


var myObject = { 
ato 
one: 1, 
two: 2, 
three: 3 


1 

DS» 
}; 
var recursiveEncoded 
var recursiveDecoded 


$.param(myObject); 
decodeURIComponent ($.param(myObject)); 


alert(recursiveEncoded); 
alert(recursiveDecoded); 


recursiveEncoded 和 recursiveDecoded 的 值 输出 如 下 : 


a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B9%6 
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3 


«| x 








可 以 将 traditional 参数 设置 为 true， 来 模拟 jQuery 1.4 之 前 版 本 中 $.param() 的 行 
为 : 


var myObject = ( 
a: { 
one: 1, 
two: 2, 
three: 3 
bra] 
kr 
var shallowEncoded 
var shallowDecoded 


$.param(myObject, true); 
decodeURIComponent(shallowEncoded) ; 


alert(shallowEncoded) ; 
alert(shallowDecoded) ; 


recursiveEncoded 和 recursiveDecoded 的 值 输出 如 下 : 


a=%5Bobject+0bject%5D&b=1&b=2&b=3 
a=[object+0bject]&b=1&b=2&b=3 


jQuery ajax - post() 方法 


实例 
请 求 test.php 网 页 ， 忽 略 返 回 值 : 


$.post("test.php"); 


TIY 实例 
通过 AJAX POST 请 求 改 变 div 元 素 的 文本 : 


$("input").keyup(function(){ 
txt=$("input").val(); 
$.post("demo_ajax_gethint.asp", {suggest:txt}, function(result) { 
$("span").html(result); 


2r 
3): 
定义 和 用 法 


post() 方法 通过 HTTP POST 请 求 从 服务 器 载 入 数据 。 
语法 


jQuery.post( url , data , success(data, textStatus, jqXHR)_,_dataT\ 








url 必需 。 规 定 把 请 求 发 送 到 哪个 URL. 

T 可 选 。 映 射 或 字符 串 值 。 规 定 连同 请 求 发 送 到 服务 器 的 
数据 。 

d o 可 选 。 请 求 成 功 时 执行 的 回调 函数 。 


textStatus, jqXHR) 


可 选 。 规 定 预 期 的 服务 器 响应 的 数据 类 型 。 默 认 执 行 智 


dataType 能 判断 (xml, json, script 或 html) 。 


详细 说 明 
ARAE AEH Ajax BR, SH: 


$.ajax({ 
type: 'POST', 
urb sue 
data: _data_, 
success: success , 
dataType:  dataType 
3); 


根据 响应 的 不 同 的 MIME 类 型 ， 传 递 给 success 回调 函数 的 返回 数据 也 有 所 不 同 ， 
这 些 数据 可 以 是 XML 根 元 素 、 文 本 字符 串 、JavaScript 文件 或 者 JSON 对 象 。 也 
可 向 success 回调 图 数 传递 响应 的 文本 状态 。 


对 于 jQuery 1.5， 也 可 以 向 success 回调 函数 传递 jqXHR 对 象 (jQuery 1.4 中 传递 
的 是 XMLHttpRequest 对 象 ) 。 


大 部 分 实现 会 规定 一 个 success HR : 


$.post("ajax/test.html", function(data) { 
$(".result").html(data); 
3); 


本 例 读 取 被 请 求 的 HTML 片段 ， 并 插入 页 面 中 。 


通过 POST 读 取 的 页 面 不 被 缓存 ， 因 此 jQuery.ajaxSetup() 中 的 cache 和 
ifModified 选项 不 会 影响 这 些 请 求 。 


注释 : 由 于 浏览 器 安全 方面 的 限制 ， 大 多 数 "Ajax" 请 求 遵 守 同 源 策略 ; 请 求 无 法 从 
不 同 的 域 、 子 域 或 协议 成 功 地 取 回 数据 。 


注释 : 如 果 由 jQuery.post() 发 起 的 请 求 返回 错误 代码 ， 那 么 不 会 有 任何 提示 ， 除 非 
脚本 已 调用 了 全 局 的 .ajaxError() 方法 。 或 者 对 于 jQuery 1.5，jQuery.post() 返回 
BY jqXHR 对 象 的 .error() 方法 也 可 以 用 于 错误 处 理 。 


jqXHR 对 象 


对 于 jQuery 1.5， 所 有 jQuery 的 AJAX 方法 返回 的 是 XMLHTTPRequest 对 象 的 超 
集 。 由 $.post() 返回 的 jQuery XHR 对 象 或 "jqXHR," 实 现 了 约定 的 接口 ， 赋 予 其 所 
有 的 属性 、 方 法 ， 以 及 约定 的 行为 。 出 于 对 由 $.ajax() 使 用 的 回调 函数 名 称 便利 性 
和 一 致 性 的 考虑 ， 它 提供 了 .error(), .success() 以 及 .complete() 方法 。 这 些 方法 使 
i eee rien HOS AN lle 
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jQuery 1.5 中 的 约定 接口 同样 允许 jQuery 的 Ajax 方法 ， 包 括 $.post()， 来 链接 同 
一 请 求 的 多 个 .success()、.complete() 以 及 .error() 回调 函数 ， 共 至 会 在 请 求 也 许 
已 经 完成 后 分 配 这 些 回调 函数 。 


// 请 求生 成 后 立即 分 配 人 处理 程序 ， 请 记 住 该 请 求 针 对 jqxhr 对 象 
var jqxhr = $.post("example.php", function() { 
alert("success"); 
}) 
.success(function() { alert("second success"); }) 
.error(function() { alert("error"); }) 
.complete(function() { alert("complete"); }); 


// 在 这 里 执行 其 他 任务 


// 为 上 面 的 请 求 设 置 另 一 个 完成 函数 
jqxhr.complete(function(){ alert("second complete"); }); 


更 多 实例 
例子 1 
请 求 testphp 页 面 ， 并 一 起 发 送 一 些 额外 的 数据 (同时 仍然 忽略 返回 值 ) 


$.post("test.php", { name: "John", time: "2pm" } ); 


例子 2 
向 服务 器 传递 数据 数组 〈 同 时 仍然 忽略 返回 值 ) 


$.post("test.php", { 'choices[]': ["Jon", "Susan"] }); 


例子 3 
使 用 ajax 请 求 发 送 表单 数据 : 


$.post("test.php", $("#testform").serialize()); 


例子 4 
输出 来 自 请 求 页 面 test.php 的 结果 (HTML 或 XML， 取决 于 所 返回 的 内 容 ) 


$.post("test.php", function(data) { 
alert("Data Loaded: " + data); 


3); 


例子 5 


LESE 发 送 数据 ， 并 输出 结果 (HTML 或 XML， 取决 于 所 返回 的 内 
T i 


$.post("test.php", ( name: "John", time: "2pm" }, 
function(data) { 
alert("Data Loaded: " + data); 
3); 


例子 6 


获得 test.php 页 面 的 内 容 ， 并 存储 为 XMLHttpResponse 对 象 ， 并 通过 process() 
这 个 JavaScript 函数 进行 处 理 : 


$.post("test.php", { name: "John", time: "2pm" }, 
function(data) { 
process(data); 
), "xml"); 


例子 7 
获得 test.php 页 面 返回 的 json 格式 的 内 容 : 


$.post("test.php", { "func": "getNameAndTime" }, 
function(data) { 
alert(data.name); // John 
console.log(data.time); // 2pm 


j, "json"); 


jQuery ajax - serialize() 方法 


实例 
输出 序列 化 表单 值 的 结果 : 


$("button").click(function(){ 
$("div").text($("form").serialize()); 
3); 


定义 和 用 法 
serialize() 方法 通过 序列 化 表单 值 ， 创 建 URL 编码 文本 字符 串 。 
pana a MIS (比如 input 及 /或 文本 框 ) ， 或 者 form 元 素 本 


序列 化 的 值 可 在 生成 AJAX 请 求 时 用 于 URL 查询 字符 串 中 。 
语法 
$( selector ).serialize() 
详细 说 明 
.Serialize() 方法 创建 以 标准 URL 编码 表示 的 文本 字符 串 。 它 的 操作 对 象 是 代表 表 


单元 素 集合 的 jQuery 对 象 。 
表单 元 素 有 几 种 类 型 : 


«form» 
<div><input type="text" name="a" value="1" id="a" /></div> 
<div><input type="text" name="b" value="2" id="b" /></div> 
<div><input type="hidden" name="c" value="3" id="c" /></div> 
<div> 
<textarea name="d" rows="8" cols="40">4</textarea> 
</div> 
<div><select name="e"> 
<option value="5" selected="selected">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select></div> 
<div> 
<input type="checkbox" name="fF" value="8" id="f" /> 
</div> 
<div> 
<input type="submit" name="g" value="Submit" id="g" /> 
</div> 
</form> 


.serialize() 方法 可 以 操作 已 选取 个 别 表 单元 素 的 jQuery 对 象 ， 比 如 <input>， 


<textarea> 以 及 <select>。 不 过 ， 选 择 <form> 标签 本 身 进行 序列 化 一 般 更 容易 
Eee 


$('form').submit(function() { 
alert($(this).serialize()); 
return false; 


T); 


输出 标准 的 查询 字符 串 : 


a=1&b=2&c=3&d=4&e=5 


注释 : 只 会 将 "成 功 的 控件 "序列 化 为 字符 串 。 如 果 不 使 用 按钮 来 提交 表单 ， 则 不 对 
sue rea 如 果 要 表单 元 素 的 值 包含 到 序列 字符 串 中 ， 元 素 必 须 使 用 
name 属性 。 


jQuery ajax - serializeArray() 方法 


实例 
输出 以 数组 形式 序列 化 表单 值 的 结果 : 


$("button").click(function(){ 
x=$("form").serializeArray(); 
$.each(x, function(i, field){ 
$("#results").append(field.name + ":" + field.value + " "); 
}); 
}); 


定义 和 用 法 
serializeArray() 方法 通过 序列 化 表单 值 来 创建 对 象 数 组 (名称 和 值 ) 。 
您 可 以 选择 一 个 或 多 个 表单 元 素 (比如 input 及 /或 textarea) ， 或 者 form 元 素 本 


语法 


$( selector ).serializeArray() 


详细 说 明 


serializeArray() 方法 序列 化 表单 元 素 (类 似 .serialize() 方法 ) ， 返 回 ISON 数据 结 
构 数据 。 


注意 : 此 方法 返回 的 是 JSON 对 象 而 非 ISON 字符 串 。 需 要 使 用 插件 或 者 第 三 方 
库 进 行 字 符 串 化 操作 。 


返回 的 ISON 对 象 是 由 一 个 对 象 数 组 组 成 的 ， 其 中 每 个 对 象 包 含 一 个 或 两 个 名 值 对 
一 一 name 参数 和 value 参数 (如 果 value 不 为 空 的 话 ) 。 举 例 来 说 : 


[ 
{name: 'firstname', value: 'Hello'}, 
{name: 'lastname', value: 'World'}, 
(name: 'alias'}, // 442 

l 


.SerializeArray() 方法 使 用 了 W3C 关于 successful controls (有 效 控件 ) 的 标准 来 
令 测 哪些 元 素 应 当 包 括 在 内 。 特 别 说 明 ， 元 素 不 能 被 禁用 (禁用 的 元 素 不 会 被 包括 
在 内 ) ， 并 且 元 素 应 当 有 含有 name 属性 。 提 交 按 钮 的 值 也 不 会 被 序列 化 。 文 件 选 
择 元 素 的 数据 也 不 会 被 序列 化 。 


该 方法 可 以 对 已 选择 单独 表单 元 素 的 对 象 进行 操作 ， 比 如 <input>, <textarea>, 和 


<select>。 不 过 ， 更 方便 的 方法 是 ， 直 接 选 择 «form» 标签 自身 来 进行 序列 化 操 
作 。 


$("form").submit(function() { 
console.log($(this).serializeArray()); 
return false; 


, 


上 面 的 代码 产生 下 面 的 数据 结构 (假设 浏览 器 支持 console.log) 


示例 
取得 表单 内 容 并 插入 到 网 页 中 : 
HTML 代码 : 


<p id="results"><b>Results:</b> </p> 
<form> 
«select name="Single"> 
<option>Single</option> 
<option>Single2</option> 
</select> 
<select name="multiple" multiple="multiple"> 
<option selected="selected">Multiple</option> 
<option>Multiple2</option> 
«option selected="selected">Multiple3</option> 
</select><br/> 
<input type="checkbox" name="check" value="checki"/> check1i 
<input type="checkbox" name="check" value="check2" checked="Cchecl 
<input type="radio" name="radio" value="radioi" checked="checked' 
<input type="radio" name="radio" value="radio2"/> radio2 
</form> 


Br] 
jQuery 代码 : 





var fields = $("select, :radio").serializeArray(); 

jQuery.each( fields, function(i, field)( 
$("#results").append(field.value + " "); 

3); 


jQuery 参考 手册 - 


jQuery 7K 
jQuery 3 ABM T FH iit, ARAB RIBAK. 
函数 描述 

.add() 将 元 素 添 加 到 匹配 元 素 的 集合 中 。 
.andSelf() 把 堆栈 中 之 前 的 元 素 集 添加 到 当前 集合 中 。 
.children() 获得 匹配 元 素 集 合 中 每 个 元 素 的 所 有 子 元 素 。 
ee 从 元 素 本 身 开 始 ， 逐 级 向 上 级 元 素 匹 配 ， 并 返回 最 先 匹 配 的 祖 
DID. 
cone 获得 匹配 元 素 集合 中 每 个 元 素 的 子 元 素 ， 包 括 文本 和 注释 节 
.each() xt jQuery RATAN, AEAT RATER 
andi 结束 当前 链 中 最 近 的 一 次 第 选 操作 ， 并 将 匹配 元 素 集合 返回 到 
i 前 一 次 的 状态 。 
.eq() 将 匹配 元 素 集合 缩减 为 位 于 指定 索引 的 新 元 素 。 
filter() HERRERA Hà AA Vo Rob 1 28 9X PU Bc es a [6] fá ATIC 
find() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 后 代 ， 由 选择 器 进行 得 
: o 
.first() 将 匹配 元 素 集 合 缩减 为 集合 中 的 第 一 个 元 素 。 
.has() 将 匹配 元 素 集 合 缩减 为 包含 特定 元 素 的 后 代 的 集合 
isis 根据 选择 器 检查 当前 匹配 元 素 集合 ， 如 果 存 在 至 少 一 个 匹配 元 
l 素 ， 则 返回 true. 
.last() 将 匹配 元 素 集合 缩减 为 集合 中 的 最 后 一 个 元 素 。 

把 当前 匹配 集合 中 的 每 个 元 素 传 递 给 画 数 ， 产 生 包 含 返回 值 的 
-map() 新 jQuery 对 象 。 
.next() 获得 匹配 元 素 集 合 中 每 个 元 素 紧 邻 的 同辈 元 素 。 

获得 匹配 元 素 集 合 中 每 个 元 素 之 后 的 所 有 同辈 元 素 ， 由 选择 器 

ii 进行 第 选 《 可 选 ) 。 


大 得 每 个 元 素 之 后 所 有 的 同辈 元 素 ， 直 到 遇 到 匹配 选择 器 的 元 


.hot() 
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.offsetParent() 


.parent() 


.parents() 


.parentsUntil() 


.prev() 
.prevAll() 
.prevUntil() 


.siblings() 


.Slice() 


PA Ei s 
I Juery zz 


4 — 1h "E 
SHS = 


素 为 止 。 
从 匹配 元 素 集 合 中 删除 元 素 。 
获得 用 于 定位 的 第 一 个 父 元 素 。 


获得 当前 匹配 元 素 集合 中 每 个 元 素 的 父 元 素 ， 由 选择 器 筛选 
(可 选 ) 。 


获得 当前 匹配 元 素 集合 中 每 个 元 素 的 祖先 元 素 ， 由 选择 器 筛选 
(可 选 ) 。 


获得 当前 匹配 元 素 集 合 中 每 个 元 素 的 祖先 元 素 ， 直 到 遇 到 匹配 
选择 器 的 元 素 为 止 。 


获得 匹配 元 素 集合 中 每 个 元 素 紧 邻 的 前 一 个 同辈 元 素 ， 由 选择 
器 第 选 ( 可 选 ) 。 

获得 匹配 元 素 集合 中 每 个 元 素 之 前 的 所 有 同辈 元 素 ， 由 选择 器 
进行 筛选 (可 选 ) 。 

P E 
素 为 止 。 


IE E 
选 o 


将 匹配 元 素 集合 缩减 为 指定 范围 的 子 集 。 


jQuery 通 万 - add() 方法 


实例 


找到 所 有 div 并 添加 边框 。 然 后 将 所 有 段落 添加 到 该 jQuery 对 象 ， 并 把 它们 的 背景 
设置 为 黄色 : 


$("div").css("border", "2px solid red") 
.add("p") 
.css( "background", "yellow"); 


定义 和 用 法 
add() 方法 将 元 素 添 加 到 匹配 元 素 的 集合 中 。 
语法 1 


.add(_selector_) 


selector zm 表示 查找 供 上 添加 到 匹配 元 素 集 合 的 元 素 的 选择 器 表达 


语法 2 


.add( elements ) 


参数 描述 
elements 添加 到 匹配 元 素 集合 的 一 个 或 多 个 元 素 。 
语法 3 


.add( html ) 


html 添加 到 匹配 元 素 集 合 的 HTML 片段 。 


语法 4 


.add(_jQueryObject_) 


参数 描述 
JQueryObject 添加 到 匹配 元 素 集合 的 已 有 jQuery 对 象 。 
语法 5 


.add(_selector_, _context_) 


selector THR, AAA RORIS RETRO A A RON ERS 
工 vo 


context ”选择 器 开始 进行 匹配 的 位 置 。 


详细 说 明 
8 35. 


jQuery 通 万 - andSelf() 方法 


实例 


找到 所 有 div， 以 及 其 中 的 所 有 段落 ， 并 为 它们 添加 两 个 类 名 。 请 注意 ， 由 于 未 使 
用 .andSelf(), div 没有 黄色 背景 色 。 


$("div").find("p").andSelf().addClass("border"); 
$("div").find("p").addClass("background"); 


定义 和 用 法 
add() 方法 把 堆栈 中 之 前 的 元 素 集 添加 到 当前 集合 。 
语法 


.andSelf() 


详细 说 明 
请 思考 这 个 拥有 简单 列表 的 页 面 : 


<ul> 
«li»list item 1</1li> 
«li»list item 2«/1li» 
«li class="third-item">list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


以 下 代码 的 结果 是 项 目 3,4,5 拥有 红色 背景 : 


$("li.third-item").nextAll().andSelf() 
.css("background-color", "red"); 


首先 ， 初 始 的 选择 器 会 定位 项 目 3， 初 始 化 的 堆栈 存 有 公 包 含 该 项 目的 集合 。 调 用 
nextAll() 会 将 项 目 4, 5 的 集合 推 人 人 堆栈。 最后， 调用 .andSelf() 会 合并 这 两 个 集 
合 ， 所 创建 的 jQuery 对 象 指向 按照 文档 顺序 的 所 有 三 个 项 目 : {[<li.third-item>,<li>, 


<li> Jj. 


W3School 前 端 教 程 合 


jQuery 通 历 - andSelf() 方法 2466 


jQuery 通 万 - children() 方法 


实例 
找到 类 名 为 "selected" 的 所 有 div 的 子 元 素 ， 并 将 其 设置 为 蓝 色 : 


$("div").children(".selected").css("color", "blue"); 


定义 和 用 法 


行 过 滤 。 


语法 


.children( selector ) 


参数 描述 
selector 字符 串 值 ， 包 含 匹 配 元 素 的 选择 器 表达 式 。 
详细 说 明 


如 果 给 定 表 示 DOM 元 素 集 合 的 jQuery 对 象 ，.children() 方法 允许 我 们 检索 DOM 
树 中 的 这 些 元 素 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。.find() 和 .children() 方法 类 
似 ， 不 过 后 者 只 治 着 DOM 树 向 下 通 历 单一 层级 。 


请 注意 ， 与 大 多 数 jQuery 方法 一 样 ，.children() 不 返回 文本 节点 ; 如 果 需 要 获得 包 
含 文本 和 注释 节点 在 内 的 所 有 子 节点 ， 请 使 用 .contents()。 


该 方法 接受 一 个 选择 器 表达 式 作 为 可 选 人 参数 ， 和 与 我 们 传递 到 $() 的 参数 的 类 型 是 相 
同 的 。 如 果 应 用 该 选择 器 ， 将 测试 元 素 是 否 匹 配 该 表达 式 ， 以 此 筛选 这 些 元 素 。 


请 思考 这 个 带 有 基础 的 氮 套 列表 的 页 面 : 


«ul class-"level-1"» 
«li class="item-i">I</li> 
«li class="item-ii">II 
«ul class="level-2"> 
«li class-"item-a"»A«/li» 
«li class="item-b">B 
«ul class="level-3"> 
«li class="item-1">1</1i> 
«li class="item-2">2</li> 
«li class="item-3">3</1i> 


«/ul» 
</li> 
<li class="item-c">C</1i> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul> 


如 果 我 们 从 level-2 列表 开始 ， 我 们 可 以 找到 它 的 子 元 素 : 


$('ul.level-2').children().css('background-color', 'red'); 


这 行 代 码 的 结果 是 ， 项 目 A, B, C 得 到 红色 背景 。 由 于 我 们 没有 应 用 选择 器 表达 
A, REH jQuery 对 象 包含 了 所 有 子 元 素 。 如 果 应 用 一 个 选择 器 的 话 ， 那 么 只 会 
包括 匹配 的 项 目 。 


jQuery 通 万 - closest() 方法 


实例 


本 例 演 示 如 何 通过 closest() 完成 事件 委托 。 当 被 最 接近 的 列表 元 素 或 其 子 后 代 元 素 
被 点 击 时 ， 会 切换 黄色 背景 : 


$( document ).bind("click", function( e ) { 
$( e.target ).closest("li").toggleClass("hilight"); 
3); 


定义 和 用 法 


closest() 方法 获得 匹配 选择 器 的 第 一 个 祖先 元 素 ， 从 当前 元 素 开 始 治 DOM 树 向 
上 


o 
语法 


.Closest( selector ) 


参数 描述 
selector 字符 串 值 ， 包 含 匹 配 元 素 的 选择 器 表达 式 。 
详细 说 明 


如 果 给 定 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.closest() 方法 允许 我 们 检索 DOM 
树 中 的 这 些 元 素 以 及 它们 的 祖先 元 素 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 

象 。.parents() 和 .closest() 方法 类 似 ， 它 们 都 治 DOM 树 向 上 通 历 。 两 者 之 间 的 差 
异 尽管 微妙 ， 却 很 重要 : 


.closest() .parents() 
从 当前 元 素 开 始 从 父 元 素 开 始 
A DOM I3. iis 


p 直到 找到 已 点 用 治 DOM 树 向 上 通 历 ， 直 到 文档 的 根 元 素 为止 ， 将 每 


选择 器 的 一 个 匹配 为 


个 祖先 元 素 添 加 到 一 个 临时 的 集合 ; 如 果 应 用 了 选择 


E 器 ， 则 会 基于 该 选择 器 对 这 个 集合 进行 筛选 。 


返回 包含 堆 个 或 一 


元 素 的 jQuery 对 象 返回 包含 需 个 、 一 个 或 多 个 元 素 的 jQuery 对 象 


请 看 下 面 的 HTML 片段 : 


«ul id="one" class="level-1"> 
<li class="item-i">I</li> 
«li id-"ii" class="item-ii">II 
«ul class="level-2"> 
«li class="item-a">A</1i> 
«li class="item-b">B 
«ul class="level-3"> 
«li class="item-1">1</1i> 
«li class="item-2">2</1i> 
«li class="item-3">3</1i> 
«/ul» 
</li> 
<li class="item-c">C</li> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul> 


例子 1 
假设 我 们 执行 一 个 从 项 目 A 开始 的 对 <ul> 元 素 的 搜索 : 


$('li.item-a').closest('ul').css('background-color', 


这 会 改变 level-2 «ul» Mee, EANA MÁS] E3875 DOM 树 时 会 第 一 


7*0 


例子 2 
假设 我 们 搜索 的 是 «li» 元 素 : 


$('li.item-a').closest('li').css('background-color', 


'red'); 


个 遇 到 该 元 


'red'); 


这 会 改变 列表 项 目 A 的 颜色 。 在 向 上 通 历 DOM 树 之 前 ，.closest() 方法 会 从 i 元 素 
本 身 开 始 搜索 ， 直 到 选择 器 匹配 项 目 A 为止。 


例子 3 
我 们 可 以 传递 DOM TREFA context， 在 其 中 搜索 最 接近 的 元 素 。 


var listItemII = document.getElementById('ii'); 
$('li.item-a').closest('ul', listItemII).css('background-color', '1 
$('li.item-a').closest('#one', listItemII).css('background-color', 


= K 








«| 
以 上 代码 会 改变 level-2 «ul» 的 颜色 ， 因 为 它 既 是 列表 项 A 的 第 一 个 «ul» 祖先 ， 同 
时 也 是 列表 项 目的 后 代 。 它 不 会 改变 level-1 «ul» 的 颜色 ， 因 为 它 不 是 list item Il 


的 后 代 。 


jQuery 通 万 - contents() 方法 


实例 
找到 段落 中 的 所 有 文本 节点 ， 并 用 粗 体 标签 包装 它们 。 


$("p").contents().filter(function(){ return this.nodeType != 1; }) 





«| = 





定义 和 用 法 
contents() 方法 获得 匹配 元 素 集 合 中 每 个 元 素 的 子 节点 ， 包 括 文 本 和 注释 节点 。 
语法 


.contents() 


详细 说 明 


如 果 给 定 表 示 DOM meran jQuery 对 象 ，.contents() 方法 允许 我 们 检索 DOM 
树 中 的 这 些 元 素 的 直接 子 节点 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。.contents() 
和 .children() 方法 类 似 ， 不 同 的 是 前 者 在 结果 jQuery 对 象 中 包含 了 文本 节点 以 及 
HTML 元 素 。 


.Contents() 方法 也 可 以 用 于 获得 iframe 的 内 容 文档 ， 前 提 是 该 iframe 与 主页 面 在 
一 个 域 。 


请 思考 下 面 这 个 带 有 一 些 文本 节点 的 <div>， 每 个 节点 被 两 个 折 行 元 素 (<br/>) 分 
隅 : 


«div class="container"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<br /><br /> 
Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. 
<br /> <br /> 
Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. 

«/div» 


mi = A 








我 们 可 以 使 用 .contents() 方法 来 把 文本 块 转换 为 形式 良好 的 段落 : 


$('.container').contents().filter(function() { 
return this.nodeType == 3; 


}) 
.wrap('<p></p>' ) 

.end() 

.filter('br') 
.remove(); 


这 段 代码 首先 会 接收 <div class= "container"» 的 内 容 ， 然 后 滤 过 其 文本 节 REX 
本 节点 封装 人 段落 标签 中 。 这 是 通过 测试 元 素 的 .nodeType [E Bie 现 的 。 Amt 
有 指示 节点 类 型 的 数字 代码 ; 文本 节点 使 用 代码 3。 内 容 会 os 次 过 tye, IRE st 
<br/> 元 素 ， 这 些 元 素 会 被 移 除 。 


jQuery 通 万 - each() 方法 


实例 
输出 每 个 |i 元 素 的 文本 : 


$("button").click(function(){ 
$("li").each(function(){ 
alert($(this).text()) 


3): 
195 
定义 和 用 法 


each() 方法 规定 为 每 个 匹配 元 素 规定 运行 的 函数 。 
提示 : 返回 false 可 用 于 及 早 停止 循环 。 


语法 
$( selector ).each( function(index,element) ) 


参数 描述 


必需 。 为 每 个 匹配 元 素 规定 运行 的 辑 数 。 index- 选 
function(index,element) ” 择 器 的 index 位 置 element - 当前 的 元 素 (也 可 使 用 
"this" 选择 器 ) 


jQuery 58/5 - end() 方法 


实例 


选择 所 有 段落 ， 找 到 这 些 段 落 中 的 span 元 素 ， 然 后 将 它们 恢复 为 段落 ， 并 把 段落 
设置 为 两 像素 的 红色 边框 : 


$("p").find("span").end().css("border", "2px red solid"); 


定义 和 用 法 


end() 方法 结束 当前 链条 中 的 最 近 的 得 选 操作 ， 并 将 匹配 元 素 集 还 原 为 之 前 的 状 


ANO 
语法 


.end() 


详细 说 明 


大 多 数 jQuery 的 通 历 方法 会 操作 一 个 jQuery 对 象 实例 ， 并 生成 一 个 匹配 不 同 
DOM 元 素 集 的 新 对 象 。 当 发 生 这 种 情况 时 ， 应 该 会 把 新 的 元 素 集 推 人 维持 在 对 象 
中 的 堆栈 内 。 每 次 成 功 的 筛选 方法 调用 都 会 把 新 元 素 推 人 堆栈 中 。 如 果 我 们 需要 老 
的 元 素 集 ， 可 以 使 用 end() 从 堆栈 中 弹出 新 集合 。 


假设 页 面 中 有 一 对 很 短 的 列表 : 


<ul class="first"> 
«li class="foo">list item 1</li> 
«li»list item 2«/li» 
«li class="bar">list item 3«/li» 
«/ul» 
«ul class="second"> 
«li class="foo">list item 1«/li» 
«li»list item 2«/li» 
«li class="bar">list item 3«/li» 
«/ul» 


例子 1 


主要 是 在 利用 jQuery 的 链条 属性 (MD) 时 ，jQuery 会 比较 有 用 。 如 果 不 使 用 
命令 链 ， 我 们 一 般 是 通过 变量 名 来 调用 之 前 的 对 象 ， 这 样 我 们 就 不 需要 操作 堆栈 
了 。 不 过 通过 end()， 我 们 可 以 把 所 有 方法 调用 串联 在 一 起 : 


$('ul.first').find('.foo').css('background-color', 'red') 
.end().find('.bar').css('background-color', 'green'); 


这 条 命令 链 检索 第 一 个 列表 中 类 名 为 foo 的 项 目 ， 并 把 它们 的 背景 设置 为 红色 。 
end() 会 业 对 象 还 原 为 调用 find() 之 前 的 状态 ， 所 以 第 二 个 find() 查找 的 是 <ul 
class="first"> 内 的 '.bar' ， 而 不 是 在 列表 的 «li class="foo"> 中 查找 ， 并 将 匹配 元 素 
的 背景 设置 为 绿色 。 最 后 的 结果 是 第 一 个 列表 中 的 项 目 1 和 项 目 3 被 设置 了 带 颜 色 
的 背景 ， 而 第 二 个 列表 中 的 项 目 没有 任何 变化 。 


例子 2 


这 条 长 长 的 jQuery HALA AE A 25 MIE 693, MIATA ARERR, 
而 end() 方法 用 来 关闭 代码 块 : 


$('ul.first').find('.foo') 
.cSs('background-color', 'red') 
.end().find('.bar') 
.cSs('background-color', 'green') 
.end(); 


最 后 这 个 end() 不 是 必需 的 ， 因 为 我 们 随后 会 丢弃 这 个 jQuery 对 象 。 不 过 ， 如 果 按 
照 这 种 形式 编写 代码 ，end() 就 能 提供 视觉 上 的 对 称 ， 以 及 规整 程序 的 感觉 ， 至 少 
于 开发 者 来 说 更 易 阅 读 ， 当 然 代价 则 是 由 于 进行 了 额外 的 调用 ， 会 有 一 点 点 性 能 


损 


X ig 


让 


jQuery 通 历 - eq() 方法 
实例 
通过 为 index 为 2 的 div 添加 适当 的 类 ， 将 其 变 为 蓝 色 : 


$("body").find("div").eq(2).addClass("blue"); 
定义 和 用 法 
eq() 方法 将 匹配 元 素 集 缩 减 值 指定 index 上 的 一 个 。 
语法 


.eq(. index ) 


参数 者 这 
hdax 整数 ， 指 示 元 素 的 位 置 (最 小 为 0) 。 如 果 是 负数 ， 则 从 集合 中 的 最 后 
一 个 元 素 往 回 计 数 。 
详细 说 明 


如 果 给 定 表 示 DOM 元 素 集合 的 jQuery tR, eq) 方法 会 用 集合 中 的 一 个 元 素 构 
造 一 个 新 的 jQuery 对 象 。 所 使 用 的 index 参数 标示 集合 中 元 素 的 位 置 。 


请 看 下 面 这 个 简单 的 列表 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2</li> 
«li»list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


例子 1 
我 们 可 以 把 该 方法 应 用 到 这 个 列表 项 目 集 : 


$('li').eq(2).css('background-color', 'red'); 


这 个 调用 的 结果 是 为 项 目 3 设置 了 红色 背景 。 请 注意 ，index 是 基于 需 的 ， 并 且 是 
在 jQuery 对 象 中 引用 元 素 的 位 置 ， 而 不 是 在 DOM 树 中 。 


例子 2 
如 果 提供 负数 ， 则 指示 从 集合 结尾 开始 的 位 置 ， 而 不 是 从 开头 开始 。 例 如 : 


$('li').eq(-2).css('background-color', 'red'); 
这 次 ， 项 目 4 的 背景 变 为 红色 ， 这 是 因为 它 是 集合 结尾 开始 的 第 二 个 。 


例子 3 


如 果 无 法 根据 指定 的 index 参数 找到 元 素 ， 则 该 方法 构造 带 有 空 集 的 jQuery 对 
R, length 属性 为 0。 


$('li').eq(5).css('background-color', 'red'); 


这 里 ， 没 有 列表 项 会 变 为 红色 ， 这 是 因为 .eq(5) 指示 的 第 六 个 列表 项 。 


jQuery 通 万 -filter() 方法 


实例 
改变 所 有 div 的 颜色 ， 然 后 向 类 名 为 "middle" 的 类 添加 边框 : 


$("div").css("background", "#c8ebcc") 
.filter(".middle") 
.css( "border-color", "red"); 


定义 和 用 法 
filter() 方法 将 匹配 元 素 集 合 缩减 为 匹配 指定 选择 器 的 元 素 。 
语法 


.filter( selector ) 


参数 描述 
selector 字符 串 值 ， 包 含 供 匹配 当前 元 素 集合 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.filter() 方法 会 用 匹配 元 素 的 子 集 构 
造 一 个 新 的 jQuery 对 象 。 所 使 用 的 选择 器 会 测试 每 个 元 素 ; 所 有 匹配 该 选择 器 的 
元 素 都 会 包含 在 结果 中 。 


请 思考 下 面 这 个 拥有 简单 列表 的 页 面 : 


<ul> 
<li>list item 1«/li» 
«li»list item 2«/1li» 
«li»list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«li»list item 6«/1li» 

«/ul» 


我 们 可 以 向 这 个 列表 项 集合 应 用 该 方法 : 


$('li').filter(':even').css('background-color', 'red'); 


此 调用 的 结果 是 将 项 目 1, 3, 5 的 背景 设置 为 红色 ， 这 是 因为 它们 都 匹配 选择 器 ( 回 
忆 一 下 ，:even 和 :odd 均 使 用 基于 0 的 index) 。 
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使 用 该 方法 的 第 二 个 形式 是 ， 遂 过 鲨 数 而 不 是 选择 器 来 第 选 元 素 。 对 于 每 个 元 素 ， 
AD RA ERROR [BI true， 则 元 素 会 被 包含 在 已 得 选集 合 中 ; 否则 ， 会 排除 这 个 元 素 。 


请 看 下 面 这 段 稍 显 复杂 的 HTML 片段 : 


<ul> 
<li><strong>list</strong> item 1 - one strong tag</1li> 
<li><strong>list</strong> item <strong>2</strong> 
- two <span>strong tags</span></1i> 
<li>list item 3</1i> 
<li>list item 4</li> 
<li>list item 5</1i> 
<li>list item 6</1i> 
</ul> 


我 们 可 以 选取 这 些 列表 项 ， 然 后 基于 其 内 容 来 筛选 它 们 : 


$('li').filter(function(index) { 
return $('strong', this).length == 1; 
}).css('background-color', 'red'); 


jQuery i& % - find() 方法 


实例 
搜索 所 有 段落 中 的 后 代 span 元 素 ， 并 将 其 颜色 设置 为 红色 : 


$("p").find("span").css('color', 'red'); 


定义 和 用 法 
find() 方法 获得 当前 元 素 集 合 中 每 个 元 素 的 后 代 ， 通 过 选择 器 、jQuery 对 象 或 元 素 
来 筛选 。 


语法 


.find( selector ) 


参数 描述 
selector 字符 串 值 ， 包 含 供 匹配 当前 元 素 集 合 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.find() 方法 允许 我 们 在 DOM tH 
中 搜索 这 些 元 素 的 后 代 ， 并 用 匹配 元 素来 构造 一 个 新 的 jQuery 对 象 。.find() & 
.children() 方法 类 似 ， 不 同 的 是 后 者 仅 治 着 DOM 树 向 下 通 历 单一 层级 。 


find) 方法 第 一 个 明显 特征 是 ， 其 接受 的 选择 器 表达 式 与 我 们 向 $() 函数 传递 的 表 
达 式 的 类 型 相同 。 将 通过 测试 这 些 元 素 是 否 匹 配 该 表达 式 来 对 元 素 进行 过 滤 。 


请 思考 下 面 这 个 简单 的 嵌 套 列表 : 


«ul class-"level-1"» 
«li class="item-i">I</li> 
«li class="item-ii">II 
«ul class="level-2"> 
«li class-"item-a"»A«/li» 
«li class="item-b">B 
«ul class="level-3"> 
«li class="item-1">1</1i> 
«li class="item-2">2</li> 
«li class="item-3">3</1i> 


«/ul» 
</li> 
<li class="item-c">C</1i> 
</ul> 
</li> 
<li class="item-iii">III</li> 


</ul> 


我 们 将 从 列表 1| 开始 来 查找 其 中 的 列表 项 : 


$('li.item-ii').find('li').css('background-color', 'red'); 


这 次 调研 的 结果 是 ， 项 目 A、B、1、2、3 以 及 C 均 被 设置 了 红色 背景 。 即 使 项 目 
l| 匹配 选择 器 表达 式 ， 它 也 不 会 被 包含 在 结果 中 ; 只 会 对 后 代 进 行 匹 配 。 


与 其 他 的 树 通 历 方法 不 同 ， 选 择 器 表达 式 对 于 find) 是 必需 的 参数 。 如 果 我 们 需要 
实现 对 所 有 后 代 元 素 的 取 回 ， 可 以 传递 通 配 选择 器 "C. 


选择 器 context 是 由 .find() 方法 实现 的 ; At, $/(‘li.item-ii').find(‘l') 等 价 于 $(li', 
‘li.item-ii'). 

对 于 jQuery 1.6， 我 们 还 可 以 使 用 给 定 的 jQuery 集合 或 元 素来 进行 筛选 。 还 是 上 面 
的 拱 套 列表 ， 我 们 首先 这 样 写 : 


var $allListElements = $('li'); 
然后 将 这 个 jQuery 对 象 传递 给 find 方法 : 
$('li.item-ii').find( $allListElements ); 


上 面 的 代码 会 返回 一 个 jQuery 集合 ， 其 中 包含 属于 列表 ll 后 代 的 列表 元 素 。 
类 似 地 ， 也 可 以 传递 一 个 元 素 : 


var item1 = $('li.item-1')[0]; 
$('li.item-ii').find( item1 ).css('background-color', 'red'); 


这 次 调用 的 结果 是 项 目 1 被 设置 为 红色 背景 。 


jQuery 通 万 - first() 方法 


高 之 显示 段落 中 的 第 一 个 span : 


$("p span").first().addClass('highlight'); 


定义 和 用 法 
first() 将 匹配 元 素 集 合 缩减 为 集合 中 的 第 一 个 元 素 。 
语法 


.first() 


详细 说 明 

如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.first() 方法 会 用 第 一 个 匹配 元 素 
构造 一 个 新 的 jQuery 对 象 。 

请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2«/1li» 
«li»list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


我 们 可 以 对 这 个 列表 项 集合 应 用 该 方法 : 


$('li').first().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 第 一 个 项 目 被 设置 为 红色 背景 。 


jQuery im % - has() 方法 
实例 
< 测 某 个 元 素 是 否 在 另 一 个 元 素 中 : 
$("ul").append("«li»" + ($("ul").has("li").length ? "Yes" : "No") - 


$("ul").has("li").addClass("full"); 
aj es 


定义 和 用 法 


has() 将 匹配 元 素 集合 缩减 为 拥有 匹配 指定 选择 器 或 DOM 元 素 的 后 代 的 子 集 。 





语法 


.has( selector ) 


参数 描述 
selector 字符 串 值 ， 包 含 匹 配 元 素 的 选择 器 表达 式 。 
详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.has() 方法 用 匹配 元 素 的 子 集 来 
构造 一 个 新 的 jQuery 对 象 。 所 使 用 的 选择 器 用 于 检测 匹配 元 素 的 后 代 ; 如 果 任 何 
后 代 元 素 匹 配 该 选择 器 ， 该 元 素 将 被 包含 在 结果 中 。 
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<ul> 
<li>list item 1«/li» 
«li»list item 2 
<ul> 
«li»list item 2-a</li> 
«li»list item 2-b«/li» 
«/ul» 
</li> 
<li>list item 3</li> 
<li>list item 4</li> 
</ul> 


我 们 可 以 对 列表 项 集合 应 用 该 方法 ， 就 像 这 样 : 


$('li').has('ul').css('background-color', 'red'); 


该 调用 的 结果 是 ， 项 目 2 的 背景 被 设置 为 红色 ， 这 是 因为 该 项 目 是 后 代 中 唯一 拥有 


<ul> 的 «li», 


jQuery 通 历 -is() 方法 


实例 
返回 false, AA input 元 素 的 父 元 素 是 p 元 素 : 


var isFormParent = $("input[type='checkbox']").parent().is("form' 





$("div").text("isFormParent = " + isFormParent); 
E SSS ae 
rm. ` 
定义 和 用 法 


is() 根据 选择 器 、 元 素 或 jQuery 对 象 来 检测 匹配 元 素 集合 ， 如 果 这 些 元 素 中 至 少 有 
一 个 元 素 匹 配给 定 的 参数 ， 则 返回 true. 


语法 


.is(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 匹 配 元 素 的 选择 器 表达 式 。 
详细 说 明 


与 其 他 筑 选 方法 不 同 ，.is() 不 创建 新 的 jQuery 对 象 。 相 反 ， 它 允许 我 们 在 不 修改 
jQuery 对 象 内 容 的 情况 下 对 其 进行 检测 。 这 在 callback 内 部 通常 比较 有 用 ， 比 如 事 
件 处 理 程序 。 


假设 我 们 有 一 个 列表 ， 其 中 两 个 项 目 包含 子 元 素 : 


<ul> 
<li>list <strong>item 1</strong></1li> 
<li><span>list item 2</span></1i> 
<li>list item 3</li> 

</ul> 


您 可 以 向 <ul> 元 素 添 加 click 处 理 程序 ， 然 后 把 代码 限制 为 只 有 当 列 表 项 本 身 ， 而 
非 子 元 素 ， 被 点 击 时 才 进 行 触发 : 


$("ul").click(function(event) { 
var $target = $(event.target); 
if ( $target.is("li") ) { 
$target.css("background-color", "red"); 


} 
3): 


现在 ， 当 用 户 点 击 的 是 第 一 个 列表 项 中 的 单词 "list" 或 第 三 个 列表 项 中 的 任何 单词 
时 ， 被 点 击 的 列表 项 会 被 设置 为 红色 背景 。 不 过 ， 当 用 户 点 击 第 一 个 列表 项 中 的 
item 1 或 第 二 个 列表 项 中 的 任何 单词 时 ， 都 不 会 有 任何 变化 ， 这 是 因为 这 上 面 的 情 
况 中 ， 事 件 的 目标 分 别 是 <strong> 是 <span>。 


请 您 注意 ， 对 于 带 有 位 置 性 选择 器 的 选择 器 表达 式 字 符 串 ， 比 如 :first、:gt() 或 者 

:even， 位 置 性 筛选 是 针对 传递 到 .is() 的 jQuery 对 象 进行 的 ， 而 非 针 对 包含 文档 。 
所 以 对 于 上 面 的 HTML 来 说 ， 诸 如 $("li:first").is("lilast") 的 表达 式 返回 true, (Az 
$("li:first-child").is("li:last-child") 3x[n] false. 
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该 方法 的 第 二 种 用 法 是 ， 对 基于 事 数 而 非 选择 器 的 相关 元 素 的 表达 式 进行 求 值 。 对 
于 每 个 元 素来 说 ， 如 果 该 本 数 返回 true， 则 .is() 也 返回 true。 例 如 ， 下 面 是 稍微 复 
杂 的 HTML HE : 


<ul> 
<li><strong>list</strong> item 1 - one strong tag</1li> 
<li><strong>list</strong> item <strong>2</strong> - 
two «span»strong tags</span></1i> 
<li>list item 3</1i> 
<li>list item 4</1i> 
<li>list item 5</1i> 
«/ul» 


您 可 以 向 每 个 «li» 添加 click 处 理 程序 ， 以 计算 在 被 点 击 的 <li> 内 部 «strong» 元 素 
的 数目 : 


$("1i").click(function() { 
var $1i = $(this), 
isWithTwo = $li.is(function() { 
return $('strong', this).length === 2; 


); 
if ( iswithTwo ) { 
$li.css("background-color", "green"); 
) else ( 
$li.css("background-color", "red"); 
} 
}); 
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jQuery 通 历 - is() 方法 2489 


$("p span").last().addClass('highlight'); 


定义 和 用 法 
last() 将 匹配 元 素 集 合 缩减 为 集合 中 的 最 后 一 个 元 素 。 
语法 


. last() 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.last() 方法 会 用 最 后 一 个 匹配 元 


素 构 造 一 个 新 的 jQuery 对 象 。 
请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2«/1li» 
«li»list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


我 们 可 以 对 这 个 列表 项 集合 应 用 该 方法 : 


$('li').last().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 最 后 一 个 项 目 被 设置 为 红色 背景 。 


jQuery 38/7 - map() 方法 


实例 
构建 表单 中 所 有 值 的 列表 : 


$("p").append( $("input").map(function(){ 
return $(this).val(); 
3).get().join(", ") ); 


定义 和 用 法 


map() 把 每 个 元 素 通 过 函数 传递 到 当前 匹配 集合 中 ， 生 成 包含 返回 值 的 新 的 jQuery 
对 o 


语法 
.map(. callback(index,domElement) ) 
参数 描述 
callback(index,domElement) 对 当前 集合 中 的 每 个 元 素 调用 的 函数 对 象 。 
详细 说 明 


由 于 返回 值 是 jQuery 封装 的 数组 ， 使 用 get() 来 处 理 返 回 的 对 象 以 得 到 基础 的 数 
组 。 


.map() 方法 对 于 获得 或 设置 元 素 集 的 值 特别 有 用 。 请 思考 下 面 这 个 带 有 一 系列 复 选 
框 的 表单 : 


<form method="post" action=""> 
<fieldset> 
<div> 
<label for="two">2</label> 
<input type="checkbox" value="2" id="two" name="number[]"> 
</div> 
<div> 
«label for="four">4</label> 
<input type="checkbox" value="4" id="four" name="number [ ]"> 
</div> 
<div> 
«label for="six">6</label> 
<input type="checkbox" value="6" id="six" name="number[]"> 
</div> 
<div> 
<label for="eight">8</label> 
<input type="checkbox" value="8" id="eight" name="number[]"> 
</div> 
</fieldset> 
</form> 


DM [1 
我 们 能 够 获得 复 选 框 ID AMOS SHUR : 


$(':checkbox').map(function() { 
return this.id; 


3).get().join(', '); 


本 次 调用 的 结果 是 字符 串 : "two /foursix, eight", 


在 callback 函数 内 部 ，this 引用 每 次 迭代 的 当前 DOM stm, WAAR SIH 
数据 项 ， 或 者 是 要 被 插入 结果 集中 的 数据 项 的 数组 。 如 果 返 回 的 是 数组 ， 数 组 内 的 
元 素 会 被 插入 集合 中 。 如 果 画 数 返回 null 或 undefined， 则 不 会 插入 任何 元 素 。 


jQuery 通 万 - next() 方法 


实例 
查找 每 个 段落 的 下 一 个 同胞 元 素 ， 仅 选中 类 名 为 "selected" 的 段落 : 


$("p").next(".selected").css("background", "yellow"); 


定义 和 用 法 
next() 获得 匹配 元 素 集 合 中 每 个 元 素 紧 邻 的 同胞 元 素 。 如 果 提 供 选 择 器 ， 则 取 回 匹 
配 该 选择 器 的 下 一 个 同胞 元 素 。 


语法 


.hext( selector ) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.next() 方法 允许 我 们 搜索 DOM 
树 中 的 元 素 紧 跟 的 同胞 元 素 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 类 型 与 我 传递 到 $() 本 数 中 的 相同 。 如 果 紧 跟 的 
同胞 元 素 匹 配 该 选择 器 ， 则 会 留 在 新 构造 的 jQuery 对 象 中 ; 否则 会 将 之 排除 。 


请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2«/1li» 
«li class="third-item">list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


如 果 我 们 从 项 目 三 开始 ， 则 能 够 找到 其 后 出 现 的 元 素 : 


$('li.third-item').next().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 项 目 4 被 设置 为 红色 背景 。 由 于 我 们 没有 应 用 选择 器 表达 式 ， 
紧 跟 的 这 个 元 素 很 明确 地 被 包括 为 对 象 的 一 部 分 。 如 果 我 们 已 经 应 用 了 选择 器 ， 在 
包含 它 之 前 会 令 测 是 否 匹 配 。 


jQuery 通 万 - nextAll() 方法 


实例 
查找 第 一 个 div 之 后 的 所 有 类 名 ， 并 为 他 们 添 力 0 类 名 : 


$("div:first").nextAll().addClass("after"); 


定义 和 用 法 
nextAll() 获得 匹配 元 素 集合 中 每 个 元 素 的 所 有 跟随 的 同胞 元 素 ， 由 选择 器 筛选 是 可 
选 的 。 


语法 


.hextAll( selector. ) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery HR, .nextAll() 方法 允许 我 们 搜索 
DOM 树 中 的 元 素 跟 随 的 同胞 元 素 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 类 型 与 我 传递 到 $() BRON. MRK 
择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 来 对 它们 进行 筛选 。 


请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2«/1li» 
«li class="third-item">list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


如 果 我 们 从 项 目 三 开始 ， 那 么 我 们 能 够 找到 其 后 出 现 的 元 素 : 


$('li.third-item').nextAll().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 项 目 4 和 5 被 设置 为 红色 背景 。 由 于 我 们 没有 应 用 选择 器 表达 
式 ， 紧 跟 的 这 个 元 素 很 明确 地 被 包括 为 对 象 的 一 部 分 。 如 果 我 们 已 经 应 用 了 选择 
器 ， 在 包含 它 之 前 会 & it] ze e Pe Rd, 


jQuery 通 万 - nextUntil() 方法 


实例 


查找 跟随 <dt id="term-2"> 的 同胞 元 素 ， 直 到 下 一 个 <dt>， 然 后 将 它们 设置 为 红色 
背景 色 。 同 时 ， 找 到 跟随 <dt id="term-1"> 的 «dd» 同胞 元 素 ， 直 到 «dt id="term- 
3">， 并 为 它们 设置 蓝 色 文本 颜色 。 


$("#term-2").nextUntil("dt").css("background-color", "red"); 
var term3 = document.getElementById("term-3"); 
$("#term-1").nextUntil(term3, "dd").css("color", "blue"); 


定义 和 用 法 
nextUntil() 获得 每 个 元 素 所 有 跟随 的 同胞 元 素 ， 但 不 包括 被 选择 器 、DOM 节点 或 


已 传递 的 jQuery 对 象 匹配 的 元 素 。 
语法 1 


.hextUntil( selector , filter ) 


参数 Huh 
selector ”字符 串 值 ， 包 含 指示 在 何 处 停止 匹配 跟随 的 同胞 元 素 的 选择 器 表达 
式 。 


filter 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 
语法 2 


.hextUntil( element , filter ) 


参数 描述 
element ”指示 在 何 处 停止 匹配 跟随 的 同胞 元 素 的 DOM 节点 或 jQuery 对 象 。 


filter 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 

如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.nextUntil() 方法 允许 我 们 搜索 
DOM 树 中 的 元 素 跟 随 的 同胞 元 素 ， 当 遇 到 被 该 方法 的 参数 所 匹配 的 元 素 时 会 停止 
搜索 。 返 回 的 新 jQuery 对 象 包含 所 有 跟随 的 同胞 元 素 ， 但 不 包含 被 参数 匹配 的 元 


如 果 选 择 器 不 匹配 或 未 规定 选择 器 ， 则 会 选取 所 有 跟随 的 同胞 ; 如 果 不 提供 供 筛选 
的 选择 器 ， 则 该 方法 选取 的 元 素 与 .nextAll() 方法 相同 。 

对 于 jQuery 1.6, DOM 节点 或 jQuery 对 象 ， 而 不 是 选择 器 ， 可 传递 到 .nextUntil() 
方法 。 

该 方法 接受 可 选 的 选择 器 表达 式 作为 其 第 二 参数 。 如 果 指 定 该 参数 ， 则 将 通过 检测 
元 素 是 否 匹 配 该 选择 器 来 筛选 它们 。 


jQuery 38/7 - not() 方法 


实例 
从 包含 所 有 段落 的 集合 中 删除 id 为 "selected" 的 段落 : 


$("p").not("Zselected") 


定义 和 用 法 
not() 从 匹配 元 素 集合 中 删除 元 素 。 
语法 1 


.not(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


语法 2 


.hot( element ) 


参数 描述 
element 一 个 或 多 个 需要 从 匹配 集中 删除 的 DOM 元 素 。 
语法 3 


.hot( function(index) ) 


参数 TEX 
function(index) ”用 于 检测 集合 中 每 个 元 素 的 函数 。this 是 当前 DOM 元 素 。 


iE 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.not() 方法 会 用 匹配 元 素 的 子 集 
构造 一 个 新 的 jQuery 对 象 。 所 应 用 的 选择 器 会 检测 每 个 元 素 ; 不 匹配 该 选择 器 的 
元 素 会 被 包含 在 结果 中 。 


请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2</li> 
«li»list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


我 们 可 以 向 列表 项 集 应 用 该 方法 : 


$('li').not(':even').css('background-color', 'red'); 


这 次 调用 的 结果 是 将 项 目 2 和 4 设置 为 红色 背景 ， 这 是 因为 它们 不 匹配 选择 器 ( 回 
忆 一 下 ，:even 和 :odd 均 使 用 基于 0 的 index) 。 
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.not() 方法 的 第 二 个 版 本 允许 我 们 从 匹配 集中 删除 元 素 ， 假 设 我 们 之 前 已 经 通过 其 
他 手段 找到 了 这 些 元 素 。 例 如 ， 设 想 一 个 列表 已 经 将 id 应 用 到 其 中 一 个 项 目 中 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2«/1li» 
«li id="notli">list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


我 们 可 以 使 用 原生 的 JavaScript 函数 getElementByld() 读 取 第 三 个 列表 项 ， 然 后 
把 它 从 jQuery 对 象 中 删除 : 


$('1i').not(document.getElementById('notli')).css('background-colot 


«| em 











这 条 语句 改变 项 目 1、2、3 和 5 的 背景 色 。 我 们 可 以 用 更 简单 的 jQuery 表达 式 来 
-e 但 是 这 项 技术 在 比方 说 其 他 库 提 供 对 纯 DOM 节点 的 引用 时 会 很 
FH. 


对 于 jQuery 1.4, .not() 方法 能 够 采用 函数 作为 其 人 参数， 与 fiter) HAMA. AH 
数 返 回 true 的 元 素 会 被 排除 在 过 滤 集 之 外 ; 所 有 其 他 元 素 将 被 包含 其 中 。 


jQuery i % - offsetParent() 方法 


实例 
设置 类 名 为 item-a 的 i 元 素 的 最 近 定 位 父 元 素 的 背景 色 : 


$('li.item-a').offsetParent().css('background-color', 'red'); 


定义 和 用 法 

offsetParent() 获得 被 定位 的 最 近 祖 先 元 素 。 
语法 

.offsetParent() 

详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.offsetParent() 方法 允许 我 们 搜 
R DOM 树 中 元 素 的 祖先 ， 并 构造 一 个 由 最 近 的 定位 祖先 元 素 包 围 的 jQuery 对 象 。 

定位 元 素 指 的 是 ， 元 素 的 CSS position 属性 设置 为 relative、absolute 或 fixed。 在 
为 表演 动画 计算 偏 移 或 在 页 面 上 放置 对 象 时 ， 该 信息 会 很 有 用 你 。 


请 思考 带 有 基本 嵌 套 列表 的 页 面 ， 其 中 带 有 定位 元 素 : 


«ul class-"level-1"» 
«li class="item-i">I</li> 
«li class="item-ii" style="position: relative;">II 
<ul class="level-2"> 
«li class="item-a">A</1i> 
<li class="item-b">B 
<ul class="level-3"> 
<li class="item-1">1</1i> 
«li class="item-2">2</li> 
<li class="item-3">3</1i> 


</ul> 
</li> 
<li class="item-c">C</1i> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul> 


如 果 我 们 从 项 目 A 开始 ， 我 们 可 以 找到 其 定位 祖先 元 素 : 


$('li.item-a').offsetParent().css('background-color', 


这 会 改变 被 定位 的 项 目 1 的 背景 色 。 


'red'); 


jQuery 通 万 - parent() 方法 


实例 
查找 每 个 段落 的 带 有 "selected" 类 的 父 元 素 : 


$("p").parent(".selected") 


定义 和 用 法 
parent() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 父 元 素 ， 使 用 选择 器 进行 筛选 是 可 选 
的 。 


.parent(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.parent() 方法 允许 我 们 在 DOM 
树 中 搜索 这 些 元 素 的 父 元 素 ， 并 用 匹配 元 素 构 造 一 个 新 的 jQuery +8, .parents() 
和 .parent() 方法 类 似 ， 不 同 的 是 后 者 治 DOM 树 向 上 通 厉 单一 层级 。 

该 方法 接受 可 选 的 选择 器 表达 式 ， 与 我 们 向 $() 函数 中 传递 的 参数 类 型 相同 。 如 果 
应 用 这 个 选择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


«ul class-"level-1"» 
«li class="item-i">I</li> 
«li class="item-ii">II 
«ul class="level-2"> 
«li class-"item-a"»A«/li» 
«li class="item-b">B 
«ul class="level-3"> 
«li class="item-1">1</1i> 
«li class="item-2">2</li> 
«li class="item-3">3</1i> 


«/ul» 
</li> 
<li class="item-c">C</1i> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul> 


如 果 我 们 从 项 目 A 开始， 则 可 找到 其 父 元 素 : 


$('li.item-a').parent().css('background-color', 'red'); 


此 次 调用 的 结果 是 ， 为 level-2 列表 设置 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 
式 ， 父 元 素 很 自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 应 用 选择 器 ， 则 会 在 包含 元 素 之 
前 ， 检 测 元 素 是 否 匹 配 选 择 器 。 


jQuery 通 万 - parents() 方法 


实例 
查找 每 个 b 元 素 的 所 有 父 元 素 : 


$("b").parents() 


定义 和 用 法 
parents() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 祖先 元 素 ， 使 用 选择 器 进行 筛选 是 可 
选 的 。 


.parents(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.parents() 方法 允许 我 们 在 
DOM 树 中 搜索 这 些 元 素 的 祖先 元 素 ， 并 用 从 最 近 的 父 元 素 向 上 的 顺序 排列 的 匹配 
元 素 构 造 一 个 新 的 jQuery 对 象 。 元 素 是 按照 从 最 近 的 父 元 素 向 外 的 顺序 被 返回 
的 。.parents() 和 parent) 方法 类 似 ， 不 同 的 是 后 者 治 DOM 树 向 上 通 历 单一 层 
级 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 和 与 我 们 向 $() 画 数 中 传递 的 参数 类 型 相同 。 如 果 
应 用 这 个 选择 器 ， 则 将 通过 检测 元 素 是 否 匹配 该 选择 器 对 元 素 进 行 筛选。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


«ul class-"level-1"» 
«li class="item-i">I</li> 
«li class="item-ii">II 
«ul class="level-2"> 
«li class-"item-a"»A«/li» 
«li class="item-b">B 
«ul class="level-3"> 
«li class="item-1">1</1i> 
«li class="item-2">2</li> 
«li class="item-3">3</1i> 


«/ul» 
</li> 
<li class="item-c">C</1i> 
</ul> 
</li> 
<li class="item-iii">III</li> 


</ul> 


如 果 我 们 从 项 目 A 开始， 则 可 找到 其 祖先 元 素 : 


$('li.item-a').parents().css('background-color', 'red'); 


此 次 调用 的 结果 是 ，level-2 FR, MEA Il LAR level-1 列表 等 元 素 GG DOM 树 一 
路 向 上 直到 <html>) 设置 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 式 ， 父 元 素 很 自然 
地 成 为 了 对 象 的 一 部 分 。 如 果 已 应 用 选择 器 ， 则 会 在 包含 元 素 之 前 ， 检 测 元 素 是 否 
匹配 选择 器 。 由 于 我 们 未 应 用 选择 器 表达 式 ， 所 有 祖先 元 素 都 是 返回 的 jQuery 对 
象 的 组 成 部 分 。 如 果 已 应 用 选择 器 ， 则 只 会 包含 其 中 的 匹配 项 目 。 


jQuery 通 万 - parentsUntil() 方法 


实例 


查找 <li class="item-a"> 的 祖先 元 素 ， 直 到 «ul class="level-1">， 并 将 它们 设置 为 
红色 背景 。 同 时 ， 找 到 <li class="item-2"> 的 所 有 类 名 为 "yes" 的 祖先 元 素 ， 直 到 
«ul class="level-1">， 然 户 为 它们 设置 蓝 色 边框 : 


$("li.item-a").parentsUntil(".level-1") 
.css( "background-color", "red"); 


$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" ) 
.css("border", "3px solid blue"); 


定义 和 用 法 

parentsUntil() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 祖先 元 素 ， 直 到 (但 不 包括 ) 被 
选择 器 、DOM 节点 或 jQuery 对 象 匹 配 的 元 素 。 

语法 1 


.parentsUntil( selector , filter ) 


参数 描述 
可 选 。 字 符 串 值 ， 规 定 在 何 处 停止 对 祖先 元 素 进 行 匹配 的 选择 器 表 
达 式 


o 


selector 


filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 
语法 2 


.parentsUntil( element , filter ) 


参数 描述 


element E PUN ee ey aR ieee E 


filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.parentsUntil() 方法 允许 我 们 在 
DOM 树 中 搜索 这 些 元 素 的 祖先 元 素 ， 直 到 遇 到 被 选择 器 (传递 到 方法 中 的 参数 ) 
匹配 的 元 素 为 止 。 返 回 的 jQuery 对 象 包含 所 有 祖先 元 素 ， 但 不 包括 由 
.parentsUntil() 方法 规定 的 选择 器 匹配 的 那个 元 素 。 


如 果 不 匹 配 或 未 应 用 选择 器 ， 则 将 选区 所 有 祖先 元 素 ; 在 这 种 情况 下 ， 该 方法 选取 
的 元 素 与 未 提供 选择 器 时 的 .parents() 相同 。 

对 于 jQuery 1.6，DOM 节点 或 jQuery 对 象 ， 而 不 是 选择 器 ， 可 用 作 
.parentsUntil() 方法 的 第 一 个 参数 。 

该 方法 接受 可 选 的 选择 器 表达 式 作 为 其 第 二 参数 。 如 果 应 用 这 个 参数 ， 则 将 通过 检 
测 元 素 是 否 匹 配 该 选择 器 对 元 素 进行 筛选。 


jQuery 通 万 - prev() 方法 


实例 
检索 每 个 段落 ， 找 到 类 名 为 "selected" 的 前 一 个 同胞 元 素 : 


$("p").prev(".selected") 


定义 和 用 法 
prev() 获得 匹配 元 素 集合 中 每 个 元 素 紧 邻 的 前 一 个 同胞 元 素 ， 通 过 选择 器 进行 第 选 


是 可 选 的 。 


.prev(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.prev() 方法 允许 我 们 在 DOM 
树 中 搜索 这 些 元 素 的 前 一 个 同胞 元 素 ， 并 用 匹配 元 素 构 造 一 个 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 和 与 我 们 向 $() 画 数 中 传递 的 参数 类 型 相同 。 如 果 
应 用 这 个 选择 器 ， 则 将 通过 检测 元 素 是 否 匹配 该 选择 器 对 元 素 进 行 筛选。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul> 
«li»list item 1</1li> 
«li»list item 2«/1li» 
«li class="third-item">list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


如 果 我 们 从 第 三 个 项 目 开 始 ， 则 可 找到 该 元 素 之 间 的 紧邻 元 素 : 


$('li.third-item').prev().css('background-color', 'red'); 


此 处 调用 的 结果 是 将 项 目 2 设置 为 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 式 ， 前 一 
个 元 素 很 自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 应 用 选择 器 ， 则 会 在 包含 元 素 之 前 ， 
令 测 元 素 是 否 匹配 选择 器 。 


$("div:last").prevAll().addClass("before"); 


定义 和 用 法 
prevAll() 获得 当前 匹配 元 素 集 合 中 每 个 元 素 的 前 面 的 同胞 元 素 ， 使 用 选择 器 进行 得 
选 是 可 选 的 。 


语法 


.prevAll( selector ) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.prevAII() 方法 允许 我 们 在 DOM 
树 中 搜索 这 些 元 素 前 面 的 同胞 元 素 ， 并 用 匹配 元 素 构造 一 个 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 和 与 我 们 向 $() 画 数 中 传递 的 参数 类 型 相同 。 如 果 
应 用 这 个 选择 器 ， 则 将 通过 检测 元 素 是 否 匹配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul> 
«li»list item 1«/li» 
«li»list item 2«/1li» 
«li class="third-item">list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


如 果 我 们 从 第 三 个 项 目 开 始 ， 则 可 找到 该 元 素 之 间 的 同胞 元 素 : 


$('li.third-item').prevAll().css('background-color', 'red'); 


此 处 调用 的 结果 是 将 项 目 2 和 项 目 1 设置 为 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 
式 ， 这 些 前 面 的 元 素 很 自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 点 用 选择 器 ， 则 会 在 包 
合 元 素 之 前 ， 检 测 这 些 元 素 是 否 匹 配 选 择 器 。 


jQuery 通 万 - prevUntil() 方法 


实例 


查找 «dt id="term-2"> 之 前 的 同胞 元 素 ， 直 到 前 一 个 <dt>， 并 将 它们 设置 为 红色 。 
同时 ， 查 找 <dt id="term-3"> 前 面 的 <dd> 同胞 ， 直 到 «dt id="term-1">， 并 把 它们 
设置 为 蓝 色 文本 : 


$("#term-2").prevUntil("dt").css("background-color", "red"); 
var termi = document.getElementById('term-1'); 
$("#term-3").prevUntil(term1, "dd").css("color", "green"); 


定义 和 用 法 
prevUntil() 方法 获得 当前 匹配 元 素 集 合 中 每 个 元 素 的 前 面 的 同胞 元 素 ， 但 不 包括 被 
选择 器 、DOM 节点 或 jQuery 对 象 匹 配 的 元 素 。 
语法 1 
.prevUntil( selector , _filter_) 
参数 描述 
oll 可 选 。 字 符 串 值 ， 包 含 指示 在 何 处 停止 匹配 前 方 同胞 元 素 的 选择 器 
iA x. 


filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 
语法 2 


.prevUntil(_element_, filter.) 


参数 描述 
可 选 。 指 示 在 何人 处 停止 匹配 前 方 同胞 元 素 的 DOM 节点 或 jQuery 对 


filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.prevUntil() 方法 允许 我 们 在 
DOM 树 中 搜索 这 些 元 素 前 面 的 同胞 元 素 ， 直 到 遇 到 被 选择 器 (传递 到 方法 中 的 参 
数 ) 匹配 的 元 素 为 止 。 返 回 的 jQuery 新 对 象 包含 所 有 前 面 的 同胞 元 素 ， 但 不 包括 
由 .prevUntil() 方法 规定 的 选择 器 匹配 的 那个 元 素 ; 所 返回 元 素 的 顺序 是 从 最 近 的 
同胞 元 素 到 最 远 的 那个 。 


如 果 不 匹 配 或 未 应 用 选择 器 ， 则 将 选区 所 有 前 面 的 同胞 元 素 ; 在 这 种 情况 下 ， 该 方 
法 选取 的 元 素 与 未 提供 选择 器 时 的 .prevAll() 相同 。 

对 于 jQuery 1.6, DOM 节点 或 jQuery 对 象 ， 而 不 是 选择 器 ， 可 用 作 .prevUntil() 
方法 的 第 一 个 参数 。 


该 方法 接受 可 选 的 选择 器 表达 式 作 为 其 第 二 参数 。 如 果 应 用 这 个 参数 ， 则 将 通过 检 
测 元 素 是 否 匹配 该 选择 器 对 元 素 进 行 筛选 。 


jQuery 通 万 - siblings() 方法 


实例 
查找 每 个 p 元 素 的 所 有 类 名 为 "selected" 的 所 有 同胞 元 素 : 


$("p").siblings(".selected") 


定义 和 用 法 
siblings() 获得 匹配 集合 中 每 个 元 素 的 同胞 ， 通 过 选择 器 进行 筛选 是 可 选 的 。 
语法 


.Siblings(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.siblings() 方法 允许 我 们 在 
DOM 树 中 搜索 这 些 元 素 的 同胞 元 素 ， 并 用 匹配 元 素 构 造 一 个 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 和 与 我 们 向 $() 函数 中 传递 的 参数 类 型 相同 。 如 果 
应 用 这 个 选择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul> 
«li»list item 1</1li> 
«li»list item 2</li> 
«li class="third-item">list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


如 果 我 们 从 第 三 个 项 目 开 始 ， 则 可 找到 该 元 素 的 同胞 元 素 : 


$('li.third-item').siblings().css('background-color', 'red'); 


此 处 调用 的 结果 是 将 项 目 1. 2. 405 的 背景 设置 为 红色 。 设置 为 红色 背景 。 
于 我 们 未 应 用 选择 器 表达 式 ， 所 有 同胞 元 素 很 自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 
应 用 选择 器 ， 则 只 会 包含 四 个 列表 中 的 匹配 的 项 目 。 


原始 元 素 不 包含 在 同胞 元 素 中 ， 当 我 们 打算 找到 DOM 树 的 特定 层级 上 的 所 有 元 素 
时 ， 记 住 一 点 很 重要 。 


jQuery 通 历 - slice() 方法 


实例 
选中 所 有 段落 ， 然 后 将 所 选 内 容 缩减 为 只 包含 第 一 和 第 二 个 段落 : 


$("p").slice(0, 2).wrapInner(""); 


定义 和 用 法 
slice() 把 匹配 元 素 集 合 缩减 为 指定 的 指数 范围 的 子 集 。 
语法 


.Slice(_selector_,_end_) 


参数 描述 


selector ET 0 的 整数 值 ， 指 示 开 始 选取 元 素 的 位 置 。 如 果 是 负数 ， 则 指示 
从 集合 末端 开始 的 偏 移 量 。 


基于 0 的 整数 值 ， 指 示 结 束 选 取 元 素 的 位 置 。 如 果 是 负数 ， 则 指示 
end 从 集合 末端 开始 的 偏 移 量 。 如 果 省 略 ， 则 选取 范围 会 在 集合 末端 结 


o 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.slice() 方法 用 匹配 元 素 的 子 集 
构造 一 个 新 的 jQuery 对 象 。 已 点 用 的 index 参数 集合 中 其 中 一 个 元 素 的 位 置 ; 如 
果 省 略 end 参数 ， 则 index 之 后 的 所 有 的 所 有 元 素 都 会 包含 在 结果 中 。 


请 思考 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
«li»list item 1</li> 
«li»list item 2</li> 
«li»list item 3«/li» 
«li»list item 4«/li» 
«li»list item 5«/li» 
«/ul» 


我 们 可 以 向 列表 项 集合 应 用 该 方法 : 


$('li').slice(2).css('background-color', 'red'); 


此 次 调用 的 结果 是 项 目 3、4 和 5 的 背景 被 设置 为 红色 。 请 注意 ， 已 应 用 的 index 
参数 基于 需 ， 引 用 的 是 jQuery 对 象 中 元 素 的 位 置 ， 而 非 DOM 树 中 的 。 


end 参数 允许 我 们 更 进一步 地 限制 选取 范围 。 上 比如 : 


$('li').slice(2, 4).css('background-color', 'red'); 


现在 ， 只 有 项 目 3 和 4 会 被 选取 。 再 次 说 明 ，index BRFSS ; 范围 会 延伸 到 
(但 不 包含 ) 指定 的 index。 


负 的 指数 
jQuery 的 .slice() 方法 模仿 了 JavaScript 数组 对 象 的 .slice() 方法 。 它 所 模仿 的 特 


性 之 一 是 向 start 或 end 参数 传递 负数 的 能 力 。 如 果 提 供 负 数 ， 则 指示 的 是 从 集合 
结尾 开始 的 一 个 位 置 ， 而 非 从 开头 。 例 如 : 


$('li').slice(-2, -1).css('background-color', 'red'); 


这 次 ， 只 有 列表 项 4 会 变 红 ， 这 是 因为 该 项 目 是 介 于 从 结尾 计数 的 二 (2) 与 从 结尾 
计数 的 一 (-1) 的 之 间 的 范围 中 的 唯一 项 目 。 


jQuery 参考 手册 - 数据 
jQuery 数据 操作 函数 


这 些 方法 允许 我 们 将 指定 的 DOM 元 素 与 任意 数据 相关 联 。 


函数 
.clearQueue() 
.data() 
jQuery.data() 
.dequeue() 
jQuery.dequeue() 
jQuery.hasData() 
.queue() 
jQuery.queue() 
.removeData() 


jQuery.removeData() 


参阅 


参考 手册 : jQuery 队列 控制 


描述 
从 队列 中 删除 所 有 未 运行 的 项 目 。 
存储 与 匹配 元 素 相 关 的 任意 数据 。 
存储 与 指定 元 素 相 关 的 任意 数据 。 
从 队列 最 前 端 移 除 一 个 队列 函数 ， 并 执行 它 。 
从 队列 最 前 端 移 除 一 个 队列 函数 ， 并 执行 它 。 
存储 与 匹配 元 素 相关 的 任意 数据 。 
显示 或 操作 匹配 元 素 所 执行 画 数 的 队列 。 
显示 或 操作 匹配 元 素 所 执行 本 数 的 队列 。 
移 除 之 前 存放 的 数据 。 
移 除 之 前 存放 的 数据 。 


jQuery 通 万 - clearQueue() 方法 


实例 
清空 队列 : 


$("div").clearQueue(); 
定义 和 用 法 
clearQueue() 方法 从 序列 中 删除 仍 未 运行 的 所 有 项 目 。 
语法 


.clearQueue(_queueName_) 


Bel 25 字符 串 值 ， 包 含 序列 的 名 称 。 默 认 是 fx, 标准 的 效果 序 
详细 说 明 


当 调 用 .clearQueue() 方法 时 ， 序 列 中 未 被 执行 的 所 有 男 数 都 会 被 从 序列 中 删除 。 
如 果 不 使 用 参数 ， 则 .clearQueue() M fx (标准 效果 序列 ) 中 删除 剩余 的 函数 。 在 
这 种 方式 中 ， 它 类 似 于 .stop(true)。 不 过 ，.stop() 方法 只 用 于 动画 ， 而 
.clearQueue() 也 可 用 于 删除 通过 .queue() 方法 添加 到 通用 jQuery 序列 的 任何 范 
数 。 


jQuery 数据 - data() 方法 


实例 
向 元 素 附加 数据 ， 然 后 取 回 该 数据 : 


$("#btni").click(function(){ 
$("div").data("greeting", "Hello World"); 


3); 
$("#btn2").click(function(){ 
alert($("div").data("greeting")); 


Te 

定义 和 用 法 

data() 方法 向 被 选 元 素 附加 数据 ， 或 者 从 被 选 元 素 获 取 数 据 。 
从 元 素 返 回 数 据 


从 被 选 元 素 中 返回 附加 的 数据 。 
语法 


$( selector ).data( name ) 


参数 描述 
可 选 。 规 定 要 取 回 的 数据 的 名 称 。 如 果 没有 规定 名 称 ， 则 该 方法 将 以 


name 对 象 的 形式 从 元 素 中 返回 所 有 存储 的 数据 。 
向 元 素 附 加 数据 

向 被 选 元 素 附 加 数据 。 

语法 


$(_selector_).data(_name_,_value_) 


参数 描述 
要 设置 的 数据 的 名 称 。 


name 必 定 
。 规 定 要 设置 的 数据 的 值 。 


=I 
value Wr iB 


(5H FA xt RAL TC SAP SN HE 


使 用 带 有 名 称 / 值 对 的 对 象 向 被 选 元 素 添 加 数据 。 
语法 


$(_selector_).data(_object_) 


参数 描述 
object 必需 。 规 定 包 含 名 称 / 值 对 的 对 象 。 


jQuery 数据 - jQuery.data() 方法 


实例 
向 元 素 附加 数据 ， 然 后 取 回 该 数据 : 


$("#btn1").click(function(){ 
$("div").data("greeting", "Hello World"); 


H); 

$("#btn2").click(function(){ 
alert($("div").data("greeting")); 

3); 


定义 和 用 法 
data() 方法 向 被 选 元 素 附加 数据 ， 或 者 从 被 选 元 素 获取 数据 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 .data() 更 加 方便 。 


从 元 素 返 回 数据 
从 被 选 元 素 中 返回 附加 的 数据 。 
语法 


$( selector ).data( name ) 


参数 描述 
可 选 。 规 定 要 取 回 的 数据 的 名 称 。 如 果 没有 规定 名 称 ， 则 该 方法 将 以 


Dame 对 象 的 形式 从 元 素 中 返回 所 有 存储 的 数据 。 
向 元 素 附 加 数据 
向 被 选 元 素 附 加 数据 。 


语法 


$(_selector_).data(_name_,_value_) 


参数 描述 
name 必需 。 规 定 要 设置 的 数据 的 名 称 。 
value 必需 。 规 定 要 设置 的 数据 的 值 。 


使 用 对 象 向 元 素 附 加 数据 


使 用 带 有 名 称 / 值 对 的 对 象 向 被 选 元 素 添 加 数据 。 
语法 


$(_selector_).data(_object_) 


参数 描述 
object 必需 。 规 定 包 含 名 称 / 值 对 的 对 象 。 


jQuery i87 - dequeue() 方法 


实例 
使 用 dequeue() 终止 一 个 自 定 义 的 队列 西数 : 


$("div").queue(function () { 
$(this).toggleClass("red"); 
$(this).dequeue(); 

3); 


定义 和 用 法 
dequeue() 方法 为 匹配 元 素 执行 序列 中 的 下 一 个 汞 数 。 
语法 


. dequeue(_queueName_) 


参数 HE SR 
queueName a 字符 串 值 ， 包 含 序列 的 名 称 。 上 默认 是 fx, 标准 的 效果 序 
详细 说 明 


当 调 用 .dequeue() 时 ， 会 从 序列 中 删除 下 一 个 函数 ， 然 后 执行 它 。 该 范 数 反 过 来 会 
(直接 或 间接 地 ) 引发 对 .dequeue() 的 调用 ， 这 样 序列 才能 继续 下 去 。 


jQuery 通 万 - jQuery.dequeue() 方法 


实例 
使 用 dequeue() 终止 一 个 自 定 义 的 队列 西数 : 


$("div").queue(function () { 
$(this).toggleClass("red"); 
$( this) .dequeue(); 

3); 


定义 和 用 法 
dequeue() 方法 为 匹配 元 素 执行 序列 中 的 下 一 个 函数 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 dequeue() 更 加 方便 。 
语法 

.dequeue(. queueName. ) 


参数 描述 
queueName Pito FREE, CARIE. MAE fx, 标准 的 效果 序 
All, 
详细 说 明 


当 调 用 .dequeue() 时 ， 会 从 序列 中 删除 下 一 个 画 数 ， 然 后 执行 它 。 该 范 数 反 过 来 会 
(直接 或 间接 地 ) 引发 对 dequeue) 的 调用 ， 这 样 序 列 才 能 继续 下 去 。 


jQuery 通 万 - hasData() 方法 


实例 
在 元 素 上 设置 数据 ， 然 后 查看 hasData 的 结果 : 


$(function(){ 
var $p = jQuery("p"), p = $p[0]; 
$p.append(jQuery.hasData(p)+" "); /* false */ 
jQuery.data(p, "testing", 123); 
$p.append(jQuery.hasData(p)+" "); /* true */ 
jQuery.removeData(p, "testing"); 
$p.append(jQuery.hasData(p)+" "); /* false */ 

3); 


定义 和 用 法 
hasData() 方法 检测 元 素 是 否 拥有 与 之 相关 的 任何 jQuery 数据 。 
语法 


jQuery.hasData( element ) 


参数 描述 
element 可 选 。 需 要 检查 其 数据 的 DOM TR. 
详细 说 明 


jQuery.hasData() 方法 检测 元 素 当 前 是 否 拥 有 通过 使 用 jQuery.data() 设置 的 任何 
值 。 如 果 没 有 数据 与 元 素 相 关 〈 根 本 不 存在 数据 对 象 或 者 数据 对 象 为 空 ) ， 则 该 方 
法 返回 false ; 否则 返回 true。 


jQuery.hasData(element) 的 主要 优势 是 ， 在 不 存在 数据 对 象 的 情况 下 ， 不 会 创建 并 
将 数据 对 象 与 元 素 进 行 关 联 。 相 反 地 ，jQuery.data(element) 总 是 向 调用 者 返回 数 
据 对 象 ， 如 果 之 前 数据 对 象 不 存在 ， 则 会 创建 它 。 


jQuery 58/5 - queue() 方法 
实例 


显示 队列 的 长 度 : 


function showIt() { 
var n = div.queue("fx"); 
$("span").text( n.length ); 
setTimeout(showIt, 100); 


定义 和 用 法 
queue() 方法 显示 或 操作 在 匹配 元 素 上 执行 的 函数 队列 。 
语法 


.queue( queueName ) 


参数 描述 


queueName 了 


操作 队列 


queue() 方法 操作 在 匹配 元 素 上 执行 的 画 数 队列 。 
语法 


.queue(. queueName , newQueue ) 


参数 描述 


queueName 2 reer egy CNN S 


详细 说 明 


每 个 元 素 均 可 拥有 一 到 多 个 由 jQuery 添加 的 男 数 队列 。 在 大 多 数 应 用 程序 中 ， 只 
使 用 一 个 队列 (名 为 fx) 。 队 列 运 行 在 元 素 上 异步 地 调用 动作 序列 ， 而 不 会 终止 程 
序 执行 。 典 型 例子 时 调用 元 素 上 的 多 个 动 男方 法 。 例 如 : 


$('4foo').slideUp().fadeIn(); 


当 这 条 语句 执行 时 ， 元 素 会 立即 开始 其 滑动 动画 ， 但 是 淡 入 过 渡 被 置 于 fx 队列 ， 只 
有 当 滑 动 过 渡 完 成 后 才 会 被 调用 。 


.queue() 方法 允许 我 们 直接 对 这 个 豆 数 队列 进行 操作 。 调 用 带 有 回调 男 数 的 
.queue() 方法 特别 有 用 ; 它 人 允许 我 们 在 队列 末端 放置 一 个 新 函数 。 


这 个 特性 与 动画 方法 提供 回调 范 数 类 似 ， 但 是 无 需 在 动画 执行 时 设置 回调 酌 数 。 
$('4foo').slideUp(); 
$('4foo').queue(function() { 
alert('Animation complete.'); 


$(this).dequeue(); 
3); 


等 价 于 : 


$('4foo').slideUp(function() { 
alert('Animation complete.'); 


T); 


d aur un 0 函数 时 ， 我 们 应 当 确 保 最 终 调用 了 .dequeue()， 这 样 
一 个 排队 的 函数 才能 执行 。 


例子 1 
对 自 定义 函数 进行 队列 操作 : 


$(document.body).click(function () { 

$("div").show("slow"); 

$("div").animate((left:'4-200'),2000); 

$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 

3); 

$("div").animate({left:'-=200'},500); 

$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 


}); 
$("div").slideUp(); 
3): 


例子 2 
设置 队列 数组 来 删除 队列 : 


$("#start").click(function () { 
$("div").show("slow"); 
$("div").animate({left: '+=200'},5000); 
$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 
1); 
$("div").animate({left:'-=200'},1500); 
$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 
1); 
$("div").slideUp(); 
3); 


$("#stop").click(function () { 
$("div").queue("fx", []); 
$("div").stop(); 

3); 


jQuery 5&5 - jQuery.queue() 方法 
实例 


显示 队列 的 长 度 : 


function showIt() { 
var n = div.queue("fx"); 
$("span").text( n.length ); 
setTimeout(showIt, 100); 


定义 和 用 法 
queue() 方法 显示 或 操作 在 匹配 元 素 上 执行 的 画 数 队列 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 .queue() 更 加 方便 。 


语法 


.queue(. queueName ) 


参数 描述 
可 选 。 字 符 串 值 ， 包 含 序列 的 名 称 。 上 默认 是 fx, 标准 的 效果 序 
列 。 


queueName 


操作 队列 


queue() 方法 操作 在 匹配 元 素 上 执行 的 画 数 队列 。 
语法 


.queue(. queueName , newQueue ) 


参数 描述 
queueName | FE» 字符 串 值 ， 包 含 序列 的 名 称 。 默 认 是 fx, 标准 的 效果 序 
列 。 


详细 说 明 
每 个 元 素 均 可 拥有 一 到 多 个 由 jQuery 添加 的 函数 队列 。 在 大 多 数 应 用 程序 中 ， 只 


使 用 一 个 队列 (名 为 fx) 。 队 列 运 行 在 元 素 上 异步 地 调用 动作 序列 ， 而 不 会 终止 程 
序 执行 。 典 型 例子 时 调用 元 素 上 的 多 个 动画 方法 。 例 如 : 


$('4foo').slideUp().fadeIn(); 
当 这 条 语句 执行 时 ， 元 素 会 立即 开始 其 滑动 动画 
有 当 滑 动 过 半 渡 完成 后 才 会 被 调用 。 


.queue() 方法 人 允许 我 们 直接 对 这 个 画 数 队列 进行 操作 。 调 用 带 有 回调 函数 的 
.queue() 方法 特别 有 用 ; 它 人 允许 我 们 在 队列 末端 放置 一 个 新 豆 数 。 


这 个 特性 与 动画 方法 提供 回调 画 数 类 似 ， 但 是 无 需 在 动画 执行 时 设置 回调 孙 数 。 


， 但 是 淡 入 过 渡 被 置 于 fx 队列 ， 只 


$('4foo').slideUp(); 

$('4foo').queue(function() { 
alert('Animation complete.'); 
$(this).dequeue(); 

3); 


等 价 于 : 


$('4foo').slideUp(function() { 
alert('Animation complete.'); 


3) 


idus 当 通 过 queue() iis WOO, Feil SRA YS .dequeue(), ix 
— “SHER AEE BEIT. 


例子 1 
对 自 定义 函数 进行 队列 操作 : 


$(document.body).click(function () { 

$("div").show("slow"); 

$("div").animate((left:'4-200'),2000); 

$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 

3); 

$("div").animate({left:'-=200'},500); 

$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 


}); 
$("div").slideUp(); 
3): 


例子 2 
设置 队列 数组 来 删除 队列 : 


$("#start").click(function () { 
$("div").show("slow"); 
$("div").animate({left: '+=200'},5000); 
$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 
1); 
$("div").animate({left:'-=200'},1500); 
$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 
1); 
$("div").slideUp(); 
3); 


$("#stop").click(function () { 
$("div").queue("fx", []); 
$("div").stop(); 

3); 


jQuery 数据 - removeData() 方法 


实例 
从 元 来 中 删除 之 前 添加 的 数据 : 


$("#btn2").click(function(){ 
$("div").removeData("greeting"); 
alert("Greeting is: " + $("div").data("greeting")); 


3) 


定义 和 用 法 
removeData() 方法 删除 之 前 通过 data() 方法 设置 的 数据 。 
语法 

$(_selector_).removeData(_name_) 


参数 描述 


可 选 。 规 定 要 删除 的 数据 的 名 称 。 如 果 没 有 规定 名 称 ， 该 方法 将 从 被 
选 元 素 中 删除 所 有 已 存储 的 数据 。 


name 


jQuery 数据 - jQuery.removeData() 方法 


实例 
从 元 素 中 删除 之 前 添加 的 数据 : 


$("#btn2").click(function(){ 
$("div").removeData("greeting"); 
alert("Greeting is: " + $("div").data("greeting")); 


3); 


定义 和 用 法 
removeData() 方法 删除 之 前 通过 data() 方法 设置 的 数据 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 removeData() 更 加 方便 。 


语法 


$( selector ).removeData( name ) 


可 选 。 规 定 要 删除 的 数据 的 名 称 。 如 果 没 有 规定 名 称 ， 该 方法 将 从 被 
选 元 素 中 删除 所 有 已 存储 的 数据 。 


name 


jQuery 参考 手册 - DOM 元 素 方 法 


jQuery DOM 元 素 方法 


函数 描述 
.get() 获得 由 选择 器 指定 的 DOM 元 素 。 
.index() 返回 指定 元 素 相 对 于 其 他 指定 元 素 的 index 位 置 。 
.Size() 返回 被 jQuery 选择 器 匹配 的 元 素 的 数量 。 


toArray() 以 数组 的 形式 返回 jQuery 选择 器 匹配 的 元 素 。 


jQuery DOM 元 素 方 法 - get() 方法 


实例 
获得 第 一 个 p 元 素 的 名 称 和 值 : 


$("button").click(function(){ 
x-$("p").get(0); 
$("div").text(x.nodeName + ": " + x.innerHTML); 


3) 


定义 和 用 法 
get() 方法 获得 由 选择 器 指定 的 DOM 元 素 。 
语法 


$( selector ).get( index ) 


参数 描述 
index 可 选 。 规 定 获取 哪个 匹配 元 素 (通过 index 编号 ) 。 


EF 


jQuery DOM 元 素 方 法 - index() 方法 


实例 
获得 第 一 个 p 元 素 的 名 称 和 值 : 


$("1i").click(function(){ 
alert($(this).index()); 
3); 


定义 和 用 法 

index() 方法 返回 指定 元 素 相 对 于 其 他 指定 元 素 的 index 位 置 。 
这 些 元 素 可 通过 jQuery 选择 器 或 DOM 元 素来 指定 。 

注释 : 如 果 未 找到 元 素 ，index() 将 返回 -1。 


第 一 个 匹配 元 素 的 index， 相 对 于 同胞 元 素 
获得 第 一 个 匹配 元 素 相 对 于 其 同胞 元 素 的 index wE., 
语法 


$( selector ).index() 


Tose index， 相 对 于 选择 器 


获得 元 素 相对 于 选择 器 的 index (Wis. 
该 元 素 可 以 通过 DOM 元 素 或 jQuery 选择 器 来 指定 。 


语法 


$( selector ).index( element ) 
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参数 描述 
可 选 。 规 定 要 获得 index 位 置 的 元 素 。 可 以 是 DOM 元 素 或 jQuery 
element 选择 器 
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jQuery DOM 元 素 方 法 - size() 方法 


实例 
输出 被 jQuery 选择 器 匹配 的 元 素 的 数量 : 


$("button").click(function(){ 
alert($("li").size()); 


定义 和 用 法 
size() 方法 返回 被 jQuery 选择 器 匹配 的 元 素 的 数量 。 
语法 


$(_selector_).size() 


jQuery DOM 元 素 方 法 - toArray() 方法 


实例 
将 ji 元 素 转 换 为 数组 ， 然 后 输出 该 数组 元 素 的 innerHTML : 


$("button").click(function(){ 
x=$("1i").toArray() 
for (1=0;i<x.length; i++) 


{ 
alert(x[i].innerHTML); 


+); 
定义 和 用 法 
toArray() 方法 以 数组 的 形式 返回 jQuery 选择 器 匹配 的 元 素 。 
语法 


$( selector ).toArray() 


jQuery 参考 手册 - 核心 


jQuery DHA 


jQuery() eS NFR, 其 中 包含 了 用 于 匹配 元 素 集 合 的 CSS 
选择 器 。 


a GX SIS E Sg + SHE DA SAN dz gm o 
jQuery.noConflict() S. SNS SE SE $ 的 控制 权 让 渡 给 第 一 个 实现 它 的 


jQuery 核心 - jQuery() 方法 
实例 


找 出 所 有 属于 div 元 素 的 子 元 素 的 p 元 素 ， 然 后 设置 其 边框 属性 : 


$("div > p").css("border", "1px solid gray"); 


定义 和 用 法 
jQuery() 方法 接受 一 个 字符 串 ， 其 中 包含 了 用 于 匹配 元 素 集 合 的 CSS 选择 器 。 
jQuery() 范 数 有 三 种 语法 : 


语法 1 

接受 一 个 字符 串 ， 其 中 包含 了 用 于 匹配 元 素 集 合 的 CSS 选择 器 : 
jQuery(_selector_, [_context_]) 

详细 用 法 

语法 2 

使 用 原始 HTML 的 字符 串 来 创建 DOM 元 素 : 
jQuery( html ,[ ownerDocument ]) 

详细 用 法 


语法 3 
绑 定 一 个 在 DOM 文档 载 和 完成 后 执行 的 酌 数 : 


jQuery( callback ) 


详细 用 法 


jQuery( selector, [ context ] ) 
该 语法 有 以 下 几 种 用 法 : 
用 法 1 : 设置 选择 器 环境 
语法 
jQuery(_selector_, [_context_]) 


默认 情况 下 ， 选 择 器 从 文档 根部 对 DOM 进行 搜索 。 不 过 ， 可 以 为 $() 设置 可 选 的 
context 参数 。 


例如 ， 如 果 我 们 希望 在 一 个 callback 中 搜索 一 个 元 素 ， 可 以 限定 下 面 的 搜索 : 
实例 


$("div.foo").click(function() { 
$("span", this).addClass("bar"); 
3); 


由 于 我 们 已 经 将 span 选择 器 限定 到 this 这 个 环境 中 ， 只 有 被 点 击 元 素 中 的 span 
会 得 到 附加 的 class。 


在 内 部 ， 选 择 器 环境 是 通过 .find() 方法 实现 的 ， 因 此 $("span", this) 等 价 于 
$(this).find("span"), 

jQuery HR ODRE SE XB b iX SRS MAN. jQuery FAARF PESE, m 
者 说 都 是 在 以 某 种 方式 使 用 这 个 函数 。 这 个 函数 最 基本 的 用 法 就 是 向 它 传递 一 个 表 
达 式 (通常 由 CSS 选择 器 组 成 ) ， 然 后 根据 这 个 表达 式 来 查找 所 有 匹配 的 元 素 。 


默认 情况 下 , 如 果 没 有 指定 context 参数 ，$() 将 在 当前 的 HTML document 中 查找 
DOM TR ; 如 果 指 定 了 context 参数 ， 如 一 个 DOM 元 素 集 或 jQuery 对 象 ， 那 就 
会 在 这 个 context 中 查找 。 在 jQuery 1.3.2 以 后 ， 其 返回 的 元 素 顺 序 等 同 于 在 
context 中 出 现 的 先后 顺序 。 


语法 


jQuery( element ) 


该 加 数 允许 我 们 通过 使 用 以 其 他 方式 找到 的 DOM 元 素来 创建 jQuery 对 象 。 该 功能 
通常 的 用 法 是 ， 对 已 经 通过 this 关键 字 传 递 到 callback 函数 的 元 素 调用 jQuery 的 


实例 


$("div.foo").click(function() { 
$(this).slideUp(); 
3); 


此 例会 在 元 素 被 点 击 时 使 用 滑动 动画 对 其 进行 隐藏 。 由 于 处 理 程序 接受 的 this 关键 
词 中 的 被 点 击 项 目 是 纯 的 DOM 元 素 ， 因 此 在 对 其 调用 jQuery 的 方法 之 前 ， 必 须 用 
jQuery 对 象 包装 该 元 素 。 


这 个 函数 也 可 以 接收 XML 文档 和 Window 对 象 〈 虽 然 它 们 不 是 DOM TR) 作为 
有 效 的 参数 。 


当 XML 数据 从 Ajax 调用 中 返回 后 ， 我 们 可 以 使 用 $() 函数 通过 jQuery 对 象 包装 该 
数据 。 2 co 我 们 就 可 以 使 用 .find() 和 其 他 DOM 38/5 75 ARRE XML 结构 
中 单个 元 素 。 


用 法 3 : 克隆 jQuery 对 象 
语法 
jQuery(_ jQuery object ) 


当 以 参数 的 形式 向 $0 HEE jQuery 对 象 后 ， 会 创建 一 个 该 对 象 的 副本 。 与 初始 
对 象 一 样 ， 新 的 jQuery 对 象 引 用 相同 的 DOM 元 素 。 


用 法 4 : 返回 空 的 集合 
语法 
jQuery() 


对 于 jQuery 1.4， 调 用 无 参数 的 jQuery) 方法 会 返回 空 的 jQuery 集合 。 在 之 前 版 
本 的 jQuery 中 ， 这 样 会 返回 包含 document 节点 的 集合 。 


jQuery( html, [ ownerDocument ] ) 


该 语法 有 以 下 几 种 用 法 : 
用 法 1 : 创建 新 的 元 素 
语法 
jQuery( html ,[ ownerDocument. ]) 


你 可 以 传递 一 个 手写 的 HTML 字符 串 ， 或 者 由 某 些 模板 引擎 或 插件 创建 的 字符 串 ， 
也 可 以 是 通过 AJAX 加 载 过 来 的 字符 串 。 但 是 在 你 创建 input 元 素 的 时 会 有 限制 ， 
可 以 参考 第 二 个 示例 。 


当然 这 个 字符 串 可 以 包含 斜 杠 (比如 一 个 图 像 地 址 )， 还 有 反 斜 枉 。 当 你 创建 单个 元 
素 时 ， 请 使 用 闭合 标签 或 XHTML 格式 。 例 如 ， 创 建 一 个 span, ALARA $" 
<span/>") 或 $("<span></span>") ， 但 不 推荐 $("<span>")。 在 jQuery 中 ， 这 个 语 
法 等 同 于 $(document.createElement("span")). 


如 果 以 参数 的 形式 将 字符 串 传递 给 $()，jQuery 会 检查 字符 串 是 否 是 HTML (H 
如 ， 字 符 串 某 些 位 置 存在 标签 ) 。 如 果 不 是 ， 则 把 字符 串 解 释 为 选择 器 表达 式 ， 请 
见 上 面 的 讲解 。 但 如 果 字 符 串 是 HTML 片段 ， 则 jQuery 试图 创建 由 该 HTML 片段 
描述 的 DOM 元 素 。 然 后 会 创建 并 返回 一 个 引用 这 些 DOM 元 素 的 jQuery 对 象 : 


实例 


$("«p id="test">My <em>new</em> text</p>").appendTo("body"); 


如 果 HTML 片段 比 不 含 属性 的 简单 标签 更 复杂 ， 如 同上 面 例子 中 的 HTML， 那 么 元 
素 实 际 的 创建 过 程 是 由 浏览 器 的 innerHTML 机 制 完 成 的 。 具 体 地 讲 ，jQuery 会 创 
建新 的 «div» 元 素 ， 然 后 为 传 入 的 HTML 片段 设置 元 素 的 innerHTML 属性 。 当 参 
数 只 是 简单 的 标签 ， 比 如 $("<img />") 3} $("<a></a>"), jQuery 会 通过 内 生 的 
JavaScript createElement() 函数 来 创建 元 素 。 


要 确保 跨 平 台 兼 容 性 ， 片 段 的 结构 必须 良好 。 能 够 包含 其 他 元 素 的 标签 必须 成 对 出 
现 〈 带 有 关闭 标签 ) : 


$("<a href="http://jquery.com"></a>"); 


^ii, jQuery 也 人 允许 类 似 XML 的 标签 语法 : 


$("<a/>"); 


无 法 包含 其 他 元 素 的 标签 可 以 关闭 ， 也 可 以 不 关闭 : 


$("<img />"); 
$("<input>") ; 


用 法 2 : 设置 属性 和 事件 
语法 


jQuery( html , props ) 





对 于 jQuery 1.4， 我 们 可 以 向 第 二 个 参数 传递 一 个 属性 映射 。 该 参数 接受 能 够 传递 
给 .attr() 方法 的 属性 的 超 集 。 此 外 ， 可 以 传递 任意 的 事件 类 型 ， 并 可 以 调用 下 面 的 
jQuery 方法 : val, css, html, text, data, width, height, or offset. 


SEH, Internet Explorer 不 允许 你 创建 Wa 元 素 并 改变 其 类 型 ; 您 必须 使 用 例如 " 
<input type="checkbox" />" 来 规定 类 

实例 

头 

创建 一 个 «input» 元 素 ， 同 时 设 定 type 属性 、 属 性 值 ， 以 及 一 些 事件 。 


$("<input>", { 

type: "text", 

val: "Test", 

focusin: function() { 
$(this).addClass("active"); 

}, 

focusout: function() ( 
$(this).removeClass("active"); 


} 
}).appendTo("form"); 


jQuery( callback ) 


允许 你 绑 定 一 个 在 DOM HRA TAATIRAA 
PA BLE VE FH [s] $(document).ready() —#, RAAKSHAN, EE 5 


中 所 有 需要 在 DOM 加 载 完 成 时 执行 的 其 他 $() 操作 符 都 包装 到 其 中 来 。 尽 管 从 技 
术 上 来 说 ， 这 个 本 数 是 可 链接 的 ， 但 真正 以 这 种 方式 链接 的 情况 并 不 多 。 


例子 
当 DOM 加 载 完成 后 ， 执 行 其 中 的 画 数 : 
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$(function(){ 
// 文档 就 绪 
3); 
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jQuery 核心 - noConflict() 方法 


实例 
使 用 noConflict() 方法 为 jQuery 变量 规定 新 的 名 称 : 


var jq-$.noConflict(); 


定义 和 用 法 

noConflict() 方法 让 渡 变 量 $ BY jQuery 控制 权 。 

该 方法 释放 jQuery xt $ 变量 的 控制 。 

该 方法 也 可 用 于 为 jQuery 变量 规定 新 的 自 定义 名 称 。 

提示 : 在 其 他 JavaScript 库 为 其 函数 使 用 $ 时 ， 该 方法 很 有 用 。 


语法 


jQuery.noConflict( removeAll ) 


removeAll 布尔 值 。 指 示 是 否 人 允许 彻底 将 jQuery 变量 还 原 。 
说 明 


许多 JavaScript 库 使 用 $ (EA WRK SH, jQuery 也 一 样 。 在 jQuery rh, $ 4x 
仅 是 jQuery 的 别名 ， 因 此 即使 不 使 用 $ 也 能 保证 所 有 功能 性 。 假 如 我 们 需要 使 用 
jQuery 之 外 的 另 一 JavaScript 库 ， 我 们 可 以 通过 调用 $.noConflict() 向 该 库 返 回 控 
制 权 : 


<script type="text/javascript" src="other_lib.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 


<script type="text/javascript"> 
$.noConflict(); 
// 使 用 另 一 个 库 的 $ 的 代码 
</script> 


可 以 与 .ready() 方法 结合 起 来 使 用 ， 来 为 jQuery 对 象 起 别名 ， 这 项 技术 非常 有 
效 : 


<script type="text/javascript" src="other_lib.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 


<script type="text/javascript"> 
$.noConflict(); 
jQuery(document).ready(function($) { 
// 使 用 jQuery $ 的 代码 
3); 
// 使 用 其 他 库 的 $ 的 代码 


</script> 


此 外 ， 通 过 向 该 方法 传递 参数 true， 我 们 可 以 将 $ 和 jQuery 的 控制 权 都 交还 给 原 
来 的 库 。 用 之 前 请 考虑 清楚 ! 

这 是 相对 于 简单 的 noConflict 方法 更 极端 的 版 本 ， 因 为 这 将 完全 重新 定义 jQuery. 
这 通常 用 于 一 种 极端 的 情况 ， 比 如 你 想 要 将 jQuery 嵌入 一 个 高 度 冲 突 的 环境 。 注 
意 : 调用 此 方法 后 极 有 可 能 导致 插件 失效 。 


实例 

例子 1 

将 $ 引用 的 对 象 映 射 回 原始 的 对 象 : 
jQuery.noConflict(); 


jQuery("div p").hide(); // 使 用 jQuery 


$("content").style.display - "none"; // 使 用 其 他 库 的 $() 


例子 2 


恢复 使 用 别名 $， 然 后 创建 并 执行 一 个 函数 ， 在 这 个 函数 的 作用 域 中 仍然 将 $ 作为 
jQuery 的 别名 来 使 用 。 在 这 个 函数 中 ， 原 来 的 $ 对 象 是 无 效 的 。 这 个 画 数 对 于 大 多 
数 不 依 赖 于 其 他 库 的 插件 都 十 分 有 效 : 


jQuery.noConflict(); 


(function($) { 
$(function() { 


// 使 用 $ 作为 jQuery 别名 的 代码 
}); 
})(jQuery); 


. // 其 他 用 $ 作为 别名 的 库 的 代码 


例子 3 


可 以 将 jQuery.noConflict() 与 简写 的 ready 结合 ， 使 代码 更 紧凑 : 


jQuery.noConflict()(function(){ 


// 使 用 jQuery 的 代码 


. // 其 他 库 使 用 $ 做 别名 的 代码 


例子 4 
创建 一 个 新 的 别名 用 以 在 接 下 来 的 库 中 使 用 jQuery 对 象 : 
var j = jQuery.noConflict(); 


j("div p").hide();  // 基于 jQuery 的 代码 


$("content").style.display = "none"; // 基于 其 他 库 的 $() 代码 
例子 5 
完全 将 jQuery 移 到 一 个 新 的 命名 空间 : 


var dom = {}; 
dom.query = jQuery.noConflict(true); 


结果 : 


dom.query("div p").hide(); // # jQuery 的 代码 
$("content").style.display = "none"; // 另 一 个 库 $() 的 代码 


jQuery("div > p").hide(); // 另 一 个 版 本 jQuery 的 代码 


jQuery 参考 手册 - 属性 


jQuery 属性 
下 面 列 出 的 这 些 方法 设置 或 返回 元 素 的 CSS 相关 属性 。 
属性 描述 
ee 在 版 本 1.10 中 被 弃 用 。 包 含 传 递 给 jQuery() 的 原始 上 下 
jquery 包含 jQuery 版 本 号 。 
jQuery.fx.interval ”改变 以 毫秒 计 的 动画 速率 。 
jQuery.fx.off 全 局 禁用 /启用 所 有 动画 。 


, 表示 不 同 浏览 器 特性 或 漏洞 的 属性 集合 (用 于 jQuery 内 部 
jQuery.support 使 用 ) 


o 


length 包含 jQuery 对 象 中 的 元 素数 目 。 


jQuery context 属性 


实例 
SME RM : 

$("div").append("<p>" + $("div").context + "</p>") 

.append("«p»" + $("div",document.body).context.nodeName + "</p>"); 
— SS SSS -AA 
= . N 
context 属性 在 jQuery version 1.10 中 被 弃 用 。 
context 属性 含有 被 传递 到 jQuery 的 原始 上 下 文 ， 可 能 是 DOM 节点 上 下 文 ， 如 果 
未 传递 节点 ， 则 是 document 上 下 文 。 


语法 


context 


jQuery jquery 属性 
实例 
输出 当前 正在 运行 的 jQuery 版 本 : 


$("button").on("click", Ffunction(){ 
var version = $().jquery; 
alert("You are running jQuery version: " + version); 


4); 


定义 和 用 法 
jquery 属性 返回 的 字符 串 包 含 jquery 的 版 本 号 。 
语法 


$(). jquery 


jQuery jQuery.fx.interval 属性 


实例 
以 较 少 的 帧 数 来 运行 «div» 元 素 的 动画 : 


$("4toggle").on("click",function()( 
$("div").toggle(5000); 
3); 


$("#interval").on("click", function(){ 
jQuery.fx.interval = 500; 


}); 


定义 和 用 法 

jQuery.fx.interval 属性 用 于 改变 以 毫秒 计 的 动画 运行 速率 。 可 操作 该 属性 来 调整 动 
画 运 行 的 每 秒 帧 数 。 

默认 值 是 13 毫秒 。 该 属性 常用 于 修改 动画 运行 的 每 秒 帧 数 。 

降低 这 个 值 能 够 使 动画 在 更 快 的 浏览 器 中 运行 得 更 流畅 ， 但 这 么 做 也 行 会 影响 性 


能 。 
提示 : 由 于 jQuery 使 用 一 个 全 局 的 间隔 时 间 ， 为 了 使 该 属性 生效 ， 动 画 应 该 不 在 
运行 或 者 首先 停止 所 有 动画 。 


注释 : 该 属性 在 支持 requestAnimationFrame 属性 的 浏览 器 中 无 效 ， 上 比如 Google 
Chrome 11。 


语法 
jQuery .fx.interval = milliseconds ; 
属性 描述 


milliseconds 必需 。 规 定 以 毫秒 计 的 动画 运行 速率 。 上 默认 是 13 SP. 


jQuery jQuery.fx.off 属性 
实例 


切换 动画 开关 : 


$("#true").click(function(){ 
jQuery.fx.off = true; 


3); 
$("#false").click(function(){ 
jQuery.fx.off = false; 


$("#toggle").click(function(){ 


$("div").toggle("slow"); 
3): 


定义 和 用 法 
jQuery.fx.off 属性 用 于 对 所 有 动画 进行 全 局 禁用 或 和 启 


它 人 允许 动画 正常 运行 。 当 设置 为 true 时 ， 将 禁用 所 有 动画 方法 ， 
会 把 元 素 设 置 为 其 最 后 的 状态 ， 而 不 是 显示 效果 。 


提示 : 如 需 简 化 代码 ， 可 以 使 用 $.fx.off 来 代替 jQuery.fx.off。 
语法 


jQuery.fx.off = true|false; 


属性 描述 
true 规定 应 该 禁用 z) Ejo 
false 默认 。 规定 应 该 BAA, 


jQuery jQuery.support 属性 


实例 
测试 浏览 器 是 否 能 创建 XMLHttpRequest 对 象 : 


$(document).ready(function(){ 
$("p").html("This browser can create XMLHttpRequest object: " + : 
3): 





定义 和 用 法 
jQuery.support 属性 包含 表示 不 同 浏览 器 特性 或 漏洞 的 属性 集 。 
此 属性 主要 用 于 jQuery 的 内 部 使 用 。 


语法 


jQuery.support._propvalue_ 


属性 描述 


必需 。 规 定 要 测试 的 功能 。 这 些 测 试 包括 : ajax boxModel 
changeBubbles checkClone checkOn cors cssFloat 
hrefNormalized  htmlSerialize  leadingWhitespace 
noCloneChecked  noCloneEvent opacity  optDisabled 


optSelected  scriptEval() style  submitBubbles 
tbody 


propvalue 


jQuery length 属性 
实例 


输出 <li> 元 素 的 数目 : 


$("button").click(function(){ 
alert($("li").length); 


定义 和 用 法 
length 属性 包含 jQuery 对 象 中 元 素 的 数目 。 
语法 


$(selector).length 


W3School AngularJS 教 程 


来 源 : AngularJS 教程 
整理 : 飞龙 


AngularJS 简介 


AngularJS 是 一 个 JavaScript 框架 。 它 可 通过 «script» 标签 添加 到 HTML 页 面 。 
AngularJS 通过 789 扩展 了 HTML， 且 通过 表达 式 绑 定 数据 到 HTML. 


AngularJS 是 一 个 JavaScript 框架 


AngularJS 是 一 个 JavaScript 框架 。 它 是 一 个 以 JavaScript 编写 的 库 。 
AngularJS 是 以 一 个 JavaScript 文件 形式 发 布 的 ， 可 通过 script 标签 添加 到 网 页 
中 : 


<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 





我 们 建议 把 脚本 放 在 <body> 元 素 的 底部 。 
这 会 提高 网 页 加 载 速度 ， 因 为 HTML 加 载 不 受制 于 脚本 加 载 


AngularJS 扩展 了 HTML 


AngularJS 通过 ng-directives 扩展 了 HTML. 

ng-app 指令 定义 一 个 AngularJS 应 用 程序 。 

ng-model 指令 把 元 素 值 〈 比 如 输入 域 的 值 ) 绑 定 到 应 用 程序 。 
ng-bind 指令 把 应 用 程序 数据 绑 定 到 HTML 视图 。 


AngularJS 实例 


<!DOCTYPE html» 
«html» 
<body> 
<div ng-app=""> 
<p> 在 输入 框 中 尝试 输入 : </p> 
<p> 姓 名 : <input type="text" ng-model="name"></p> 
<p ng-bind="name"></p> 
</div> 
«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


</body> 
</html> 


实例 讲解 : 

当 网 页 加 载 完毕 ，AngularJS 自动 开启 。 

ng-app 18$ 2€ AngularJS, «div» 元 素 是 AngularJS 应 用 程序 的 "所 有 者 "。 
ng-model 指 邻 把 输入 域 的 值 绑 定 到 应 用 程序 变量 name. 

ng-bind 指令 把 应 用 程序 变量 name 绑 定 到 某 个 段落 的 innerHTML。 





9 如 果 您 移 除 了 ng-app fa, HTML 将 直接 把 表达 式 显 示 出 来 ， 不 会 去 计 
算 表 达 陈 的 结果 。 





什么 是 AngularJS ? 


"AngularJS 是 专门 为 应 用 程序 设计 的 HTML。" 


AngularJS 使 得 开发 现代 的 单一 页 面 应 用 程序 (SPAs : Single Page Applications) 
变 得 更 加 容易 。 


AngularJS 把 应 用 程序 数据 绑 定 到 HTML 元 素 。 
AngularJS 可 以 克隆 和 重复 HTML 元 素 。 
AngularJS 可 以 隐藏 和 显示 HTML 元 素 。 
AngularJS 可 以 在 HTML 元 素 " 背 后 "添加 代码 。 
AngularJS 支持 输入 验证 。 


AngularJS #4 


正如 您 所 看 到 的 ，AngularJS 指令 是 以 ng 作为 前 级 的 HTML 属性 。 
ng-init 指令 初始 化 AngularJS 应 用 程序 变量 。 


AngularJS 实例 


«div ng-app="""ng-init="firstName='John'"> 
<p> 姓 名 为 «span ng-bind="firstName"></span></p> 
</div> 
HTML5 人 允许 扩展 的 (自制 的 ) 属性 ， 以 data- 开头 。 
AngularJS 属性 以 ng- 开头 ， 但 是 您 可 以 使 用 data-ng- 来 让 网 页 对 HTML5 有 
效 。 
带 有 有 效 的 HTMLS5 : 


AngularJS 实例 


<div data-ng-app-"" data-ng-init="firstName='John'"> 
<p> 姓 名 为 «span data-ng-bind="firstName"></span></p> 


</div> 


AngularJS 表达 式 


AngularJS 表达 式 写 在 双 大 括号 内 : **。 

AngularJS 表达 式 把 数据 绑 定 到 HTML， 这 与 ng-bind 指令 有 异曲同工 之 妙 。 
AngularJS 将 在 表达 式 书 写 的 位 置 "输出 "数据 。 

AngularJS 表达 式 很 像 JavaScript RAW: 它们 可 以 包含 文字 、 运 算 符 和 变量 。 
实例 10 或 undefined undefined 


AngularJS 实例 


«IDOCTYPE html» 
«html» 
<body> 


«div ng-app=""> 
<p> 我 的 第 一 个 表达 式 : {{ 5 + 5 }}</p> 
</div> 


<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


</body> 
</html> 


加 IE 生生 于 到 





AngularJS 表达 式 


AngularJS 使 用 表达 式 把 数据 绑 定 到 HTML. 


AngularJS 表达 式 


AngularJS 表达 式 写 在 双 大 括号 内 : ** 

AngularJS 表达 式 把 数据 绑 定 到 HTML， 这 与 ng-bind 指 人 有 异曲同工 之 妙 。 
AngularJS 将 在 表达 式 书写 的 位 置 "输出 "数据 。 

AngularJS 表达 式 很 像 JavaScript 表达 式 : 它们 可 以 包含 文字 、 运 算 符 和 变量 。 
实例 10 或 undefined undefined 


AngularJS 数字 


AngularJS 数据 就 像 JavaScript 数字 : 
AngularJS 实例 


<div ng-app="" ng-init="quantity=1;cost=5"> 
<p> 总 价 : {{ quantity * cost }}</p> 


</div> 
使 用 ng-bind 的 相同 实例 : 
AngularJS 实例 


«div ng-app=""" ng-init="quantity=1;cost=5"> 
<p> 总 价 : «span ng-bind="quantity * cost"></span></p> 


</div> 


® 使 用 ng-init 不 是 很 常见 。 您 将 在 控制 器 一 章 中 学 习 到 一 个 更 好 的 初始 化 
数据 的 方式 。 


AngularJS 字符 串 


AngularJS 字符 串 就 像 JavaScript 字符 串 : 


AngularJS 实例 


«div ng-app=""" ng-init="firstName='John'; lastName='Doe'"> 
<p> 姓 名 : {{ firstName + " " + lastName }}</p> 
</div> 


使 用 ng-bind 的 相同 实例 : 


AngularJS 实例 


«div ng-app-"" ng-init="firstName='John'; lastName='Doe''"> 
<p> 姓 名 : <span ng-bind="firstName + ' ' + lastName"></span></p> 
</div> 


ST eeE=ee 


AngularJS 对 象 


AngularJS 对 象 就 像 JavaScript 对 象 : 
AngularJS 实例 


«div ng-app-"" ng-init-'"person-[(firstName:'John',lastName:'Doe'j"» 
<p> 姓 为 {{ person.lastName }}</p> 
</div> 
| p — ———— Se 
使 用 ng-bind 的 相同 实例 : 





AngularJS 实例 


«div ng-app-"" ng-init-'person-[(firstName:'John',lastName:'Doe'j"» 
<p> 姓 为 «span ng-bind-"person.lastName"»«/span»«/p» 


</div> 


«] m o | 








AngularJS 数组 


AngularJS 数组 就 像 JavaScript 数组 : 
AngularJS 实例 


<div ng-app="" ng-init="points=[1,15,19,2,40]"> 
<p> 第 三 个 值 为 {{ points[2] }}</p> 


</div> 
使 用 ng-bind 的 相同 实例 : 
AngularJS 实例 


«div ng-app=""" ng-init="points=[1,15,19,2,40]"> 
<p> 第 三 个 值 为 «span ng-bind="points[2]"></span></p> 


</div> 


AngularJS 184 


AngularJS 通过 被 称 为 指令 的 新 属性 来 扩展 HTML. 


AngularJS 184 


AngularJS 指令 是 扩展 的 HTML 属性 ， 带 有 前 级 ng-。 
ng-app 指令 初始 化 一 个 AngularJS 应 用 程序 。 
ng-init 指令 初始 化 应 用 程序 数 气 。 

ng-model 指令 把 应 用 程序 数据 绑 定 到 HTML 元 素 。 


AngularJS 实例 


«div ng-app-"" ng-init-'firstName-'John'"» 
<p> 在 输入 框 中 尝试 输入 : </p> 
<p> 姓 名 : <input type="text" ng-model="firstName"></p> 
<p> 你 输入 的 为 : {{ firstName }}</p> 


</div> 


ng-app 指令 告诉 AngularJS, «div» 元 素 是 AngularJS 应 用 程序 的 "所 有 者 "。 
一 个 网 页 可 以 包含 多 个 运行 在 不 同 元 素 中 的 AngularJS 应 用 程序 。 


数据 绑 定 


上 面 实例 中 的 ** 表 达 式 是 一 个 AngularJS 数据 绑 定 表达 式 。 
AngularJS 中 的 数据 绑 定 ， 同 步 了 AngularJS 表达 式 与 AngularJS 数据 。 
** 是 通过 ng-model-"firstName"** 进行 同步 。 


在 下 一 个 实例 中 ， 两 个 文本 域 是 通过 两 个 ng-model 指令 同步 的 : 


AngularJS 实例 


«div ng-appz"" ng-init="quantity=1; price=5"> 
<h2> 价 格 计算 器 </h2> 


数量 : <input type="number" ng-model="quantity"> 
价格 : «input type="number" ng-model="price"> 


<p><b> 总 价 : </b> {{ quantity * price }}</p> 


</div> 


q 使 用 ng-init 不 是 很 常见 。 您 将 在 控制 器 一 章 中 学 习 到 一 个 更 好 的 初始 化 
数据 的 方式 。 


重复 HTML 元 素 


ng-repeat 指令 会 重复 一 个 HTML 元 素 : 


AngularJS 实例 


«div ng-app="" ng-init="names=['Jani', 'dege', 'Kai']"> 
<p> 使 用 ng-repeat 来 循环 数组 </p> 
<ul> 
<li ng-repeat="x in names"> 
Db x }} 
</li> 
</ul> 
<div> 


ng-repeat 指令 用 在 一 个 对 象 数组 上 : 


AngularJS 实例 


«div ng-app=""" ng-init="names=[ 
{name:'Jani',country: 'Norway'}, 
{name: 'Hege', country: 'Sweden'}, 
{name: 'Kai', country: 'Denmark'}]"> 


<p> 循 环 对 象 : </p> 
<ul> 
<li ng-repeat="x in names"> 
{{ x.name + ', ' + x.country }} 
</li> 
</ul> 


</div> 





9 AngularJS 完美 支持 数据 库 的 CRUD (增加 Create、 读 取 Read、 更 新 
Update, miER&Delete) 应 用 程序 。 
把 实例 中 的 对 象 想象 成 数据 库 中 的 记录 。 











ng-app 指令 
ng-app 指令 定义 了 AngularJS 应 用 程序 的 根 元 素 。 


ng-app 指 今 在 网 页 加 载 完 毕 时 会 自动 引导 (自动 初始 化 ) 应 用 程序 。 


稍 后 您 将 学 习 到 ng-app 如 何 通过 一 个 值 (比如 ng-app="myModule") 连接 到 代码 
模块 。 


ng-init #83 
ng-init #8 4% AngularJS 应 用 程序 定义 了 初始 值 。 


通常 情况 下 ， 不 使 用 ng-init。 您 将 使 用 一 个 控制 器 或 模块 来 代替 它 。 
答 后 您 将 学 习 更 多 有 关 控 制 器 和 模块 的 知识 。 


ng-model #83 


ng-model 184 48% HTML 元 素 到 应 用 程序 数据 。 
ng-model 指令 也 可 以 : 


为 应 用 程序 数据 提供 类 型 验证 (number, email, required) 。 
为 应 用 程序 数据 提供 状态 (invalid. dirty, touched, error) 。 
为 HTML 元 素 提 供 CSS 类 。 

绑 定 HTML 元 素 到 HTML RŽ, 


ng-repeat 184 


ng-repeat 指令 对 于 集合 中 (Mah) 的 每 个 项 会 克隆 一 次 HTML 元 素 。 


AngularJS 控制 器 


AngularJS 控制 器 控制 AngularJS 应 用 程序 的 数据 。 
AngularJS 控制 器 是 常规 的 JavaScript 对 象 。 


AngularJS 控制 器 


AngularJS 应 用 程序 被 控制 器 控制 。 

ng-controller 指令 定义 了 应 用 程序 控制 器 。 

控制 器 是 JavaScript 对 象 ， 由 标准 的 JavaScript 对 象 的 构造 范 数 创建 。 
控制 器 的 $scope 是 控制 器 所 指向 的 应 用 程序 /HTML 元 素 。 


AngularJS 实例 


«div ng-app="" ng-controller="personController"> 


名 : <input type="text" ng-model="person.firstName"><br> 
yt: <input type="text" ng-model="person.lastName"><br> 
<br> 

姓名 : {{person.firstName + " " + person. lastName}} 


</div> 
<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe" 
3 
j 


«/script» 
实例 讲解 : 
AngularJS 应 用 程序 由 ng-app 定义 。 应 用 程序 在 <div> 内 运行 。 
ng-controller 指令 把 控制 器 命名 为 object. 


函数 personController 是 一 个 标准 的 JavaScript 34 RA 4438 Ex 24, 
控制 器 对 象 有 一 个 属性 : $scope.person。 


person 对 象 有 两 个 属性 : firstName 和 lastName。 
ng-model 指令 绑 定 输入 域 到 控制 器 的 属性 (firstName 和 lastName) 。 


控制 器 属性 
上 面 的 实例 演示 了 一 个 带 有 lastName 和 firstName 这 两 个 属性 的 控制 器 对 象 。 
控制 器 也 可 以 把 函数 作为 对 象 属性 : 


AngularJS 实例 


«div ng-app="" ng-controller="personController"> 


名 : <input type="text" ng-model="person.firstName"><br> 
yt: <input type="text" ng-model-"person.lastName"»«br» 
<br> 

姓名 : {{person.fullName( )}} 


</div> 


<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe", 
fullName: function() { 


var X; 
X = $scope.person; 
return x.firstName + " " + x.lastName; 
j 
3 
} 
</script> 


控制 器 方法 


控制 器 也 可 以 带 有 方法 : 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 


名 : «input type="text" ng-model="person.firstName"><br> 
yt: «input type="text" ng-model-"person.lastName"»«br» 
«br» 


姓名 : {{fullName()}} 
</div> 


<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe", 


H 
$scope.fullName = function() { 
var X; 
X = $scope.person; 
return x.firstName + " " + x.lastName; 
H 
} 
</script> 


外 部 文件 中 的 控制 器 


在 大 型 的 应 用 程序 中 ， 通 常 是 把 控制 器 存储 在 外 部 文件 中 。 


只 需要 把 «script» 标签 中 的 代码 复制 到 名 为 personControllerjs 的 外 部 文件 中 即 
可 : 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 

4 : «input type="text" ng-model-"person.firstName"»«br» 
yt: «input type="text" ng-model-"person.lastName"»«br» 
«br» 

姓名 : {{person.firstName + " " + person.lastName}} 


«/div» 


«script src="personController.js"></script> 


另 一 个 实例 


下 面 的 实例 我 们 将 创建 一 个 新 的 控制 器 文件 : 


function namesController($scope) { 
$scope.names = [ 
{name:'Jani', country: 'Norway'}, 
{name: 'Hege', country: 'Sweden'}, 
{name:'Kai',country: 'Denmark'} 


1; 


然后 在 应 用 程序 中 使 用 这 个 控制 器 文件 : 
AngularJS 实例 


«div ng-app=""" ng-controller="namesController"> 


<ul> 
<li ng-repeat="x in names"> 
{{ x.name + ', ' + x.country }} 
</li> 
</ul> 


</div> 


<script src="namesController.js"></script> 


AngularJS 过 滤器 


过 滤器 可 以 使 用 一 个 管道 字符 (|) 添加 到 表达 式 和 指令 


AngularJS 过 滤器 


AngularJS 过 滤器 可 用 于 转换 数据 : 


it Eas 描述 
currency 格式 化 数字 为 货币 格式 。 
filter 从 数组 项 中 选择 一 个 子 集 。 
lowercase 格式 化 字符 串 为 小 写 。 
orderBy 根据 某 个 表达 式 排 列 数组 。 
uppercase 格式 化 字符 串 为 大 写 。 


向 表达 式 添 加 过 TIAN 


(下 面 的 两 个 实例 ， 我 们 将 使 用 前 面 章节 中 提 到 的 person 控制 器 ) 
uppercase 过 滤器 格式 化 字符 串 为 大 写 : 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 
<p> 姓 名 为 (( person.lastName | uppercase }}</p> 


«/div» 
lowercase 过 滤器 格式 化 字符 串 为 小 写 : 


AngularJS 实例 


<div ng-app="" ng-controller-"personController""» 
<p> 姓 名 为 {{ person.lastName | lowercase }}</p> 


</div> 


currency 过 滤器 


currency 过 滤器 格式 化 数字 为 货币 格式 : 
AngularJS 实例 


«div ng-app=""" ng-controller="costController"> 


数量 : <input type="number" ng-model="quantity"> 
价格 : <input type="number" ng-model="price"> 


<p> 总 价 = {{ (quantity * price) | currency }}</p> 


</div> 


向 指令 添加 过 滤器 


过 滤器 可 以 通 道 字符 (D 和 一 个 过 滤器 添加 到 指令 中 。 
orderBy 过 滤器 根据 某 个 表达 式 排列 数组 : 


AngularJS 实例 


<div ng-app="" ng-controller="namesController"> 


<p> 循 环 对 象 : </p> 
<ul> 
«li ng-repeat="x in names | orderBy: 'country'"> 
{{ x.name + ', ' + x.country }} 
</li> 
</ul> 


<div> 


过 滤 输 入 


输入 过 滤器 可 以 通过 一 个 管道 字符 (|) 和 一 个 过 滤器 添加 到 指令 中 ， 该 过 滤器 后 跟 
一 个 冒号 和 一 个 模型 名 称 。 


filter 过 滤器 从 数组 中 选择 一 个 子 集 : 
AngularJS 实例 


<div ng-app="" ng-controller="namesController"> 


<p> 输 入 过 滤 : </p> 
<p><input type="text" ng-model="name"></p> 


<ul> 
«li ng-repeat="x in names | filter:name | orderBy:'country'"» 
{{ (x.name | uppercase) + ', ' + x.country }} 
</li> 
</ul> 


</div> 


E | 


AngularJS XMLHttpRequest 


$http 是 AngularJS 中 的 一 个 核心 服务 ， 用 于 读 取 远程 服务 器 的 数据 。 


读 取 JSON 文件 


以 下 是 存储 在 web 服 务 器 上 的 JSON 文件 : 
http://www.w3cschool.cc/try/angularjs/data/Customers JSON.php 


[ 

{ 

"Name" : "Alfreds Futterkiste", 
"City" : "Berlin", 

"Country" : "Germany" 

}, 

{ 

"Name" : "Berglunds snabbk?p", 
Cityt = "bule?". 

"Country" : "Sweden" 

}, 

{ 

"Name" : "Centro comercial Moctezuma", 
"City" : “México D.F.", 
"Country" : "Mexico" 

}, 

{ 

"Name" : "Ernst Handel", 

Es : "Graz", 

"Country" : "Austria" 

}, 

{ 

"Name" : "FISSA Fabrica Inter. Salchichas S.A.", 
"City" : "Madrid", 

"Country" : "Spain" 

}, 

{ 

"Name" : "Galeria del gastrónomo", 
"City" : "Barcelona", 

"Country" : "Spain" 

}, 

1 

"Name" : "Island Trading", 
"City" : "Cowes", 

"Country" : "UK" 

}, 

{ 


"Name" : "K?niglich Essen", 


"City" : "Brandenburg", 


"Country" : "Germany" 

}, 

{ 

"Name" : "Laughing Bacchus Wine Cellars", 
"City" : "Vancouver", 
"Country" : "Canada" 

}, 

{ 

"Name" : "Magazzini Alimentari Riuniti", 
"City" : "Bergamo", 
"Country" : "Italy" 

}, 

d 

"Name" : "North/South", 
"City" : "London", 
"Country" : "UK" 

}, 

{ 

"Name" : "Paris spécialités", 
"City" : "Paris", 
"Country" : "France" 

}, 

t 

"Name" : "Rattlesnake Canyon Grocery", 
"City" : "Albuquerque", 
"Country" : "USA" 

}, 

{ 

"Name" : "Simons bistro", 
"City" : "K?benhavn", 
"Country" : "Denmark" 

F 

{ 

"Name" : "The Big Cheese", 
"City" : "Portland", 
"Country" : "USA" 

}, 

{ 

"Name" : "Vaffeljernet", 
Gade tsa 
"Country" : "Denmark" 

}, 

1 

"Name" : "Wolski Zajazd", 
"City" : "Warszawa", 
"Country" : "Poland" 

} 

] 


AngularJS $http 


AngularJS $http 是 一 个 用 于 读 取 web 服 务 器 上 数据 的 服务 。 
$http.get(url) 是 用 于 读 取 服务 器 数据 的 函数 。 


AngularJS 实例 


<div ng-app="" ng-controller="customersController"> 


<ul> 
<li ng-repeat="x in names"> 
{{ x.Name + ', ' + x.Country }} 
</li> 
</ul> 


</div> 


<script> 

function customersController($scope,$http) { 
$http.get("http://www.w3cschool.cc/try/angular js/data/Customer: 
.success(function(response) {$scope.names = response; }); 


} 


</script> 
EEE Ss 
应 用 解析 : 
AngularJS 应 用 通过 ng-app 定义 。 应 用 在 <div> 中 执行 。 





ng-controller 指令 设置 了 controller 对 象 名 。 

KIZ customersController 是 一 个 标准 的 JavaScript 对 象 构造 器 。 
控制 器 对 象 有 一 个 属性 : $scope.names。 

$http.get() 从 web 服 务 器 上 读 取 静态 JSON 数据 。 


服务 器 数据 文件 为 : 
http://www.w3cschool.cc/try/angularjs/data/Customers JSON.php。 


4 MAR Atm A JSON 数据 时 ，$scope.names Z 75 —7 2X8, 


9 以 上 代码 也 可 以 用 于 读 取 数据 库 数据 。 





AngularJS 表格 


ng-repeat 指令 可 以 完美 的 显示 表格 。 


在 表格 中 显示 数据 


使 用 angular 显示 表格 是 非常 简单 的 : 
AngularJS 实例 


<div ng-app="" ng-controller="customersController"> 


<table> 
<tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 
</tr> 
</table> 


</div> 

<script> 

function customersController($scope,$http) { 
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers . 
.success(function(response) {$scope.names = response; )); 

} 


</script> 


加 


使 用 CSS 样式 


为 了 让 页 面 更 加 美观 ， 我 们 可 以 在 页 面 中 使 用 CSS : 





CSS 样式 


<style> 

table, th , td { 
border: 1px solid grey; 
border-collapse: collapse; 
padding: 5px; 


} 
table tr:nth-child(odd) { 
background-color: #f1f1f1; 


} 
table tr:nth-child(even) { 
background-color: Zffffff; 


} 
</style> 


排序 显示 


如 果 需 要 对 表格 进行 排序 ， 我 们 可 以 添加 orderBy 过 滤器 : 
AngularJS 实例 


<table> 
<tr ng-repeat="x in names | orderBy : 'Country'"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 
</tr> 
</table> 


Try it Yourself ? 


使 用 uppercase 滤器 


如 果 字 母 要 转换 为 大 写 ， 可 以 添加 uppercase 过 滤器 : 
AngularJS 实例 


<table> 
<tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country | uppercase}}</td> 
</tr> 
</table> 


AngularJS SQL 


在 前 面 章节 中 的 代码 也 可 以 用 于 读 取 数 据 库 中 的 数据 。 
使 用 PHP 从 MySQL 中 获取 数据 
AngularJS 实例 


«div ng-app=""" ng-controller="customersController"> 


<table> 
<tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 
</tr> 
</table> 


</div> 


<script> 
function customersController($scope,$http) { 
var site = "http://www.w3cschool.cc"; 
var page = "/try/angularjs/data/Customers_MySQL.php"; 
$http.get(site + page) 
.success(function(response) {$scope.names = response; }); 


} 


</script> 


ASP.NET 中 执行 SQL 获取 数据 


AngularJS 实例 


«div ng-app=""" ng-controller="customersController"> 


<table> 
<tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 
</tr> 
</table> 


</div> 


<script> 
function customersController($scope,$http) { 
var site = "http://www.w3cschool.cc"; 
var page = "/try/angularjs/data/Customers_SQL.aspx"; 
$http.get(site + page) 
.success(function(response) {$scope.names = response;}); 


} 


</script> 


PHP 读 取 MySQL 数据 代码 


<?php 

header("Access-Control-Allow-Origin: *"); 

header("Content-Type: text/html; charset=UTF-8"); 

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind": 


$result = $conn->query("SELECT CompanyName, City, Country FROM Cus! 


$outp ee 
while($rs = $result->fetch_array(MYSQLI_ASSOC)) { 
if ($outp != "[") {$outp .= ",";) 
$outp .= '("Name":"'  . $rs["CompanyName"] . '",'; 
$outp = mC ay st ' $rs["City"] : hits d 
$outp .= '"Country":"', $rs["Country"] ZEND 
} 
$outp .="]"; 


$conn->close(); 


echo($outp); 
?> 





PHP 读 取 MS Access 代码 


<?php 
header ("Access-Control-Allow-Origin: *"); 
header("Content-Type: text/html; charset=ISO-8859-1"); 


$conn - new COM("ADODB.Connection"); 
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwinc 


$rs = $conn->execute("SELECT CompanyName, City, Country FROM Custor 


$outp = "["; 

while (!$rs->EOF) { 
if ($outp != "[") {$outp .= ",";} 
$outp .= '("Name":"' . $rs["CompanyName"] . '",'; 
$outp .= city . $rs["City"] pun 
$outp .= '"Country":"'. $rs["Country"] tU 
$rs->MoveNext(); 

} 

fout pee ie 


$conn-»close(); 


echo ($outp); 
?> 


OSS 





服务 端 ASP.NET, VB 和 MS Access 代码 


«99 Import Namespace="System.1I0"%> 

«99 Import Namespace="System.Data"%> 

«99 Import Namespace="System.Data.OleDb"%> 

<% 

Response.AppendHeader("Access-Control-Allow-Origin", "*") 

Dim conn As OleDbConnection 

Dim objAdapter As OleDbDataAdapter 

Dim objTable As DataTable 

Dim objRow As DataRow 

Dim objDataSet As New DataSet() 

Dim outp 

Dim c 

conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data : 
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Count! 
objAdapter.Fill(objDataSet, "myTable" ) 

obj Table=objDataSet.Tables("myTable" ) 


outp = a 

c = chr(34) 

for each x in objTable.Rows 

if outp <> "[" then outp = outp & "," 


outp - outp & "(" & c & "Name" & c & ":" & c & x("CompanyName") 
outp - outp & c & "City" & c &":" & c & x("City") 

outp = outp & c & "Country" & c & ":" & c & x("Country") 
next 


outp = outp & "]" 
response.write(outp) 
conn.close 

%> 


E -———————————— e 





服务 端 ASP.NET, VB Razor 和 SQL Lite 代码 


Qt 

Response.AppendHeader("Access-Control-Allow-Origin", "*") 

var db = Database.Open("Northwind"); 

var query - db.Query("SELECT CompanyName, City, Country FROM Custor 
var outp ="[" 


} 

@foreach(var row in query) 

{ 

if outp <> "[" then outp = Outp + "," 

outp = outp + "{" + C + "Name" * C + ":" + c + @row. CompanyName 
outp = outp + Gor Clty +c + "i" + C + @row.City 

outp = outp + c + "Country" + c + ":" + c + @row. Country 

} 

outp = outp + "|" 

@outp 





AngularJS HTML DOM 


AngularJS 有 自己 的 HTML 属性 指 今 。 


ng-disabled #83 


ng-disabled 指令 直接 绑 定 应 用 程序 数据 到 HTML 的 disabled 属性 。 
AngularJS 实例 


<div ng-app=""> 

<p> 

«button ng-disabled="mySwitch"> 点 我 1</button> 
</p> 

<p> 

<input type="checkbox" ng-model="mySwitch">#<42 
</p> 


</div> 


实例 讲解 : 
ng-disabled 指令 绑 定 应 用 程序 数据 "mySwitch" 到 HTML 的 disabled 属性 。 


ng-model #82 "mySwitch" 到 HTML input checkbox 元 素 的 内 容 (value) 。 


ng-show 指令 隐藏 或 显示 一 个 HTML 元 素 。 
AngularJS 实例 


<div ng-app=""> 
<p ng-show="true"> 我 是 可 见 的 。</p> 
<p ng-show="false"> 我 是 不 可 见 的 。</p> 


</div> 


您 可 以 使 用 一 个 评估 为 true or false 的 表达 式 (比如 ng-show="hour < 12") 来 隐 
藏 和 显示 HTML TR. 


在 下 一 章 中 ， 有 另 一 个 实例 ， 通 过 单 击 一 个 按钮 来 隐藏 一 个 HTML 元 素 。 


AngularJS HTML 事件 
AngularJS 有 自己 的 HTML 事件 指 今 。 
ng-click #83 


ng-click 指令 定义 了 一 个 AngularJS 单 击 事件 。 
AngularJS 实例 


«div ng-app=""" ng-controller="myController"> 
«button ng-click="count = count + 1">R# ! </button> 
<p>{{ count }}</p> 


</div> 


隐藏 HTML 元 素 


ng-hide 指令 用 于 设置 应 用 的 一 部 分 不 可 见 。 
ng-hide="true" 让 HTML 元 素 不 可 见 。 
ng-hide="false" 让 元 素 可 见 。 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 
«button ng-click="toggle()"> 隐 藏 /显示 </button> 


<p ng-hide="myVar'"> 

名 : <input type="text" ng-model="person.firstName"><br> 
ye: <input type="text" ng-model-"person.lastName"»«br» 
<br> 

姓名 : {{person.firstName + " " + person. lastName}} 

</p> 


</div> 


<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe" 
3 
$scope.myVar - false; 
$scope.toggle - function() ( 


$scope.myVar - !$scope.myVar; 
3 
} 
</script> 
应 用 解析 : 


personController 的 第 一 部 分 与 控制 器 章节 类 似 。 

应 用 有 一 个 默认 属性 : $scope.myVar = false; 

ng-hide 指令 设置 应 用 中 的 元 素 不 可 见 。 

toggle() HAA myVar 变量 的 值 (true 和 false) 。 
ng-hide="true" 让 元 素 不 可 见 。 


显示 HTML 元 素 


ng-show 指令 可 用 于 设置 应 用 中 的 一 部 分 可 见 。 
ng-show="false" 可 以 设置 HTML 元 素 不 可 见 。 
ng-show="true" 可 以 以 设置 HTML 元 素 可 见 。 
以 下 实例 使 用 了 ng-show 18$: 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 
«button ng-click="toggle()"> 隐 藏 /显示 </button> 


<p ng-show="myVar"> 

名 : <input type="text" ng-model="person.firstName"><br> 
ye: <input type="text" ng-model-"person.lastName"»«br» 
<br> 

姓名 : {{person.firstName + " " + person. lastName}} 

</p> 


</div> 


<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe" 
}; 
$scope.myVar = true; 
$scope.toggle = function() { 
$scope.myVar = !$scope.myVar; 
u 
3 


«/script» 


AngularJS 模块 


模块 定义 了 您 的 应 用 程序 。 
所 有 的 控制 器 都 应 该 属于 一 个 模块 。 
模块 保持 全 局 命名 空间 中 的 整洁 。 


AngularJS 模块 实例 


在 本 实例 中 ，"myApp.js" 包含 了 一 个 应 用 程序 模块 定义 ，"myCtrljs" 包含 了 一 个 控 
制 器 : 


AngularJS 实例 


<!DOCTYPE html> 


<html> 

<body> 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 


«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


<script src="myApp.js"></script> 
«script src="myCtrl.js"></script> 


</body> 
</html> 


EE] 


控制 器 污染 了 全 局 命名 空间 

本 教程 中 ， 截 至 目前 为 止 的 所 有 实例 都 使 用 了 全 局 琅 数 。 

在 所 有 的 应 用 程序 中 ， 都 上 应 该 尽量 避免 使 用 全 局 变量 和 全 局 函数 。 
faa (变量 或 函数 ) 可 被 其 他 脚本 重 写 或 破坏 。 

为 了 解决 这 个 问题 ，AngularJS 使 用 了 模块 。 





AngularJS 模块 


使 用 一 个 简单 的 控制 器 : 
AngularJS 实例 


<!DOCTYPE html> 


«html» 

«body» 

«div ng-app="" ng-controller="myCtrl"> 

{{ firstName + " " + lastName }} 

</div> 

<script> 

function myCtrl($scope) { 
$scope.firstName = "John"; 
$scope.lastName = "Doe"; 

} 

</script> 


<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


</body> 
</html> 





使 用 一 个 由 模块 替代 的 控制 器 : 


AngularJS 实例 


<!DOCTYPE html» 

<html> 

<head> 

«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 
</head> 


<body> 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 

<script> 


var app = angular.module("myApp", []); 


app.controller("myCtrl", function($scope) { 


$scope.firstName = "John"; 
$scope.lastName = "Doe"; 
3): 
«/script» 
</body> 
</html> 


E E) 





q 请 注意 ， 本 实例 中 ，AngularJS 库 是 在 «head» 区 域 被 加 载 。 


FRIRE 3L Er DIOE TE fn] 46 ? 


对 于 HTML 应 用 程序 ， 通 常 建议 把 所 有 的 脚本 都 放置 在 <body> 元 素 的 最 底部 。 
这 会 提高 网 页 加 载 速度 ， 因 为 HTML 加 载 不 受制 于 脚本 加 载 。 


在 上 面 的 多 个 AngularJS 实例 中 ， 您 将 看 到 AngularJS 库 是 在 文档 的 «head» 区 域 
被 加 载 。 


在 上 面 的 实例 中 ，AngularJS 在 <head> 元 素 中 被 加 载 ， 因 为 对 angularmodule 的 
调用 只 能 在 库 加 载 完 成 后 才能 进行 。 


另 一 个 解决 方案 是 在 «body» 元 素 中 加 载 AngularJS 库 ， 但 是 必须 放置 在 您 的 
AngularJS 脚本 前 面 : 


AngularJS 实例 


<!DOCTYPE html> 


<html> 

<body> 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 


<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


<script> 
var app = angular.module("myApp", []); 


app.controller("myCtrl", function($scope) { 


$scope.firstName = "John"; 
$scope.lastName = "Doe"; 
3): 
«/script» 
</body> 
</html> 


EE) 





AngularJS 应 用 程序 文件 


现在 您 已 经 知道 模块 是 什么 以 及 它们 是 如 何 工 作 的 ， 现 在 您 可 以 尝试 创建 您 自己 的 
应 用 程序 文件 。 


您 的 应 用 程序 至 少 应 该 有 一 个 模块 文件 ， 一 个 控制 器 文件 。 
首先 ， 创 建 模块 文件 "myApp.js" : 


var app = angular.module("myApp", []); 


然后 ， 创 建 控制 器 文件 。 本 实例 中 是 "myCtrljs"”: 


app.controller("myCtrl", function($scope) { 
$scope.firstName = "John"; 
$scope.lastName = "Doe"; 


最 后 ， 编辑 您 的 HTML 页 面 : 


AngularJS 实例 


<!DOCTYPE html> 


<html> 

<body> 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 


<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


<script src="myApp.js"></script> 
«script src="myCtrl.js"></script> 


</body> 
</html> 





AngularJS 表单 


AngularJS 表单 是 输入 控件 的 集合 。 


HTML 控件 


以 下 HTML input 元 素 被 称 为 HTML 控件 : 


input 元 素 
select 元 素 
button 元 素 
textarea 元 素 


HTML 表单 


HTML 表单 通常 与 HTML 控件 同时 存在 。 


AngularJS 表单 实例 


<script>function ExampleController($scope) { $scope.master = {"fir: 
«form novalidate-"" class-"ng-pristine ng-valid">First Name: 

<input type="text" ng-model="user.firstName" class="ng-pristine ng: 
Last Name: 

<input type="text" ng-model-"user.lastName" class="ng-pristine ng- 
<button ng-click="reset()">RESET</button></form> 


form = {"firstName":"John", "LastName": "Doe"} 


master = {"firstName":"John", "lastName":"Doe"} 


mi — 


应 用 程序 代码 





«div ng-app=""" ng-controller="formController"> 
<form novalidate> 
First Name:<br> 
<input type="text" ng-model="user.firstName"><br> 
Last Name:<br> 
<input type="text" ng-model="user.lastName"> 
<br><br> 
«button ng-click="reset()">RESET</button> 
</form> 
<p>form = {{user}}</p> 
<p>master = {{master}}</p> 
</div> 


<script> 
function formController ($scope) { 
$scope.master = {firstName: "John", lastName: "Doe"}; 
$scope.reset = function() { 
$scope.user = angular.copy($scope.master); 


J; 
$scope.reset(); 
J; 
</script> 


@ HTML 属性 novalidate 用 于 禁用 浏览 器 的 默认 验证 。 


实例 解析 


AngularJS ng-model 指 邻 用 于 绑 定 input 元 素 到 模型 中 。 
模型 对 象 master 的 值 为 {"firstName" : "John", "lastName" : "Doe", 
模型 函数 reset 设置 了 模型 对 象 user SF master. 


AngularJS 输入 验证 
AngularJS 表单 和 控件 可 以 验证 输入 的 数据 。 
输入 验证 


在 前 面 的 几 个 章节 中 ， 你 已 经 学 到 关于 AngularJS 表单 和 控件 的 知识 。 
AngularJS 表单 和 控件 可 以 提供 验证 功能 ， 并 对 用 户 输入 的 非法 数据 进行 警告 。 


9 客户 端的 验证 不 能 确保 用 户 输入 数据 的 安全 ， 所 以 服务 端的 数据 验证 也 是 
必须 的 。 


应 用 代码 


<!DOCTYPE html» 
<html> 


<body> 
<h2>Validation Example</h2> 


<form ng-app-"" ng-controller="validateCtr1" 
name="myForm" novalidate> 


<p>Username: <br> 
<input type="text" name="user" ng-model="user" required> 
«span style="color:red" ng-show="myForm.user.$dirty && myForm.use 
<span ng-show="myForm.user.$error.required">Username is required 
</span> 

</p> 


<p>Email:<br> 
<input type="email" name="email" ng-model="email" required> 
<span style="color:red" ng-show="myForm.email.$dirty && myForm.er 
<span ng-show="myForm.email.$error.required">Email is required.<, 
«span ng-show="myForm.email.$error.email">Invalid email address.< 
</span> 

</p> 


<p> 
<input type="submit" 
ng-disabled="myForm.user.$dirty && myForm.user.$invalid | | 
myForm.email.$dirty && myForm.email.$invalid"> 

</p> 


</form> 


«script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min. j: 
<script> 
function validateCtrl($scope) { 

$scope.user - 'John Doe'; 

$scope.email - 'john.doeQgmail.com'; 


j 


«/script» 


«/body» 
«/html» 





@ HTML 表单 属性 novalidate 用 于 禁用 浏览 器 默认 的 验证 。 


实例 解析 


AngularJS ng-model 指 合 用 于 绑 定 输入 元 素 到 模型 中 。 


模型 对 象 有 两 个 属性 : user 和 email。 
我 们 使 用 了 ng-show 指 令 ， color:red 在 邮件 是 $dirty 或 $invalid 才 显 示 。 


AngularJS Bootstrap 


AngularJS 的 首选 样式 表 是 Twitter Bootstrap, Twitter Bootstrap 是 目前 最 受 欢迎 
的 前 端 框架 。 


查看 Bootstrap 教 程 。 


Bootstrap 


你 可 以 在 你 的 AngularJS 应 用 中 加 入 Twitter Bootstrap， 你 可 以 在 你 的 <head> 元 
素 中 添加 如 下 代码 : 


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3 
| 
如 果 站 点 在 国内 ， 建 议 使 用 百度 静态 资源 库 的 Bootstrap， 代 码 如 下 : 





<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.2.0, 





以 下 是 一 个 完整 的 HTML 实例 , 使 用 了 AngularJS 指令 和 Bootstrap 类 。 
HTML 代码 


<!DOCTYPE html» 

<html ang-app=""> 

<head> 

<link rel="stylesheet" hrefz"http://apps.bdimg.com/libs/bootstrap/: 
</head> 


<body ng-controller="userController"> 
<div class="container"> 


<h3>Users</h3> 


<table class="table table-striped"> 
<thead><tr> 
<th>Edit</th> 
<th>First Name</th> 
<th>Last Name</th> 
</tr></thead> 
<tbody><tr ng-repeat="user in users"> 
<td> 


<button class="btn" ng-click="editUser(user.id)"> 
<span class="glyphicon glyphicon-pencil"></span>&nbsp; &nbsp;t 
</button> 
</td> 
<td>{{ user.fName }}</td> 
<td>{{ user.lName }}</td> 
</tr></tbody> 
</table> 


<hr> 

«button class="btn btn-success" ng-click="editUser('new' )"> 
<span class="glyphicon glyphicon-user"></span> Create New User 

«/button» 

«hr» 


«h3 ng-show-"edit"»Create New User:</h3> 
«h3 ng-hide="edit">Edit User:</h3> 


<form class="form-horizontal"> 
<div class="form-group"> 
<label class="col-sm-2 control-label">First Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"fName" ng-disabled-"!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Last Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"lName" ng-disabled="!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Password:</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passwi" placeholder="Password' 
</div> 
</div> 
<div class="form-group"> 
«label class="col-sm-2 control-label">Repeat :</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passw2" placeholder="Repeat P: 
</div> 
</div> 
</form> 


<hr> 

«button class="btn btn-success" ng-disabled="error || incomplete"> 
<span class="glyphicon glyphicon-save"></span> Save Changes 

</button> 

</div> 


<script src 
<script src 


"http://apps.bdimg.com/libs/angular.js/1.2.15/angula! 
"myUsers.js"></script> 


</body> 
«/html»» 


E 
| 














指令 解析 


AngularJS 184: 描述 
html ng-app 为 «html» 元 素 定 义 一 个 应 用 (未 命名 ) 
body ng- 


= mo. —A zo | n 
controller 为 «body» 元 素 定义 一 个 控制 器 


4 + HY 每 个 ; — 
tr ng-repeat E users 对 象 数组 ， 每 个 user 对 象 放 在 “<tr> 元 素 


button ng-click 当 点 击 «button» 元 素 时 调用 函数 editUser() 

h3 ng-show 如 果 edit = true 显示 «h3» FOR 

h3 ng-hide 如 果 edit = true 隐藏 <h3> 元 素 

input ng-model 为 应 用 程序 绑 定 <input> 元 素 

button ng- 如 果 发 生 错误 或 者 ncomplete = true 禁用 <button> 元 
disabled 素 


Bootstrap 类 解析 


元 素 
<div> 
<table> 
<table> 
<button> 
<button> 
<span> 
<span> 
<span> 
<span> 
«form» 
<div> 
<label> 
<label> 


<div> 


Bootstrap # 
container 
table 
table-striped 
btn 
btn-success 
glyphicon 
glyphicon-pencil 
glyphicon-user 
glyphicon-save 
form-horizontal 
form-group 
control-label 
col-sm-2 


col-sm-10 


JavaScript 代码 


表格 

带 条 纹 背 景 的 表格 
按钮 
成 功 按钮 
字形 图 标 
铅笔 图 标 
用 户 图 标 
保存 图 标 
水 平 表格 
表单 组 
控制 器 标签 
eX 2 列 
SER 10 列 


function userController($scope) { 


$scope. 
$scope. 
$scope. 
$scope. 
$scope. 
(id: 


2 
3 
14, 
5 
6 


1, 


, 


~ 


fName = '' 


fName:'Hege',  lName:"Pege" }, 
fName:'Kim', lName:"Pim" }, 
fName:'Sal', lName:"Smith" }, 
fName:'Jack',  lName:"Jones" Jj, 
fName:'John',  lName:"Doe" Jj, 
fName:'Peter', lName:"Pan" ) 


.edit - true; 
.error - false; 
.incomplete - false; 


$scope.editUser = function(id) { 
if (id -- 'new') ( 

$scope.edit - true; 

$scope.incomplete - true; 


} 
Hh 


$scope.fName 


tr. 
, 


$scope.lName soa 
} else { 
$scope.edit = false; 


$scope. fName 
$scope.lName 


$scope 
$scope 
$scope 
$scope 


$scope.users[id-1].fName; 
$scope.users[id-1].lName; 


.$watch('passwi',function() {$scope.test 
.$watch('passw2',function() {$scope.test 
.$watch('fName', function() {$scope.test 
.$watch('lName', function() {$scope.test 


$scope.test = function() { 
if ($scope.passwi !== $scope.passw2) { 
$scope.error = true; 
} else { 
$scope.error = false; 


} 


$scope.incomplete = false; 

if ($scope.edit && (!$scope.fName.length | | 
!$scope.lName.length | | 

!$scope.passwi.length || !$scope.passw2.length)) { 


} 
Po 


} 


$scope.incomplete = true; 


JavaScript 代码 解析 


Scope 属性 用 途 
$scope.fName 模型 变量 (用 户 名 ) 
$scope.IName 模型 变量 (用 户 姓 ) 
$scope.passw1 模型 变量 (用 户 密码 1) 
$scope.passw2 模型 变量 (用 户 密码 2) 
$scope.users 模型 变量 (用 户 的 数组 ) 
$scope.edit 当 用 户 点 击 创建 用 户 时 设置 为 true。 
$scope.error 如 果 passw1 不 等 于 passw2 设置 为 true 
$scope.incomplete 如 果 每 个 字段 都 为 空 (length = 0) 设 置 为 true 
$scope.editUser 设置 模型 变量 
$scope.watch 监控 模型 变量 


$scope.test 验证 模型 变量 的 错误 和 完整 性 


AngularJS Include (包含 ) 
使 用 AngularJS, 你 可 以 在 HTML 中 包含 HTML 文件 。 


在 未 来 的 HTML 中 包含 HTML 文件 


在 HTML 中 ， 目 前 还 不 支持 包含 HTML 文件 的 功能 。 


W3C 已 经 建议 http:/www.w3.org 在 未 来 的 HTML 中 支持 包含 HTML 的 功能 ， 格 式 
如 下 : 


«link rel="import" hrefz"/path/navigation.html"- 


Bs Aum eR 
大 部 分 web 服 务 器 支持 服务 端 脚本 的 包含 (SSI : Server Side Includes), 
使 用 SSI, 你 可 以 在 HTML 页 面 发送 至 浏览 器 前 包含 HTML. 


PHP 实例 


<?php require("navigation.php"); ?> 


客户 端 包含 
客户 端 在 HTML 中 使 用 JavaScript 有 多 种 方式 可 以 包含 HTML 文件 。 


通常 我 们 使 用 http 请 求 (AJAX) 从 服务 端 获取 数据 ， 返 回 的 数据 我 们 可 以 通过 使 用 
innerHTML 写 入 到 HTML 元 素 中 。 


AngularJS &Z 


使 用 AngularJS, 你 可 以 使 用 ng-include 指令 来 包含 HTML 内 容 : 


实例 


<body> 


«div class="container"> 
<div ng-include="'myUsers_List.htm'"></div> 
<div ng-include="'myUsers_Form.htm'"></div> 
</div> 


</body> 
步骤 如 下 。 

步骤 1: 创建 HTML 列表 
myUsers List.html 


«table class-"table table-striped"> 
<thead><tr> 
<th>Edit</th> 
<th>First Name</th> 
<th>Last Name</th> 
</tr></thead> 
<tbody><tr ng-repeat="user in users"> 
<td> 
<button class="btn" ng-click="editUser(user.id)"> 
<span class="glyphicon glyphicon-pencil"></span>&nbsp; &nbsy 
</button> 
</td> 
<td>{{ user.fName }}</td> 
<td>{{ user.lName }}</td> 
</tr></tbody> 
</table> 


b ee 





步骤 2: 创建 HTML X 


myUsers List.html 


«button class="btn btn-success" ng-click="editUser('new')"> 
«span class="glyphicon glyphicon-user"></span> Create New User 

«/button» 

«hr» 


«h3 ng-show="edit">Create New User:</h3> 
«h3 ng-hide="edit">Edit User:</h3> 


<form class="form-horizontal"> 
<div class="form-group"> 
<label class="col-sm-2 control-label">First Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"fName" ng-disabled-"!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Last Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"lName" ng-disabled-"!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Password:</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passwi" placeholder="Password' 
</div> 
</div> 
<div class="form-group"> 
«label class="col-sm-2 control-label">Repeat :</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passw2" placeholder="Repeat Pi 
</div> 
</div> 
</form> 


<hr> 

<button class="btn btn-success" ng-disabled="error || incomplete"> 
<span class="glyphicon glyphicon-save"></span> Save Changes 

</button> 


站 





步骤 3: 创建 主页 


myUsers.html 


<!DOCTYPE html» 

«html ng-app=""> 

<head> 

<link rel="stylesheet" href = "http://apps.bdimg.com/libs/bootstra[ 
</head> 


<body ng-controller="userController"> 


<div class="container"> 

«div ng-include="'myUsers_List.htm'"></div> 
«div ng-include="'myUsers_Form.htm'"></div> 
</div> 


<script src= "http://apps.bdimg.com/libs/angular.js/1.2.15/angular 
<script src= "myUsers.js"></script> 


</body> 
</html> 


i] — 3} 





AngularJS 应 用 程序 


现在 是 时 候 创建 一 个 真正 的 AngularJS 应 用 程序 了 。 


AngularJS 应 用 程序 


您 已 经 学 习 了 足够 多 关于 AngularJS 的 知识 ， 现 在 可 以 开始 创建 您 的 第 一 个 
AngularJS 应 用 程序 : 


我 的 笔记 


«textarea cols="40" rows="10"></textarea> 
«button»f&fz«/button» <button> 清 除 </button> 


剩 下 的 字符 数 : 


应 用 程序 讲解 
AngularJS 实例 


«div ng-app="myTodoApp" ng-controller-"myTodoCtrl"- 
<h2> 我 的 笔记 </h2> 

<p><textarea ng-model-"message" cols="40" rowsz"10"»«/textarea»«/p: 
<p> 

«button ng-click="save()">(R#</button> 

«button ng-click="clear()">ss-R</but ton> 

</p> 

<p> 剩 下 的 字符 数 : <span ng-bind="left()"></span></p> 


</div> 


<script src="myTodoApp.js"></script> 
«script src="myTodoCtrl.js"></script> 


E = 











应 用 程序 文件 "myTodoApp.js" : 


var app = angular.module("myTodoApp", []); 


控制 器 文件 "myTodoCtrljs" : 


app.controller("myTodoCtrl", function($scope) { 
$scope.message = ""; 
$scope.left = function() {return 100 - $scope.message. length; 
$scope.clear = function() {$scope.message="";}; 
$scope.save = function() {$scope.message="";}; 


3); 
由 | 





HTML 页 面 中 的 一 个 <div>， 指 向 ng-app="myTodoApp" 和 ng- 
controller="myTodoCtrl" : 


«div ng-app="myTodoApp" ng-controller-"myTodoCtrl"- 


一 个 ng-model 指令 ， 绑 定 一 个 «textarea» 到 控制 器 变量 message : 


<textarea ng-model="message" cols="40" rows="10"></textarea> 


两 个 ng-click 事件 ， 调 用 控制 器 画 数 clear() 和 save() : 


«button ng-click="save()"> 保 存 </button> 
«button ng-click="clear()"> 清 除 </button> 


一 个 ng-bind 指令 ， 绑 定 控制 器 函数 left() 到 一 个 <span>， 字 符 会 向 左 对 齐 显 
ax 


剩 下 的 字符 数 : <span ng-bind="left()"></span> 


两 个 应 用 程序 库 被 添加 到 HTML 页 面 : 


<script src="myTodoApp.js"></script> 
«script src="myTodoCtrl.js"></script> 


AngularJS 参考 手册 


AngularJS #83 


本 教程 中 使 用 的 AngularJS #89 : 


HT 
ng, app 
ng bind 
ng click 
ng controller 
ng disabled 
ng init 
ng model 
ng repeat 


ng show 


定义 应 用 程序 的 根 元 素 。 

HE HTML 元 素 到 应 用 程序 数据 。 

定义 元 素 被 单 击 时 的 行为 。 

为 应 用 程序 定义 控制 器 对 象 。 

线 定 应 用 程序 数据 到 HTML 的 disabled 属性 。 
为 应 用 程序 定义 初始 值 。 

绑 定 应 用 程序 数据 到 HTML 元 素 。 

为 控制 器 中 的 每 个 数据 定义 一 个 模板 。 
显示 或 隐藏 HTML 元 素 。 


AngularJS it 3825 
本 教程 中 使 用 的 AngularJS 过 滤器 : 


currency 
filter 
lowercase 
orderBy 


uppercase 


ma 
格式 化 数字 为 货币 格式 。 

从 数组 项 中 选择 一 个 子 集 。 
格式 化 字符 串 为 小 写 。 

根据 某 个 表达 式 排列 数组 。 
格式 化 字符 串 为 大 写 。 


iE 


有 关 过 滤器 的 具体 知识 在 AngularJS 过 滤器 一 章 中 进行 讲解 。 


HTML 事件 
控制 器 
HTML DOM 
GA 

AT 

BA 

AT 

BA 

AT 


HTML DOM 


W3School jQuery UI 教程 


来 源 : jQuery UI 教程 
整理 : 飞龙 


jQuery Ul 基础 


jQuery UI 简介 


jQuery UI 是 一 个 建立 在 jQuery JavaScript 库 上 的 小 部 件 和 交互 库 ， 您 可 以 使 用 它 
创建 高 度 交 互 的 Web 应 用 程序 。 本 教程 业 向 您 讲解 jQuery UI 是 如 何 工作 的 。 


jQuery UI 特性 

fa] 2 zn Fd 

继承 jQuery 简易 使 用 特性 ， 提 供 高 度 抽象 接口 ， 短 期 改善 网 站 易 用 性 。 
开源 免费 

采用 MIT & GPL 双 协 议 授权 ， 轻 松 满足 自由 产品 至 企业 产品 各 种 授权 需求 。 
广泛 兼容 


兼容 各 主流 桌面 浏览 器 。 包 括 IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 
1+。 


轻便 快捷 

组 件 间 相 对 独立 ， 可 按 需 加 载 ， 避 免 浪 费 带 宽 拖 慢 网 页 打开 速度 。 

标准 先进 

支持 WAI-ARIA， 通 过 标准 XHTML 代码 提供 渐进 增强 ， 保 证 低 端 环 境 可 访问 性 。 
美观 多 变 


提供 近 20 种 预 设 主题 ， 并 可 自 定义 多 达 60 项 可 配置 样式 规划， 提供 24 种 背景 纹 
理 选择 。 


开放 公开 
从 结构 规划 到 代码 编写 ， 全 程 开 放 ， 文 档 、 人 代码、 讨论 ， 人 人 均 可 参与 。 
强力 支持 


Google 为 发 布 代码 提供 CDN 内 容 分 发 网 络 支持 。 


完整 汉化 
开发 包 内 置 包含 中 文 在 内 的 40 多 种 语言 包 。 


ER. TE 


e 1. 代 码 不 够 健壮 : 缺乏 全 面 的 测试 用 例 ， 部 分 组 件 Bugs 较 多 ， 不 能 达到 企业 
级 产品 开发 要 求 。 

e 2. 构 架 规 划 不 足 : 组 件 间 API 缺乏 协调 ， 缺 乏 配 合 使 用 帮助 。 

e。3. 控 件 较 少 : 相对 于 Dojo、YUI、Ext JS 等 成 熟 产 品 ， 可 用 控件 较 少 ， 无 法 满 
足 复杂 界面 功能 要 求 。 


jQuery UI 下 载 


一 旦 您 对 jQuery UL 有 了 基本 了 解 ， 您 就 可 以 亲自 党 试 一 下 。 请 从 jQuery Ul 网 站 
上 的 Download Builder (下 载 生 成 器 ) WH FR jQuery Ul 的 副本 。 


创建 自 定 义 jQuery UI 下 载 


jQuery Ul 的 下 载 生 成 器 (Download Builder) 人 允许 您 选择 您 需要 下 载 的 组 件 ， 为 项 
目 获取 一 个 自 定义 的 库 版 本 。 创 建 自 定义 jQuery Ul 下 载 需要 以 下 三 个 步骤 : 


步骤 1 : 选择 您 需要 的 组 件 


下 载 生 成 器 (Download Builder) 页 面 的 第 一 栏 列 出 了 jQuery Ul 所 有 的 
JavaScript 组 件 分 类 : 核心 (UI Core) 、 交 互 部 件 (Interactions) 、 小 部 件 
(Widgets) 和 效果 库 (Effects) 。jQuery Ul 中 的 一 些 组 件 依赖 于 其 他 组 件 ， 当 选 
中 这 些 组 件 时 ， 它 所 依赖 的 其 他 组 件 也 都 会 自动 被 选中 。 您 所 选 的 组 件 将 会 合并 到 
一 个 jQuery UI JavaScript 文件 。 


a 


v jQuery 
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Download Builder 


步骤 2 : 选择 一 个 主题 或 者 目 定义 一 个 主题 


在 下 载 生 成 器 (Download Builder) 页 面 ， 您 将 看 到 一 个 文本 框 ， 列 出 了 一 系列 为 
jQuery UI 小 部 件 预先 设计 的 主题 。 您 dera 的 主题 中 选择 一 个 ， 也 可 以 
使 用 ThemeRoller 自 定义 一 个 主题 GER 节 的 讲解 ) o 


高 级 主题 设置 : 下 载 生 成 器 (Download Builder) 的 主题 部 分 也 为 主题 提供 了 一 些 

AB. 如 果 您 打算 在 一 个 页 面 上 使 用 多 个 主题 ， 这 些 字 段 会 派 上 用 场 。 如 
您 打算 在 一 个 页 面 上 只 使 用 一 个 主题 ， 那么 您 完全 可 以 跳 过 这 些 设 t iB. 

步骤 3 : 选择 jQuery Ul 的 版 本 


在 下 载 生 成 器 (Download Builder) 中 ， 最 后 一 步 是 选择 一 个 版 本 号 。 这 个 步骤 很 
重要 ， 因 为 jQuery Ul 的 版 本 是 配合 特定 的 jQuery 版 本 设计 的 。 目 前 的 版 本 有 : 


e jQuery Ul 1.10.2 - 要 求 jQuery 1.6 及 以 上 版 本 。 
e jQuery UI 1.9.2 — ZK jQuery 1.6 及 以 上 版 本 。 
点 击 Download 按钮 进行 下 载 ! 
点 击 Download 按钮 ， 完 成 下 载 。 您 将 得 到 一 个 包含 您 所 选 组 件 的 自 定 义 zip 文 


o 


jQuery UI 使 用 


一 旦 您 下 载 了 jQuery UI， 您 将 得 到 一 个 zip 压缩 包 ， 包 含 下 列 文件 : 


/css/ 

/ development -bundle/ 
/js/ 

index.html 


在 网 页 上 使 用 jQuery UI 


在 文本 编辑 器 中 打开 index.html ， 您 将 看 到 引用 了 一 些 外 部 文件 : 主题 、 
jQuery 和 jQuery UI。 通 常情 况 下 ， 您 需要 在 页 面 中 引用 这 三 个 文件 ， 以 便 使 用 
jQuery Ul 的 窗 体 小 部 件 和 交互 部 件 : 


<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" /: 
<script src="js/jquery.min.js"></script> 
«script src="js/jquery-ui.custom.min.js"></script> 


JE 一 一 3 


一 旦 您 引用 了 这 些 必要 的 文件 ， 您 就 能 向 您 的 页 面 添 加 一 些 jQuery 小 部 件 。 比 
如 ， 要 制作 一 个 日 期 选择 器 (datepicker) 小 部 件 ， 您 需要 向 页 面 添加 一 个 文本 输 
入 框 ， 然 后 再 调用 .datepicker() ， 如 下 所 示 : 


HTML: 





<input type="text" name="date" id="date" /> 


JavaScript: 


$( "#date" ).datepicker(); 


Date:| 02/13/2009| | 
o February 2009 o 
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如 需 查看 jQuery Ul 小 部 件 和 交互 部 件 的 实例 演示 ， 请 访问 jQuery UI 实例 。 


jQuery UI 定制 


jQuery Ul 提供 了 多 种 定制 方式 。 您 已 经 看 到 下 载 生 成 器 (Download Builder) 如 何 
定制 一 个 值 包含 您 所 需 选 项 的 自 定 义 版 本 ， 这 里 还 提供 了 其 他 定制 方式 。 


jQuery Ul 基础 : 使 用 选项 


jQuery UI 中 的 每 个 插件 都 有 一 个 默认 配置 ， 默 认 配 置 值 一 般 是 根据 最 基本 最 常见 
的 使 用 情况 设置 的 。 如 果 您 想 要 让 某 个 插件 设置 成 非 默 认 值 ， 您 可 以 使 用 "options" 
重 写 它 的 默认 设置 。 选 项 是 一 组 属性 ， 作 为 参数 传递 给 jQuery UI 小 部 件 。 例 如 ， 
滑 块 (slider) 小 部 件 具 有 orientation 选项 ， 该 选项 允许 您 指定 滑 块 是 水 平 的 还 是 
垂直 的 。 为 了 设置 滑 块 的 该 选项 ， 您 只 需 将 它 作 为 一 个 参数 传递 ， 如 下 所 示 : 


$( "#mySliderDiv" ).slider({ 
orientation: "vertical" 


}); 


您 可 以 传递 更 多 不 同 的 选项 ， 每 个 选项 之 间 用 逗号 分 隔 : 


$( "#mySliderDiv" ).slider({ 
orientation: "vertical", 


min: ©, 

max: 150, 

value: 50 
3): 


请 记得 选项 需 放 在 大 括号 { } 内 。 上 面 的 实例 只 是 一 个 简单 的 讲解 ， 如 需 获 取 整 
= jQuery Ul 小 部 件 的 详细 信息 ， 请 查看 jQuery UI 实例 。 


视觉 定制 : 设计 一 个 jQuery UI 主题 


如 果 您 想 要 设计 自己 的 主题 ，jQuery Ul 提供 了 一 个 非常 完美 的 用 于 主题 定制 的 应 
用 程序 ， 这 就 是 ThemeRoller。 具 体 定制 请 访问 jQuery Ul ThemeRoller。 


ThemeRoller 为 所 有 使 用 jQuery UI 小 部 件 设 计 的 元 素 提供 了 一 个 自 定义 接口 。 当 
您 调整 左 栏 中 的 "levers"， 右 栏 中 的 小 部 件 将 根据 您 的 设计 进行 显示 。ThemeRoller 
的 Gallery 选项 卡 提 供 了 一 些 与 设计 主题 ， 与 下 载 生成 器 (Download Builder) 页 
面 提供 的 一 样 。 您 可 以 基于 这 些 主题 做 调整 ， 或 者 直接 下 载 。 
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下 载 主 题 


当 您 点 击 ThemeRoller 页 面 中 的 "Download theme" 按钮 ， bcd s 
(Download Builder) 页 面 ， 您 的 自 定义 主题 会 在 主体 下 拉 菜单 中 自动 选中 。 您 可 
以 进一步 配置 下 载 包 。 一 旦 下 载 完 成 ， 您 将 看 到 example.html 页 面 使 用 了 您 自 
定义 的 主题 。 


提示 : 如 果 您 需要 编辑 您 的 主题 ， 只 需 打 开 CSS 文件 ， 找 到 第 43131, "To view 
and modify this theme, visit ...", iX url 即 为 在 ThemeRoller 中 打开 主题 进行 编辑 
的 链接 。 


jQuery Ul 工作 原理 


jQuery UI 包含 了 许多 维持 状态 的 小 部 件 (Widget) ， 因 此 ， 它 和 与 典型 的 jQuery 插 
件 使 用 模式 略 有 不 同 。 其 安装 方式 与 大 部 分 jQuery 插件 的 安装 方式 类 似 ，jQuery 
Ul 的 小 部 件 是 基于 部 件 库 (Widget Factory) 创建 的 ， 小 部 件 库 提 供 了 通用 的 
API。 所 以 ， 只 要 您 学 会 使 用 其 中 一 个 ， 您 就 知道 如 何 使 用 其 他 的 小 部 件 

, (Widget) 。 本 教程 籽 通 过 进度 条 (progressbar) 小 部 件 代码 实例 介绍 常见 的 功 


b 
Abo 


AX 
pra 


对 


为 了 跟踪 部 件 的 状态 ， 我 们 首先 介绍 一 下 小 部 件 的 全 生命 周期 。 当 小 部 件 安装 时 ， 
生命 周期 开始 。 我 们 只 需要 在 一 个 或 多 个 元 素 上 调用 插件 ， 即 安装 了 小 部 件 。 


$( "#elem" ).progressbar(); 


这 将 会 初始 化 jQuery 对 象 中 的 每 个 元 素 ， 在 本 例 中 ， 元 素 id 为 "elem'"。 因 为 我 们 
调用 无 参数 的 .progressbar() 方法 ， 小 部 件 则 会 按照 它 的 默认 选项 进行 初始 
化 。 我 们 可 以 在 安装 时 传递 一 组 选项 ， 这 样 既 可 重 写 默认 选项 。 


$( "#elem" ).progressbar({ value: 20 }); 
安装 时 传递 的 选项 数目 多 少 可 根据 我 们 的 需要 而 定 。 任 何 我 们 未 传递 的 选项 则 都 使 
用 它们 的 默认 值 。 
选项 是 小 部 件 状态 的 组 成 部 分 ， 所 以 我 们 也 可 以 在 安装 后 再 进行 设置 选项 。 我 们 将 
在 后 续 的 option 方法 中 介绍 这 部 分 内 容 。 
方法 
既然 小 部 件 已 经 初始 化 ， 我 们 就 可 以 查询 它 的 状态 ， 或 者 在 小 部 件 上 执行 动作 。 所 
有 初始 化 后 的 动作 都 以 方法 调用 的 形式 进行 。 为 了 在 小 部 件 上 调用 一 个 方法 ， 我 们 


可 以 向 jQuery 插件 传递 方法 的 名 称 。 人 例如， 为 了 在 进度 条 (progressbar) 小 部 件 
上 调用 value 方法 ， 我 们 应 该 使 用 : 


$( "#elem" ).progressbar( "value" ); 


如 果 方 法 接受 参数 ， 我 们 可 以 在 方法 名 后 传递 参数 。 例 如 ， 为 了 传递 参数 40 给 
value 方法， 我 们 可 以 使 用 : 


$( "#elem" ).progressbar( "value", 40 ) 


就 像 jQuery 中 的 其 他 方法 一 样 ， 大 部 分 的 小 部 件 方 法 为 链接 返回 jQuery 对 象 。 


$( "#elem" ) 
.progressbar( "value", 90 ) 
.addClass( "almost-done" ); 


公共 的 方法 

每 个 小 部 件 都 有 它 自己 的 一 套 基于 小 部 件 所 提供 功能 的 方法 。 然 而 ， 有 一 些 方法 是 
所 有 小 部 件 都 共同 具有 的 。 

option 


正如 我 们 前 面 所 提 到 的 ， 我 们 可 以 在 初始 化 之 后 通过 option 方法 改变 选项 。 例 
如 ， 我 们 可 以 通过 调用 option 方法 改变 progressbar (进度 条 ) 的 value 为 
30。 


$( "#elem" ).progressbar( "option", "value", 30 ); 
请 注意 ， 这 与 之 前 我 们 调用 value 方法 的 实例 有 所 不 同 。 在 本 实例 中 ， 我 们 调用 
option 方法 ， 改 变 value 选项 为 30。 
我 们 也 可 以 为 某 个 选项 获取 当前 的 值 。 


$( "#elem" ).progressbar( "option", "value" ); 


另外 ， 我 们 可 以 通过 给 option 方法 传递 一 个 对 象 ， 一 次 更 新 多 个 选项 。 


$( "#elem" ).progressbar( "option", { 
value: 100, 
disabled: true 


I) 


您 也 许 注 意 到 option 方法 有 着 与 jQuery 代码 中 取 值 器 和 设置 器 相同 的 标志 ， 就 


R .css() 和 .attr() 。 唯 一 的 不 同 就 是 您 必须 传递 字符 串 "option" 作为 第 一 
个 参数 。 


disable 


disable 方法 禁用 小 部 件 。 在 进度 条 (progressbar) 实例 中 ， 这 会 改变 样式 让 
进度 条 显示 为 禁用 状态 。 


$( "#elem" ).progressbar( "disable" ); 


调用 disable 方法 等 同 于 设置 disabled 选项 为 true, 
enable 
enable 方法 是 disable 方法 的 对 立 面 。 


$( "#elem" ).progressbar( "enable" ); 


调用 enable 方法 等 同 于 设置 disabled 选项 为 false. 


destroy 


如 果 您 不 再 需要 小 部 件 ， 那 么 可 以 销毁 它 ， 返 回 到 最 初 的 标记 。 这 意味 着 小 部 件 生 
命 周 期 的 终止 。 


$( "#elem" ).progressbar( "destroy" ); 


一 旦 您 销毁 了 一 个 小 部 件 ， 您 就 不 能 在 该 部 件 上 调用 任何 方法 ， 除 非 您 再 次 初始 化 
这 个 小 部 件 。 如 果 您 要 移 除 元 素 ， 可 以 直接 通过 .remove() ， 也 可 以 通过 
.html() 或 .empty() 修改 祖先 ， 小 部 件 会 自动 销毁 。 


widget 
一 些小 部 件 生成 包装 器 元 素 ， 或 与 原始 元 素 断 开 连 接 的 元 素 。 在 下 面 的 实例 


中 ， widget 将 返回 生成 的 元 素 。 在 进度 条 (progressbar) 实例 中 ， 没 有 生成 的 
包装 器 ， widget 方法 返回 原始 的 元 素 。 


$( "#elem" ).progressbar( "widget" ); 


事件 


所 有 的 小 部 件 都 有 跟 他 们 各 种 行为 相关 的 事件 ， 用 于 在 状态 改变 时 通知 您 。 对 于 大 
多 数 的 小 部 件 ， 当 事件 被 触发 时 ， 名 称 以 小 部 件 名 称 为 前 级 。 例 如 ， 我 们 可 以 绑 定 
进度 条 O 的 change 事件 ， 一 旦 值 发 生变 化 时 就 触发 。 


$( "#elem" ).bind( "progressbarchange", function() { 
alert( "The value has changed!" ); 


3): 


每 个 事件 都 有 一 个 相对 应 的 回调 ， 作 为 选项 进行 呈现 。 我 们 可 以 使 用 进度 条 
(progressbar) BY change 回调 ， 这 等 同 于 绑 定 progressbarchange 事件 。 


$( "#elem" ).progressbar ({ 
change: function() { 
alert( "The value has changed!" ); 


数 事件 是 针对 特定 的 小 部 件 ， 所 有 的 小 部 件 都 有 一 个 公共 的 create 事件 。 
在 小 部 件 被 创建 时 即 被 触发 。 
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jQuery Ul 主题 


jQuery Ul 主题 


所 有 的 jQuery UI 插件 都 允许 开发 人 员 无 缝 集成 UI 小 部 件 到 他 们 网 站 或 应 用 程序 的 
外 观 和 感 观 。 每 个 插件 通过 CSS 定义 样式 ， 且 包含 了 两 层 样 式 信 息 : 标准 的 
jQuery UI CSS 框架 样式 和 具体 的 插件 样式 。 


jQuery UI CSS 框架 提供 了 语义 表示 的 类 ， 用 来 表明 小 部 件 内 元 素 的 角色 ， 比 如 标 
题 、 内 容 或 可 点 击 区 域 。 这 些 在 所 有 的 小 部 件 中 都 是 一 致 的 ， 一 个 可 点 击 的 

tab (标签 页 ) . accordion (Fmi) 或 button. (按钮 ) 都 有 相同 的 
ui-state-default class， 用 来 表明 它们 是 可 点 击 的 。 当 用 户 鼠 标 基 浮 在 这 些 元 
素 上 面 时 ， 这 个 class 就 变 成 ui-state-hover ， 当 选中 这 些 元 素 时 则 变 成 
ui-state-active 。 这 些 class 的 一 致 性 使 得 所 有 部 件 中 具有 相似 角色 或 交互 状 
态 的 元 素 在 外 观 表现 上 一 致 。 


CSS 框架 样式 封装 在 一 个 单独 的 文件 中 ， 名 为 ui.theme.css 。 这 个 文件 时 通过 
ThemeRoller 应 用 程序 来 修改 的 。 框 架 样 式 只 包含 影响 外 观 和 感 观 的 属性 ， 只 要 是 
颜色 、 背 景 图 像 、 图 标 等 。 所 以 这 些 是 "安全 的 " 样式 ， 不 会 影响 到 插件 的 功能 。 这 
种 分 隔 意 味 着 开发 人 员 可 以 通过 在 theme.css 文件 中 修改 颜色 和 图 像 来 创建 一 

个 自 定义 的 外 观 和 感 观 。 由 于 未 来 的 插件 或 者 bug 修复 将 是 可 用 的 ， 这 些 不 通过 修 
改 即 可 与 主题 一 起 使 用 。 


由 于 框架 样式 只 履 盖 了 外 观 和 感 观 ， 所 以 还 需要 包含 具体 的 插件 桩 式 表 ， 这 些 样式 
表 包 括 了 所 有 额外 的 让 小 部 件 具 有 功能 性 的 结构 样式 规则 ， 比 如 尺寸 、 内 边 距 、 外 
边 距 、 定 位 、 浮 动 。 每 个 插件 的 祥 式 表 位 于 themes/base 文件 夹 内 ， 且 配合 插 
件 进行 命名 ， 上 比如 "jquery.ui.accordion.css"。 这 些 样式 必须 认真 编辑 ， 因 为 它们 与 
脚本 一 起 提供 了 框架 样式 的 覆盖 。 


我 们 鼓励 所 有 的 开发 人 员 创建 jQuery 插件 ，jQuery UI CSS 框架 使 得 最 终 用 户 更 容 
易 定制 主题 和 使 用 插件 。 


主题 化 
下 面 列 出 了 三 种 主题 化 jQuery Ul 插件 的 一 般 方 法 : 


。 下 载 ThemeRoller 主题 : 最 早 的 创建 主题 的 方式 是 使 用 ThemeRoller 来 生成 
和 下 载 一 个 主题 。 这 个 应 用 程序 将 创建 一 个 新 的 ui.theme.css 文件 和 一 个 
包含 了 所 有 必需 的 背景 图 像 及 图 标 精灵 的 images 文件 来 。 这 个 方法 是 最 早 
的 创建 和 维护 主题 的 方式 ， 但 是 它 对 ThemeRoller 中 提供 的 选项 限制 了 自 定 


义 。 

修改 CSS 文件 : 为 了 对 外 观 和 感 观 做 进一步 的 控制 ， 您 可 以 选择 从 默认 主题 
(Smoothness) 开始 ， 或 者 从 一 个 由 ThemeRoller 生成 的 主题 开始 ， 然 后 调 

整 ui.theme.css 文件 ， 或 者 任意 一 个 独立 插件 的 样式 表 。 例 如 ， 您 可 以 很 

容易 地 调整 所 有 按钮 的 角 半 径 为 不 同 于 其 他 UI 组 件 的 值 ， 或 者 使 用 自 定义 设 


时 使 用 多 个 主题 。 为 了 易于 维护 ， 建 议 只 更 改 ui.theme.css 文件 和 图 像 。 
e 重新 编写 自 定义 的 CSS : 为 了 最 大 程度 地 控制 外 观 和 感 观 ， 可 以 重新 开始 编写 


每 个 插件 的 CSS， 而 不 使 用 框架 类 或 者 特定 的 插件 样式 表 。 如 果 想 要 的 外 观 和 
感 观 不 能 通过 修改 CSS 来 实现 或 者 使 用 高 度 自 定义 的 标记 ， 那 么 就 可 以 采用 

o 这 个 方法 要 求 在 CSS 方面 有 深厚 的 专业 知识 ， 且 要 求 手 动 更 新 未 

来 的 插件 。 


使 用 ThemeRoller、jQuery UI CSS 框架 ， 以 及 设计 自 定 义 主 题 


e jQuery Ul ThemeRoller 
e jQuery UI CSS 框架 API 


e 设计 主题 


jQuery UI ThemeRoller 


ThemeRoller 简介 


ThemeRoller 是 一 个 Web 应 用 程序 ， 为 jQuery Ul 设计 和 下 载 自 定 义 主 题 提 供 了 直 
观 的 界面 。 您 可 以 访问 jQuery Ul ThemeRoller 进行 主题 定制 。 


jQuery UI ThemeRoller 是 由 波 士 上 顿 的 Filament Group, Inc 设计 和 开发 的 。 


ThemehRoller 


ThemeRoller 界面 


ThemeRoller 的 界面 分 为 不 同 面板 ， 各 面板 分 别 是 全 局 字体 和 圆 角 半径 设置 、 小 部 
件 容器 样式 、 可 点 击 元 素 的 互动 状态 。 及 覆盖 和 阴影 的 各 种 样式 。 这 些 面板 人 允许 配 
置 各 种 CSS 属性 ， 上 比如 字体 尺寸 、 颜 色 、 粗 细 、 背 景 闫 色 和 和 纹理、 边框 颜色 、 文 
本 颜色 、 图 标 颜色 、 圆 角 半 径 ， 等 等 。 


主题 馆 (Gallery) : 预先 设计 主题 


ThemeRoller 主题 可 以 通过 永久 链接 URL 进行 查看 ， 它 包含 一 些 预 先 设计 的 主题 
Atik Ease (Gallery) 可 以 通过 位 于 应 用 程序 界面 顶端 的 标签 栏 进行 访问 。 
从 主题 亿 (Gallery) 中 ， 您 可 以 预览 和 下 载 主题 ， 甚 至 可 以 选择 一 个 主题 ， 然 后 切 
换 到 "Roll Your Own" 标签 页 进行 调整 。 


下 载 主 题 

当 您 设计 完 主 题 后 ， 您 可 以 下 载 主题 以 便 在 项 目 中 进行 使 用 。ThemeRoller 在 顶部 
有 一 个 "Download theme (下 载 主题 )" 按钮 ， 可 以 生成 一 个 zip 压缩 包 ， 包 含 了 
所 有 的 主题 相关 文件 。 下 载 文 件 中 的 图 像 是 按照 您 的 规格 进行 生成 的 ， 并 保存 为 高 
质量 的 PNG 文件 。 

您 的 主题 将 包含 图 像 和 CSS， 组 成 了 jQuery UI CSS 框架 的 自 定 义 版 本 ， 包 含 了 
所 有 插件 的 图 像 和 CSS. 


在 项 目 中 按照 下 载 的 主题 


一 旦 下 载 了 主题 ， 解 压缩 后 ， 您 将 看 到 一 个 名 为 themes 的 文件 夹 。 该 文件 夹 包 
括 了 主题 所 需 的 CSS 和 图 像 。 复 制 主题 文件 夹 到 您 的 项 目 中 ， 并 在 页 面 中 链接 
themes/all.css 文件 。 


创建 自 定义 的 "ThemeRoller-Ready" 组 件 


[hemeRoller Ready ThemeRoller Ready 
V jQuery 9 JQuerv TA 





ThemeRoller 生成 了 一 个 jQuery UI CSS 框架 的 自 定义 版 本 ， 用 于 开发 您 自己 的 
ThemeRoller-ready jQuery 组 件 。 通 过 这 个 框架 生成 的 类 被 设计 来 提供 通用 的 用 户 
界面 的 设计 情况 ， 包 括 状态 、 图 标 以 及 各 种 辅助 类 。 


如 需 了 解 更 多 jQuery UI CSS 框架 的 开发 信息 ， 请 查看 主题 化 API 文档 。 
ThemeRoller 链接 
e 教程 : 开发 您 自己 的 jQuery "ThemeRoller-Ready" 组 件 ，Filament Group 


e ThemeRoller 简介 : 设计 & 下 载 jQuery Ul 自 定义 主题 ，Filament Group 
e 视频 : 设计 & 下 载 jQuery Ul 自 定义 主题 ，Filament Group 


jQuery UI CSS 框架 API 


jQuery UI CSS 框架 


jQuery Ul 包含 了 一 个 强大 的 CSS 框架 ， 为 了 创建 自 定义 jQuery 小 部 件 而 设计 
的 。 框 架 包 含 了 通用 的 用 户 界 面 所 需 的 类 ， 且 可 使 用 jQuery Ul ThemeRoller 进行 
维护 。 通 过 使 用 jQuery UI CSS 框架 创建 您 自己 的 UI 组件。 您 需 采 用 共享 标记 公 
约 ， 以 便 在 插件 社区 的 代码 集成 。 


下 面 的 CSS 类 根据 样式 是 否 是 固定 的 结构 化 的 ， 或 者 是 否 是 可 主题 化 的 (颜色 、 
字体 、 背 景 等 ) ， 分 别 定义 在 ui.core.css 和 ui.theme.css 两 个 文件 中 。 
这 些 类 被 设计 来 用 于 用 户 界 面 元 素 ， 以 便 获 得 整个 应 用 程序 的 视觉 一 致 性 ， 可 通过 
jQuery UI ThemeRoller 对 组 件 进行 主题 化 。 


布局 助手 


e .ui-helper-hidden : 对 元 素 应 用 display: none 。 

e .ui-helper-hidden-accessible : 对 元 素 应 用 访问 隐藏 (通过 页 面 绝对 定 
位 ) 。 

e .ui-helper-reset : Ul 元 素 的 基本 样式 重 置 。 重 置 的 元 素 比 
如 : padding 、 margin 、 text-decoration 、list-style， 等 等 。 

e .ui-helper-clearfix : 对 父 元 素 应 用 浮动 包装 属性 。 

e .ui-helper-zfix : 对 &lt;iframe&gt; 元 素 应 用 iframe "fix" CSS, 


小 部 件 容器 


e .ui-widget : 对 所 有 小 部 件 的 外 部 容器 应 用 的 Class。 对 小 部 件 应 用 字体 和 
字体 尺寸 ， 同 时 也 对 自 表单 元 素 应 用 相同 的 字体 和 1em 的 字体 尺寸 ， 以 应 对 
Windows 浏览 器 中 的 继承 问题 。 

e .ui-widget-header : 对 标题 容器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 和 链接、 图 标 应 用 标题 容器 样式 。 

e .ui-widget-content : 对 内 容 容 器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 链 接 、 图 标 应 用 内 容 容器 样式 。 (可 应 用 到 标题 的 父 元 素 或 者 同 级 元 素 ) 


交互 状态 


e .ui-state-default : 对 可 点 击 按钮 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "clickable default" 容器 样式 。 

e .ui-state-hover : 当 鼠 标 基 浮 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 
素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-focus : 当 键 盘 聚 焦 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 


素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 
e .ui-state-active : 当 饭 标点 击 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 素 
及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable active" 容器 样式 。 


交互 提示 Cues 


e .ui-state-highlight : 对 高 完 或 者 选中 元 素 应 用 的 Class。 对 元 素 及 其 子 
元 素 的 文本 、 链 接 、 图 标 应 用 "highlight" 容器 样式 。 

e .ui-state-error : 对 错误 消息 容器 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "error" 容器 样式 。 

e .ui-state-error-text : 对 只 有 无 背景 的 错误 文本 颜色 应 用 的 Class. WI 
用 于 表单 标签 ， 也 可 以 对 子 图 标 应 用 错误 图 标 颜 色 。 

e .ui-state-disabled : 对 禁用 的 UI 元 素 应 用 一 个 暗淡 的 不 透明 度 。 意 味 着 
对 一 个 已 经 定义 样式 的 元 素 添 加 额外 的 样式 。 

e .ui-priority-primary : 对 第 一 优先 权 的 按钮 应 用 的 Class。 应 用 粗 体 文 
本 。 

e .ui-priority-secondary : 对 第 二 优先 权 的 按钮 应 用 的 Class, © AER 
粗细 的 文本 ， 对 元 素 应 用 轻微 的 透明 度 。 


图 标 


状态 和 图 像 


e .ui-icon : 对 图 标 元 素 应 用 的 基本 Class。 设 置 尺 寸 为 16px 方块 ， 隐 藏 内 
部 文本 ， 对 "content" 状态 的 精灵 图 像 设置 背景 图 像 。 注 意 : .ui-icon 
class 将 根据 它 的 父 容 器 得 到 一 个 不 同 的 精灵 背景 图 像 。 例 
Jl, ui-state-default 容器 内 的 ui-icon 元 素 将 根据 
ui-state-default 的 图 标 颜 色 进 行 着 色 。 


图 标 类 型 

在 声明 .ui-icon class 之 后 ， 接 着 您 可 以 声明 一 个 秒 速 图 标 类 型 的 class。 通 常 
情况 下 ， 图 标 class 遵循 语法 

.ui-icon-(icon type}-{icon sub description}-{direction} o 

例如 ， 一 个 指向 右 侧 的 三 角形 图 标 ， 如 下 所 示 : .ui-icon-triangle-1-e 


jQuery UI 的 ThemeRoller 在 它 的 预览 一 栏 中 提供 了 全 套 的 CSS 框架 图 标 。 将 鼠标 
悬浮 在 图 标 上 可 查看 class 名 称 。 


其 他 视觉 效果 


圆 角 半径 助手 
e .ui-corner-tl : 对 元 素 的 左上 角 应 用 圆 角 半 径 。 


.ui-corner-tr : 对 元 素 的 右上 角 应 用 圆 角 半径 。 
.ui-corner-bl : 对 元 素 的 左下 角 应 用 圆 角 半径 。 
.ui-corner-br : 对 元 素 的 右 下 角 应 用 圆 角 半径 。 
.ui-corner-top : 对 元 素 上 边 的 左右 角 应 用 圆 角 半径 。 
.ui-corner-bottom : 对 元 素 下 边 的 左右 角 应 用 圆 角 半径。 
.ui-corner-right : 对 元 素 右 边 的 上 下 角 应 用 圆 角 半径 。 
.ui-corner-left : 对 元 素 左 边 的 上 下 角 应 用 圆 角 半径 。 
.Ui-corner-all : 对 元 素 的 所 有 四 个 角 应 用 圆 角 半 径 。 


mm & 阴影 


.ui-widget-overlay : tim ht%%FA 100% 宽度 和 高 度 ， 同 时 设置 背景 
颜色 /纹理 和 屏幕 不 透明 度 。 

.ui-widget-shadow : 对 覆盖 应 用 的 Class， 设 置 了 不 透明 度 、 上 偏 移 / 左 偏 
移 ， 以 及 阴影 的 "厚度 "。 厚 度 是 通过 对 阴影 所 有 边 设 置 内 边 距 (padding) 进 
行 应 用 的 。 偏 移 是 通过 设置 上 外 边 距 (margin) 和 左 外 边 距 (margin) 进行 应 
用 的 (可 以 是 正 数 ， 也 可 以 是 负数 ) 。 


jQuery Ul 设计 主题 
文件 结构 


主题 是 以 特定 的 方式 来 增加 他 们 的 易 用 性 。 通 常 ， 文 件 目 录 结 构 如 下 所 示 : 


e themename/ -您 的 主题 必须 完全 包含 在 一 个 单独 的 以 主题 名 称 命 名 的 文件 
夹 内 。 

e themename/themename.css 一 这 是 基本 的 CSS 文件 。 无 论 使 用 了 哪个 插 
件 ， 该 文件 都 必须 在 每 个 使 用 主题 的 页 面 中 引用 。 该 文件 应 该 是 轻 量 级 的 ， 只 
包括 要 点 WO 

e themename/themename.pluginname.css 一 您 支持 的 每 个 插件 都 需要 一 
CSS 文件 。 插件 的 名 称 应 直接 包含 在 文件 名 中 。 例如 ， 如 果 您 为 tabs "e 
页 ) 插件 进行 主题 化 ， 则 有 : themename.tabs.js o 

e themename/img.png 一 您 的 主题 可 以 包含 图 像 。 它 们 可 以 根据 您 的 喜好 进行 
命名 ， 这 里 没有 特定 的 命名 惯例 。 


如 需 了 解 主题 文件 结构 是 如 何 完成 的 实例 ， 请 访问 jQuery Ul 基本 主题 。 
定义 样式 
为 主题 编写 样式 是 非常 简单 的 ， 这 是 因为 主题 的 灵活 性 。 


所 有 的 主题 都 应 该 有 一 个 基本 的 CSS cass, i ^ X IN class 人 允许 用 户 启 用 禁用 
主题 。 您 的 根 class 的 格式 应 该 是 .ui-themename > HE HTML 文件 中 的 用 法 
如 下 所 示 : 


«html» 
«head» 
<title>My Site</title> 
<link rel="stylesheet" href="themename/themename.css" /> 
<link rel="stylesheet" href="othertheme/othertheme.css" /> 
<link rel="stylesheet" href="othertheme/othertheme.dialog.css" 
</head> 
<body class="ui-themename"> 
<div class="ui-othertheme"> 
<div class="ui-dialog">This is a modal dialog.</div> 
</div> 
</body> 
</html> 


ER 
在 上 面 的 实例 中 ， 发 生 了 一 些 重要 的 事情 : 


e 我 们 同时 向 文档 中 加 载 两 个 主题 。 
e 整个 页 面 机 器 所 有 内 容 ， 是 根据 themename 的 祥 式 进行 主题 化 的 。 





e 然而 ， 带 有 ui-othertheme class 的 &lt;div&gt， 及 其 中 的 每 个 元 素 (包括 
模 态 对 话 框 ) 都 是 根据 othertheme 的 样式 进行 主题 化 的 。 


如 果 我 们 打开 themename.css 文件 进行 查看 ， 我 们 可 以 看 到 如 下 代码 : 


body.ui-themename ( background:#111; color:snow; } 
.ui-themename a, a.ui-themename { color:#68D; outline:none; } 
.Ui-themename a:visited, a.ui-themename:visited { color:#D66; } 
.Ui-themename a:hover, a.ui-themename:hover { color:#FFF; } 


请 注意 ， themename ,css 文件 只 包括 全 局 通用 的 样式 信息 ， 特 定 插件 的 样式 信息 
不 在 这 里 进行 定义 。 这 里 的 样式 对 所 有 主题 都 是 适用 的 。 不 用 担心 一 个 主题 会 占据 
多 个 文件 - 这 些 会 在 创建 和 下 载 的 过 程 被 简化 。 


jQuery UI 部 件 库 


jQuery UI 部 件 库 (Widget Factory) 


jQuery UI 部 件 库 (Widget Factory) 是 一 个 可 扩展 的 基础 ， 所 有 的 jQuery UI 小 部 
件 都 是 在 上 面 进行 创建 的 。 使 用 部 件 库 (Widget Factory) 来 创建 插件 ， 提 供 了 方 
便 的 状态 管理 ， 同 时 也 为 一 些 常见 的 任务 提供 了 便捷 ， 上 比如 暴露 插件 方法 ， 实 例 化 
后 改变 选项 等 。 


。 通过 部 件 库 (Widget Factory) 扩展 小 部 件 (Widget) 
e 小 部 件 (Widget) 方法 调用 

e 为 什么 使 用 部 件 库 (Widget Factory) 

e 如 何 使 用 部 件 库 (Widget Factory) 


jQuery Ul 通过 部 件 订 (Widget Factory) 扩展 小 
部 件 


jQuery UI 的 部 件 库 (Widget Factory) 使 得 创建 小 部 件 变 得 更 加 容易 ， 这 些小 部 件 
扩展 了 已 有 小 部 件 的 功能 。 这 样子 您 就 能 在 已 有 的 基础 上 创建 出 功能 强大 的 小 部 
件 ， 也 可 以 在 已 有 的 小 部 件 功 能 上 做 细微 的 调整 。 


注意 : 在 学 习 本 章节 之 前 ， 需 要 明白 什么 是 部 件 库 (Widget Factory) ， 及 它 是 怎 
么 工作 的 。 如 果 您 对 这 些 知识 还 不 熟悉 ， 那 么 请 先 查 看 如 何 使 用 部 件 库 (Widget 
Factory) 章节 。 


创建 小 部 件 扩展 


通过 部 件 库 (Widget Factory) 创建 小 部 件 是 通过 向 $.widget() eR 
称 和 一 个 原型 对 象 来 完成 的 。 下 面 的 实例 是 在 "custom" 命名 空间 中 创建 一 
"superDialog" 小 部 件 。 


$.widget( "custom.superDialog", {} ); 


为 了 支持 扩展 ， $.widget() 可 选 性 地 接受 作为 父 部 件 使 用 的 小 部 件 的 构造 画 
数 。 当 指定 一 个 父 部 件 时 ， 把 它 作 为 第 二 个 参数 进行 传递 ， 放 在 小 部 件 名 称 后 面 ， 
在 小 部 件 原型 对 象 前 面 。 


就 像 上 面 的 实例 ， 下 面 也 要 在 "custom" 命名 空间 中 创建 一 个 "superDialog" 小 部 
件 。 但 是 这 次 传递 的 是 jQuery Ul 的 dialog (对 话 框 ) BRA 的 构造 画 数 

( $.ui.dialog ) ， 表 示 superDialog 小 部 件 应 该 使 用 jQuery Ul 的 dialog (对 
话 框 ) 小 部 件 作为 父 部 件 。 


$.widget( "custom.superDialog", $.ui.dialog, {} ); 


在 这 里 ，superDialog 和 dialog 两 个 小 部 件 实质 上 是 等 价 的 ， 只 是 名 称 和 命名 空间 
不 同 而 已 。 为 了 让 我 们 新 的 小 部 件 更 具 特 点 ， 我 们 可 以 添加 一 些 方法 到 它 的 原型 对 
象 上 。 


小 部 件 的 原型 对 象 是 传递 给 $.widget() 的 最 后 一 个 参数 。 到 目前 为 止 ， 我 们 的 
实例 使 用 的 是 一 个 空 的 对 象 。 现 在 让 我 们 给 这 个 对 象 添 加 一 个 方法 : 


$.widget( "custom.superDialog", $.ui.dialog, { 
red: function() { 
this.element.css( "color", "red" ); 
} 
3): 


// Create a new «div», convert it into a superDialog, and call the 
$( "<div>I am red</div>" ) 

. superDialog() 

.superDialog( "red" ); 








现在 superDialog 有 一 个 red() 方法 ， 这 会 把 它 的 文本 颜色 改 为 红色 。 请 注 
意 ， 部 件 库 (Widget Factory) 是 如 何 自动 设置 this 为 小 部 件 的 实例 对 象 。 如 
需 了 解 实例 上 所 有 可 用 的 方法 和 属性 列表 ， 请 访问 GB (Widget Factory) API 
文档 。 


扩展 已 有 的 方法 


有 了 时候， 您 需要 调整 或 添加 已 有 部 件 方法 的 行为 。 您 可 以 把 方法 名 称 指定 为 原型 对 
象 上 需要 重 载 的 方法 名 称 。 下 面 的 实例 重 裁 了 dialog (对 话 框 ) 的 open() A 
法 。 由 于 对 话 框 默 认 是 打开 的 ， 当 运行 这 段 代 码 时 ， "open" 将 会 被 记录 。 


$.widget( "custom.superDialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 


3); 


// Create a new «div», and convert it into a superDialog. 
$( "<div>" ).superDialog(); 


当 运 行 这 段 代 码 时 ， 有 一 个 问题 。 由 于 我 们 重 载 了 open() 的 默认 行为 ， 所 以 
dialog (对 话 框 ) 不 再 显示 在 屏幕 上 。 

当 我 们 在 原型 对 象 上 使 用 方法 ， 我 们 实际 上 是 重 载 了 原始 的 方法 ， 在 原型 链 中 使 用 
了 一 个 新 的 方法 。 

为 了 让 父 部 件 方 法 可 用 ， 部 件 库 (Widget Factory) 提供 了 两 个 方法 - _super() 
和 _superApply() o 


使 用 _super() 和 _superApply() 来 访问 父 部 件 


_super() 和  superApply() 在 父 部 件 中 调用 了 同样 的 方法 。 请 看 下 面 的 实 
例 。 就 像 上 一 个 实例 ， 这 个 实例 也 重 载 了 open) 方法 来 记录 "open". Am, 
这 次 运行 _super() 是 调用 了 dialog 〈 对 话 框 ) BY open() ， 并 打开 对 话 框 。 


$.widget( "custom.superDialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 


// Invoke the parent widget's open(). 
return this. super(); 


} 
3); 


$( "<div>" ).superDialog(); 


_super() 和  superApply() 实际 上 等 同 于 最 初 的 
Function.prototype.call() 和 Function.prototype.apply() 方法 。 
Itt, _super() 接受 一 个 参数 列表 ， _superApply() 接受 一 个 数组 作为 参数 。 
下 面 的 实例 演示 了 这 二 者 之 间 的 不 同 。 


$.widget( "custom.superDialog", $.ui.dialog, { 
_setOption: function( key, value ) { 


// Both invoke dialog's setOption() method.  super() requi! 
// be passed as an argument list,  superApply() as a single 
this._super( key, value ); 

this. superApply( arguments ); 





重 定义 小 部 件 


jQuery UI 1.9 添加 了 重 定义 小 部 件 的 功能 。 因 此 ， 可 以 不 用 创建 一 个 新 的 小 部 件 ， 
我 们 只 需要 传递 $.widget() 这 样 一 个 已 有 的 小 部 件 名 称 和 构造 画 数 即 可 。 下 面 
的 实例 在 open() 中 添加 了 相同 的 记录 ， 但 不 是 通过 创建 一 个 新 的 小 部 件 来 完成 
的 。 


$.widget( "ui.dialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 
return this. super(); 
} 
}); 


$( "<div>" ).dialog(); 


通过 这 个 方法 ， 我 们 可 以 扩展 一 个 已 有 的 小 部 件 方法 ， 但 是 仍然 可 以 使 用 
_super() 来 访问 原始 的 方法 - 这 些 都 不 是 通过 创建 一 个 新 的 小 部 件 来 完成 的 ， 
而 是 直接 重 定义 小 部 件 即 可 。 


小 部 件 (Widgets) 和 多 态 性 (Polymorphism) 


当 在 小 部 件 扩展 及 它们 的 插件 之 间 进 行 交 互 时 候 ， 有 一 点 值得 注意 ， 父 部 件 的 插件 
不 能 用 来 调用 子 部 件 元 素 上 的 方法 。 下 面 的 实例 演示 了 这 一 点 。 


$.widget( "custom.superDialog", $.ui.dialog, {} ); 
var dialog - $( "«div»" ).superDialog(); 


// This works. 
dialog.superDialog( "close" ); 


// This doesn't. 
dialog.dialog( "close" ); 


上 面 的 实例 中 ， 父 部 件 的 插件 ， dialog() ， 不 能 调用 superDialog 元 素 上 的 
close() Aik. 如 需 了 解 更 多 调用 小 部 件 方 法 的 知识 ， 请 查看 小 部 件 
(Widget) 方法 调用 。 


定制 个 性 化 实例 


目前 为 止 ， 我 们 看 到 的 实例 都 有 在 小 部 件 原 型 上 扩展 的 方法 。 在 原型 上 重 载 的 方法 
影响 了 小 部 件 的 所 有 实例 。 


为 了 演示 这 一 点 ， 请 看 下 面 的 实例 。dialog (对 话 框 ) 的 两 个 势力 都 使 用 了 相同 的 
open() 方法 。 


$.widget( "ui.dialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 
return this._super(); 
} 
3); 


// Create two dialogs, both use the same open(), therefore "open" : 
$( "<div>" ).dialog(); 
$( "«div»" ).dialog(); 


HJE 
有 时 候 ， 您 只 需要 改变 小 部 件 的 某 个 实例 的 行为 。 为 了 做 到 这 点 ， 您 需要 使 用 正常 


的 JavaScript 属性 分 配 ， 获 得 对 实例 的 引用 ， 并 重 载 该 方法 。 具 体 如 下 面 实例 所 
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var dialogInstance = $( "<div>" ) 
. dialog() 
// Retrieve the dialog's instance and store it. 
.data( "ui-dialog" ); 


// Override the close() method for this dialog 
dialogInstance.close = function() { 
console.log( "close" ); 


// Create a second dialog 
$( "<div>" ).dialog(); 


// Select both dialogs and call close() on each of them. 


// "close" will only be logged once. 
$( ":data(ui-dialog)" ).dialog( "close" ); 


个 性 化 实例 的 重 载 方法 技术 是 完美 的 一 次 性 定制 。 


jQuery UI 小 部 件 (Widget) 方法 调用 

小 部 件 (Widget) 是 通过 部 件 库 (Widget Factory) 使 用 方法 来 改变 他 们 初始 化 后 
的 状态 和 执行 动作 而 被 创建 的 。 有 两 种 调用 小 部 件 方法 的 方式 - 通过 部 件 库 
(Widget Factory) 创建 的 插件 ， 或 者 通过 调用 元 素 实 例 对 象 上 的 方法 。 


插件 调用 


使 用 小 部 件 的 插件 调用 方法 ， 把 方法 名 称 以 字符 串 形 式 进行 传递 。 例 如 ， 点 击 这 里 
查看 ， 如 何 调用 dialog (对 话 框 ) 小 部 件 的 close() 方法 。 


$( ".selector" ).dialog( "close" ); 


如 果 方 法 要 求 参 数 ， 请 作为 额外 的 参数 传递 给 插件 。 点 击 这 里 查看 ， 如 何 调用 
dialog (对 话 框 ) 的 option() 方法 。 


$( ".selector" ).dialog( "option", "height" ); 
这 会 返回 dialog (对 话 框 ) 的 height 选项 的 值 。 


实例 调用 

每 个 小 部 件 的 每 个 实例 都 是 使 用 jouery.data() 存储 在 元 素 上 。 为 了 检索 实例 
对 象 ， 请 使 用 小 部 件 的 全 称 作为 键 名 调用 jQuery.data() 。 上 有 具体 如 下 面 实例 所 
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var dialog - $( ".selector" ).data( "ui-dialog" ); 


在 您 引用 实例 对 象 之 后 ， 可 以 直接 在 上 面 调用 方法 。 


var dialog = $( ".selector" ).data( "ui-dialog" ); 
dialog.close(); 


在 jQuery UI 1.11 中 ， 新 的 instance() 方法 会 使 得 这 个 过 程 变 得 更 简单 。 


$( ".selector" ).dialog( "instance" ).close(); 


大 多 数 通 过 小 部 件 的 插件 调用 的 方法 将 返回 一 个 jquery 对 象 ， 所 以 方法 调用 可 
以 通过 额外 的 jQuery 方法 链接 。 当 在 实例 上 进行 调用 时 ， 则 会 返回 
undefined 。 上 有 具体 如 下 面 实例 所 示 。 


var dialog = $( ".selector" ).dialog(); 


// Instance invocation - returns undefined 
dialog.data( "ui-dialog" ).close(); 


// Plugin invocation - returns a jQuery object 
dialog.dialog( "close" ); 


// Therefore, plugin method invocation makes it possible to 
// chain method calls with other jQuery functions 
dialog.dialog( "close" ) 

sess( "color"; “red” ); 


例外 的 是 ， 返 回 小 部 件 相 关 信 息 的 那些 方法 。 例 如 dialog 〈 对 话 框 ) 的 
isOpen() 方法 。 


$( ".selector" ) 
.dialog( "isOpen" ) 
// This will throw a TypeError 
SCS “color, “red” js 


这 会 产生 一 个 TypeError 错误 ， 因 为 isopen() 返回 的 是 一 个 布尔 值 ， 而 不 是 
一 个 jQuery 对 象 。 


jQuery Ul 为 什么 使 用 部 件 库 (Widget Factory) 


编写 jQuery 插件 与 向 jQuery.prototype (通常 显示 为 $.fn ) 添加 方法 一 祥 
简单 ， 且 需要 遵循 一 些 简 单 的 规则 ， 比 如 返回 this 。 所 以 为 什么 会 存在 部 件 库 
(Widget Factory) ? 


在 本 章节 中 ， 我 们 将 讲解 部 件 库 (Widget Factory) 的 好 处 ， 并 了 解 何 时 使 用 它 ， 
以 及 为 什么 要 使 用 它 。 


无 状态 vs. 有 状态 插件 


大 多 数 jQuery 插件 是 无 状态 的 ， 它 们 执行 一 些 动作 即 完成 了 它们 的 任务 。 例 如 ， 
如 果 您 使 用 .text( "hello" ) 设置 元 素 的 文本 ， 没 有 安装 阶段 ， 结 果 都 是 一 样 
的 。 对 于 这 种 类 型 的 插件 ， 它 只 是 扩展 了 jQuery 的 原型 。 


然而 ， 一 些 插件 是 有 状态 的 ， 它 们 有 全 生命 周期 、 维 持 状态 以 及 对 变化 的 反应 。 这 
些 插件 需要 大 量 专门 的 代码 来 初始 化 和 状态 管理 (有 时 是 销毁 ) 。 这 就 导致 出 现 了 
用 于 创建 有 状态 插件 的 模板 。 更 糟糕 的 是 ， 每 个 插件 的 作者 按照 不 同 的 方式 进行 管 
理 插件 的 生命 周期 和 状态 。 这 就 导致 了 不 同 的 插件 有 不 同 的 API 样式 。 部 件 库 
di Factory) 旨 在 解决 这 些 问题 ， 它 移 除 了 模板 ， 并 为 插件 创建 了 一 个 一 致 
J API, 


一 致 的 API 


部 件 库 (Widget Factory) 定义 了 如 何 创 建 和 销毁 小 部 件 ， 获 取 和 设置 选项 ， 调 用 
方法 ， 以 及 监听 小 部 件 触 发 的 事件 。 通 过 使 用 部 件 库 (Widget Factory) 来 创建 有 
状态 的 插件 ， 会 自动 符合 定义 的 标准 ， 让 新 用 户 更 容易 使 用 您 的 插件 。 另 外 ， 部 件 
Æ (Widget Factory) 还 能 实现 定义 接口 的 功能 。 如 果 您 对 部 件 库 (Widget 
Factory) 提供 的 API 还 不 熟悉 ， 请 查看 WABI (Widget Factory) 。 


在 初始 化 时 设置 选项 


当 您 创建 一 个 接受 选项 的 插件 时 ， 您 应 该 为 尽 可 能 多 的 选项 定义 defaults。 然 后 在 
初始 化 时 ， 把 用 户 提供 的 选项 与 defaults 进行 合并 。 您 也 可 以 暴露 defaults， 这 样 
用 户 就 可 以 更 改 默认 值 。 在 jQuery 插件 中 ， 一 个 常用 的 模式 如 下 所 示 : 


$.fn.plugin = function( options ) { 
options = $.extend( {}, $.fn.plugin.defaults, options ); 
// Plugin logic goes here. 
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$.fn.plugin.defaults = { 
parami: "foo", 
param2: "bar", 
param3: "baz" 


HH 


部 件 库 (Widget Factory) 也 提供 了 这 个 功能 ， 并 在 这 上 面 做 了 改进 。 使 用 部 件 库 
(Widget Factory) 之 后 ， 它 将 如 下 所 示 。 


$.widget( "ns.plugin", { 


// Default options. 
options: { 
parami: "foo", 
param2: "bar", 
param3: "baz" 


}, 
_create: function() { 


// Options are already merged and stored in this.options 
// Plugin logic goes here. 


3); 


jQuery UI 如 何 使 用 部 件 库 (Widget Factory) 


我 们 将 创建 一 个 进度 条 。 正 如 下 面 实例 所 示 ， 这 可 以 通过 调用 jQuery .widget() 
来 完成 ， 它 带 有 两 个 参数 : 一 个 是 要 创建 的 插件 名 称 ， 一 个 是 包含 支持 插件 的 函数 
的 对 象 文 字 。 当 插件 被 调用 时 ， 它 将 创建 一 个 新 的 插件 实例 ， 所 有 的 函数 都 将 在 该 
实例 的 语 境 中 被 执行 。 这 与 两 种 重要 方式 的 标准 jQuery 插件 不 同 。 首 先 ， 语 境 是 
一 个 对 象 ， 不 是 DOM 元 素 。 其 次 ， 语 境 总 是 一 个 单一 的 对 象 ， 不 是 一 个 集合 。 


$.widget( "custom.progressbar", { 
_create: function() { 
var progress = this.options.value + "%"; 
this.element 
.addClass( "progressbar" ) 
.text( progress ); 
j 
3); 


插件 的 名 称 必 须 包含 命名 空间 ， 在 这 个 实例 中 ， 我 们 使 用 了 custom 命名 空间 。 
您 只 能 创建 一 层 深 的 命名 空间 ， 因 此 ， custom.progressbar 是 一 个 有 效 的 插件 
名 称 ， 而 very.custom.progressbar 不 是 一 个 有 效 的 插件 名 称 。 


我 们 看 到 部 件 库 (Widget Factory) 为 我 们 提供 了 两 个 属性 。 this.element = 
一 个 包含 一 个 元 素 的 jQuery 对 象 。 如 果 我 们 的 插件 在 包含 多 个 元 素 的 jQuery 对 象 
上 调用 ， 则 会 为 每 个 元 素 创建 一 个 单独 的 插件 实例 ， 且 每 个 实例 都 会 有 自己 的 
this.element 。 第 二 个 属性 ， this.options ， 是 一 个 包含 所 有 插件 选项 的 键 
名 / 键 值 对 的 哈 希 (hash) 。 这 些 选项 可 以 被 传 给 插件 ， 如 下 所 示 : 


$( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar(( value: 20 }); 


当 我 们 调用 jQuery.widget() ， 它 通过 给 jQuery.fn (用 于 创建 标准 插件 的 

系统 ) 添加 函数 来 扩展 jQuery。 所 添加 的 函数 名 称 是 基于 您 传 给 

jQuery .widget() 的 名 称 ， 不 带 命 名 空间 - "progressbar"。 传 给 插件 的 选项 是 在 
插件 实例 中 获取 设置 的 值 。 如 下 面 的 实例 所 示 ， 我 们 可 以 为 任意 一 个 选项 指定 默认 
值 。 当 设计 您 的 API 时 ， 您 应 该 清楚 你 的 插件 的 最 常见 的 使 用 情况 ， 以 便 您 可 以 设 
转 适 当 的 默认 值 ， 且 确保 使 所 有 的 选项 真正 可 选 。 


$.widget( "custom.progressbar", { 


// Default options. 
options: { 
value: 0 
}, 
_create: function() { 
var progress = this.options.value + "96"; 
this.element 
.addClass( "progressbar" ) 
.text( progress ); 
} 
Py 


调用 插件 方法 
现在 我 们 可 以 初始 化 我 们 的 进度 条 ， 我 们 将 通过 在 插件 实例 上 调用 方法 来 执行 动 


作 。 为 了 定义 一 个 插件 方法 ， 我 们 只 在 我 们 传 给 jQuery .widget() 的 对 象 中 引 
用 函数 。 我 们 也 可 以 通过 给 函数 名 加 下 划 线 前 级 来 定义 "private" 方法 。 


$.widget( "custom.progressbar", { 


options: { 
value: 0 


ty 


_create: function() { 
var progress = this.options.value + "%"; 
this.element 
.addClass( "progressbar" ) 
.text( progress ); 


ty 


// Create a public method. 
value: function( value ) { 


// No value passed, act as a getter. 
if ( value === undefined ) { 

return this.options.value; 
j 


// Nalue passed, act as a setter. 
this.options.value - this. constrain( value ); 
var progress = this.options.value + "%"; 
this.element.text( progress ); 


ty 


// Create a private method. 
_constrain: function( value ) { 
if ( value > 100 ) { 
value = 100; 


} 
if ( value < © ) { 
value = 0; 


return value; 


} 
3): 


为 了 在 插件 实例 上 调用 方法 ， 您 可 以 向 jQuery 插件 传递 方法 的 名 称 。 如 果 您 调用 
的 方法 接受 参数 ， 您 只 需 简单 地 在 方法 名 后 面 传递 这 些 参 数 即 可 。 


注意 : 通过 向 同一 个 用 于 初始 化 插件 的 jQuery 男 数 传递 方法 名 来 执行 方法 。 这 样 
做 是 为 了 在 保持 链 方 法 调用 时 防止 jQuery 命名 空间 污染 。 在 本 章节 的 后 续 ， 我 们 
将 看 到 看 起 来 更 自然 的 其 他 用 法 。 


var bar = $( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar(( value: 20 }); 


// Get the current value. 
alert( bar.progressbar( "value" ) ); 


// Update the value. 
bar.progressbar( "value", 50 ); 


// Get the current value again. 
alert( bar.progressbar( "value" ) ); 


使 用 选项 


option() 方法 是 自动 提供 给 插件 的 。 option() 方法 允许 您 在 初始 化 后 获取 并 
设置 选项 。 该 方法 像 jQuery 的 .css() 和 .attr() 方法 : 您 可 以 只 传递 一 个 
名 称 作为 取 值 器 来 使 用 ， 也 可 以 传递 一 个 名 称 和 值 作 为 设置 器 使 用 ， 或 者 传递 一 个 
键 名 / 键 值 对 的 哈 希 来 设置 多 个 值 。 当 作为 取 值 器 使 用 时 ， 揪 件 将 返回 与 传人 名 称 相 
对 应 的 选项 的 当前 值 。 当 作为 设置 器 使 用 时 ， 插 件 的 _setoption 方法 将 被 每 个 
被 设置 的 选项 调用 。 我 们 可 以 在 我 们 的 插件 中 指定 一 个 _setoption 方法 来 反应 
选项 更 改 。 对 于 更 改选 项 要 独立 执行 的 动作 ， 我 们 可 以 重 载 _setOptions o 


$.widget( "custom.progressbar", { 
options: { 
value: 0 


_create: function() { 
this.options.value = this. constrain(this.options.value); 
this.element.addClass( "progressbar" ); 
this.refresh(); 


tr 
_setOption: function( key, value ) { 
if ( key === "value" ) { 
value = this._constrain( value ); 
} 
this._super( key, value ); 
tr 


_setOptions: function( options ) { 
this. super( options ); 
this.refresh(); 

3 

refresh: function() ( 
var progress = this.options.value + "96"; 
this.element.text( progress ); 

3 

_constrain: function( value ) { 
if ( value > 100 ) { 

value - 100; 


} 
if ( value < © ) { 
value = 0; 


return value; 


添加 回调 


最 简单 的 扩展 插件 的 方法 是 添加 回调 ， 这 样 用 户 就 可 以 在 插件 状态 发 生变 化 时 做 出 
反应 。 我 们 可 以 看 下 面 的 实例 如 何在 进度 达到 10096 时 添加 回调 到 进度 

条  trigger() 方法 有 三 个 参数 : 回调 名 称 ， 一 个 启动 回调 的 jQuery 事件 对 
象 ， 以 及 一 个 与 事件 相关 的 数据 哈 希 。 回 调 名 称 是 唯一 一 个 必需 的 参数 ， 但 是 对 于 
想 要 在 插件 上 实现 自 定义 功能 的 用 户 ， 其 他 的 参数 是 非常 有 用 的 。 例 如 ， 如 果 我 们 
创建 一 个 可 拖 搜 插件 ， 我 们 可 以 在 触发 拖 搜 回调 时 传递 mousemove 事件 ， 这 将 允 
许 用 户 对 基于 由 事件 对 象 提供 的 x/y 坐标 上 的 拖 搜 做 出 反应 。 请 注意 ， 传 递 到 
_trigger() 的 原始 的 事件 必须 是 一 个 jQuery 事件 ， 而 不 是 一 个 原生 的 浏览 器 事 
件 。 


$.widget( "custom.progressbar", { 
options: { 
value: 0 


_create: function() { 
this.options.value = this. constrain(this.options.value); 
this.element.addClass( "progressbar" ); 
this.refresh(); 


tr 
_setOption: function( key, value ) { 
if ( key === "value" ) { 
value = this._constrain( value ); 
} 
this._super( key, value ); 
tr 


_setOptions: function( options ) { 
this. super( options ); 
this.refresh(); 
ty 
refresh: function() { 
var progress = this.options.value + "%"; 
this.element.text( progress ); 
if ( this.options.value == 100 ) { 
this._trigger( "complete", null, { value: 100 } ); 
} 


tr 
_constrain: function( value ) { 
if ( value > 100 ) { 
value = 100; 


} 

if ( value < © ) { 
value = 0; 

} 


return value; 
} 
3): 


EE 


回调 函数 本 质 上 只 是 附加 选项 ， 所 以 您 可 以 像 其 他 选项 一 样 获取 并 设置 它们 。 无 论 
何 时 执行 回调 ， 都 会 有 一 个 相对 应 的 事件 被 触发 。 事 件 类 型 是 通过 连接 插件 的 名 称 
和 回调 函数 名 称 确定 的 。 回 调和 事件 都 接受 两 个 相同 的 参数 : 一 个 事件 对 象 和 一 个 
与 事件 相关 的 数据 哈 希 ， 具 体 如 下 面 实例 所 示 。 您 的 插件 可 能 需要 包含 防止 用 户 使 
用 的 功能 ， 为 了 做 到 这 点 ， 最 好 的 方法 就 是 创建 爱 你 可 撤销 的 回调 。 用 户 可 以 撤销 
回调 或 者 相关 的 事件 ， 与 他 们 撤销 任何 一 个 原生 事件 一 样 ， 都 是 通过 调用 
event.preventDefault() 或 返回 false 来 实现 的 。 如 果 用 户 撤销 回 

jj,  trigger() 方法 将 返回 false ， 这 样 您 就 能 在 插件 内 实现 合适 的 功能 。 


var bar = $( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar(1 
complete: function( event, data ) ( 
alert( "Callbacks are great!" ); 
} 


}) 

.bind( "progressbarcomplete", function( event, data ) { 
alert( "Events bubble and support many handlers for extreme 
alert( "The progress bar value is " + data.value ); 


3); 


bar.progressbar( "option", "value", 100 ); 





现在 我 们 已 经 看 到 如 何 使 用 部 件 库 (Widget Factory) 创建 一 个 插件 ， 接 下 来 让 我 
们 看 看 它 实际 上 是 如 何 工 作 的 。 当 您 调用 jQuery.widget() 时 ， 它 将 为 插件 创 
建 一 个 构造 画 数 ， 并 设置 您 为 插件 实例 传 入 的 作为 原型 的 对 象 。 所 有 自动 添加 到 插 
件 的 功能 都 来 自 一 个 基本 的 小 部 件 原 型 ， 该 原型 定义 为 
jQuery.Widget.prototype 。 当 创建 插件 实例 时 ， 会 使 用 jQuery.data 把 它 
存储 在 原始 的 DOM 元 素 上 ， 插 件 名 作为 键 名 。 


由 于 插件 实例 直接 链接 到 DOM 元 素 上 ， 您 可 以 直接 访问 插件 实例 ， 而 不 需要 通 历 
插件 方法 。 这 将 人 允许 您 直接 在 插件 实例 上 调用 方法 ， 而 不 需要 传递 字符 串 形 式 的 方 
法 名 ， 同 时 您 也 可 以 直接 访问 插件 的 属性 。 


var bar = $( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar() 
.data( "progressbar" ); 


// Call a method directly on the plugin instance. 
bar.option( "value", 50 ); 


// Access properties on the plugin instance. 


alert( bar.options.value ); 


sue m 不 通 历 插件 方法 的 情况 下 创建 一 个 实例 ， 通 过 选项 和 元 素 直 接 调 用 构造 
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var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "I 


// Same result as before. 
alert( bar.options.value ); 


«| 


扩展 插件 的 原型 


插件 有 构造 画 数 和 原型 的 最 大 好 处 是 易于 扩展 插件 。 Bu c 
方法 ， 我 们 可 以 修改 插件 所 有 实例 的 行为 。 例 如 ， 如 果 我 们 想 要 向 进度 条 添加 一 
方法 来 重 置 进度 为 0%， 我 们 可 以 向 原型 添加 这 个 方法 ， 它 将 在 所 有 插件 实例 上 可 
调用 。 








$.custom.progressbar.prototype.reset = function() { 
this. setOption( "value", © ); 


如 需 了 解 扩 展 小 部 件 的 更 多 细 以 及 如 何在 一 个 已 有 的 小 部 件 上 创建 一 个 全 新 的 
小 部 件 的 更 多 细节 ， 请 查看 通过 部 件 库 (Widget Factory) 扩展 小 部 件 

(Widget) 。 

清理 


在 某 些 情况 下 ， 人 允许 用 户 应 用 插件 ， 然 后 再 取消 应用。 您 可 以 通过 _destroy() 
方法 做 到 这 一 点 。 在 _destroy() 方法 内 ， 您 点 该 撤销 在 初始 化 和 后 期 使 用 期 间 
插件 所 做 的 一 切 动作 。  destroy() 是 通过 .destroy() 方法 被 调用 

BY, .destroy() 方法 是 在 插件 实例 绑 定 的 元 素 从 DOM 
的 ， 所 以 这 可 被 用 于 垃圾 回收 。 基 本 的 .destroy() 方法 也 义理 一 些 常用 的 清 
操作 ， 上 比如 从 小 部 件 的 DOM 元 素 上 移 除 实例 引用 ， Noe eee ae 
空间 中 的 所 有 事件 ， 解 除 绑 定 所 有 使 用 _bind() 添加 的 事件 。 


$.widget( "custom.progressbar", { 
options: { 
value: 0 


_create: function() { 
this.options.value = this. constrain(this.options.value); 
this.element.addClass( "progressbar" ); 
this.refresh(); 


tr 
_setOption: function( key, value ) { 
if ( key === "value" ) { 
value = this._constrain( value ); 
} 
this._super( key, value ); 
tr 


_setOptions: function( options ) { 
this. super( options ); 
this.refresh(); 

}, 

refresh: function() { 
var progress = this.options.value + "%"; 
this.element.text( progress ); 
if ( this.options.value == 100 ) { 

this._trigger( "complete", null, { value: 100 } ); 

} 

}, 


_constrain: function( value ) { 
if ( value > 100 ) { 
value = 100; 


} 

if ( value < 0 ) { 
value = 0; 

} 


return value; 


ty 


_destroy: function() { 
this.element 
.removeClass( "progressbar" ) 
.text( "" ); 


关闭 注释 


部 件 库 (Widget Factory) 只 是 创建 有 状态 插件 的 一 种 方式 。 这 里 还 有 一 些 其 他 不 
同 的 模型 可 以 使 用 ， 且 每 个 都 有 各 自 的 优势 和 劣势 。 部 件 库 (Widget Factory) f& 
决 了 很 多 常见 的 问题 ， 且 大 大 提高 了 效率 ， 同 时 也 大 大 提高 了 代码 的 重用 性 ， 使 它 
适合 于 jQuery Ul 及 其 他 有 状态 的 插件 。 


请 注意 ， 在 本 章节 中 我 们 使 用 了 custom 命名 空间 。 ui 命名 空 > 
jQuery Ul 插件 保留 。 当 创建 您 自己 的 插件 时 ， 您 应 该 创建 自己 的 命名 空间 。 这 
才能 更 清楚 插件 来 自 哪 里 ， 属于 哪个 范围 。 


jQuery UI 实例 


jQuery UI 实例 


jQuery Ul 提供 了 一 组 用 户 界面 交互 、 特 效 、 小 部 件 、 实 用 工具 及 主题 。 通 过 实例 
An ARRA AEEA, HAPI 文档 ， 开 始 学 习 使 用 jQuery Ul. 


交互 (Interactions) 


交互 (Interactions) 向 任何 元 素 添 加 基本 的 基于 鼠标 的 行为 。 您 可 以 只 通过 短 短 的 
几 行 代码 即 可 创建 排序 列表 、 缩 放 元 素 、 拖 放行 为 等 等 。 交 互 (Interactions) 也 作 
用 于 更 复杂 的 小 部 件 和 应 用 程序 。 


拖 动 (Draggable) 
放置 (Droppable) 
缩放 (Resizable) 
选择 (Selectable) 
排序 (Sortable) 


小 部 件 (Widgets) 


小 部 件 (Widgets) 有 功能 齐全 的 UI 控件 ， 使 桌面 应 用 程序 也 具备 Web 应 用 程序 
一 样 丰富 的 功能 。 所 有 的 小 部 件 (Widgets) 提供 了 一 个 核心 ， 带 有 定制 行为 的 大 
量 扩展 以 及 完整 的 主题 支持 。 


e iré (Accordion) 
自动 完成 (Autocomplete) 
按钮 (Button) 
日 期 选择 器 (Datepicker) 
对 话 框 (Dialog) 

菜单 (Menu) 

进度 条 (Progressbar) 
滑 块 (Slider) 

旋转 器 (Spinner) 
标签 页 (Tabs) 

工具 提示 框 (Tooltip) 


特效 (Effects) 


特效 (Effects) 支持 颜色 动画 和 Class 转换 ， 同 时 也 提供 了 一 些 额 外 的 Easings。 
2 供 显 示 和 隐藏 元 素 时 或 者 只 是 添加 一 些 视觉 显 
示 时 使 用 。 


e 特效 (Effect) 
e FA WM (Visibility) 
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o 显示 (Show) 
o 隐藏 (Hide) 
o 切换 (Toggle) 
e Class 动画 (Class Animation) 
o 添加 Class (Add Class) 
o 移 除 Class (Remove Class) 
o 切换 Class (Toggle Class) 
o 转换 Class (Switch Class) 
e 颜色 动画 (Color Animation) 


实用 工具 (Utilities) 


jQuery Ul 使 用 实体 工具 (Utilities) 来 创建 交互 (interactions) 和 小 部 件 
(widgets) 。 


e 定位 (Position) 
e 部 件 库 (Widget Factory) 


jQuery UI 实例 2665 


jQuery UI 实例 - 拖 动 (Draggable) 


允许 使 用 鼠标 移动 元 素 。 


如 需 了 解 更 多 有 关 draggable 交互 的 细节 ， 请 查看 API 文档 可 拖 搜 小 部 件 
(Draggable Widget) 。 


默认 功能 


在 任意 的 DOM 元 素 上 启用 draggable 功能 。 通 过 最 标点 击 并 在 视 区 中 拖 动 来 移动 
draggable 对 象 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 150px; height: 150px; padding: 0.5em; } 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable(); 

+); 
</script> 

</head> 

<body> 


<div id="draggable" class="ui-widget -content"> 
<p> 请 拖 动 我 1 </p> 
</div> 


</body> 
</html> 


mm — —— ae 





自动 滚动 


当 draggable 移动 到 视 区 外 时 自动 滚动 文档 。 设 置 scroll 选项 为 true 来 启用 自 
动 滚动 ， 当 滚动 触发 时 进行 微调 ， 滚 动 速度 是 通过 scrollSensitivity 和 
scrollSpeed 选项 设置 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 自动 滚动 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2, #draggable3 { width: 100px; height: 100; 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ scroll: true }); 
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity 
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 ` 
3); 
«/script» 
«/head» 
«body» 


«div id="draggable" class="ui-widget-content"> 
<p>Scroll 设置 为 true， 默 认 设置 </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p>scrollSensitivity 设置 为 100</p> 
</div> 


«div id="draggable3" class="ui-widget-content"> 
<p>scrollSpeed 设置 为 100</p> 
</div> 


<div style="height: 5000px; width: 1px;"></div> 


</body> 
</html> 
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约束 运动 


通过 定义 draggable 区 域 的 边界 来 约束 每 个 draggable 的 运动 。 设 置 axis 选项 
来 限制 draggable 的 路 径 为 x 轴 或 者 y 轴 ， 或 者 使 用 containment 选项 来 指定 
一 个 父 级 的 DOM 元 素 或 者 一 个 jQuery 选择 器 ， 比 如 'document.'. 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>jQuery UI #8 (Draggable) - 约束 运动 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.draggable { width: 90px; height: 90px; padding: 0.5em; float: le 
#draggable, #draggable2 { margin-bottom:20px; } 
#draggable { cursor: n-resize; } 
#draggable2 { cursor: e-resize; } 
#containment-wrapper { width: 95%; height:150px; border:2px solic 
h3 { clear: left; } 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable({ axis: "y" }); 

$( "#draggable2" ).draggable({ axis: "x" }); 


$( "#draggable3" ).draggable({ containment: "#containment -wrapy; 
$( "#draggable5" ).draggable({ containment: "parent" }); 


</script> 
</head> 
<body> 


<h3> 治 着 轴 约 束 运 动 : </h3> 


<div id="draggable" class="draggable ui-widget-content"> 
<p> 只 能 垂直 抑 搜 </p> 
</div> 


<div id="draggable2" class="draggable ui-widget-content"> 
<p> 只 能 水 平 拖 搜 </p> 
</div> 


<h3> 或 者 在 另 一 个 DOM 元 素 中 约束 运动 : </h3> 
«div id="containment -wrapper"> 
<div id="draggable3" class="draggable ui-widget-content"> 
<p> 我 被 约束 在 盒子 里 </p> 
</div> 


<div class="draggable ui-widget-content"> 
<p id="draggable5" class="ui-widget-header"> 我 被 约束 在 父 元 素 内 </p: 
</div> 
</div> 


</body> 
</html> 








光标 样式 


当 拖 搜 对 象 时 定位 光标 。 默 认 情 况 下 ， 光 标 是 出 现在 被 拖 搜 对 象 的 中 间 。 使 用 
cursorAt 选项 来 指定 相对 于 draggable 的 另 一 个 位 置 (指定 一 个 相对 于 top. 
right, bottom, left 的 像素 值 )。 通 过 提供 一 个 带 有 有 效 的 CSS 光标 值 的 
cursor 选项 ， 来 自 定义 光标 的 外 观 。 有 效 的 CSS 光标 值 包括 : default, 
move、pointer、crosshair， 等 等 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI $&zj (Draggable) - 光标 样式 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2, #draggable3 { width: 100px; height: 100; 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: -+ 
$( "#draggable3" ).draggable({ cursorAt: { bottom: © } }); 
3); 
«/script» 
«/head» 
«body» 


«div id="draggable" class="ui-widget-content"> 
<prk Xe (xt ERAS) </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p> 我 的 光标 是 在 left -5 和 top -5</p> 
</div> 


<div id="draggable3" class="ui-widget-content"> 
<p> 我 的 光标 位 置 只 控制 了 'bottom' 值 </p> 
</div> 


</body> 
</html> 


LE 


延迟 开始 





通过 delay 选项 设置 延迟 开始 拖 搜 的 毫秒 数 。 通 过 distance 选项 设置 光标 被 
按 下 且 拖 搜 指定 像素 后 才 人 允许 拖 搜 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 延迟 开始 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 120px; height: 120px; padding: ( 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ distance: 20 }); 
$( "#draggable2" ).draggable({ delay: 1000 }); 
$( ".ui-draggable" ).disableSelection(); 
3); 
«/script» 
«/head» 
«body» 


«div id="draggable" class="ui-widget-content"> 
<p> 只 有 把 我 拖 搜 了 20 像素 后 ， 拖 搜 才 开始 </p> 


</div> 
«div id="draggable2" class="ui-widget-content"> 

<p> distance 是 多 少 ， 您 都 必须 拖 搜 并 等 待 1000ms 后 拖 搜 才 开 始 </p> 
</div> 


</body> 
</html> 
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事件 


draggable 上 的 start 、 drag 和 stop 事件 。 拖 搜 开 始 时 触发 start 事 
件 ， 拖 搜 期 间 触 发 drag 事件 ， 拖 搜 停 止 时 触发 stop 事件 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI ### (Draggable) - 事件 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 16em; padding: 0 1em; } 
#draggable ul li { margin: 1em 0; padding: ©.5em 0; } * html #dré 
#draggable ul li span.ui-icon { float: left; } 
#draggable ul li span.count { font-weight: bold; } 
</style> 
<script> 
$(function() { 
var $start_counter = $( "#event-start" ), 

$drag_counter = $( "#event-drag" ), 

$stop_counter = $( "#event-stop" ), 

counts = [ 0, 0, O ]; 


$( "#draggable" ).draggable({ 
start: function() { 
counts[ © J++; 
updateCounterStatus( $start_counter, counts[ 0 ] ); 
}, 
drag: function() ( 
counts[ 1 ]++; 
updateCounterStatus( $drag counter, counts[ 1 ] ); 
}, 
stop: function() { 
counts[ 2 ]++; 
updateCounterStatus( $stop_counter, counts[ 2 ] ); 
} 
3); 


function updateCounterStatus( $event counter, new count ) ( 
// 首先 更 新 视觉 状态 ... 
if ( !$event_counter.hasClass( "ui-state-hover" ) ) { 
$event counter.addClass( "ui-state-hover" ) 
.siblings().removeClass( "ui-state-hover" ); 


} 
// .. .然后 更 新 数字 
$( "span.count", $event_counter ).text( new count ); 
} 
}); 
</script> 
</head> 
<body> 


<div id="draggable" class="ui-widget ui-widget-content"> 
<p> 请 拖 搜 我 ， 触 发 一 连 串 的 事件 。</p> 


<ul class="ui-helper-reset"> 
«li id="event-start" class="ui-state-default ui-corner-all'"»«s[ 
«li id="event-drag" class="ui-state-default ui-corner-all"><spz 
«li id="event-stop" class="ui-state-default ui-corner-all"><spz 
</ul> 


</div> 


</body> 
</html> 





aj 





Handles 


只 有 当 光 标 在 draggable LEERD F irt. (EAA handle 选项 来 指定 用 
于 拖 搜 对 象 的 元 素 (或 元 素 组 ) 的 jQuery 选择 器 。 

Or prevent dragging when the cursor is over a specific element (or group of 
elements) within the draggable. Use the cancel option to specify a jQuery selector 
over which to "cancel" draggable functionality. 


或 者 当 光 标 在 draggable 内 指定 元 素 (或 元 素 组 ) 上 时 不 允许 拖 搜 。 使 用 
handle 选项 来 指定 取消 拖 搜 功能 的 jQuery 选择 器 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - Handles</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 100px; height: 100px; padding: ( 
#draggable p { cursor: move; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ handle: "p" }); 
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }), 
$( "div, p" ).disableSelection(); 
3); 
</script> 
</head> 
<body> 


<div id="draggable" class="ui-widget-content"> 
<p class="ui-widget-header"> 您 只 可 以 在 这 个 范围 内 拖 搜 我 </p> 
</div> 


<div id="draggable2" class="ui-widget-content"> 

<p> 您 可 以 把 我 向 四 周 拖 搜 &hellip;</p> 

<p class="ui-widget-header">&hellip; 但 是 您 不 可 以 在 这 个 范围 内 拖 搜 我 </p: 
</div> 


</body> 
</html> 





当 带 有 布尔 值 revert 选项 的 draggable 停止 拖 搜 时 ， 返 回 draggable (或 它 的 
助手 ) 到 原始 位 置 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 还 原 位 置 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 100px; height: 100px; padding: ( 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable({ revert: true }); 
$( "#draggable2" ).draggable({ revert: true, helper: "clone" Y. 

3); 
«/script» 

</head> 

<body> 


«div id="draggable" class="ui-widget-content"> 
<p> 还 原 </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p> 还 原 助手 </p> 
</div> 


</body> 
</html> 
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了 j 章 到 元 又 或 网 格 


对 齐 draggable 到 DOM 元 素 的 内 部 或 外 部 边界 。 使 用 
snap 、 snapMode (inner, outer, both) 和 snapTolerance ( 当 调 用 对 齐 时 ， 
draggable 与 元 素 之 间 的 距离 ， 以 像素 为 单位 ) 选项 。 


或 者 对 齐 draggable 到 网 格 。 通 过 grid 选项 设置 网 格 单元 的 尺寸 (以 像素 为 单 
位 的 高 度 或 宽 度 ) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 对 齐 到 元 素 或 网 格 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.draggable { width: 90px; height: 80px; padding: 5px; float: lefi 
.ui-widget-header p, .ui-widget-content p ( margin: 0; } 
#snaptarget { height: 140px; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ snap: true }); 
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); 
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snap! 
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] }); 
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); 


</script> 
</head> 
<body> 


«div id="snaptarget" class="ui-widget -header"> 
<p> 我 是 对 齐 目标 </p> 
</div> 


<br style="clear:both"> 


<div id="draggable" x OL ui-widget-content"- 
<p> 默 认 (snap: true) ， 对 齐 到 所 有 其 他 的 draggable 元 素 </p> 
</div> 


<div E class="draggable ui-widget-content"> 
<p> 我 只 对 齐 到 大 盒子 </p> 
</div> 


<div x ed class-"draggable ui-widget-content"> 
<p> 我 只 对 齐 到 大 盒子 的 外 边缘 </p> 


</div> 


«div id="draggable4" class="draggable ui-widget-content"> 
<p> 我 对 齐 到 一 个 20 x 20 网 格 </p> 
</div> 


<div id="draggable5" class="draggable ui-widget-content"> 
<p> 我 对 齐 到 一 个 80 x 80 网 格 </p> 
</div> 


</body> 
</html> 





给 用 户 提供 反馈 ， 就 像 以 助手 方式 拖 搜 对 象 一 样 。 helper 选项 接受 值 
‘original’ (用 光标 移动 draggable 对 象 ) 'clone' (用 光标 移动 draggable 的 副 
A) ， 或 者 一 个 返回 DOM 元 素 的 函数 〈 该 元 素 在 拖 搜 期 间 显 示 在 光标 附近 ) 。 通 
过 opacity 选项 控制 助手 的 透明 度 。 


为 了 区 别 哪 一 个 draggable 正在 被 拖 搜 ， 让 在 运动 中 的 draggable 保持 最 前 。 如 果 
正在 拖 搜 ， 使 用 zIndex 选项 来 设置 助手 的 高 度 z-index， 或 者 使 用 stack 选 
项 来 确保 当 停止 拖 搜 时 ， 最 后 一 个 被 拖 搜 的 项 目 总 是 出 现在 同 组 其 他 项 目的 上 面 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 视觉 反馈 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2, #draggable3, #set div { width: 90px; he: 
#draggable, #draggable2, #draggable3 { margin-bottom: 20px; } 
#set { clear:both; float:left; width: 368px; height: 120px; } 
p { clear:both; margin:0; padding:1em 0; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ helper: "original" }); 
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" } 
$( "#draggable3" ).draggable({ 
cursor: "move", 
cursorAt: { top: -12, left: -20 }, 
helper: function( event ) { 
return $( "<div class='ui-widget-header'>I'm a custom help: 


3); 
$( "#set div" ).draggable({ stack: "#set div" }); 
3); 


</script> 
</head> 
<body> 


<h3 class="docs">B)# : </h3> 

«div id="draggable" class="ui-widget-content"> 
<p> 原 始 的 </p> 

</div> 

«div id="draggable2" class="ui-widget-content"> 
<p> 半 透明 的 克隆 </p> 


</div> 


«div id="draggable3" class="ui-widget-content"> 


<p> 自 定义 助手 (与 cursorAt 结合 ) </p> 
</div> 


«h3 class-"docs"»3É & : </h3> 
«div id="set"> 
«div class="ui-widget-content"> 
<p> 我 们 是 draggables..«/p» 
</div> 


«div class="ui-widget-content"> 
<p>. . 它 的 z-index 是 自动 控制 的 . . </p> 
</div> 


«div class="ui-widget-content"> 
<p>..# stack 选项 。</p> 
</div> 
</div> 


</body> 
</html> 
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jQuery Ul Draggable + Sortable 


Draggable 与 Sortable 的 无 颖 交互 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) + 排序 (Sortable) </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom 
li { margin: 5px; padding: 5px; width: 150px; } 
</style> 
<script> 
$(function() { 
$( "#sortable" ).sortable({ 
revert: true 
3); 
$( "#draggable" ).draggable({ 
connectToSortable: "#sortable", 
helper: "clone", 
revert: "invalid" 
3); 
$( "ul, li" ).disableSelection(); 
3); 
</script> 
</head> 
<body> 


<ul> 
«li id-"draggable" class="ui-state-highlight"> 请 拖 搜 我 </1i> 
</ul> 


<ul id="sortable"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 
«/ul» 


«/body» 
«/html» 
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jQuery UI 实例 - 放置 (Droppable) 


为 可 拖 搜 小 部 件 创建 目 标 。 


如 需 了 解 更 多 有 关 droppable 交互 的 细节 ， 请 查看 API 文档 可 放置 小 部 件 
(Droppable Widget) 。 


默认 功能 


在 任意 的 DOM TR éH droppable 功能 ， 并 为 可 拖 搜 小 部 件 创建 目标 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 100px; height: 100px; padding: 0.5em; float: 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable(); 
$( "#droppable" ).droppable(1 
drop: function( event, ui ) { 


$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "Dropped!" ); 
} 
3); 
3); 
</script> 
</head> 
<body> 


«div id="draggable" class="ui-widget-content"> 
<p> 请 把 我 拖 搜 到 目标 处 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 请 放置 在 这 里 1 </p> 
</div> 


</body> 
</html> 
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接受 


使 用 accept 选项 指定 目标 droppable 接受 哪 一 个 元 素 (RTRA) o 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 接受 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: 
#draggable, #draggable-nonvalid { width: 100px; height: 100px; pé 
</style> 
<script> 
$(function() { 
$( "#draggable, #draggable-nonvalid" ).draggable(); 
$( "#droppable" ).droppable({ 
accept: "#draggable", 
activeClass: "ui-state-hover", 
hoverClass: "ui-state-active", 
drop: function( event, ui ) ( 


$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "Dropped!" ); 
} 
3); 
3); 
</script> 
</head> 
<body> 


«div id="draggable-nonvalid" class="ui-widget-content"> 
<p> 我 是 不 能 被 放置 的 draggable</p> 
</div> 


«div id="draggable" class="ui-widget-content"> 
<p> 请 拖 搜 我 到 目标 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p>accept: '#draggable'</p> 
</div> 


</body> 
</html> 





防止 传播 


4/48 BREN droppable 时 — 例如， 您 可 以 有 一 个 树 形 的 可 编辑 的 目录 结构 ， 带 
有 文件 夹 和 文档 节点 一 greedy 选项 设置 为 true 来 防止 当 draggable 被 放置 在 子 
节点 (droppable) 上 时 的 事件 传播 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 防止 传播 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 100px; height: 40px; padding: 0.5em; float: - 
#droppable, #droppable2 { width: 230px; height: 120px; padding: ( 
#droppable-inner, #droppable2-inner { width: 170px; height: 60px, 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable(); 


$( "#droppable, #droppable-inner" ).droppable({ 
activeClass: "ui-state-hover", 
hoverClass: "ui-state-active", 
drop: function( event, ui ) { 
$( this ) 
.addClass( "ui-state-highlight" ) 
bein p 
.html( "Dropped!" ); 
return false; 


} 
3); 
$( "#droppable2, #droppable2-inner" ).droppable({ 
greedy: true, 
activeClass: "ui-state-hover", 
hoverClass: "ui-state-active", 
drop: function( event, ui ) { 
$( this ) 
.addClass( "ui-state-highlight" ) 
Sp dnd > ) 
.html( "Dropped!" ); 


à 
3); 
31); 
«/script» 
</head> 
<body> 


<div id="draggable" class="ui-widget-content"> 
<p> 请 拖 搜 我 到 目标 </p> 


</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 外 部 droppable</p> 
«div id="droppable-inner" class="ui-widget -header'"> 
<p> 内 部 droppable (不 带 有 greedy) </p> 
</div> 
</div> 


<div id="droppable2" class="ui-widget -header"> 
<p> 外 部 droppable</p> 
«div id="droppable2-inner" class="ui-widget -header"> 
<p> 内 部 droppable (#€ greedy) </p> 
</div> 
</div> 


</body> 
</html> 
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还 原 draggable 的 位 置 


当 带 有 布尔 值 revert 选项 的 draggable 停止 拖 搜 时 ， 返 回 draggable (或 它 的 
助手 ) 到 原始 位 置 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 还 原 draggable 的 位 置 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 100px; height: 100px; padding: ( 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ revert: "valid" }); 
$( "#draggable2" ).draggable({ revert: "invalid" }); 


$( "#droppable" ).droppable( { 
activeClass: "ui-state-default", 
hoverClass: "ui-state-hover", 
drop: function( event, ui ) { 


$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "ewe!" ); 
} 
3); 
p); 
</script> 
</head> 
<body> 


«div id="draggable" class="ui-widget-content"> 
<p> 当 被 放置 在 目标 上 时 还 原 </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p> 当 未 被 放置 在 目标 上 时 还 原 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 请 放置 在 这 里 </p> 
</div> 


</body> 
</html> 
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购物 车 演示 


演示 如 何 使 用 折 受 面板 来 展示 产品 的 目录 结构 ， 使 用 拖 搜 和 放置 来 添加 产品 到 购物 
车 ， 购 物 车 中 的 产品 是 可 排序 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 购物 车 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
hi { padding: .2em; margin: 0; } 
#products { float:left; width: 500px; margin-right: 2em; } 
#cart { width: 200px; float: left; margin-top: 1em; } 
/* 定义 列表 样式 ， 以 便 最 大 化 droppable */ 
#cart ol { margin: 0; padding: 1em © 1em 3em; } 
</style> 
<script> 
$(function() { 
$( "#catalog" ).accordion(); 
$( "#catalog li" ).draggable({ 
appendTo: "body", 
helper: "clone" 
3); 
$( "#cart ol" ).droppable({ 
activeClass: "ui-state-default", 
hoverClass: "ui-state-hover", 
accept: ":not(.ui-sortable-helper)", 
drop: function( event, ui ) { 
$( this ).find( ".placeholder" ).remove(); 
$( "«li»«/li»" ).text( ui.draggable.text() ).appendTo( thi: 


} 
}).sortable({ 
items: "li:not(.placeholder)", 
sort: function() { 
// 获取 由 droppable 与 sortable 交互 而 加 入 的 条 目 
// 使 用 connectWithSortable 可 以 解决 这 个 问题 ， 但 不 允许 您 自 定义 ac 
$( this ).removeClass( "ui-state-default" ); 
} 
3); 
3); 
«/script» 
«/head» 
«body» 


«div id="products"> 
«hi class="ui-widget-header"> > m</h1> 
<div id="catalog"> 
<h2><a href="#">T-Shirts</a></h2> 
<div> 


<ul> 
<li>Lolcat Shirt</1li> 
<li>Cheezeburger Shirt</1li> 
<li>Buckit Shirt</1li> 
</ul> 
</div> 
<h2><a href="#">Bags</a></h2> 
<div> 
<ul> 
<li>Zebra Striped</1li> 
<li>Black Leather</1i> 
<li>Alligator Leather</1li> 
</ul> 
</div> 
<h2><a href="#">Gadgets</a></h2> 
<div> 
<ul> 
«li»iPhonec/li» 
«li»iPodc/li» 
<li>iPad</li> 
</ul> 
</div> 
</div> 
</div> 


<div id="cart"> 
<h1 class="ui-widget -header ">m Ħ#)#</h1> 
<div class="ui-widget-content"> 
<ol> 
<li class="placeholder"> 添 加 产品 到 这 里 </1i> 
</ol> 
</div> 
</div> 


</body> 
</html> 
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简单 的 照片 管理 器 


您 可 以 通过 拖 搜 照片 到 回收 站 或 者 点 击 回收 站 图 标 来 删除 照片 。 
您 可 以 通过 拖 搜 照片 到 相册 或 者 点 击 回收 利用 图 标 来 还 原 照 片 。 


您 可 以 通过 点 击 缩放 图 标 来 查看 大 图 。jQuery Ul 对 话 框 (dialog) 部 件 用 于 模 态 窗 
口 。 





<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 

<title>jQuery UI 放置 (Droppable) - 简单 的 照片 管理 器 </title> 

<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 

#gallery { float: left; width: 65%; min-height: 12em; } 
.gallery.custom-state-active { background: #eee; } 

gallery li { float: left; width: 96px; padding: 0.4em; margin: ( 
.gallery li h5 { margin: © © 0.4em; cursor: move; } 

.gallery li a { float: right; } 

.gallery li a.ui-icon-zoomin { float: left; } 

.gallery li img { width: 100%; cursor: move; } 


#trash { float: right; width: 32%; min-height: 18em; padding: 1%, 
#trash h4 { line-height: 16px; margin: © © ©.4em; } 
#trash h4 .ui-icon { float: left; } 
#trash .gallery h5 { display: none; } 
</style> 
<script> 
$(function() { 

// 这 是 相册 和 回收 站 

var $gallery = $( "#gallery" ), 

$trash = $( "#trash" ); 


// 让 相册 的 条 目 可 拖 搜 
$( "li", $gallery ).draggable({ 
cancel: "a.ui-icon", // 点 击 一 个 图 标 不 会 启动 拖 搜 
revert: "invalid", // 当 未 被 放置 时 ， 条 目 会 还 原 回 它 的 初始 位 置 
containment: "document", 
helper: "clone", 
cursor: "move" 


3): 


// 让 回收 站 可 放置 ， 接 受 相 册 的 条 目 
$trash.droppable(1 
accept: "#gallery > li", 
activeClass: "ui-state-highlight", 
drop: function( event, ui ) ( 
deleteImage( ui.draggable ); 
} 
3); 


// 让 相册 可 放置 ， 接 受 回 收 站 的 条 目 
$gallery.droppable({ 
accept: "#trash li", 
activeClass: "custom-state-active", 
drop: function( event, ui ) { 
recycleImage( ui.draggable ); 
} 
3); 


// 图 像 删除 功能 
var recycle_icon = "<a href='link/to/recycle/script/when/we/ha\ 
function deleteImage( $item ) { 
$item.fadeOut(function() { 
var $list = $( "ul", $trash ).length ? 
$( "ul", $trash ) 
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $1 


$item.find( "a.ui-icon-trash" ).remove(); 
$item.append( recycle icon ).appendTo( $list ).fadeIn(funct 
$item 
.animate(( width: "48px" }) 
.find( "img" ) 
.animate({ height: "36px" }); 
3); 
3); 
} 


// 图 像 还 原 功能 
var trash icon = "<a hrefz'link/to/trash/script/when/we/have/ j: 
function recycleImage( $item ) { 

$item.fadeOut(function() { 


$item 
.find( "a.ui-icon-refresh" ) 
.remove( ) 
.end() 


.css( "width", "96px") 
.append( trash icon ) 
.find( "img" ) 
.CSS( "height", "72px" ) 
.end() 
.appendTo( $gallery ) 
.fadeIn(); 
3); 
} 


// 图 像 预览 功能 ， 演 示 ui.dialog 作为 模 态 窗口 使 用 
function viewLargerImage( $link ) { 
var src = $link.attr( "href" ), 
title = $link.siblings( "img" ).attr( "alt" ), 
$modal = $( "img[src$-'" + src + "']" ); 


if ( $modal.length ) { 
$modal.dialog( "open" ); 
} else { 
var img = $( "<img alt='" + title + "' width='384' height= 
.attr( "src", src ).appendTo( "body" ); 
setTimeout(function() { 
img.dialog({ 
title: title, 
width: 400, 
modal: true 


D 


}, 1); 
} 
} 


// 通过 事件 代理 解决 图 标 行为 
$( "ul.gallery > 1i" ).click(function( event ) { 
var $item = $( this ), 
$target = $( event.target ); 


if ( $target.is( "a.ui-icon-trash" ) ) { 
deleteImage( $item ); 

} else if ( $target.is( "a.ui-icon-zoomin" ) ) { 
viewLargerImage( $target ); 

) else if ( $target.is( "a.ui-icon-refresh" ) ) { 
recycleImage( $item ); 


} 


return false; 


3); 
3); 
</script> 
</head> 
<body> 


«div class="ui-widget ui-helper-clearfix"> 


«ul id-"gallery" class="gallery ui-helper-reset ui-helper-clearfix' 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras</h5> 
<img src="img/high_tatras_min.jpg" alt="High Tatras 的 最 高 峰 " wi 
«a href="img/high_tatras.jpg" title=" 查 看 大 图 " class="ui-icon ui 
«a href="link/to/trash/script/when/we/have/js/off" title=" mIRE 
</li> 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras 2</h5> 
<img src="img/high_tatras2_min.jpg" alt=" 绿 山 湖畔 的 小 屋 " width="¢ 
«a href="img/high_tatras2.jpg" title=" 查 看 大 图 " class="ui-icon u 
«a href="link/to/trash/script/when/we/have/js/off" title=" mIRE 
</li> 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras 3</h5> 
<img src="img/high_tatras3_min.jpg" alt=" 计 划 登 高 " width="96" he 
<a href="img/high_tatras3.jpg" title=" 查 看 大 图 " class="ui-icon u 
«a href="link/to/trash/script/when/we/have/js/off" title=" HIRE 
</li> 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras 4</h5> 
<img src="img/high_tatras4_min.jpg" alt="%E Kozi kopka 的 顶部 " w 
<a href="img/high_tatras4.jpg" title=" 查 看 大 图 " class="ui-icon u 
«a href="link/to/trash/script/when/we/have/js/off" title=" mIRE 
</li> 
</ul> 


<div id="trash" class="ui-widget-content ui-state-default"> 
<h4 class="ui-widget -header"><span class="ui-icon ui-icon-trash": 
</div> 


</div> 


</body> 
</html> 
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视觉 反馈 


4 2(S4 droppable 上 时 ， 或 者 当 droppable 被 激活 ( 即 一 个 可 接受 的 draggable 
被 放置 在 droppable E) 时 ， 改 变 droppable 的 外 观 。 使 用 hoverclass 或 
activeClass 选项 来 分 别 指 定 class。 








<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 视觉 反馈 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 90px; height: 90px; padding: O0.: 
#droppable, #droppable2 { width: 120px; height: 120px; padding: ( 
h3 { clear: left; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable(); 
$( "#droppable" ).droppable({ 
hoverClass: "ui-state-hover", 
drop: function( event, ui ) { 
$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "Dropped!" ); 
} 
3); 
$( "#draggable2" ).draggable(); 
$( "#droppable2" ).droppable({ 
accept: "#draggable2", 
activeClass: "ui-state-default", 
drop: function( event, ui ) { 


$( this ) 
.addClass( "ui-state-highlight" ) 


,find( "p" ) 
.html( "Dropped!" ); 


} 
3); 
+); 
</script> 
</head> 
<body> 


<h3>4 212% droppable 上 时 的 反馈 : </h3> 


«div id="draggable" class="ui-widget-content"> 
<p> 请 拖 搜 我 到 目标 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 请 放置 在 这 里 </p> 
</div> 


<h3> 当 激活 draggable 时 的 反馈 : </h3> 
<div id="draggable2" class="ui-widget-content"> 


<p> 请 拖 搜 我 到 目标 </p> 
</div> 


<div id="droppable2" class="ui-widget -header"> 
<p> 请 放置 在 这 里 </p> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 缩放 (Resizable) 


使 用 鼠标 改变 元 素 的 尺寸 。 


如 需 了 解 更 多 有 关 resizable 交互 的 细节 ， 请 查看 API 文档 可 调整 尺寸 小 部 件 
(Resizable Widget) 。 


默认 功能 


在 任意 的 DOM 元 素 上 启用 resizable 功能 。 通 过 鼠标 拖 搜 右边 或 底 边 的 边框 到 所 
需 的 宽度 或 高 度 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 默认 功能 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(); 
1); 
</script> 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">#8h (Resizable) </h3> 
</div> 


</body> 
</html> 





使 用 animate 选项 (布尔 值 ) 使 缩放 行为 动画 化 。 当 该 选项 设置 为 true 时 ， 拖 
搜 轮 廊 到 所 需 的 位 置 ， 元 素 会 在 拖 搜 停止 时 以 动画 形式 调整 到 该 尺寸 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 动画 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
.ui-resizable-helper { border: 1px dotted gray; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
animate: true 
3); 
}); 
</script> 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 clLass="ui-widget-header"> 动 画 </h3> 
</div> 


</body> 
</html> 


pE 9$ 
限制 缩放 区 域 


定义 缩放 区 域 的 边界 。 使 用 containment 选项 来 指定 一 个 父 级 的 DOM 元 素 或 一 
个 jQuery 选择 器 ， 上 比如 'document.'。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 限制 缩放 区 域 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#container { width: 300px; height: 300px; } 
#container h3 { text-align: center; margin: 0; margin-bottom: 10; 
#resizable { background-position: top left; width: 150px; height 
#resizable, #container { padding: 0.5em; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(( 
containment: "#container" 
3): 
3); 
«/script» 
</head> 
<body> 


«div id="container" class="ui-widget-content"> 
<h3 class="ui-widget -header'">BRiill</h3> 
«div id="resizable" class="ui-state-active"> 
<h3 class="ui-widget -header">#8i (Resizable) </h3> 
</div> 
</div> 


</body> 
</html> 
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正 迟 开始 


通过 delay 选项 设置 延迟 开始 缩放 的 毫秒 数 。 通 过 distance 选项 设置 光标 被 
按 下 且 拖 搜 指定 像素 后 才 人 允许 缩放 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 延迟 开始 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable, #resizable2 { width: 150px; height: 150px; padding: ( 
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 

$( "#resizable" ).resizable(( 
delay: 1000 


3): 


$( "#resizable2" ).resizable({ 
distance: 40 
ioe 
1); 
«/script» 
«/head» 
«body» 


«h3 Class="docs"> 时 间 延 迟 (ms):«/h3» 

<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header ">8¥ ja] </h3> 

</div> 


<h3 class="docs"> 距 离 延 迟 (px):</h3> 

«div id="resizable2" class="ui-widget-content"> 
<h3 class="ui-widget -header">#B</h3> 

</div> 


</body> 
</html> 





助手 


通过 设置 helper 选项 为 一 个 CSS class， 当 缩放 时 只 显示 元 素 的 轮廓 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 助手 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
.ui-resizable-helper { border: 2px dotted #00F; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
helper: "ui-resizable-helper" 
3); 
}); 
</script> 
</head> 
<body> 


<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">8)#</h3> 
</div> 


</body> 
</html> 


a Se) 
最 大 /最 小 尺寸 


使 用 maxHeight 、 maxwidth 、 minHeight 和 minwidth 选项 限制 
resizable 元 素 的 最 大 或 最 小 高 度 或 宽度 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 最 大 /最 小 尺寸 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 200px; height: 150px; padding: 5px; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
maxHeight: 250, 
maxWidth: 350, 
minHeight: 150, 
minwidth: 200 
3); 
3); 
«/script» 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget-header"> 放 大 /缩小 </h3> 
</div> 


</body> 
</html> 


E) 


保持 纵横 比 


保持 现 有 的 纵横 比 或 设置 一 个 新 的 纵横 比 来 限制 缩放 比例 。 设 置 aspectRatio 
选项 为 true， 且 可 选 地 传递 一 个 新 的 比率 (比如 ，4/3) o 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 保持 纵横 比 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 160px; height: 90px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(( 
aspectRatio: 16 / 9 
3); 
3); 
</script> 
</head> 
<body> 


<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget-header"> 保 持 纵横 比 </h3> 
</div> 


</body> 
</html> 
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对 齐 到 网 格 


对 齐 resizable 元 素 到 网 格 。 通 过 grid 选项 设置 网 格 单元 的 尺寸 (以 像素 为 单位 
的 高 度 和 宽度 ) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 对 齐 到 网 格 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
grid: 50 
3): 
3); 
</script> 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">ht§</h3> 
</div> 


</body> 
</html> 


E  ” OB 


同步 缩放 


pea 个 元 素 的 边 来 同时 调整 多 个 元 素 的 尺寸 。 给 alsoResize 选项 
传递 一 共享 的 选 dte. 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 同步 缩放 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { background-position: top left; } 
#resizable, #also ( width: 150px; height: 120px; padding: 0.5em; 
#resizable h3, #also h3 { text-align: center; margin: 0; } 
#also { margin-top: 1em; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(( 
alsoResize: "#also" 


3); 
$( "Zalso" ).resizable(); 


3); 

«/script» 
</head> 
<body> 


<div id="resizable" class="ui-widget -header"> 
<h3 class="ui-state-active"> 缩 放 </h3> 
</div> 


<div id="also" class="ui-widget-content"> 
<h3 class="ui-widget-header"> 同 步 缩放 </h3> 
</div> 


</body> 
</html> 





文本 框 


可 缩放 的 文本 框 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 文本 框 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.ui-resizable-se { 
bottom: 17px; 
} 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
handles: "se" 
3): 
3); 
«/script» 
«/head» 
«body» 


«textarea id-"resizable" rows="5" cols="20"></textarea> 


«/body» 
«/html» 





设置 ghost 选项 为 true， 可 在 缩放 期 间 显 示 一 个 半 透 明 的 元 素 ， 而 不 是 显示 
一 个 实际 的 元 素 。 


<!doctype html> 
<html lang="en"> 


<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 视觉 反馈 </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
.ui-resizable-ghost { border: 1px dotted gray; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
ghost: true 
3); 
3); 
</script> 
</head> 
<body> 


<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">Ghost</h3> 
</div> 


</body> 
</html> 


HE) 





jQuery UI 实例 - 选择 (Selectable) 


使 用 鼠标 选择 单个 元 素 或 一 组 元 素 。 


如 需 了 解 更 多 有 关 selectable 交互 的 细节 ， 请 查看 API 文档 可 选择 小 部 件 
(Selectable Widget) 。 


默认 功能 


EZA DOM 元 素 上 或 者 一 组 元 素 上 启用 selectable 功能 。 通 过 鼠标 拖 搜 选 择 条 
目 。 按 住 Ctrl 键 ， 选 择 多 个 不 相 邻 的 条 目 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 选择 (Selectable) - 默认 功能 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
#feedback { font-size: 1.4em; } 
Zselectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; widtt 
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; 1 
</style> 
<script> 
$(function() { 
$( "#selectable" ).selectable(); 
3); 
«/script» 
«/head» 
«body» 


«ol id="selectable"> 
«li class="ui-widget-content">Item 1«/li» 
«li class="ui-widget-content">Item 2«/li» 
«li class="ui-widget-content">Item 3«/li» 
«li class="ui-widget-content">Item 4</1i> 
«li class="ui-widget-content">Item 5«/li» 
«li class="ui-widget-content">Item 6«/li» 
«li class="ui-widget-content">Item 7«/li» 

«/ol» 


«/body» 
«/html» 


EE) 





显示 为 网 格 


让 selectable 条 目 显 示 为 网 格 ， 使 用 CSS 使 得 它们 带 有 相同 的 尺寸 且 浮 动 显 示 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 选择 (Selectable) - 显示 为 网 格 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
#feedback { font-size: 1.4em; } 
#selectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; widtl 
#selectable li { margin: 3px; padding: 1px; float: left; width: : 
</style> 
<script> 
$(function() { 
$( "#selectable" ).selectable(); 
3); 
«/script» 
«/head» 
«body» 


«ol id="selectable"> 
«li class="ui-state-default">1</1li> 
«li class="ui-state-default">2</1li> 
«li class="ui-state-default">3</1li> 
<li class="ui-state-default">4</1li> 
<li class="ui-state-default">5</1li> 
<li class="ui-state-default">6</1li> 
<li class="ui-state-default">7</1li> 
<li class="ui-state-default">8</1li> 
<li class="ui-state-default">9</1li> 
«li class="ui-state-default">10</1li> 
«li class-"ui-state-default"»11«/li» 
«li class-"ui-state-default"»12«/li» 

«/ol» 


«/body» 
«/html» 


SS 


序列 化 


ENKA, (E stop 事件 发 生 时 触发 ， 来 收集 被 选中 条 目的 索引 值 。 呈 现 这 些 
值 作 为 反馈 ， 或 者 以 数据 字符 串 形 式 进行 传递 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 选择 (Selectable) - 序列 化 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
#feedback { font-size: 1.4em; } 
#selectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; widtl 
#selectable li ( margin: 3px; padding: 0.4em; font-size: 1.4em; 1 
</style> 
<script> 
$(function() { 
$( "#selectable" ).selectable({ 
stop: function() { 
var result = $( "#select-result" ).empty(); 
$( ".ui-selected", this ).each(function() { 
var index = $( "#selectable li" ).index( this ); 
result.append( " #" + ( index + 1 ) ); 
3); 
j 
3); 
3); 
«/script» 
</head> 
<body> 


<p id="feedback"> 
<span> 您 已 经 选择 了 : </span> <span id="select-result"></span>, 
</p> 


«ol id="selectable"> 
<li class="ui-widget-content">Item 1</1i> 
«li class="ui-widget-content">Item 2«/li» 
«li class="ui-widget-content">Item 3«/li» 
«li class="ui-widget-content">Item 4</1i> 
«li class="ui-widget-content">Item 5«/li» 
«li class="ui-widget-content">Item 6«/li» 

</ol> 


</body> 
</html> 
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jQuery UI 实例 - 排序 (Sortable) 


使 用 最 标 调整 列表 中 或 者 网 格 中 元 素 的 排序 。 


如 需 了 解 更 多 有 关 sortable 交互 的 细节 ， 请 查看 API 文档 可 排序 小 部 件 (Sortable 
Widget) 。 


默认 功能 


在 任意 的 DOM 元 素 上 启用 sortable 功能 。 通 过 鼠标 点 击 并 拖 搜 元 素 到 列表 中 的 一 
个 新 的 位 置 ， 其 它 条 有 目 会 自动 调整 。 默 认 情 况 下 ，sortable 各 个 条 目 共 享 
draggable 属性 。 


<!doctype html> 


<html 
<head> 


lang="en"> 


<meta charset="utf-8"> 

<title>jQuery UI 排序 (Sortable) - 默认 功能 </title> 

<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 

#sortable { list-style-type: none; margin: 0; padding: 0; width: 
#sortable li { margin: © 3px 3px 3px; padding: 0.4em; padding-lel 
#sortable li span { position: absolute; margin-left: -1.3em; ) 
</style> 

<script> 

$(function() { 


$( "#sortable" ).sortable(); 
$( "#sortable" ).disableSelection(); 
3); 
«/script» 
</head> 
<body> 
<ul id="sortable"> 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtt 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
«li class="ui-state-default"><span class="ui-icon ui-icon-arrowtt 
</ul> 
</body> 
</html> 


a | 


连接 列表 


通过 向 connectwith 选项 传递 一 个 选择 器 ， 来 把 一 个 列表 中 的 元 素 排 序 到 另 一 


个 列表 中 ， 


ES k 


Hx ju] 


反之 亦 然 。 


connectwith: 





单 的 办 法 是 将 带 有 某 个 CSS class 的 所 有 相关 的 列表 分 


组 ， 然 后 传递 该 class 到 sortable MAX (EAN, '.myclass' ) 。 


通过 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 连接 列表 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2 { list-style-type: none; margin: 0; paddir 
#sortable1 li, #sortable2 li { margin: © 5px 5px 5px; padding: 5 
</style> 
<script> 
$(function() { 

$( "Zsortablei, #sortable2" ).sortable({ 


connectWith: ".connectedSortable" 
}).disableSelection(); 
1); 
«/script» 
«/head» 
«body» 


«ul id-"sortabled1" class="connectedSortable"> 


«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 


«/ul» 


«ul id="sortable2" class="connectedSortable"> 


«li class="ui-state-highlight">Item 1«/li» 
«li class="ui-state-highlight">Item 2«/1li» 
«li class="ui-state-highlight">Item 3«/li» 
«li class="ui-state-highlight">Item 4«/li» 
«li class="ui-state-highlight">Item 5«/li» 


«/ul» 


«/body» 
«/html» 


LLL EB 


: 签 页 连接 列表 





放置 列表 项 到 顶部 适当 的 标签 页 中 ， 来 把 一 个 列表 中 的 元 素 排 序 到 另 一 个 列表 


中 ， 反 之 亦 然 。 


<!doctype html> 


«html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 标签 页 连接 列表 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
4sortablei li, #sortable2 li { margin: © 5px 5px 5px; padding: 5; 
</style> 
<script> 
$(function() { 

$( "#sortable1, #sortable2" ).sortable().disableSelection(); 


var $tabs = $( "#tabs" ).tabs(); 


var $tab items = $( "ul:first li", $tabs ).droppable({ 
accept: ".connectedSortable li", 
hoverClass: "ui-state-hover", 
drop: function( event, ui ) ( 
var $item = $( this ); 
var $list = $( $item.find( "a" ).attr( "href" ) ) 
.find( ".connectedSortable" ); 


ui.draggable.hide( "slow", function() { 
$tabs.tabs( "option", "active", $tab items.index( $item ` 
$( this ).appendTo( $list ).show( "slow" ); 
3); 
} 
H); 
3); 
«/script» 
«/head» 
«body» 


«div id="tabs"> 
«ul» 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1li> 
</ul> 
«div id="tabs-1"> 
«ul id="sortable1" class="connectedSortable ui-helper-reset"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 
«/ul» 
«/div» 
«div id="tabs-2"> 
«ul id-"sortable2" class="connectedSortable ui-helper-reset"> 
«li class="ui-state-highlight">Item 1</1li> 


«li class="ui-state-highlight">Item 2«/1li» 
«li class="ui-state-highlight">Item 3«/li» 
«li class="ui-state-highlight">Item 4</1i> 
«li class="ui-state-highlight">Item 5«/li» 
«/ul» 
«/div» 
«/div» 


«/body» 
«/html» 
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延迟 开始 


通过 时 间 延 迟 和 距离 延迟 来 防止 意外 的 排序 。 通 过 delay 选项 设置 开始 排序 之 前 
WTR ASMA, 38:1 distance 选项 设置 开始 排序 之 前 必须 拖 搜 的 像素 数 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 延迟 开始 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2 { list-style-type: none; margin: 0; paddir 
#sortable1 li, #sortable2 li { margin: © 5px 5px 5px; padding: 5 
</style> 
<script> 
$(function() { 

$( "#sortablei" ).sortable({ 
delay: 300 


3): 


$( "#sortable2" ).sortable({ 
distance: 15 


3); 


$( "li" ).disableSelection(); 
31); 
«/script» 
«/head» 
«body» 


«h3 class="docs"> 时 间 延 迟 300ms : </h3> 


<ul id="sortablei"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«/ul» 


«h3 class="docs"> 距 离 延 迟 15px : </h3> 


<ul id="sortable2"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«/ul» 


«/body» 
«/html» 








显示 为 网 格 
让 sortable 条 目 显 示 为 网 格 ， 使 用 CSS 使 得 它们 带 有 相同 的 尺寸 且 浮 动 显 示 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 显示 为 网 格 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; 
</style> 
<script> 
$(function() { 
$( "#sortable" ).sortable(); 
$( "#sortable" ).disableSelection(); 
3); 
</script> 
</head> 
<body> 


<ul id="sortable"> 
<li class="ui-state-default">1</1li> 
«li class="ui-state-default">2</1li> 
<li class="ui-state-default">3</1li> 
<li class="ui-state-default">4</1li> 
<li class="ui-state-default">5</1li> 
«li class="ui-state-default">6</1li> 
<li class="ui-state-default">7</1li> 
<li class="ui-state-default">8</1li> 
<li class="ui-state-default">9</1li> 
<li class="ui-state-default">10</1li> 
«li class="ui-state-default">11</1li> 
«li class="ui-state-default">12</1li> 

</ul> 


</body> 
</html> 


sd ES 


放置 占 位 符 





当 拖 搜 一 个 sortable 条 目 到 一 个 新 的 位 置 时 ， 其 他 条 目 将 为 该 条 目 腾 出 空间 。 向 
placeholder 选项 传递 一 个 class 来 定义 可 视 化 的 空白 的 样式 。 使 用 布尔 值 的 
forcePlaceholderSize 选项 来 设置 占 位 符 的 尺寸 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 放置 占 位 符 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 
#sortable li { margin: © 5px 5px 5px; padding: 5px; font-size: 1 
html>body #sortable li { height: 1.5em; line-height: 1.2em; } 
.Ui-state-highlight { height: 1.5em; line-height: 1.2em; } 
</style> 
<script> 
$(function() { 

$( "#sortable" ).sortable({ 
placeholder: "ui-state-highlight" 


3): 
$( "#sortable" ).disableSelection(); 


1); 

</script> 
</head> 
<body> 


<ul id="sortable"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 
«li class="ui-state-default">Item 6«/li» 
«li class="ui-state-default">Item 7«/li» 

«/ul» 


«/body» 
«/html» 
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处 理 空 列表 


通过 把 选项 设置 为 false ， 来 阻止 一 个 列表 中 的 所 有 条 目 被 放置 到 一 个 单独 的 空 
FFA, SAU ERR, sortable 条 目 可 被 放置 到 空 的 列表 中 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 处 理 空 列表 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2, #sortable3 { list-style-type: none; marg: 
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; paddir 
</style> 
<script> 
$(function() { 

$( "ul.droptrue" ).sortable({ 
connectWith: "ul" 


3); 


$( "ul.dropfalse" ).sortable({ 
connectWith: "ul", 
dropOnEmpty: false 


3): 


$( "#sortable1, #sortable2, #sortable3" ).disableSelection(); 
1); 
«/script» 
«/head» 
«body» 


«ul id="sortable1" class="droptrue"> 
<li class="ui-state-default"> 可 被 放置 到 . .</1i> 
<li class="ui-state-default">. .一 个 空 列表 中 </1i> 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 

«/ul» 


«ul id="sortable2" class="dropfalse"> 
«li class="ui-state-high1ight"> 不 可 被 放置 到 . .</1i> 
«li class="ui-state-highlight">. .一 个 空 列表 中 </1i> 
«li class="ui-state-highlight">Item 3</1i> 
«li class="ui-state-highlight">Item 4«/li» 
«li class="ui-state-highlight">Item 5«/li» 

</ul> 


<ul id="sortable3" class="droptrue"> 
</ul> 


<br style="clear:both"> 


</body> 


</html> 
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包含 /排除 条 目 
指定 通过 向 items 选项 传递 一 个 jQuery 选择 器 哪些 项 目 可 排序 。 该 选项 之 外 的 
项 目 则 是 不 可 排序 的 ， 同 时 它们 也 不 是 sortable 条 目的 有 效 的 目标 。 


如 果 只 想 防止 特定 的 条 有 目 排 序 ， 则 向 cancel 选项 传递 一 个 jQuery 选择 器 。 已 取 
消 的 条 目 依 然 是 其 他 条 目的 有 效 的 排序 目标 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 包含 /排除 条 目 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2 { list-style-type: none; margin: 0; paddir 
#sortable1 li, #sortable2 li ( margin: © 5px 5px 5px; padding: 3; 
</style> 
<script> 
$(function() { 

$( "#sortablei" ).sortable({ 
items: "li:not(.ui-state-disabled)" 


3): 


$( "#sortable2" ).sortable({ 
cancel: ".ui-state-disabled" 


3); 


$( "#sortable1 li, #sortable2 li" ).disableSelection(); 
1); 
</script> 
</head> 
<body> 


«h3 class="docs"> 指 定 哪 个 条 目 是 sortable: </h3> 


«ul id="sortablei"> 
«li class="ui-state-default">Item 1«/li» 
«li class-"ui-state-default ui-state-disabled"» (我 不 是 sortable 
«li class-"ui-state-default ui-state-disabled"» (我 不 是 sortable 
«li class="ui-state-default">Item 4«/li» 

«/ul» 


Anl Anl 


<h3 class="docs"> 取 消 排序 〈 但 作为 放置 目标 ) : </h3> 


<ul id="sortable2"> 
«li class="ui-state-default">Item 1«/li» 
«li class-"ui-state-default ui-state-disabled"» (我 不 是 sortable) 
«li class-"ui-state-default ui-state-disabled"» (我 不 是 sortable) 
«li class="ui-state-default">Item 4«/li» 

«/ul» 


«/body» 
«/html» 








门户 组 件 (Portlets) 


启用 门户 组 件 (样式 化 的 div) 作为 sortable， 并 使 用 connectwith 选项 来 允许 
在 列 之 间 进 行 排序 。 


<!doctype html> 
<html lang="en"> 


<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 门户 组 件 (Portlets) </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
body { 

min-width: 520px; 
} 
.column { 

width: 170px; 

float: left; 

padding-bottom: 100px; 
} 
.portlet { 

margin: © 1em 1em 0; 

padding: 0.3em; 
} 
.portlet-header { 

padding: 0.2em 0.3em; 

margin-bottom: 0.5em; 

position: relative; 


.portlet-toggle { 
position: absolute; 
top: 50%; 
right: 0; 
margin-top: -8px; 

} 

.portlet-content { 
padding: 0.4em; 

} 

.portlet-placeholder { 
border: 1px dotted black; 
margin: © 1em 1em 0; 
height: 50px; 

} 

</style> 

<script> 

$(function() { 
$( ".column" ).sortable({ 

connectWith: ".column", 


handle: ".portlet-header", 
cancel: ".portlet-toggle", 
placeholder: "portlet-placeholder ui-corner-all" 


3): 


$( ".portlet" ) 
.addClass( "ui-widget ui-widget-content ui-helper-clearfix u: 
.find( ".portlet-header" ) 
.addClass( "ui-widget-header ui-corner-all" ) 
.prepend( "<span class='ui-icon ui-icon-minusthick portlet. 


$( ".portlet-toggle" ).click(function() { 
var icon = $( this ); 
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" ); 
icon.closest( ".portlet" ).find( ".portlet-content" ).togglei 
3); 
3); 
«/script» 
«/head» 
«body» 


«div class-"column"» 


«div class="portlet"> 

«div class="portlet-header">j7 }J</div> 

«div class="portlet-content">Lorem ipsum dolor sit amet, conse 
</div> 


<div class="portlet"> 

«div class="portlet-header">#f iq </div> 

«div class="portlet-content">Lorem ipsum dolor sit amet, consec 
</div> 


</div> 
<div class="column"> 
<div class="portlet"> 
«div class="portlet-header">% </div> 
«div class="portlet-content">Lorem ipsum dolor sit amet, conse 
</div> 
</div> 
<div class="column"> 
<div class="portlet"> 
«div class="portlet-header">####</div> 
«div class="portlet-content">Lorem ipsum dolor sit amet, consec 


«/div» 


«div class="portlet"> 
«div class="portlet-header">A {</div> 


<div class="portlet-content">Lorem ipsum dolor sit amet, consec 
</div> 


</div> 


</body> 
</html> 








jQuery UI 实例 - HT mtr (Accordion) 


在 一 个 有 限 的 空间 内 显示 用 于 呈现 信息 的 可 折 生 的 内 容 面板 。 


如 需 了 解 更 多 有 关 accordion 部 件 的 细节 ， 请 查看 API 文档 dre TREE 
(Accordion Widget) 。 


默认 功能 


点 击 头 部 展开 / 折 熏 被 分 为 各 个 逻辑 部 分 的 内 容 ， 就 像 标 签 页 (tabs) 一 样 。 您 可 以 
选择 性 地 设置 当 鼠 标 悬 停 时 是 否 切 换 各 部 分 的 打开 /关闭 状态 。 


基本 的 HTML 标记 是 一 系列 的 标题 (H3 标签 ) 和 内 容 div， 因 此 内 容 不 用 通过 
JavaScript 即 可 用 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 折 受 面板 (Accordion) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion(); 
3); 
«/script» 
</head> 
<body> 


<div id="accordion"> 

<h3> 部 分 1</h3> 

<div> 
<p> 
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quar 
ut neque. Vivamus nisi metus, molestie vel, gravida in, condime 
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin vive 
odio. Curabitur malesuada. Vestibulum a velit eu ante sceleris 
</p> 

</div> 

<h3> 部 分 2</h3> 

<div> 
<p> 
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum s: 
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris tur[ 
velit, faucibus interdum tellus libero ac justo. Vivamus non qt 


suscipit faucibus urna. 
</p> 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p> 
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quis 
Phasellus pellentesque purus in massa. Aenean in pede. Phaselli 
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magn: 
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus ve 
</p> 
<ul> 
<li>List item one</1li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
<h3> 部 分 4</h3> 
<div> 
<p> 
Cras dictum. Pellentesque habitant morbi tristique senectus et 
et malesuada fames ac turpis egestas. Vestibulum ante ipsum pr: 
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean 
mauris vel est. 
</p> 
<p> 
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consec 
Class aptent taciti sociosqu ad litora torquent per conubia no: 
inceptos himenaeos. 
</p> 
</div> 
</div> 


</body> 
</html> 
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WEN F, PARR eR —TRBOSHAN. A SiLMARD ASH AN, 
可 设置 collapsible 选项 为 true。 点 击 当 前 打开 的 部 分 ， 来 折 和 有 登 它 的 内 容 面 
板 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI #ámik (Accordion) - i#t#ANA</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion({ 
collapsible: true 
3); 
3); 
</script> 
</head> 
<body> 


<div id="accordion"> 
<h3> 部 分 1</h3> 


<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, í 
«/div» 
<h3> 部 分 2«/h3» 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulur 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Qi 
«ul» 


<li>List item one</1li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
<h3> 部 分 4</h3> 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senectus 
</div> 
</div> 


</body> 
</html> 


E = 





自 定 义 图 标 


通过 icons 选项 自 定义 标题 图 标 ， icons 选项 接受 标题 默认 的 和 激活 的 (打开 
的 ) 状态 的 class。 使 用 UI CSS 框架 中 的 任意 class， 或 者 使 用 背景 图 像 创建 自 定 
SLBY class. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI ##MtR (Accordion) - 自 定义 图 标 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var icons = { 
header: "ui-icon-circle-arrow-e", 
activeHeader: "ui-icon-circle-arrow-s" 
3 
$( "#accordion" ).accordion({ 
icons: icons 
3); 
$( "#toggle" ).button().click(function() { 
if ( $( "#accordion" ).accordion( "option", "icons" ) ) { 
$( "#accordion" ).accordion( "option", "icons", null ); 


) else ( 
$( "#accordion" ).accordion( "option", "icons", icons ); 
} 
3); 
3); 
«/script» 
«/head» 
«body» 


«div id="accordion"> 
<h3> 部 分 1</h3> 


<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, í 
«/div» 
<h3> 部 分 2«/h3» 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulur 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. QI 
«ul» 


<li>List item one</1li> 
<li>List item twoc/li» 
<li>List item three</li> 
«/ul» 
«/div» 


<h3> 部 分 4</h3> 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senectus 
</div> 
</div> 


<button id="toggle"> 切 换 图 标 </button> 


</body> 
</html> 
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填充 空间 


由 于 折 和 又 面板 是 由 块 级 元 素 组 成 的 ， 默 认 情 况 下 它 的 宽度 会 填充 可 用 的 水 平 空间 。 
为 了 填充 由 容器 分 配 的 垂直 空间 ， 设 置 heightstyle 选项 为 "fill" ， 脚 本 会 
自动 设置 折 和 过 面板 的 尺寸 为 父 容器 的 高 度 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI } mtk (Accordion) - 填充 空间 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#accordion-resizer { 
padding: 10px; 
width: 350px; 
height: 220px; 
} 
</style> 
<script> 
$(function() { 
$( "#accordion" ).accordion({ 
heightStyle: "fill" 
3): 
3); 
$(function() { 
$( "#accordion-resizer" ).resizable({ 
minHeight: 140, 
minwidth: 200, 
resize: function() { 
$( "#accordion" ).accordion( "refresh" ); 
} 
}); 
}); 


</script> 


</head> 
<body> 


<h3 class="docs"> 重 新 调整 外 部 容器 : </h3> 
<div id="accordion-resizer" class="ui-widget-content"> 


<div id="accordion"> 
<h3> 部 分 1</h3> 


<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, 
</div> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibu. 
«/div» 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
<ul> 


<li>List item onec/li» 
<li>List item twoc/li» 
<li>List item threec/li» 
«/ul» 
«/div» 
<h3> 部 分 4«/h3» 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senecti 
«/div» 
«/div» 
«/div» 


«/body» 
«/html» 


[ge]: 


非 目 动 高 度 


设置 heightStyle: "content" ， 让 折 受 面板 保持 它们 初始 的 高 度 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI fm (Accordion) - 非 自动 高 度 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion({ 
heightStyle: "content" 
3); 
3); 
«/script» 
«/head» 
«body» 


«div id="accordion"> 
<h3> 部 分 1«/h3» 
<div> 
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam m: 
</div> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulur 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Qi 
<ul> 


<li>List 
«li»List 
«li»List 
«li»List 
«li»List 
«li»List 
«li»List 
«/ul» 


item</1i> 
item</1i> 
item</1i> 
item</1i> 
item</1i> 
item</1i> 
item</1i> 


</div> 
</div> 


</body> 
</html> 
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mi ABR ARO ASTERROWAAR, MRA (tabs) 一 样 。 您 可 以 
选择 性 地 设置 当 鼠 标 悬 停 时 是 否 切 换 各 部 分 的 打开 /关闭 状态 。 


基本 的 HTML 标记 是 一 系列 的 标题 (H3 标签 ) MAR div， 因 此 内 容 不 用 通过 
JavaScript 即 可 用 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI jdm (Accordion) - 48$} </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion( { 
event: "click hoverintent" 
3); 
3); 


VA 
* hoverIntent | Copyright 2011 Brian Cherne 
* http://cherne.net/brian/resources/jquery.hoverIntent.html 
* modified by the jQuery UI team 
SA 
$.event.special.hoverintent - ( 
setup: function() ( 
$( this ).bind( "mouseover", jQuery.event.special.hoverintent 
ty 
teardown: function() { 
$( this ).unbind( "mouseover", jQuery.event.special.hoverinte 
ty 
handler: function( event ) { 
var currentX, currentY, timeout, 
args - arguments, 
target - $( event.target ), 
previousX = event.pagex, 
previousY = event.pageY; 


function track( event ) { 
currentX - event.pageX; 
currentY - event.pageY; 


Hh 


function clear() { 
target 
.unbind( "mousemove", track ) 
.unbind( "mouseout", clear ); 
clearTimeout( timeout ); 


j 


function handler() { 
var prop, 
orig = event; 


if ( ( Math.abs( previousX - currentX ) + 
Math.abs( previousY - currentY ) ) < 7 ) { 
clear(); 


event - $.Event( "hoverintent" ); 
for ( prop in orig ) { 
if ( !( prop in event ) ) { 
event[ prop ] = orig[ prop ]; 
} 


j 
// 防止 访问 原始 事件 ， 因 为 新 事件 会 被 异步 触发 ， 旧 事件 不 再 可 用 (#6028 
delete event.originalEvent; 


target.trigger( event ); 


) else { 

previousX - currentX; 

previousY - currentY; 

timeout - setTimeout( handler, 100 ); 
} 


} 


timeout = setTimeout( handler, 100 ); 
target .bind({ 
mousemove: track, 
mouseout: clear 
3); 
J; 
J; 
</script> 
</head> 
<body> 


<div id="accordion"> 

<h3> 部 分 1</h3> 

<div> 
<p> 
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quar 
ut neque. Vivamus nisi metus, molestie vel, gravida in, condime 
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin vive 
odio. Curabitur malesuada. Vestibulum a velit eu ante sceleris 
</p> 

</div> 

<h3> 部 分 2</h3> 

<div> 
<p> 
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum s: 
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris tur[ 
velit, faucibus interdum tellus libero ac justo. Vivamus non qt 


suscipit faucibus urna. 
</p> 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p> 
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quis 
Phasellus pellentesque purus in massa. Aenean in pede. Phasellt 
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magn: 
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus ve 
</p> 
<ul> 
<li>List item one</1li> 
<li>List item twoc/li» 
<li>List item three</li> 
</ul> 
</div> 
<h3> 部 分 4</h3> 
<div> 
<p> 
Cras dictum. Pellentesque habitant morbi tristique senectus et 
et malesuada fames ac turpis egestas. Vestibulum ante ipsum pr: 
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean 
mauris vel est. 
</p> 
<p> 
Suspendisse eu nisl. Nullam ut libero. Integer dignissim conset 
Class aptent taciti sociosqu ad litora torquent per conubia no: 
inceptos himenaeos. 
</p> 
</div> 
</div> 


</body> 
</html> 


———————————————— án [t 





排序 (Sortable) 
拖 搜 标题 来 给 面板 重新 排序 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI } mtr (Accordion) - 排序 (Sortable) </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
/* 当 排 序 时 ，IE 存在 布局 问题 (查看 #5413) */ 
.group { zoom: 1 } 
</style> 
<script> 
$(function() { 

$( "#accordion" ) 

.accordion({ 
header: "> div > h3" 


}) 
.Sortable({ 
axe ay. 
handle: "h3", 
stop: function( event, ui ) { 
// 当 排 序 时 ，IE 不 能 注册 blur， 所 以 触发 focusout 义理 程序 来 移 除 
ui.item.children( "h3" ).triggerHandler( "focusout" ); 


} 
134 
197; 


«/script» 
«/head» 
«body» 


«div id="accordion"> 
«div class="group"> 
<h3> 部 分 1«/h3» 
<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, 
</div> 
</div> 
<div class="group"> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibu. 
«/div» 
«/div» 
«div class="group"> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
<ul> 
<li>List item one</li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
</div> 
<div class="group"> 
<h3> 部 分 4</h3> 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senectt 
</div> 
</div> 


</div> 


</body> 
</html> 
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jQuery UI 实例 - 目 动 完 成 (Autocomplete) 


根据 用 户 输入 值 进 行 搜索 和 过 滤 ， 让 用 户 快速 找到 并 从 预 设 值 列 表 中 选择 。 


如 需 了 解 更 多 有 关 autocomplete 部 件 的 细节 ， 请 查看 API 文档 自动 完成 部 件 
(Autocomplete Widget) 。 


默认 功能 
当 您 在 输入 域 中 输入 时 ， 自 动 完成 (Autocomplete) 部 件 提 供 相应 的 建议 。 在 本 实 


例 中 ， 提 供 了 编程 语言 的 建议 选项 ， 您 可 以 输入 "ja" 党 斌 一下， 可 以 得 到 Java 或 
JavaScript。 


数据 源 是 一 个 简单 的 JavaScript 数组 ， 使 用 source 选项 提供 给 部 件 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 默认 功能 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var availableTags - [ 
"ActionScript", 
"AppleScript", 
"Asp", 
"BASIC", 
iion 
MOIS 
"Clojure", 
"COBOL", 
"ColdFusion", 
"Erlang", 
"Fortran", 
"Groovy", 
"Haskell", 
"Java", 
"JavaScript", 
"E3sp*. 
"Perl", 
"PHP", 
"Python", 
"Ruby", 
"Scala", 
"Scheme" 
]; 
$( "#tags" ).autocomplete({ 
source: availableTags 
3); 
3); 
</script> 
</head> 
<body> 


«div class="ui-widget"> 
«label for="tags">%% € : </label> 
<input id="tags"> 

</div> 


</body> 
</html> 








包含 重音 


autocomplete 域 使 用 自 定 义 的 source 选项 来 匹配 带 有 重音 字符 的 结果 项 ， 即 使 文 
本 域 不 包含 重音 字符 也 会 匹配 。 但 是 如 果 您 在 文本 域 中 键入 了 重音 字符 ， 则 不 会 显 
示 非 重音 的 结果 项 。 


党 试 键 人 "Jo", 会 看 到 "John" 和 "J?rn", 然后 键 人 "07 只 会 看 至 


I| "J?rn", 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 包含 重音 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

var names = [ "J?rn Zaefferer", "Scott Gonzalez", "John Resig" 


var accentMap = { 
Uu jiu 
Wp Wo 
}; 
var normalize = function( term ) { 
var ret = ""; 
for ( var i = 0; i < term.length; i++ ) { 
ret += accentMap[ term.charAt(i) ] || term.charAt(i); 
} 
return ret; 
}; 


$( "#developer" ).autocomplete({ 
source: function( request, response ) { 
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( rt 
response( $.grep( names, function( value ) { 


value = value.label || value.value || value; 
return matcher.test( value ) || matcher.test( normalize( 
3) ); 
j 
3); 
3); 
«/script» 
</head> 
<body> 


«div class="ui-widget"> 
<form> 
«label for="developer"># KAR : </label> 
«input id="developer"> 
</form> 
</div> 


</body> 
</html> 








分 类 的 搜索 结果 。 尝 试 键入 "a" SX "n", 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 分 类 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-category { 
font-weight: bold; 
padding: .2em .4em; 
margin: .8em © .2em; 
line-height: 1.5; 
} 
</style> 
<script> 
$.widget( "custom.catcomplete", $.ui.autocomplete, { 
_renderMenu: function( ul, items ) { 
var that = this, 


currentCategory = ""; 
$.each( items, function( index, item ) { 
if ( item.category != currentCategory ) { 


ul.append( "<li class='ui-autocomplete-category'>" + iter 
currentCategory = item.category; 
} 
that._renderItemData( ul, item ); 
31); 
} 
p); 
</script> 
<script> 
$(function() { 
var data = [ 


label: "anders", category: "" }, 
label: "andreas", category: "" }, 
label: "antal", category: "" }, 


label: "annhhx10", category: "Products" }, 

label: "annk K12", category: "Products" }, 

label: "annttop C13", category: "Products" }, 
label: "anders andersson", category: "People" }, 
label: "andreas andersson", category: "People" }, 
label: "andreas johnson", category: "People" } 


c^ c cm c nS cS ocn oca 


1; 


$( "#search" ).catcomplete({ 


delay: 0, 
source: data 
H); 
1); 
«/script» 
«/head» 
«body» 


«label for="search"> 搜 索 : </label> 
«input id-"search'"» 


«/body» 
«/html» 
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组 合 框 (Combobox) 


一 个 由 Autocomplete 和 Button 创建 的 自 定 义 部 件 。 您 可 以 键 人 一 些 字符 ， 来 获得 
基于 您 的 输入 过 滤 的 结果 ， 或 者 使 用 按钮 从 完整 列表 中 选择 。 


该 输入 是 从 一 个 已 有 的 select 元 素 中 读 取 ， 传 递 给 带 有 自 定 义 的 source 选项 的 
Autocomplete。 


这 是 一 个 不 被 支持 的 不 完美 的 部 件 。 这 里 纯粹 是 为 了 演示 autocomplete 定制 功 
能 。 如 需 了 解 更 多 有 关 该 部 件 工 作 原 理 的 细节 ， 请 点 击 这 里 查看 相关 的 jQuery X 


eS 
E, 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 组 合 框 (Combobox) </titl 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.custom-combobox { 
position: relative; 
display: inline-block; 


.custom-combobox-toggle { 
position: absolute; 
top: 0; 
bottom: 0; 
margin-left: -1px; 
padding: 0; 

/* 支持 : IET */ 
*height: 1.7em; 
*top: 0.1em; 


j 


.custom-combobox-input { 
margin: 0; 
padding: 0.3em; 

} 


</style> 

<script> 

(function( $ ) { 

$.widget( "custom.combobox", { 
create: function() (1 
this.wrapper = $( "<span>" ) 

.addClass( "custom-combobox" ) 
.insertAfter( this.element ); 


this.element.hide(); 
this. createAutocomplete(); 
this. createShowAllButton(); 


_createAutocomplete: function() { 
var selected = this.element.children( ":selected" ), 
value = selected.val() ? selected.text() : ""; 


this.input = $( "<input>" ) 
.appendTo( this.wrapper ) 
.Val( value ) 


sea EIS LIU MA 
.addClass( "custom-combobox-input ui-widget ui-widget-cor 
.autocomplete({ 

delay: 0, 


minLength: 0, 

source: $.proxy( this, "_source" ) 
3) 
.tooltip(1 
tooltipClass: "ui-state-highlight" 


3); 


this._on( this.input, { 
autocompleteselect: function( event, ui ) { 
ui.item.option.selected = true; 
this._trigger( "select", event, { 
item: ui.item.option 
3); 
ty 


autocompletechange: " removeIfInvalid" 


3): 
}, 


_createShowAllButton: function() { 
var input = this.input, 
wasOpen = false; 


$( "ca" ) 
.attr( "tabIndex", -1 ) 
.attr( "title", "Show All Items" ) 
.tooltip() 
.appendTo( this.wrapper ) 
.button({ 
icons: { 
primary: "ui-icon-triangle-1-s" 
}, 
text: false 
3) 
.removeClass( "ui-corner-all" ) 
.addClass( "custom-combobox-toggle ui-corner-right" ) 
.mousedown(function() { 
wasOpen - input.autocomplete( "widget" ).is( ":visible' 
3) 
.click(function() ( 
input.focus(); 


// 如 果 已 经 可 见 则 关闭 
if ( wasOpen ) { 


return; 
} 
// 传递 空 字符 串 作为 搜索 的 值 ， 显 示 所 有 的 结 
input.autocomplete( "search", "n ); 
3); 


ty 


_source: function( request, response ) { 
var matcher = new RegExp( $.ui.autocomplete.escapeRegex (rec 
response( this.element.children( "option" ).map(function() 
var text - $( this ).text(); 
if ( this.value && ( !request.term || matcher.test(text) 
return ( 
label: text, 
value: text, 
option: this 
3 
3) ); 
ty 


.removelfInvalid: function( event, ui ) { 


// 选择 一 项 ， 不 执行 其 他 动作 

if ( ui.item ) { 
return; 

} 


// 搜索 一 个 匹配 (不 区 分 大 小 写 ) 

var value = this.input.val(), 
valueLowerCase = value.toLowerCase(), 
valid = false; 


this.element.children( "option" ).each(function() { 
if ( $( this ).text().toLowerCase() === valueLowerCase ) 
this.selected = valid = true; 
return false; 
} 
3); 


// 找到 一 个 匹配 ， 不 执行 其 他 动作 
if ( valid ) { 


return; 
} 
// 移 除 无 效 的 值 
this.input 
; val( n" ) 
.attr( "title", value + " didn't match any item" ) 
.tooltip( "open" ); 
this.element.val( "" ); 
this. delay(function() { 
this.input.tooltip( "close" ).attr( "title". "" ); 
}, 2500 ); 
this.input.data( "ui-autocomplete" ).term = ""; 
ty 


_destroy: function() { 
this.wrapper.remove(); 
this.element.show(); 

j 

3); 
3)( jQuery ); 


$(function() { 
$( "#combobox" ).combobox(); 
$( "#toggle" ).click(function() { 
$( "#combobox" ).toggle(); 
3); 
3); 
</script> 
</head> 
<body> 


«div class="ui-widget"> 

<label> 您 喜欢 的 编程 语言 : </label> 

<select id="combobox"> 
«option value=""> 请 选择.. .</option> 
<option value="ActionScript">ActionScript</option> 
<option value="AppleScript">AppleScript</option> 
<option value="Asp">Asp</option> 
<option value="BASIC">BASIC</option> 
<option value="C">C</option> 
<option value="C++">C++</option> 
<option value="Clojure">Clojure</option> 
<option value="COBOL">COBOL</option> 


<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
</select> 
</div> 


value="ColdFusion">ColdFusion</option> 
value="Erlang">Erlang</option> 
value="Fortran">Fortran</option> 
value="Groovy">Groovy</option> 
value="Haskell">Haskell</option> 
value="Java">Java</option> 
value="JavaScript">JavaScript</option> 
value="Lisp">Lisp</option> 
value="Per1">Perl</option> 
value="PHP">PHP</option> 
value="Python">Python</option> 
value="Ruby">Ruby</option> 
value="Scala">Scala</option> 
value="Scheme">Scheme</option> 


«button id="toggle"> 显 示 基 础 的 选择 框 </button> 


</body> 
</html> 
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目 定义 效 据 并 显示 


您 可 以 使 用 自 定义 数据 格式 ， 并 通过 简单 地 重 载 默认 的 聚焦 和 选择 行为 来 显示 数 


据 。 


尝试 键入 多， 或 者 按 向 下 箭头 按键 ， 即 可 得 到 一 个 项 目 列表 。 


<!doctype html> 
<html lang="en"> 


<head> 


<meta charset="utf-8"> 

<title>jQuery UI 自动 完成 (Autocomplete) - 自 定义 数据 并 显示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 


#project-label { 


display: 


block; 


font-weight: bold; 
margin-bottom: 1em; 


} 


#project-icon { 
float: left; 


height: 


32px; 


width: 32px; 


} 


#project-description { 


margin: 0; 
padding: 0; 
} 
</style> 
<script> 
$(function() { 
var projects = [ 
if 
value: "jquery", 
label: "jQuery", 
desc: "the write less, do more, JavaScript library", 
icon: "jquery_32x32.png" 
i 
{ 
value: "jquery-ui", 
label: "jQuery UI", 
desc: "the official user interface library for jQuery", 
icon: "jqueryui_32x32.png" 
}, 
1 


value: "sizzlejs", 
label: "Sizzle JS", 
desc: "a pure-JavaScript CSS selector engine", 
icon: "sizzlejs 32x32.png" 
j 
l; 


$( "#project" ).autocomplete({ 

minLength: 0, 

source: projects, 

focus: function( event, ui ) { 
$( "#project" ).val( ui.item.label ); 
return false; 

}, 

select: function( event, ui ) { 
$( "#project" ).val( ui.item.label ); 
$( "#project-id" ).val( ui.item.value ); 
$( "#project-description" ).html( ui.item.desc ); 
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon 


return false; 


} 
}) 


.data( "ui-autocomplete" ). renderlItem = function( ul, item ) + 
return $( "<li>" ) 
-append( "<a>" + item.label + "<br>" + item.desc + "</a>" ` 
.appendTo( ul ); 
3 
3); 
«/script» 
«/head» 
«body» 


<div id="project-1Labe1"> 选 择 一 个 项 目 GESEA "j") : </div> 

<img id="project-icon" oma on a ne ic ina class="Ui-: 
<input id="project"> 

<input type="hidden" id="project-id"> 

<p id="project-description"></p> 


</body> 
</html> 


«| = 








多 个 值 


Mp 键入 一 些 字 符 ， 比 如 ""， 可 以 看 到 相关 的 编程 语言 结果 。 选 择 一 个 值 ， 然 后 
续 续 键 人 字符 来 添加 其 他 的 值 。 


本 实例 演示 如 何 使 用 source 选项 和 一 些 事件 来 实现 在 一 个 单一 的 文本 域 输入 多 个 
自动 完成 的 值 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 多 个 值 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var availableTags = [ 
"ActionScript", 
"AppleScript", 
"Asp", 
"BASIC", 
OE 
UC ERUF 
"Clojure", 
"COBOL", 
"ColdFusion", 
"Erlang", 
"Fortran", 
"Groovy", 
"Haskell", 
"Java", 
"JavaScript", 
BS 
"Perl", 
"PHP", 
"Python", 
"Ruby", 


"Scala", 
"Scheme" 
]; 
function split( val ) { 
return val.split( /,\s*/ ); 
} 


function extractLast( term ) { 
return split( term ).pop(); 


} 
$( "#tags" ) 
// 当选 择 一 个 条 目 时 不 离开 文本 域 
.bind( "keydown", function( event ) { 
if ( event.keyCode --- $.ui.keyCode.TAB && 
$( this ).data( "ui-autocomplete" ).menu.active ) ( 
event.preventDefault(); 
} 
3) 
.autocomplete({ 
minLength: 0, 
source: function( request, response ) { 
// 回 到 autocomplete， 但 是 提取 最 后 的 条 目 
response( $.ui.autocomplete.filter( 
availableTags, extractLast( request.term ) ) ); 
}, 
focus: function() { 
// 防止 在 获得 焦点 时 插入 值 
return false; 
}, 
select: function( event, ui ) { 
var terms = split( this.value ); 
// 移 除 当前 输入 
terms.pop(); 
// 添加 被 选项 
terms.push( ui.item.value ); 
// 添加 占 位 符 ， 在 结尾 添加 有 逗号 + 空格 
terms.push( "" ); 
this.value - terms.join( ", " ); 
return false; 
} 
3); 
1); 
«/script» 
«/head» 
«body» 


«div class="ui-widget"> 
«label for="tags"> 编 程 语言 : «/label» 
<input id="tags" size="50"> 

</div> 


</body> 
</html> 








用 法 : 键入 至 少 两 个 字符 来 获取 乌 的 名 称 。 选 择 一 个 值 ， 然 后 继续 键入 字符 来 添加 


其 他 的 值 。 


本 实例 演示 如 何 使 用 source 选项 和 一 些 事件 来 实现 在 一 个 单一 的 文本 域 输入 多 个 
自动 完成 的 值 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 多 个 值 ， 远 程 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-loading { 

background: white url('images/ui-anim basic 16x16.gif') right « 


</style> 
<script> 
$(function() { 
function split( val ) { 
return val.split( /,\s*/ ); 
} 
function extractLast( term ) { 
return split( term ).pop(); 


} 


$( "#birds" ) 
// 当选 择 一 个 条 目 时 不 离开 文本 域 
.bind( "keydown", function( event ) { 
if ( event.keyCode === $.ui.keyCode.TAB && 
$( this ).data( "ui-autocomplete" ).menu.active ) { 
event.preventDefault(); 


} 
}) 


.autocomplete({ 

source: function( request, response ) { 

$.getJSON( "search.php", { 
term: extractLast( request.term ) 

}, response ); 

tr 

search: function() { 
// 自 定义 最 小 长 度 
var term = extractLast( this.value ); 


if ( term.length < 2 ) ( 
return false; 
} 
ty 


focus: function() { 
// 防止 在 获得 焦点 时 插入 值 
return false; 

}, 

select: function( event, ui ) { 
var terms = split( this.value ); 
// 移 除 当前 输入 
ps pop(); 

/ 添加 被 选项 
terns push( ui.item.value ); 
/ 添加 占 位 符 ， 在 结 尾 添加 至 号 + 空格 

ane push( "" ); 
this.value - terms.join( ", " ); 
return false; 

} 

1); 
1); 
«/script» 
«/head» 
«body» 


«div class="ui-widget"> 
«label forz"birds"» 5: </label> 
«input id="birds" size="50"> 
</div> 


</body> 
</html> 


4] — 一 路 


远程 JSONP 数据 源 


当 您 在 文本 域 中 键入 字符 时 ，Autocomplete 部 件 给 出 建议 结果 。 在 本 实例 中 ， 当 您 
在 文本 域 中 至 少 键入 两 个 字符 时 ， 将 显示 相关 城市 的 名 称 。 


在 本 实例 中 ， 数 据 源 是 geonames. org webservice。 虽 然 选择 一 个 元 素 后 文本 域 中 
是 该 城市 名 称 ， 但 是 会 显示 更 多 的 信息 以 便 找到 正确 的 条 目 。 数 据 也 可 以 回调 ， 显 
示 在 下 面 的 结果 框 中 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 远程 JSONP 数据 源 </title 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


<lin 


k rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
.Ui-autocomplete-loading { 
background: white url('images/ui-anim basic 16x16.gif') right « 


} 


#city { width: 25em; } 
</style> 
<script> 


$(fu 
fu 


nction() ( 
nction log( message ) ( 


$( "<div>" ).text( message ).prependTo( "#log" ); 
$( "#log" ).scrollTop( 0 ); 


} 
$( 


}) 
3); 


</SC 
</head 
<body> 


"#city" ).autocomplete({ 
source: function( request, response ) { 
$.ajax({ 
url: "http://ws.geonames.org/searchJSON", 
dataType: "jsonp", 
data: { 
featureClass: "P", 
style: "full", 
maxRows: 12, 
name startsWith: request.term 
i 
success: function( data ) { 
response( $.map( data.geonames, function( item ) { 
return { 
label: item.name + (item.adminNamei1 ? ", " + item.: 
value: item.name 


p); 
} 
H); 
}, 
minLength: 2, 
select: function( event, ui ) { 
log( ui.item ? 
"Selected: " + ui.item.label : 
"Nothing selected, input was " + this.value); 
}, 
open: function() { 
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-cortr 
}, 
close: function() { 
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corr 


j 


, 


ript» 
> 


«div class="ui-widget"> 

«label for="city"> 您 的 城市 : </label> 

<input id="city"> 

Powered by «a href="http://geonames.org" target="_blank">geoname: 
</div> 


<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
结 
<div id="log" style="height: 200px; width: 300px; overflow: auto, 
</div> 


</body> 
</html> 





远程 数据 源 


当 您 在 文本 域 中 键入 字符 时 ，Autocomplete 部 件 给 出 建议 结果 。 在 本 实例 中 ， 当 您 
在 文本 域 中 至 少 键入 两 个 字符 时 ， 笃 显示 相关 乌 的 名 称 。 


在 本 实例 中 ， 数 据 源 是 可 返回 JSON 数据 的 服务 器 端 脚本 ， 一 个 简单 的 
source 选项 来 指定 。 另外 ，minLength 选项 设置 为 2， eae ai 反 回 太 多 的 结果 ， 
select SHHT eRe Bite 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 远程 数据 源 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-loading { 
background: white url('images/ui-anim basic 16x16.gif') right « 
J 
</style> 
<script> 
$(function() { 
function log( message ) { 
$( "<div>" ).text( message ).prependTo( "#log" ); 
$( "#log" ).scrollTop( 0 ); 
} 


$( "#birds" ).autocomplete({ 
source: "search.php", 
minLength: 2, 
select: function( event, ui ) { 
log( ui.item ? 
"Selected: " + ui.item.value + " aka " + ui.item.id 
"Nothing selected, input was " + this.value ); 
} 
3); 
3); 
«/script» 
«/head» 
<body> 


<div class="ui-widget"> 
«label forz"birds"» 5: </label> 
«input id="birds"> 
«/div» 
«div class-"ui-widget" style-"margin-top:2em; font-family:Arial"» 
A : 
«div id="log" style="height: 200px; width: 300px; overflow: auto, 
«/div» 


«/body» 
«/html» 


«| BR 








当 您 在 文本 域 中 键入 字符 时 ，Autocomplete 部 件 给 出 建议 结果 。 在 本 实例 中 ， 当 您 
在 文本 域 中 至 少 键 人 两 个 字符 时 ， 将 显示 相关 乌 的 名 称 。 


为 了 提高 性 能 ， 这 里 添加 了 一 些 本 地 缓存 ， 其 他 与 远程 数据 源 实 例 相 似 。 在 这 里 
缓存 只 保存 了 一 Q2 vcn suc ai Es 个 值 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 远程 缓存 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-loading { 

background: white url('images/ui-anim basic 16x16.gif') right « 


</style> 
<script> 
$(function() { 
var cache = {}; 
$( "#birds" ).autocomplete({ 
minLength: 2, 
source: function( request, response ) { 
var term = request.term; 
if ( term in cache ) { 
response( cache[ term ] ); 
return; 


j 


$.getJSON( "search.php", request, function( data, status, > 
cache[ term ] = data; 
response( data ); 
3); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div class="ui-widget"> 
«label forz"birds"» 5: </label> 
«input id="birds"> 

«/div» 


«/body» 
«/html» 








可 滚动 的 结果 


当 显 示 一 个 长 列表 的 选项 时 ， 您 可 以 简单 地 为 autocomplete 菜单 设置 max-height 
来 防止 菜单 显示 太 长 。 党 试 键入 "a" 或 "s" 来 获得 一 个 可 滚动 的 长 列表 的 结果 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 可 滚动 的 结果 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete { 
max-height: 100px; 
overflow-y: auto; 
/* 防止 水 平 滚动 条 */ 
overflow-x: hidden; 


} 
/* IE 6 不 支持 max-height 
* 我 们 使 用 height 代替 ， 但 是 这 会 强制 菜单 总 是 显示 为 那个 高 度 
ura 
* html .ui-autocomplete { 
height: 100px; 


</style> 

<script> 

$(function() { 

var availableTags - [ 

"ActionScript", 
"AppleScript", 
"Asp" : 
"BASIC", 
WEN F 
吓人 HL 
"Clojure", 
"COBOL", 
"ColdFusion", 
"Erlang", 
"Fortran", 
"Groovy", 
"Haskell", 
"Java", 
"JavaScript", 
aliis pi 7 
"Perl", 
"DHP" > 
"Python", 
"Ruby" > 


"Scala", 
"Scheme" 


]; 
$( "#tags" ).autocomplete({ 
source: availableTags 


}); 
}); 
</script> 
</head> 
<body> 


<div class="ui-widget"> 
«label for="tags"> 标 签 : </label> 
<input id="tags"> 

</div> 


</body> 
</html> 


mi — — E 


XML 数据 

本 实例 演示 如 何 获 取 一 些 XML 数据 ， 并 使 用 jQuery 的 方法 解析 它 ， 然 后 把 它 提供 
给 autocomplete 作为 数据 源 。 

本 实例 也 可 作为 解析 远程 XML 数据 源 的 参考 - 解析 在 每 次 source 回调 请 求 时 发 


o 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - XML 数据 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.ui-autocomplete-loading { background: white url('images/ui-anim 
</style> 
<script> 
$(function() { 
function log( message ) { 
$( "<div/>" ).text( message ).prependTo( "#log" ); 
$( "#log" ).attr( "scrollTop", © ); 
} 


$.ajax({ 
url: "london.xml", 
dataType: "xml", 


success: function( xmlResponse ) { 
var data = $( "geoname", xmlResponse ).map(function() { 


return { 
value: $( "name", this ).text() + ", " + 
( $.trim( $( "countryName", this ).text() ) || "(unkr 
id: $( "geonameId", this ).text() 
3 
3)-get(); 


$( "#birds" ).autocomplete({ 
source: data, 
minLength: 0, 
select: function( event, ui ) { 
log( ui.item ? 
"Selected: " + ui.item.value + ", geonameId: " + ui.: 
"Nothing selected, input was " + this.value ); 
} 
3); 
} 
3); 
3); 
«/script» 
«/head» 
«body» 


«div class="ui-widget"> 
«label for="birds">London 匹配 : </label> 
«input id="birds"> 

«/div» 


«div class-"ui-widget" style-"margin-top:2em; font-family:Arial"> 
结 未 : 
<div id="log" style="height: 200px; width: 300px; overflow: auto, 
</div> 


</body> 
</html> 





jQuery UI 实例 - 按钮 (Button) 


用 带 有 适当 的 悬 停 (hover) 和 激活 (active) 的 样式 的 可 主题 化 按钮 来 加 强 标准 表 
单元 素 (比如 按钮 、 输 入 框 、 锚 ) 的 功能 。 


如 需 了 解 更 多 有 关 button 部 件 的 细节 ， 请 查看 API 文档 按钮 部 件 (Button 
Widget) 。 


默认 功能 


可 用 于 按钮 的 标记 实例 : — button 元 素 ， 一 个 类 型 为 submit 的 input 元素 和 一 


个 锚 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "input[type=submit], a, button" ) 
.button() 
.click(function( event ) { 
event.preventDefault(); 
3); 
3); 
</script> 
</head> 
<body> 


<button>—* button 元 素 </button> 
«input type="submit" value=" 一 个 提交 按钮 "> 
«a href="#"> 一 个 锚 </a> 


</body> 
</html> 








复 选 框 


通过 button 部 件 把 复 选 框 显示 为 切换 按钮 样式 。 与 复 选 框 相关 的 label 元 素 作为 按 
钮 文本 。 


本 实例 通过 在 一 个 公共 的 容器 上 调用 .buttonset() ， 演 示 了 三 个 显示 为 按钮 样 
式 的 复 选 框 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 复 选 框 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#check" ).button(); 
$( "#format" ).buttonset(); 
3); 
</script> 
<style> 
#format { margin-top: 2em; } 
</style> 
</head> 
<body> 


<input type="checkbox" id="check"><label for="check">t)i#</label> 


<div id="format"> 
<input type="checkbox" id="checki"><label for="checki">B</label> 
<input type="checkbox" id="check2"><label for="check2">I</label> 
<input type="checkbox" id="check3"><label for="check3">U</label> 
</div> 


</body> 
</html> 


六 一 





Ps 
zh 


一 些 


3 


有 文本 和 图 标的 各 种 组 合 的 按钮 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 图 标 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "button:first" ).button({ 
icons: { 
primary: "ui-icon-locked" 
tr 
text: false 
}).next().button({ 
icons: { 
primary: "ui-icon-locked" 


}).next().button({ 
icons: { 
primary: "ui-icon-gear", 
secondary: "ui-icon-triangle-1-s" 


} 
}).next().button({ 
icons: { 
primary: "ui-icon-gear", 
secondary: "ui-icon-triangle-1-s" 
3 
text: false 
3); 
3); 
</script> 
</head> 
<body> 


<button> 只 带 有 图 标的 按钮 </button> 
<button> 图 标 在 左 侧 的 按钮 </button> 
<button> 带 有 两 个 图 标的 按钮 </button> 
<button> 带 有 两 个 图 标 且 不 带 文本 的 按钮 </button> 


</body> 
</html> 





单 选 
三 个 单 选 按钮 转变 为 一 套 按钮 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - ##%</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#radio" ).buttonset(); 
3); 
</script> 
</head> 
<body> 


«form» 
«div id="radio"> 
<input type="radio" id="radioi" name="radio"><label for="radio: 
<input type="radio" id="radio2" name="radio" checked="checked": 
<input type="radio" id="radio3" name="radio"><label for-'radio: 
</div> 
</form> 


</body> 
</html> 


i B 


分 割 按钮 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 分 割 按钮 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-menu { position: absolute; width: 100px; } 
</style> 
<script> 
$(function() { 
$( "#rerun" ) 
.button() 
.click(function() ( 
alert( "Running the last action" ); 


}) 
.Next() 


.button({ 
text: false, 
icons: { 
primary: "ui-icon-triangle-1-s" 


) 
.Click(function() { 
var menu = $( this ).parent().next().show().position({ 
my: "left top", 
at: "left bottom", 
of: this 
}); 
$( document ).one( "click", function() { 
menu.hide(); 


31); 
return false; 
3) 
.parent() 
.buttonset() 
,next() 
.hide() 
.menu( ); 
31); 
«/script» 
«/head» 
«body» 
«div» 
«div» 


LOL E 


«button id="rerun"> 运 行 最 后 的 动作 </button> 
«button id="select"> 选 择 一 个 动作 </button> 
</div> 
<ul> 
<li><a href="#"> 打 开 .. .</a></1i> 
<li><a href="#"> 保 存 </a></1i> 
<li><a href="#">HlBR</a></1i> 
</ul> 
</div> 


</body> 
</html> 


ee 





TA 


一 个 多 媒体 播放 器 的 工具 栏 。 请 看 基础 的 标记 : — button 3R, Shuffle 按钮 是 
一 个 类 型 为 checkbox 的 input, Repeat 选项 是 三 个 类 型 为 radio 的 input, 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 工具 栏 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#toolbar { 
padding: 4px; 
display: inline-block; 
} 
/* support: IE7 */ 
*+html #toolbar { 
display: inline; 
} 
</style> 
<script> 
$(function() { 
$( "#beginning" ).button({ 
text: false, 


icons: { 
primary: "ui-icon-seek-start" 
j 
3); 


$( "#rewind" ).button({ 
text: false, 


icons: { 
primary: "ui-icon-seek-prev" 
j 
3); 


$( "#play" ).button({ 
text: false, 
icons: { 
primary: "ui-icon-play" 
} 


}) 
.Click(function() { 


var options; 
if ( $( this ).text() === "play" ) { 
options = { 
label: "pause", 
icons: { 
primary: "ui-icon-pause" 
} 


3 
) else { 
options - ( 
label: "play", 
icons: { 


primary: "ui-icon-play" 


} 
}; 
} 
$( this ).button( "option", options ); 
3); 


$( "#stop" ).button({ 
text: false, 
icons: { 
primary: "ui-icon-stop" 
} 


}) 
.Click(function() { 


$( "#play" ).button( "option", { 
label: "play", 


icons: ( 
primary: "ui-icon-play" 
} 
}); 


}); 
$( "#forward" ).button({ 


text: false, 


icons: { 
primary: "ui-icon-seek-next" 
j 
3); 


$( "send" ).button({ 
text: false, 


icons: { 
primary: "ui-icon-seek-end" 
j 
3); 


$( "#shuffle" ).button(); 
$( "#repeat" ).buttonset(); 
3); 
«/script» 
«/head» 
«body» 


«div id="toolbar" class="ui-widget-header ui-corner-all"> 
«button id="beginning"># 4</button> 
«button id="rewind">(®iR</button> 
«button id="play">#8iX</button> 
«button id="stop">{#1E</button> 
«button id="forward">(Ri#</button> 
«button id="end">2</button> 


<input type="checkbox" id="shuffle"><label for="shuffle">Shuffle< 


«span id="repeat"> 
<input type="radio" id="repeatO" name="repeat" checked="checkec 
<input type="radio" id="repeati" name="repeat"><label for="repe 
<input type="radio" id="repeatall" name="repeat"><label for="re 


</span> 
</div> 


</body> 
</html> 


«| = 








'Attr.nodeValue' is deprecated. Please use 'value' instead. adsbygoogle.js:32 href 
http://www.wscschool.cc/jqueryui/example-datepicker.html example- 
datepicker.html:438 tmp url http://www.w3cschool.cc/jqueryui/example- 
datepicker.html example-datepicker.html:450 example-button.html jQuery UI 实例 
— #¥42 (Button) example-datepicker.html:495 example-dialog.html jQuery UI 3: 
例 — 对 话 框 (Dialog) example-datepicker.html:496 


jQuery UI 实例 - 日 期 选择 器 (Datepicker) 


从 弹出 框 或 内 联 日 历 选择 一 个 日 期 。 


如 需 了 解 更 多 有 关 datepicker 部 件 的 细节 ， 请 查看 API 文档 日 期 选择 器 部 件 
(Datepicker Widget) 。 


默认 功能 


日 期 选择 器 (Datepicker) 绑 定 到 一 个 标准 的 表单 input 字段 上 。 把 焦点 移 到 input 

上 (点击 或 者 使 用 tab 键 ) ， 在 一 个 小 的 覆盖 层 上 打开 一 个 交互 日 历 。 选 择 一 个 日 

期 R 点 击 页 面 上 的 任意 地 方 (输入 框 即 失去 焦点 ) ， 或 者 点 击 Esc 键 来 关闭 。 如 果 
选择 了 一 个 日 期 ， 则 反馈 显示 为 input 的 值 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker(); 
3); 
«/script» 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 
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z) 1È] 


当 打 开 或 关闭 datepicker 时 使 用 不 同 的 动画 。 从 下 拉 框 中 选择 一 个 动画 ， 然 后 在 输 
入 框 中 点 击 来 查看 它 的 效果 。 您 可 以 使 用 三 个 标准 动画 中 任意 一 个 ， 或 者 使 用 UI 
特效 中 的 任意 一 个 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charse 
<title>jQuer 
<link rel="s 
<script src= 
<script src= 
<link rel="s 
<script> 
$(function() 
$( "#dat 
$( "sani 
$( " 
3); 
3); 
«/script» 
</head> 
<body> 


<p> 日 期 «input t 


<p> 动 男 : <br> 
<select id=" 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
</select> 
</p> 


</body> 
</html> 


aoo = 


其 他 月 份 的 日 期 


t-"utf-8"» 

y UI 日 期 选择 器 (Datepicker) - 动画 </title> 
tylesheet" href="//code.jquery.com/ui/1.10.4/theme: 
"//code.jquery.com/jquery-1.9.1.js"»«/script» 
"//code.jquery.com/ui/1.10.4/jquery-ui.js"></script 
tylesheet" hrefz'http://jqueryui.com/resources/dem: 


{ 
epicker" ).datepicker(); 
m" ).change(function() { 
#datepicker" ).datepicker( "option", "showAnim", $i 


ype-"text" id="datepicker" size="30"></p> 


anim"> 

value="Show">Show (#kik)</option> 
value="slideDown">## F«/option» 
value="fadeIn">A</option> 
value="blind">Blind (UI 百叶 窗 特效 )</option> 
value="bounce">Bounce (UI 反弹 特效 )</option> 
value-"clip"»Clip (UI 剪辑 特效 )</option> 
value="drop">Drop (UI 降落 特效 )</option> 
value="fold">Fold (UI #1 #4#3)</option> 
value="Slide">Slide (UI 滑动 特效 )</option> 
Value="" > 无 </option> 





datepicker 可 以 显示 其 他 月 份 的 日 期 ， 这 些 日 期 也 可 以 设置 成 可 选择 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 其 他 月 份 的 日 期 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
showOtherMonths: true, 
selectOtherMonths: true 
+); 
3); 
</script> 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 
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显示 按钮 栏 


通过 布尔 值 的 showButtonPanel 选项 为 选择 当天 日 期 显示 一 个 "Today" 按 钮 ， 为 
关闭 日 历 显 示 一 个 "Done" 按 纽 。 默 认 情 况 下 ， 当 按钮 栏 显 示 时 会 启用 每 个 按钮 ， 但 
是 按钮 可 通过 其 他 的 选项 进行 关闭 。 按 和 钮 文本 可 自 定义 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 按钮 栏 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
showButtonPanel: true 
3): 
3); 
«/script» 
«/head» 
«body» 


<p> 日 期 <input type="text" id-"datepicker"»«/p» 


«/body» 
«/html» 


E) 





内 联 显示 


datepicker 是 庶 套 在 页 面 中 显示 ， 而 不 是 显示 在 一 个 覆盖 层 中 。 只 需要 简单 地 在 
div 上 调用 .datepicker() 即 可 ， 而 不 是 在 input 上 调用 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 内 联 显示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker(); 
3); 
</script> 
</head> 
<body> 


日 期 : <div id="datepicker"></div> 


</body> 
</html> 


e] 
显示 月 份 & 年 份 菜单 


显示 月 份 和 年 份 的 下 拉 框 ， 而 不 是 显示 静态 的 月 份 /年 份 标题 ， 这 样 便于 在 大 范围 的 
时 间 跨 度 上 和 导航。 添加 布尔 值 changeMonth 和 changeYear 选项 即 可 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 月 份 &amp; 年 份 菜单 </1 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
changeMonth: true, 
changeYear: true 
3); 
3); 
«/script» 
</head> 
<body> 


<p> 日 期 «input type="text" id="datepicker"></p> 


</body> 
</html> 
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显示 多 个 月 份 


设置 numberOfMonths 选项 为 一 个 整数 2， 或 者 大 于 2 的 整数 ， 来 在 一 个 
datepicker 中 显示 多 个 月 份 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 多 个 月 份 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
numberOfMonths: 3, 
showButtonPanel: true 
3): 
3); 
</script> 
</head> 
<body> 


<p> 日 期 «input type="text" id="datepicker"></p> 


</body> 
</html> 
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格 陈 化 日 期 


以 各 种 方式 显示 日 期 反馈 。 从 下 拉 框 中 选择 一 种 日 期 格式 ， 然 后 在 输入 框 中 点 击 并 
选择 一 个 日 期 ， 查 看 所 选 格式 的 日 期 显示 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 格式 化 日 期 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker(); 
$( "#format" ).change(function() { 
$( "#datepicker" ).datepicker( "option", "dateFormat", $( th: 
3): 
3): 
</script> 
</head> 
<body> 


<p> 日 期 : <input type="text" id="datepicker" size="30"></p> 


<p> 格 式 选 项 : <br> 
<select id="format"> 
<option value="mm/dd/yy">Default - mm/dd/yy</option> 
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> 
«option value="d M, y">Short - d M, y</option> 
«option value="d MM, y">Medium - d MM, y</option> 
«option value="DD, d MM, yy">Full - DD, d MM, yy</option> 
<option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the 
«/select» 
</p> 


</body> 
</html> 
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图 标 触 发 器 


点 击 输 入 框 旁边 的 图 标 来 显示 datepicker。 设 置 datepicker 在 获得 焦点 时 打开 (RÀ 
认 行 为 ) ， 或 者 在 点 击 图 标 时 打开 ， 或 者 在 获得 焦点 /点 击 图 标 时 打开 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 图 标 触 发 器 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
showOn: "button", 
buttonImage: "images/calendar.gif", 
buttonImageOnly: true 
3): 
3); 
</script> 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 


[E] 


本 地 化 日 万 


本 地 化 datepicker 日 历 语言 和 格式 (默认 为 English / Western 格式 ) 。datepicker 
包含 对 从 右 到 左 读 取 的 语言 的 内 建 支 持 ， 比 如 Arabic 和 Hebrew. 





<!doctype html> 
<html lang="en"> 


<head> 


<meta charset="utf-8"> 

<title>jQuery UI 日 期 选择 器 (Datepicker) - 本 地 化 日 历 </title> 

<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script srcz"http://jqueryui.com/resources/demos/datepicker/]jque! 
<script srcz"http://jqueryui.com/resources/demos/datepicker/jque! 
<script srcz"http://jqueryui.com/resources/demos/datepicker/]jque! 
<script src="http://jqueryui.com/resources/demos/datepicker/jque} 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<script> 


$(function() { 
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ), 
$( "#locale" ).change(function() { 
$( "#datepicker" ).datepicker( "option", 
$.datepicker.regional[ $( this ).val() ] ); 


3): 
+); 
</script> 
</head> 
<body> 


<p> 日 期 «input type="text" id="datepicker">&nbsp; 
<select id="locale"> 


«option value="ar">Arabic (&#8235; (&#1575; &#1604; &#1593; &#1585 ， 
«option value="Zh-TW">Chinese Traditional (&#32321; &#39636 ; &#2( 
<option value="">English</option> 
«option value="fr" selected="Selected">French (Fran&ccedil; ais: 
«option value="he">Hebrew (&#8235; (&#1506 ; &#1489 ; &#1512 ;&#1497, 
</select></p> 
</body> 
</html> 





填充 另 一 个 输入 框 


使 用 altField 和 altFormat 选项 ， 无 论 何 时 选择 日 期 ， 会 在 另 一 个 输入 框 中 
填充 带 有 一 定格 式 的 日 期 。 这 个 功能 通过 对 电脑 友好 性 的 日 期 进一步 加 工 后 ， 向 用 
户 呈 现 一 个 用 户 友 好 性 的 日 期 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 填充 另 一 个 输入 框 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
altField: "#alternate", 
altFormat: "DD, d MM, yy" 
3): 
3); 
«/script» 
</head> 
<body> 


<p> 日 期 : <input type="text" id="datepicker">&nbsp;<input type="text' 


</body> 
</html> 





限制 日 期 范围 


通过 minDate 和 maxDate 选项 限制 可 选择 的 日 期 范围 。 设 置 起 止 日 期 为 实际 
的 日 期 (new Date(2009, 1- 1,26)) ， 或 者 为 与 今天 的 一 个 数值 偏 移 (-20) ， 或 
者 为 一 个 周期 和 单位 的 字符 串 ('+1M +10D') 。 如 果 设 置 为 字符 串 ， 使 用 'D' 表示 
天 ， 使 用 'W' 表示 周 ， 使 用 'M' 表示 月 ， 使 用 'Y' 表示 年 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 限制 日 期 范围 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +1( 

3); 
</script> 

</head> 

<body> 


<p> 日 期 «input type="text" id="datepicker"></p> 


</body> 
</html> 
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选择 一 个 日 期 范围 


选择 要 搜索 的 日 期 范围 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 选择 一 个 日 期 范围 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "4from" ).datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3, 
onClose: function( selectedDate ) ( 
$( "sto" ).datepicker( "option", "minDate", selectedDate ), 
} 
}); 
$( "#to" ).datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3, 
onClose: function( selectedDate ) { 
$( "#from" ).datepicker( "option", "maxDate", selectedDate 
} 
}); 
}); 
</script> 
</head> 
<body> 


«label for="from">M</label> 

<input type="text" id="from" name="from"> 
«label for="to">2I</label> 

<input type="text" id="to" name="to"> 


</body> 
</html> 





显示 一 年 中 的 第 几 周 


datepicker 可 以 显示 一 年 中 的 第 几 周 。 黑 认 的 计算 是 按照 ISO 8601 定义 : BAM 
星期 一 开始 ， 每 年 的 第 一 周 包含 该 年 的 第 一 个 星期 四 。 这 就 意味 着 一 年 中 的 一 些 天 
可 能 是 属于 另 一 年 中 的 周 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 一 年 中 的 第 几 周 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
Showweek: true, 
firstDay: 1 
3); 
3); 
«/script» 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 
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jQuery UI 实例 - 对 话 框 (Dialog) 


在 一 个 交互 覆盖 层 中 打开 内 容 。 


如 需 了 解 更 多 有 关 dialog 部 件 的 细节 ， 请 查看 API 文档 对 话 框 部 件 (Dialog 
Widget) 。 


默认 功能 


基本 的 对 话 框 窗口 是 一 个 定位 于 视 区 中 的 覆盖 层 ， 同 时 通过 一 个 iframe 与 页 面 内 容 
分 隔 开 (就 像 select 元 素 ) 。 它 由 一 个 标题 栏 和 一 个 内 容 区 域 组 成 ， 且 可 以 移动 ， 
调整 尺寸 ， 上 默认 可 通过 X 图 标 关 闭 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog" ).dialog(); 
3); 
«/script» 
</head> 
<body> 


«div id="dialog" title=" 基 本 的 对 话 框 "> 
<p> 这 是 一 个 默认 的 对 话 框 ， 用 于 显示 信息 。 对 话 框 窗口 可 以 移动 ， 调 整 尺 寸 ， 默 认可 通 


</div> 


</body> 
</html> 





动 转 
可 以 通过 为 show/hide 属性 指定 一 个 特效 来 动画 显示 对 话 框 。 您 必须 为 想 使 用 的 特 


效 引 用 独立 的 特效 文件 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 动画 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog" ).dialog({ 
autoOpen: false, 
show: { 
effect: "blind", 
duration: 1000 


}, 
hide: { 
effect: "explode", 
duration: 1000 
} 
p); 


$( "#opener" ).click(function() { 
$( "#dialog" ).dialog( "open" ); 
3); 
1); 
</script> 
</head> 
<body> 


<div id="dialog" title="Basic dialog"> 
<p> 这 是 一 个 动画 显示 的 对 话 框 ， 用 于 显示 信息 。 对 话 框 窗口 可 以 移动 ， 调 整 尺寸 ， 默 认 
</div> 


«button id="opener">t] F +t igtE</but ton> 


</body> 
</html> 





基本 的 模 态 


模 态 对 话 框 防止 用 户 与 对 话 框 以 外 的 页 面 其 他 部 分 进行 交互 ， 直 到 对 话 框 关闭 为 


o 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 基本 的 模 态 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 


$(function() { 
$( "#dialog-modal" ).dialog({ 
height: 140, 
modal: true 
3): 
3); 
«/script» 
«/head» 
«body» 


«div id-"dialog-modal" title=" 基 本 的 模 态 对 话 框 "> 
<p> 添 加 模 态 覆盖 屏幕 ， 让 对 话 框 看 起 来 更 突出 ， 因 为 它 让 页 面 上 其 他 内 容 变 暗 。</p> 
</div> 


<p>Sed vel diam id libero <a href="http://www.w3cschool.cc">rutrum 


</body> 
</html> 
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模 态 确认 


确认 一 个 动作 可 能 是 破坏 性 的 也 可 能 是 有 意义 的 。 设 置 modal 选项 为 true， 并 通 
过 buttons 选项 来 指定 主要 的 和 次 要 的 用 户 动作 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 模 态 确认 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog-confirm" ).dialog({ 
resizable: false, 
height:140, 
modal: true, 
buttons: { 
"Delete all items": function() { 
$( this ).dialog( "close" ); 
ty 
Cancel: function() { 
$( this ).dialog( "close" 55 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 


«div id="dialog-confirm" title=" 清 空 回 收 站 吗 ? "> 
<p><span class="ui-icon ui-icon-alert" style="float:left; margin 
</div> 


<p>Sed vel diam id libero <a href="http://www.w3cschool.cc">rutrum 


</body> 
</html> 


ooo 
模 态 表单 
使 用 模 态 对 话 框 来 请 求 用 户 在 一 个 多 步骤 过 程 中 输入 数据 。 在 内 容 区 域 谨 入 form 


标记 ， 设 置 modal 选项 为 true， 并 通过 buttons 选项 来 指定 主要 的 和 次 要 的 
用 户 动作 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<title>jQuery UI 对 话 框 (Dialog) - 模 态 表单 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
body { font-size: 62.5%; } 
label, input { display:block; } 
input.text { margin-bottom:12px; width:95%; padding: .4em; } 
fieldset { padding:0; border:0; margin-top:25px; } 
hi { font-size: 1.2em; margin: .6em 0; } 
div#users-contain { width: 350px; margin: 20px 0; } 
div#users-contain table { margin: 1em 0; border-collapse: coll: 
div#users-contain table td, div#users-contain table th { bordei 
.Ui-dialog .ui-state-error { padding: .3em; } 
.validateTips { border: 1px solid transparent; padding: 0.3em; 
</style> 
<script> 
$(function() { 
var name = $( "#name" ), 
email = $( "#email" ), 
password = $( "#password" ), 
allFields = $( [] ).add( name ).add( email ).add( password ), 
tips = $( ".validateTips" ); 


function updateTips( t ) { 
tips 
.text( t ) 
.addClass( "ui-state-highlight" ); 
setTimeout(function() { 
tips.removeClass( "ui-state-highlight", 1500 ); 
j, 500 ); 
j 


function checkLength( o, n, min, max ) { 
if ( o.val().length > max || o.val().length < min ) { 
o.addClass( "ui-state-error" ); 
updateTips( "" + n + " 的 长 度 必 须 在 " + 
min + 和 "+ max + "之 间 。" ); 
return false; 
} else { 
return true; 
} 
} 


function checkRegexp( o, regexp, n 
if ( !( regexp.test( o.val() ) ) 
o.addClass( "ui-state-error" ); 
updateTips( n ); 
return false; 
) else { 
return true; 


j 
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} 


$( "#dialog-form" ).dialog({ 
autoOpen: false, 
height: 300, 


width: 350, 
modal: true, 
buttons: { 


"创建 一 个 帐户 ": function() { 
var bValid = true; 
allFields.removeClass( "ui-state-error" ); 


bValid = bValid && checkLength( name, "username", 3, 16 ` 
bValid = bValid && checkLength( email, "email", 6, 80 ); 
bValid = bValid && checkLength( password, "password", 5, 
bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z ])- 


// From jquery.validate.js (by joern), contributed by Sc« 
bValid bValid && checkRegexp( email, /^((([a-z]|*Nd]| [z^ 
bValid bValid && checkRegexp( password, /^([0-9a-zA-Z]. 


if ( bvalid ) { 
$( "#users tbody" ).append( "<tr>" + 
"<td>" + name.val() + "</td>" + 
"<td>" + email.val() + "</td>" + 
"<td>" + password.val() + "</td>" + 
"c/tr»" Mes 
$( this ).dialog( "close" ); 
j 
3 


Cancel: function() ( 
$( this ).dialog( "close" ); 


} 
ty 
close: function() { 
allFields.val( "" ).removeClass( "ui-state-error" ); 
} 
3); 


$( "#create-user" ) 
.button() 
.click(function() { 
$( "#dialog-form" ).dialog( "open" ); 
3); 
3); 
«/script» 
</head> 
<body> 


«div id="dialog-form" title=" 创 建新 用 户 "> 
«p class="validateTips"> 所 有 的 表单 字段 都 是 必 填 的 。</p> 


<form> 


<fieldset> 
«label for="name">4#</label> 
<input type="text" name="name" id="name" class="text ui-widget. 
«label for="email">#%#8</label> 
<input type="text" name="email" id="email" value="" class-"texi 
«label for="password">23</label> 
<input type="password" name="password" id="password" value="" « 

</fieldset> 

</form> 

</div> 


<div id="users-contain" class="ui-widget"> 
<h1> 已 有 的 用 户 : </h1> 
<table id="users" class="ui-widget ui-widget-content"> 
<thead> 
<tr class="ui-widget-header "> 
<th> 名 字 </th> 
<th> 邮 箱 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John Doe</td> 
<td>john.doe@example.com</td> 
<td>johndoe1</td> 
</tr> 
</tbody> 
</table> 
</div> 
«button id="create-user"> 创 建新 用 户 </button> 


</body> 
</html> 
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模 态 消息 


使 用 模 态 对 话 框 来 在 下 一 步 动 作 执 行 之 前 确认 信息 和 动作 。 设 置 modal 选项 为 
true， 并 通过 buttons 选项 来 指定 主要 的 动作 (Ok). 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 模 态 消息 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog-message" ).dialog({ 
modal: true, 
buttons: { 
Ok: function() { 
$( this ).dialog( "close" ); 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 


«div id="dialog-message" title=" FT "> 
<p> 
<span class="ui-icon ui-icon-circle-check" style="float:left; r 
您 的 文件 已 经 成 功 下载 到 文件 夹 中 。 
</p> 
<p> 
当前 使 用 存储 空间 的 <b>36%</b>, 
</p> 
</div> 


<p>Sed vel diam id libero «a href="http://ww.w3cschool.cc">rutrum 


«/body» 
«/html» 
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jQuery UI 实例 - 32% (Menu) 
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如 需 了 解 更 多 有 关 menu 部 件 的 细节 ， 请 查看 API 文档 菜单 部 件 (Menu 
Widget) 。 


默认 功能 


一 个 带 有 默认 配置 、 禁 用 条 目 和 嵌 套 菜单 的 菜单 。 由 一 个 列表 转化 成 的 ， 添 加 了 主 
题 ， 并 支持 鼠标 和 键盘 交互 。 尝 试 使 用 光标 键 导航 菜单。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 菜单 (Menu) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#menu" ).menu(); 
1); 
</script> 
<style> 
.Ui-menu { width: 150px; } 
</style> 
</head> 
<body> 


«ul id="menu"> 
«li class="ui-state-disabled"><a href="#">Aberdeen</a></1i> 
<li><a href="#">Ada</a></1i> 
<li><a href="#">Adamsville</a></1li> 
<li><a href="#">Addyston</a></1i> 
<li> 
<a href="#">Delphi</a> 
<ul> 
«li class="ui-state-disabled"><a href="#">Ada</a></1li> 
<li><a href="#">Saarland</a></1i> 
<li><a href="#">Salzburg</a></1i> 
</ul> 
</li> 
<li><a href="#">Saarland</a></li> 
<li> 
<a href="#">Salzburg</a> 


<ul> 
<li> 
<a href="#">Delphi</a> 
<ul> 
<li><a href="#">Ada</a></1i> 
<li><a href="#">Saarland</a></1i> 
<li><a href="#">Salzburg</a></1i> 
</ul> 
</li> 
<li> 
<a href="#">Delphi</a> 
<ul> 
<li><a href="#">Ada</a></li> 
<li><a href="#">Saarland</a></li> 
<li><a href="#">Salzburg</a></li> 
</ul> 
</li> 
<li><a href="#">Perch</a></li> 
</ul> 
</li> 
<li class="ui-state-disabled"><a href="#">Amesville</a></li> 
</ul> 


</body> 
</html> 
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图 标 
一 个 带 有 默认 配置 的 菜单 ， 显 示 如 何 使 用 带 有 图 标的 菜单。 


<!doctype html> 
<html lang="en"> 


<head> 


<meta charset="utf-8"> 
<title>jQuery UI 菜单 (Menu) - </title> 

<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<script> 


$(function() { 
$( "#menu" ).menu(); 


}); 
</script> 
<style> 


.ui-menu { width: 150px; } 


</style> 
</head> 
<body> 


<ul id="menu"> 
<li><a href="#"><span class="ui-icon ui-icon-disk"></span> 保 存 </a 
<li><a href="#"><span class="ui-icon ui-icon-zoomin"></span> 放 大 < 
<li><a href="#"><span class="ui-icon ui-icon-zoomout"></span> 缩 小 
«li class="ui-state-disabled"><a href="#"><span class="ui-icon u: 


<li> 


«a href="#"> 播 放 </a> 


<ul> 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</li> 
</ul> 


</body> 
</html> 


a 


href="#"><span 
href="#"><span 
href="#"><span 
href="#"><span 


class="ui-icon 
class="ui-icon 
class="ui-icon 
class="ui-icon 


ui-icon-seek-start'»«/s[ 
ui-icon-stop"»«/span»ífgi 
ui-icon-play"»«/span»iÉ5 
ui-icon-seek-end"></spar 





jQuery Ul 实例 - 进度 条 (Progressbar) 


显示 一 个 确定 的 或 不 确定 的 进程 状态 。 


如 需 了 解 更 多 有 关 progressbar 部 件 的 细节 ， 请 查看 API 文档 进度 条 部 件 
(Progressbar Widget) 。 


默认 功能 
默认 的 确定 的 进度 条 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 进度 条 (Progressbar) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#progressbar" ).progressbar({ 
value: 37 


</script> 
</head> 
<body> 


<div id="progressbar"></div> 


</body> 
</html> 





自 定义 标签 
自 定 义 更 新 的 标签 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 进度 条 (Progressbar) - 自 定义 标签 </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.ui-progressbar { 
position: relative; 
} 
.progress-label { 
position: absolute; 
left: 50%; 
top: 4px; 
font-weight: bold; 
text-shadow: 1px 1px © #fff; 
} 
</style> 
<script> 
$(function() { 
var progressbar 
progressLabel 


= $( "#progressbar" ), 
= $( ".progress-label" ); 
progressbar.progressbar(( 
value: false, 
change: function() ( 
progressLabel.text( progressbar.progressbar( "value" ) + "9 
ty 
complete: function() { 
progressLabel.text( "Sem!" ); 
} 
}); 


function progress() { 
var val = progressbar.progressbar( "value" ) || 0; 


progressbar.progressbar( "value", val + 1 ); 


if ( val < 99 ) { 
setTimeout( progress, 100 ); 
} 
} 


setTimeout( progress, 3000 ); 
1); 
</script> 
</head> 
<body> 


«div id="progressbar"><div class-"progress-label"»7Ó...«/div»«/di 


«/body» 
«/html» 








不 确定 的 值 


不 确定 的 进度 条 ， 并 可 在 确定 和 不 确定 的 样式 之 间 切 换 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 进度 条 (Progressbar) - 不 确定 的 值 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#progressbar" ).progressbar({ 
value: false 
3); 
$( "button" ).on( "click", function( event ) ( 
var target - $( event.target ), 
progressbar = $( "#progressbar" ), 
progressbarValue = progressbar.find( ".ui-progressbar -value 


if ( target.is( "#numButton" ) ) ( 
progressbar.progressbar( "option", ( 
value: Math.floor( Math.random() * 100 ) 
H); 
} else if ( target.is( "#colorButton" ) ) { 
progressbarValue.css({ 
"background": '#' + Math.floor( Math.random() * 16777215 
3); 
) else if ( target.is( "#falseButton" ) ) { 
progressbar.progressbar( "option", "value", false ); 
} 
H); 
1); 
«/script» 
<style> 
#progressbar .ui-progressbar-value { 
background-color: #ccc; 
} 
</style> 
</head> 
<body> 


<div id="progressbar"></div> 

<button id="numButton"> 随 机 值 - 确定 </button> 
«button id="falseButton"> 不 确定 </button> 
«button id="colorButton"> 随 机 颜色 </button> 


</body> 
</html> 
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jQuery UI 实例 - 滑 块 (Slider) 


拖 动 手柄 来 选择 一 个 数值 。 


如 需 了 解 更 多 有 关 slider 部 件 的 细节 ， 请 查看 API 文档 滑 块 部 件 Slider 
Widget) 。 


默认 功能 
基本 的 滑 块 是 水 平 的 ， 有 一 个 单一 的 手柄 ， 可 以 用 鼠标 或 箭头 键 进行 移动 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider" ).slider(); 
3); 
</script> 
</head> 
<body> 


«div id="slider"></div> 


</body> 
</html> 


颜色 选择 器 


组 合 了 三 个 滑 块 ， 来 创建 一 个 简单 的 RGB 颜色 选择 器 。 





<!doctype html> 
<html lang="en"> 
<head> 
«meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 颜色 选择 器 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#red, #green, #blue { 
float: left; 
clear: left; 
width: 300px; 
margin: 15px; 
} 
#swatch { 
width: 120px; 
height: 100px; 
margin-top: 18px; 
margin-left: 350px; 
background-image: none; 
} 
#red .ui-slider-range { background: #ef2929; } 
#red .ui-slider-handle { border-color: #ef2929; } 
#green .ui-slider-range { background: #8ae234; } 
#green .ui-slider-handle { border-color: #8ae234; } 
#blue .ui-slider-range { background: #729fcf; } 
#blue .ui-slider-handle { border-color: #729fcf; } 
</style> 
<script> 
function hexFromRGB(r, g, b) { 
var hex = [ 
r.toString( 16 ), 
g.toString( 16 ), 
b.toString( 16 ) 
]; 


$.each( hex, function( nr, val ) { 


if ( val.length === 1 ) { 
hex[ nr ] = "0" + val; 
} 
3); 
return hex.join( "" ).toUpperCase( ); 


j 


function refreshSwatch() (1 
var red = $( "#red" ).slider( "value" ), 
green = $( "#green" ).slider( "value" ), 
blue = $( "#blue" ).slider( "value" ), 
hex = hexFromRGB( red, green, blue ); 
$( "#swatch" ).css( "background-color", "#" + hex ); 


} 
$(function() { 
$( "#red, #green, #blue" ).slider({ 

orientation: "horizontal", 
range: "min", 
max: 255, 
value: 127, 
slide: refreshSwatch, 
change: refreshSwatch 


3); 


$( "#red" ).slider( "value", 255 ); 
$( "#green" ).slider( "value", 140 ); 
$( "#blue" ).slider( "value", 60 ); 
1); 
</script> 
</head> 
«body class="ui-widget-content" style="border:0;"> 


<p class="ui-state-default ui-corner-all ui-helper-clearfix" style: 
<span class="ui-icon ui-icon-pencil" style="float:left; margin: -: 
简单 的 颜色 选择 器 

</p> 


<div id="red"></div> 
<div id="green"></div> 
<div id="blue"></div> 


<div id="swatch" class="ui-widget-content ui-corner-all"></div> 


</body> 
</html> 
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多 个 滑 自 块 


组 合 水 平 的 和 垂直 的 滑 块 ， 每 个 都 带 有 各 自 的 选项 ， 来 创建 一 个 音乐 播放 器 的 UI, 


<!doctype html> 
<html lang="en"> 


<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 多 个 滑 块 </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#eq span { 
height:120px; float:left; margin:15px 
} 
</style> 
<script> 
$(function() { 
// 设置 主音 量 
$( "#master" ).slider({ 
value: 60, 
orientation: "horizontal", 
range: "min", 
animate: true 


3): 


// 设置 图 形 均 衡器 
$( "#eq > span" ).each(function() { 
// 从 标记 读 取 初 始 值 并 删除 
var value = parseInt( $( this ).text(), 10 ); 
$( this ).empty().slider({ 
value: value, 
range: "min", 
animate: true, 
orientation: "vertical" 


3); 

</script> 
</head> 
<body> 


<p class="ui-state-default ui-corner-all ui-helper-clearfix" style: 
<span class="ui-icon ui-icon-volume-on" style="float:left; margir 
主音 量 


</p> 
«div id="master" style="width:260px; margin:15px;"></div> 


«p class="ui-state-default ui-corner-all" style="padding: 4px;margitr 
<span class="ui-icon ui-icon-signal" style="float:left; margin: -: 
形 均 衡器 

</p> 


<div id="eq"> 
<span>88</span> 
<span>77</span> 
<span>55</span> 
<span>33</span> 
<span>40</span> 
<span>45</span> 
<span>70</span> 

</div> 


</body> 
</html> 


Saas 
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设置 range 选项 为 true， 来 获取 带 有 两 个 拖 搜 手 柄 的 值 的 范围 。 手 柄 之 间 的 控件 
用 不 同 的 背景 颜色 填充 来 表示 该 区 间 的 值 是 可 选择 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 范围 滑 块 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "£slider-range" ).slider({ 
range: true, 
min: O0, 
max: 500, 
values: [ 75, 300 ], 
slide: function( event, ui ) { 
$( "#amount" ).val( "$" + ui.values[ © ] +" - $" + ui.vali 
} 
}); 


$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values' 
" - $" + $( "#slider-range" ).slider( "values", 1 ) ); 
3); 
«/script» 
</head> 
<body> 


<p> 
«label for="amount"> 价 格 范围 : </label> 
<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider -range"></div> 


</body> 
</html> 


图 





带 有 固定 最 大 值 的 范围 


固定 范围 滑 块 的 最 大 值 ， 用 户 只 能 选择 最 小 值 。 设 置 range 选项 为 "max"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 带 有 固定 最 大 值 的 范围 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider-range-max" ).slider({ 
range: "max", 


min: 1, 
max: 10, 
value: 2, 


slide: function( event, ui ) { 
$( "#amount" ).val( ui.value ); 
} 
3); 
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) 
3); 
«/script» 
«/head» 
«body» 


«p» 
«label for="amount"> 最 小 的 房间 数量 : </label> 
<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 
«div id="slider -range-max"></div> 


</body> 
</html> 


mi a 





带 有 固定 最 小 值 的 范围 


固定 范围 滑 块 的 最 小 值 ， 用 户 只 能 选择 最 大 值 。 设 置 range 选项 为 "min"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
«title»jQuery UI 滑 块 (Slider) - 带 有 固定 最 小 值 的 范围 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider-range-min" ).slider({ 
range: "min", 


value: 37, 
min: 1, 
max: 700, 


slide: function( event, ui ) { 
$( "#amount" ).val( "$" + ui.value ); 
} 
3); 
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "va: 
3); 
«/script» 
«/head» 
«body» 


«p» 
«label for="amount"> 最 大 价格 : </label> 


<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider -range-min"></div> 


</body> 
</html> 


SS EE ES 





or FE Sl] select 的 滑 块 


如 何 绑 定 一 个 滑 块 到 一 个 已 有 的 select 元 素 。 选 择 保持 可 见 以 便 显 示 变 化 。 当 选择 
改变 时 ， 同 时 更 新 滑 块 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 绑 定 到 select 的 滑 块 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var select = $( "#minbeds" ); 
var slider = $( "<div id='slider'></div>" ).insertAfter( select 
min: 1, 
max: 6, 
range: "min", 
value: select[ © ].selectedIndex + 1, 
slide: function( event, ui ) ( 
select[ 0 ].selectedIndex = ui.value - 1; 
} 
}); 
$( "#minbeds" ).change(function() { 
slider.slider( "value", this.selectedIndex + 1 ); 
3): 
3); 
«/script» 
</head> 
<body> 


<form id="reservation"> 
«label for="minbeds"> 最 小 的 床位 数 </label> 
<select name="minbeds" id="minbeds"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
</select> 
</form> 


</body> 
</html> 
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滑 块 滚动 条 


使 用 滑 块 来 操作 页 面 上 内 容 的 定位 。 本 实例 中 ， 它 是 一 个 能 获取 值 的 滚动 条 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 383% (Slider) - 滑 块 滚动 条 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.scroll-pane { overflow: auto; width: 99%; float:left; } 
.scroll-content { width: 2440px; float: left; } 
.scroll-content-item { width: 100px; height: 100px; float: left; 
.scroll-bar-wrap { clear: left; padding: © 4px © 2px; margin: © . 
.scroll-bar-wrap .ui-slider { background: none; border:0; height 
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; v 
.Scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } 
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto ( 
</style> 
<script> 
$(function() { 

// 滚 动 面板 部 分 
var scrollPane = $( ".scroll-pane" ), 
scrollContent = $( ".scroll-content" ); 


// 创 建 滑 块 
var scrollbar = $( ".scroll-bar" ).slider({ 
slide: function( event, ui ) { 
if ( scrollContent.width() > scrollPane.width() ) { 
scrollContent.css( "margin-left", Math. round( 
ui.value / 100 * ( scrollPane.width() - scrollContent.v 
) + "px" je 
) else { 
scrollContent.css( "margin-left", © ); 
} 
} 
}); 


// 追 加 要 处 理 的 图 标 
var handleHelper = scrollbar.find( ".ui-slider-handle" ) 
.mousedown(function() { 
scrollbar.width( handleHelper.width() ); 
}) 
.mouseup(function() { 
scrollbar.width( "100%" ); 
}) 
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'><, 
.wrap( "<div class-'ui-handle-helper-parent'»«/div»" ).parent(: 


// 由 于 滑 块 手柄 滚动 ， 改 变 要 隐藏 的 浴 出 部 分 
scrollPane.css( "overflow", "hidden" ); 


// 根 据 要 滚动 距离 按 比 例 定 义 滚动 条 和 手柄 的 尺寸 
function sizeScrollbar() { 
var remainder = scrollContent.width() - scrollPane.width(); 
var proportion remainder / scrollContent.width(); 
var handleSize scrollPane.width() - ( proportion * scrollP: 
scrollbar.find( ".ui-slider-handle" ).css({ 
width: handleSize, 
"margin-left": -handleSize / 2 


3); 
handleHelper.width( "" ).width( scrollbar.width() - handleSi: 


} 


// 基 于 滚动 内 容 位 置 ， 重 置 滑 块 的 值 
function resetValue() { 
var remainder = scrollPane.width() - scrollContent.width(); 
var leftVal = scrollContent.css( "margin-left" ) === "auto" * 
parseInt( scrollContent.css( "margin-left" ) ); 
var percentage = Math.round( leftVal / remainder * 100 ); 
scrollbar.slider( "value", percentage ); 


j 


// 如 果 滑 块 是 100%， 且 窗口 变 大 ， 则 显示 内 容 
function reflowContent() ( 
var showing = scrollContent.width() + parseInt( scrollConte 
var gap - scrollPane.width() - showing; 
if ( gap > 0 ){ 
scrollContent.css( "margin-left", parseInt( scrollContent 
j 
} 


// 当 缩放 窗口 时 改变 手柄 的 位 置 
$( window ).resize(function() { 
resetValue(); 
sizeScrollbar(); 
reflowContent(); 
3); 
// 初 始 化 滚动 条 大 小 
setTimeout( sizeScrollbar, 10 );//safari 超时 
3); 
«/script» 
«/head» 
«body» 


«div class-"scroll-pane ui-widget ui-widget-header ui-corner-all"> 
«div class="scroll-content"> 
«div class="scroll-content-item ui-widget -header">1</div> 
«div class="scroll-content-item ui-widget -header">2</div> 
<div class="scroll-content-item ui-widget -header">3</div> 
<div class="scroll-content-item ui-widget -header">4</div> 
«div class="scroll-content-item ui-widget -header">5</div> 
<div class="scroll-content-item ui-widget -header">6</div> 
«div class="scroll-content-item ui-widget -header">7</div> 
<div class="scroll-content-item ui-widget -header">8</div> 


<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
</div> 


<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> 


<div 
</div> 
</div> 


</body> 
</html> 


m M 


对 


通过 把 step 选项 设置 为 一 个 整数 来 设置 滑 块 值 的 增 量 ， 


class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 


class="scroll-bar"></div> 


H 
齐 增 量 


数 。 默 认 增 量 是 1。 


ui-widget -header">9</div> 
ui-widget -header">10</div> 
ui-widget -header">11</div> 
ui-widget -header">12</div> 
ui-widget -header">13</div> 
ui-widget -header">14</div> 
ui-widget -header">15</div> 
ui-widget -header">16</div> 
ui-widget -header">17</div> 
ui-widget -header">18</div> 
ui-widget -header">19</div> 
ui-widget -header">20</div> 





通常 是 滑 块 最 大 值 的 除 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 对 齐 增 量 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider" ).slider({ 
value:100, 
min: 0, 
max: 500, 
step: 50, 
slide: function( event, ui ) { 
$( "#amount" ).val( "$" + ui.value ); 
} 
}); 
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); 
}); 
</script> 
</head> 
<body> 


<p> 

«label for="amount"> 捐 款 金额 ($50 Æ) :</label> 

<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider"></div> 


</body> 
</html> 


Lm. 





Æ BASE E] tk 


改变 范围 滑 块 的 方向 为 垂直 的 。 通 过 .height() 分 配 一 个 高 度 值 ， 或 通过 CSS 
设置 高 度 ， 同 时 设置 orientation 选项 为 "vertical"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 垂直 的 范围 滑 块 </tit1Le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "£slider-range" ).slider({ 
orientation: "vertical", 
range: true, 
values: [ 17, 67 ], 
slide: function( event, ui ) ( 
$( "#amount" ).val( "$" + ui.values[ © ] +" - $" + ui.vali 
} 
}); 


$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values' 
" - $" + $( "#slider-range" ).slider( "values", 1 ) ); 


3); 

«/script» 
</head> 
<body> 


<p> 
«label for="amount"> 销 售 目标 (BA) : </label> 
<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 
«div id="slider-range" style="height :250px; "></div> 


</body> 
</html> 


SS eS 


垂直 的 滑 块 


改变 滑 块 的 方向 为 垂直 的 。 通 过 .height() 分 配 一 个 高 度 值 ， 或 通过 CSS 设置 
高 度 ， 同 时 设置 orientation 选项 为 "vertical"。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 垂直 的 滑 块 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider-vertical" ).slider({ 
orientation: "vertical", 
range: "min", 


min: 0, 
max: 100, 
value: 60, 


slide: function( event, ui ) ( 
$( "#amount" ).val( ui.value ); 
} 
}); 
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) 
}); 
</script> 
</head> 
<body> 


<p> 
«label for="amount">(&42 : </label> 


<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider-vertical" style="height :200px;"></div> 


</body> 
</html> 


SSS ae 





jQuery UI 实例 - 旋转 器 (Spinner) 


通过 向 上 /向 下 按钮 和 箭头 键 人 处 理 ， 为 输入 数值 增强 文本 输入 功能 。 


KR TEES spinner 部 件 的 细节 ， 请 查看 API 文档 旋转 器 部 件 (Spinner 
Widget) 。 


默认 功能 
默认 的 旋转 器 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script srcz"//code.jquery.com/jquery-1.9.1.js"»«/script» 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

var spinner = $( "#spinner" ).spinner(); 


$( "#disable" ).click(function() { 
if ( spinner.spinner( "option", "disabled" ) ) { 
spinner.spinner( "enable" ); 
) else ( 
spinner.spinner( "disable" ); 
} 


3); 
$( "#destroy" ).click(function() { 
if ( spinner.data( "ui-spinner" ) ) { 
spinner.spinner( "destroy" ); 
) else ( 
spinner.spinner(); 
} 


3); 
$( "#getvalue" ).click(function() { 
alert( spinner.spinner( "value" ) ); 


3); 
$( "#setvalue" ).click(function() { 
spinner.spinner( "value", 5 ); 


3); 


$( "button" ).button(); 
3); 


</script> 
</head> 
<body> 


<p> 
«label for="spinner'"> 选 择 一 个 值 : </label> 
<input id="Spinner" name="value"> 

</p> 


<p> 
«button id="disable"> 切 换 禁 用 /启用 </button> 
<button id="destroy"> 切 换 部 件 </button> 
</p> 


<p> 
<button id="getvalue"> 获 取 值 </button> 
«button id="setvalue"> 设 置 值 为 5</button> 
</p> 


</body> 
</html> 





贷 


~ 


本 实例 是 一 个 捐款 表格 ， 带 有 货币 选择 和 数量 旋转 器 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 货币 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#currency" ).change(function() { 
$( "#spinner" ).spinner( "option", "culture", $( this ).val(: 


3): 


$( "#spinner" ).spinner({ 
min: 5, 
max: 2500, 
step: 25, 
start: 1000, 
numberFormat: "C" 
3): 
3); 
«/script» 
«/head» 
«body» 


«p» 
«label for="currency"> 要 捐款 的 货币 </1abel> 
«select id="currency" name="Currency"> 

<option value="en-US">US $</option> 

<option value="de-DE">EUR €</option> 

«option value="ja-JP">YEN ¥*</option> 
</select> 

</p> 

<p> 
«label for="spinner"> 要 捐款 的 数量 : </label> 
<input id="spinner" name="Spinner" value="5"> 

</p> 


</body> 
</html> 





小 数 


本 实例 是 一 个 小 数 旋转 器 。 增 量 设置 为 0.01。 处 理 文化 变化 的 代码 会 读 取 当前 的 选 
择 器 的 值 ， 当 改变 文化 时 ， 会 基于 新 的 文化 重新 设置 值 的 样式 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 小 数 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#spinner" ).spinner({ 


step: 0.01, 
numberFormat: "n" 
}); 


$( "#culture" ).change(function() { 
var current = $( "#spinner" ).spinner( "value" ); 
Globalize.culture( $(this).val() ); 
$( "#spinner" ).spinner( "value", current ); 
}); 
}); 
</script> 
</head> 
<body> 


<p> 
«label for="spinner"> 小 数 旋转 器 : «/label» 
<input id="Spinner" name="Spinner" value="5.06"> 
</p> 
<p> 
«label for="culture"> 选 择 一 种 用 于 格式 化 的 文化 : </label> 
<select id="culture"> 
«option value="en-EN" selected="Sselected">English</option> 
<option value="de-DE">German</option> 
<option value="ja-JP">Japanese</option> 
</select> 
</p> 


</body> 
</html> 








地 
谷歌 地 图 集成 ， 使 用 旋转 器 来 改变 纬度 和 经 度 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 地 图 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="http://maps.google.com/maps/api/js?sensor=false"></: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
function latlong() { 
return new google.maps.LatLng( $("#lat").val(), $("4Zlng").va- 
} 
function position() { 
map.setCenter( latlong() ); 


j 

$( "#lat, #1ng" ).spinner({ 
step: .001, 
change: position, 
stop: position 


3): 


var map = new google.maps.Map( $("Zmap")[0], { 
zoom: 8, 
center: latlong(), 
mapTypeId: google.maps.MapTypeld.ROADMAP 
3); 
1); 
«/script» 
<style> 
#map { 
width:500px; 
height :500px; 


</style> 
</head> 
<body> 


«label for="lat">#+F</label> 

<input id="lat" name="lat" value="44.797"> 
<br> 

«label for="1ng">4E</label> 

<input id-"lng" name="1ng" value="-93.278"> 


<div id="map"></div> 


</body> 
</html> 
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dau 
浴 出 旋转 器 限制 范围 从 -10 到 10。 对 于 10 MERG, SAHE -10， 反 之 亦 然 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - j@Hi</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#spinner" ).spinner({ 
spin: function( event, ui ) { 
if ( ui.value > 10 ) ( 
$( this ).spinner( "value", -10 ); 
return false; 
} else if ( ui.value < -10 ) ( 
$( this ).spinner( "value", 10 ); 
return false; 
J 
} 
}); 
}); 
</script> 
</head> 
<body> 


<p> 
«label for="spinner'"> 选 择 一 个 值 : </label> 
<input id="Spinner" name="value"> 

</p> 


</body> 
</html> 
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时 间 


一 个 扩展 自 旋 转 器 的 自 定 义 部 件 。 使 用 全 球 化 (Globalization) 插件 来 解析 和 输出 
at ja), "P BXESBJstep 和 page 选项 。 向 上 /向 下 光标 用 于 分 钟 的 递增 /递减 ， 
向 上 /向 下 翻 页 用 于 小 时 的 递增 /递减 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$.widget( "ui.timespinner", $.ui.spinner, { 
options: { 
// 秒 
step: 60 * 1000, 
// 小 时 
page: 60 


, 


parse: function( value ) { 


if ( typeof value === "string" ) { 
// Bi—^ HR we 
if ( Number( value ) == value ) { 


return Number( value ); 
return +Globalize.parseDate( value ); 


return value; 


ty 


_format: function( value ) { 
return Globalize.format( new Date(value), "t" ); 


} 
3): 


$(function() { 
$( "#spinner" ).timespinner(); 


$( "#culture" ).change(function() { 
var current = $( "#spinner" ).timespinner( "value" ); 
Globalize.culture( $(this).val() ); 
$( "#spinner" ).timespinner( "value", current ); 


3): 
}); 


</script> 
</head> 


<body> 


<p> 
«label for="spinner"> 时 间 旋 转 器 : </label> 
<input id="Spinner" name="Spinner" value="08:30 PM"> 
</p> 
<p> 
<label for="culture"> 选 择 一 种 用 于 格式 化 的 文化 : </label> 
<select id="culture"> 
«option value="en-EN" selected="Selected">English</option> 
<option value="de-DE">German</option> 
</select> 
</p> 


</body> 
</html> 





jQuery Ul 实例 - 标签 页 (Tabs) 
一 种 多 面板 的 单 内 容 区 ， 每 个 面板 和 与 列表 中 的 标题 相关 。 


ur cene tabs 部 件 的 细节 ， 请 查看 API 文档 标签 页 部 件 (Tabs 
Widget) 。 


默认 功能 


点 击 标签 页 ， 切 换 被 划分 为 不 同 逻 辑 部 分 的 内 容 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs(); 
3); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1i> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
«div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 


J # 
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点 击 选 中 的 标签 页 来 切换 内 容 的 关闭 /打开 状态 。 为 了 启用 这 个 功能 ， 需 要 设置 
collapsible 选项 为 true。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 折 且 内容 </tit1e> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs({ 
collapsible: true 
3): 
3); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1i> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
«div id="tabs-1"> 
<p><strong> 再 次 点 击 标签 页 来 关闭 内 容 面板 。</strong></p> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p><strong> 再 次 点 击 标签 页 来 关闭 内 容 面板 。</strong></p> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p><strong> 再 次 点 击 标签 页 来 关闭 内 容 面板 。</strong></p> 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 
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通过 Ajax 获取 内 容 


在 标签 页 链接 中 设置 href 的 值 来 为 标签 页 通过 Ajax 获取 外 部 的 内 容 。 当 Ajax 请 求 
在 等 待 响应 时 ， 标 签 页 的 标签 变 为 "Loading..."， 当 加 载 完 成 后 返回 常规 的 标签 。 


标签 3 和 4 演示 了 慢 加 载 和 损坏 的 AJAX 标签 ， 以 及 如 何 义理 这 些 情况 下 的 服务 器 
ERN 


端的 错误 。 请 注意 


意 ， 这 两 个 都 要 求 web 服务 器 能 解释 PHP。 它 们 在 文件 系统 以 外 
无 法 工作 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 通过 Ajax 获取 内 容 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs({ 
beforeLoad: function( event, ui ) { 
ui.jqXHR.error(function() { 
ui.panel.html( 
"不 能 加 载 该 标签 页 。 如 果 这 不 是 一 个 演示 。" + 
"我 们 会 尽快 修复 这 个 问题 。" ); 
3); 
} 
3); 
}); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1"> 预 加 载 </a></1i> 
<li><a href="ajax/content1i.html"> 标 签 1</a></1i> 
<li><a href="ajax/content2.html"> 标 签 2</a></1i> 
<li><a href="ajax/content3-slow.php"> 标 签 3 ”( 慢 的 ) «/a»«/li» 
<li><a href="ajax/content4-broken.php"> 标 签 4 (损坏 的 ) «/a»«/li» 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
</div> 


</body> 
</html> 
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通过 event bz iu IEITGHNUqgSIEIITABBA2. event 的 默认 值 
是 "Click", 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - Ag 4} </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs({ 
event: "mouseover" 
3); 
3); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1i> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 


do RE 


简单 的 操作 


简单 的 标签 页 添加 和 移 除 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<title>jQuery UI 标签 页 (Tabs) - 简单 的 操作 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#dialog label, #dialog input { display:block; } 
#dialog label { margin-top: 0.5em; } 
#dialog input, #dialog textarea { width: 95%; } 
#tabs { margin-top: 1em; } 
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; « 
4add tab { cursor: pointer; } 
</style> 
<script> 
$(function() { 
var tabTitle = $( "#tab_title" ), 
tabContent $( "#tab_content" ), 
tabTemplate = "<li><a href='#{href}'>#{label}</a> «span clas: 
tabCounter - 2; 


var tabs = $( "#tabs" ).tabs(); 


// 模 态 对 话 框 的 初始 化 : 自 定义 按钮 和 一 个 重 置 内 部 表单 的 "close" 回调 
var dialog = $( "#dialog" ).dialog({ 
autoOpen: false, 
modal: true, 
buttons: { 
Add: function() { 
addTab(); 
$( this ).dialog( "close" ); 
tr 
Cancel: function() { 
$( this ).dialog( "close" ); 
J 
ty 


close: function() { 
form[ © ].reset(); 
Jj 
H); 


// addTab 表单 : 当 提交 时 调用 addTab 画 数 ， 并 关闭 对 话 框 

var form = dialog.find( "form" ).submit(function( event ) { 
addTab(); 
dialog.dialog( "close" ); 
event .preventDefault(); 


3): 


// 实际 的 addTab BHR : 使 用 上 面 表 单 的 输入 添加 新 的 标签 页 
function addTab() { 
var label = tabTitle.val() || "Tab " + tabCounter, 
id = "tabs-" + tabCounter, 
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replé 
tabContentHtml = tabContent.val() || "Tab " + tabCounter + 


tabs.find( ".ui-tabs-nav" ).append( li ); 

tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "< 
tabs.tabs( "refresh" ); 

tabCounter++; 


// addTab 按钮 : 值 打开 对 话 框 
$( "#add_tab" ) 
.button() 
.click(function() ( 
dialog.dialog( "open" ); 
3); 


// 关闭 图 标 : 当 点 击 时 移 除 标签 页 

tabs.delegate( "span.ui-icon-close", "click", function() { 
var panellId = $( this ).closest( "li" ).remove().attr( "aria 
$( "#" + panelld ).remove(); 
tabs.tabs( "refresh" ); 


3); 


tabs.bind( "keyup", function( event ) ( 
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE 
var panelld = tabs.find( ".ui-tabs-active" ).remove().attri 
$( "£4" + panellId ).remove( ); 
tabs.tabs( "refresh" ); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div id="dialog" title="Tab data"> 
<form> 
<fieldset class="ui-helper-reset"> 
«label for="tab_title"> 标 题 </label> 
<input type="text" name="tab_title" id="tab_title" value="" ( 
«label for="tab_content">A¥8</label> 
«textarea name="tab_content" id="tab_content" class="ui-widge 
</fieldset> 
</form> 
</div> 


«button id-"add tab"> 添 加 标签 页 </button> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a> <span class-"ui-icon ti 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 


</div> 


</body> 
</html> 
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排序 (Sortable) 


拖 搜 上 面 的 标签 页 来 对 它们 进行 重新 排序 。 
只 需要 简单 地 调用 .ui-tabs-nav 元 素 上 的 .sortable() ， 即 可 让 标签 页 可 排 
序 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 排序 (Sortable) </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var tabs = $( "#tabs" ).tabs(); 
tabs.find( ".ui-tabs-nav" ).sortable({ 
axis. XK 
stop: function() { 
tabs.tabs( "refresh" ); 
} 
3); 
3); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1i> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 
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底部 标签 页 


通过 一 些 额 外 的 CSS (用 于 定位 的 ) 和 JS 〈 在 元 素 上 放置 正确 的 class) ， 标 签 页 
上 皆 可 放置 在 内 容 的 底部 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 底部 标签 页 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#tabs" ).tabs(); 


// 修改 class 

$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ` 
.removeClass( "ui-corner-all ui-corner-top" ) 
.addClass( "ui-corner-bottom" ); 


// 移动 导航 到 底部 
$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" ); 
3); 
</script> 
<style> 
/* 强制 一 个 高 度 ， 这 样 标签 页 就 不 会 随 着 内 容 高 度 的 改变 而 改变 */ 
#tabs .tabs-spacer { float: left; height: 200px; } 
.tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2« 
.tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: © .: 
.tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; | 
</style> 
</head> 
<body> 


<div id="tabs" class="tabs-bottom"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1li> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
<div class="tabs-spacer"></div> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 





垂下 的 标签 页 


点 击 标签 页 ， 切 换 被 划分 为 不 同 逻 辑 部 分 的 内 容 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 垂直 的 标签 页 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clea! 
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-c« 

1); 
</script> 
<style> 
.Ui-tabs-vertical { width: 55em; } 
.Ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; f: 
.Ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; boi 
.Ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.Ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottor 
.Ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; w: 
</style> 

</head> 

<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1li> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
<div id="tabs-1"> 
<h2> 内 容 标题 1</h2> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<h2> 内 容 标题 2«/h2» 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<h2> 内 容 标题 3</h2> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 工具 提示 框 (Tooltip) 


可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 蔡 代 原 生 的 工具 提示 框 。 


如 需 了 解 更 多 有 关 tooltip 部 件 的 细节 ， 请 查看 API 文档 工具 提示 框 部 件 (Tooltip 
Widget) 。 


默认 功能 
县 停 在 链接 上 ， 或 者 使 用 tab 键 循环 切换 聚焦 在 每 个 元 素 上 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( document ).tooltip(); 
3); 
«/script» 
<style> 
label { 
display: inline-block; 
width: 5em; 


</style> 
</head> 
<body> 


<p><a href="#" title=" 部 件 的 名 称 ">Tooltips</a> 可 被 绑 定 到 任意 的 元 素 上 。¥ 
<p> 但 是 由 于 它 不 是 一 个 原生 的 工具 提示 框 ， 所 以 它 可 以 被 定义 样式 。 通 过 <a href="ht 
<p> 工 具 提 示 框 也 可 以 用 于 表单 元 素 ， 来 显示 每 个 区 域 中 的 一 些 人 额外 的 信息 。</p> 
<p><label for="age"> 您 的 年 龄 : </label><input id="age" title-z"fE4 Ri: 
<p> 悬 停 在 相应 的 区 域 上 查看 工具 提示 框 。</p> 


</body> 
</html> 
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自 定 义 样 式 


莽 停 在 链接 上 ， 或 者 使 用 tab 键 循环 切换 聚焦 在 每 个 元 素 上 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 自 定义 样式 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( document ).tooltip({ 
position: { 
my: "center bottom-20", 
at: "center top", 
using: function( position, feedback ) { 
$( this ).css( position ); 
$( Nediv>" ) 
.addClass( "arrow" ) 
.addClass( feedback.vertical ) 
.addClass( feedback.horizontal ) 
.appendTo( this ); 
} 
} 
3); 
1); 
«/script» 
«style» 
.ui-tooltip, .arrow:after { 
background: black; 
border: 2px solid white; 
} 
.ui-tooltip { 
padding: 10px 20px; 
color: white; 
border-radius: 20px; 
font: bold 14px "Helvetica Neue", Sans-Serif; 
text-transform: uppercase; 
box-shadow: 0 0 7px black; 
} 
arrow { 
width: 70px; 
height: 16px; 
overflow: hidden; 
position: absolute; 
left: 50%; 
margin-left: -35px; 
bottom: -16px; 
} 


.arrow.top { 


top: -16px; 
bottom: auto; 


.arrow.left { 
left: 20%; 

} 

.arrow:after { 
content: ""; 
position: absolute; 
left: 20px; 
top: -20px; 
width: 25px; 
height: 25px; 
box-shadow: 6px 5px 9px -9px black; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
tranform: rotate(45deg); 

J 

.arrow.top:after ( 
bottom: -20px; 


top: auto; 
} 
</style> 
</head> 
<body> 


<p><a href="#" title=" 部 件 的 名 称 ">Tooltips</a> 可 被 绑 定 到 任意 的 元 素 上 。¥ 
<p> 但 是 由 于 它 不 是 一 个 原生 的 工具 提示 框 ， 所 以 它 可 以 被 定义 样式 。 通 过 <a href="ht 
<p> 工 具 提 示 框 也 可 以 用 于 表单 元 素 ， 来 显示 每 个 区 域 中 的 一 些 额 外 的 信息 。</p> 
<p><label for="age"> 您 的 年 龄 : </label><input id="age" title=" 年 龄 仅 用 : 
<p> 悬 停 在 相应 的 区 域 上 查看 工具 提示 框 。</p> 


</body> 
</html> 
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自 定义 动画 


本 实例 演示 了 如 何 使 用 show 和 hide 选项 来 自 定义 动画 ， 也 可 以 使 用 open 事件 来 
自 定义 动画 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


自 定义 动画 </title> 


<title>jQuery UI 工具 提示 框 (Tooltip) 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 

<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<script> 
$(function() { 
$( "#show-option" ).tooltip({ 


show: { 
effect: "slideDown", 
delay: 250 
} 
H; 
$( "#hide-option" ).tooltip({ 
hide: { 
effect: "explode", 
delay: 250 
} 
3); 


$( "#open-event" ).tooltip({ 
show: null, 
position: { 
my: "left top", 
at: "left bottom" 
3 


open: function( event, ui ) ( 
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, 


} 
3); 
3); 
«/script» 
«/head» 
«body» 


<p> 这 里 有 多 种 方式 自 定义 工具 提示 框 的 动画 。</p> 

<p> 您 可 以 使 用 <a id="show-option" href="http://jqueryui.com/demos/to 
«a id="hide-option" href="http://jqueryui.com/demos/tooltip/#optior 
<p> 您 也 可 以 使 用 «a id-"open-event" hrefz"http://jqueryui.com/demos/t« 


</body> 
</html> 


自 定 义 内 容 





演示 如 何 通过 自 定义 items 和 content 选项 ， 来 组 合 不 同 的 事件 委托 工具 提示 框 到 
一 个 单一 的 实例 中 。 


您 可 能 需要 与 地 图 工具 提示 框 进行 交互 ， 这 是 未 来 版 本 中 的 一 个 待 实现 的 功能 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 自 定义 内 容 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.photo { 
width: 300px; 
text-align: center; 
} 
.photo .ui-widget-header { 
margin: 1em 0; 
} 
.map { 
width: 350px; 
height: 350px; 
} 
.Ui-tooltip { 
max-width: 350px; 


</style> 
<script> 
$(function() { 
$( document ).tooltip({ 
items: "img, [data-geo], [title]", 
content: function() { 
var element = $( this ); 
if ( element.is( "[data-geo]" ) ) { 
var text = element.text(); 
return "<img class-'map' alt='" + text + 
"' src='http://maps.google.com/maps/api/staticmap?" + 
"Zoom=11&size=350x350&maptype=terrain&sensor=false&cent 
text + " oue 


if ( element.is( "[title]" ) ) t1 
return element.attr( "title" ); 


if ( element.is( "img" ) ) 4 
return element.attr( "alt" ); 


ls == =] 


</script> 
</head> 
<body> 


<div class="ui-widget photo"> 
«div class="ui-widget-header ui-corner-all"» 
<h2> 圣 史蒂芬 大 教堂 (St. Stephen's Cathedral) </h2> 
<h3><a href="http://maps.google.com/maps?q=vienna, taustria&amp , 
</div> 
«a href="http://en.wikipedia.org/wiki/File:wien_Stefansdom_DSC02¢ 
<img src="img/st-stephens. jpg" alt=" 圣 史蒂芬 大 教堂 (St. Stephen&a 
</a> 
</div> 


<div class="ui-widget photo"> 
<div class="ui-widget-header ui-corner-all"> 
<h2> 塔 桥 (Tower Bridge) </h2> 
<h3><a href="http://maps.google.com/maps?q=london, +england&amp , 
</div> 
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Tv 
<img src="img/tower-bridge.jpg" alt=" 塔 桥 (Tower Bridge) " class 
</a> 
</div> 


<p> 所 有 的 图 片 源 自 <a href="http://commons.wikimedia.org/wiki/Main_Pag 


</body> 
</html> 





表单 


使 用 下 面 的 按钮 来 显示 帮助 文本 ， 或 者 只 需要 让 轧 标 悬 停 在 输入 框 上 或 者 让 输入 框 
获得 焦点 ， 即 可 显示 相应 输入 框 的 帮助 文本 。 


在 CSS 中 定义 一 个 固定 的 宽度 ， 让 同时 显示 所 有 的 帮助 文本 时 看 起 来 更 一 致 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 表单 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
label { 

display: inline-block; width: 5em; 

} 


fieldset div { 
margin-bottom: 2em; 


} 


fieldset .help { 


display: 
} 


inline-block; 


.Ui-tooltip { 
width: 210px; 


} 
</style> 
<script> 


$(function() { 
var tooltips = $( "[title]" ).tooltip(); 
$( "«button»" ) 


.text( 


"Show help" ) 


.button() 
.click(function() { 
tooltips.tooltip( "open" ); 


}) 


.insertAfter( "form" ); 


3); 

</script> 
</head> 
<body> 


<form> 
«fieldset» 
«div» 
«label 
«input 
«/div» 
«div» 
«label 
«input 
«/div» 
«div» 
«label 
«input 
«/div» 


«/fieldset» 


«/form» 


«/body» 
«/html» 
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跟 足 鼠标 


本 实例 中 的 工具 提 


随 鼠 标 移 动 。 


for="firstname">4+</label> 
id="firstname" name="firstname" title=" 请 提供 您 的 名 字 。" 


for="lastname"> 姓 氏 </label> 
id-"lastname" name="lastname" title=" 请 提供 您 的 姓氏 。"> 


for="address">ihit</label> 
id="address" name="address" tit1le=" 您 的 家 庭 或 工作 地 址 。 "> 





示 框 是 相对 于 最 标 进 行 定位 的 ， 当 最 标 在 元 素 上 移动 时 ， 它 会 跟 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 跟踪 鼠标 </tit1Le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
label { 
display: inline-block; 
width: 5em; 
} 
</style> 
<script> 
$(function() { 
$( document ).tooltip({ 
track: true 
3): 
3); 
«/script» 
«/head» 
«body» 


<p><a href="#" title=" 部 件 的 名 称 ">Tooltips</a> 可 被 绑 定 到 任意 的 元 素 上 。¥ 
<p> 但 是 由 于 它 不 是 一 个 原生 的 工具 提示 框 ， 所 以 它 可 以 被 定义 样式 。 通 过 <a href="ht 
<p> 工 具 提 示 框 也 可 以 用 于 表单 元 素 ， 来 显示 每 个 区 域 中 的 一 些 额 外 的 信息 。</p> 
<p><label for="age"> 您 的 年 龄 : </label><input id="age" title=" 年 龄 仅 用 : 
<p> 基 停 在 相应 的 区 域 上 查看 工具 提示 框 。</p> 


</body> 
</html> 


视频 播放 器 


一 个 虚拟 的 视频 播放 器 ， 带 有 喜欢 /分 享 /统计 按钮 ， 每 个 按钮 都 带 有 自 定义 样式 的 
工具 提示 框 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 视频 播放 器 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
.player { 
width: 500px; 
height: 300px; 
border: 2px groove gray; 
background: rgb(200, 200, 200); 
text-align: center; 
line-height: 300px; 
} 
.Ui-tooltip { 
border: 1px solid white; 
background: rgba(20, 20, 20, 1); 
color: white; 
} 
,Set { 
display: inline-block; 
} 
.Notification { 
position: absolute; 
display: inline-block; 
font-size: 2em; 
padding: .5em; 
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); 
} 
</style> 
<script> 
$(function() { 
function notify( input ) ( 
var msg = "已 选择 " + $.trim( input.data( "tooltip-title" ) 
$( "<div>" ) 
.appendTo( document.body ) 
.text( msg ) 
.addClass( "notification ui-state-default ui-corner-bottom' 
.position({ 
my: "center top", 
at: "center top", 
of: window 


3) 
. show({ 

effect: "blind" 
3) 
.delay( 1000 ) 
.hide(( 


effect: "blind", 
duration: "slow" 
}, function() { 
$( this ).remove(); 
3); 
} 


$( "button" ).each(function() { 
var button = $( this ).button({ 
icons: { 


primary: $( this ).data( "icon" ) 
3 
text: !!$( this ).attr( "title" ) 
3); 
button.click(function() { 
notify( button ); 
3); 


3); 
$( ".set" ).buttonset({ 


items: "button" 


1): 


$( document ).tooltip({ 
position: ( 
my: "center top", 
at: "center bottom+5", 


}, 
show: { 
duration: "fast" 
}, 
hide: { 
effect: "hide" 
} 
31); 
p); 
</script> 
</head> 
<body> 


«div class="player"> 这 里 是 视频 (HTML5?)</div> 
<div class="tools"> 
<span class="set"> 
<button data-icon="ui-icon-circle-arrow-n" title=" 我 喜欢 这 个 视频 " 
«button data-icon="ui-icon-circle-arrow-s"> 我 不 喜欢 这 个 视频 </butt 
</span> 
<div class="set"> 
«button data-icon="ui-icon-circle-plus" title=" 添 加 到 播放 列表 "> 添 
«button class="menu" data-icon="ui-icon-triangle-1-s"> 添 加 到 收藏 
</div> 
<button title=" 分 享 这 个 视频 "> 分 享 </button> 
«button data-icon="ui-icon-alert"> 标 记 为 不 恰当 </button> 
</div> 


</body> 
</html> 


加 EN 





jQuery UI 实例 - 特效 (Effect) 


对 一 个 元 素 应 用 动画 特效 。 
如 需 了 解 更 多 有 关 .effect() 方法 的 细节 ， 请 查看 API 文档 .effect()。 


.effect() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .effect() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button ( padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: 0.4em; positior 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
.ui-effects-transfer { border: 2px dotted gray; } 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runEffect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 
var options = {}; 
// 一 些 特效 带 有 必需 的 参数 


if ( selectedEffect === "scale" ) { 

options = { percent: 0 }; 
} else if ( selectedEffect === "transfer" ) { 

options = { to: "#button", className: "ui-effects-transfer' 
} else if ( selectedEffect === "size" ) { 

options = { to: { width: 200, height: 60 } }; 


} 


// 运行 特效 
$( "#effect" ) ,effect( selectedEffect, options, 500, callbacl 
}; 


// 回调 函数 
function callback() { 
setTimeout(function() { 
$( "#effect" ).removeAttr( "style" ).hide().fadeIn(); 
), 1000 ); 
3 


// 根据 选择 菜单 值 设置 特效 
$( "#button" ).click(function() { 
runEffect(); 
return false; 
3); 
p); 
</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class="ui-widget-header ui-corner-all"> 特 效 (Effect) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
<option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
<option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
«option value-"clip"»23$354 REX (Clip Effect) </option> 
«option value="drop"> 降 落 特效 (Drop Effect) </option> 
«option value="explode"> 爆 炸 特效 (Explode Effect) </option> 
«option value="fade"> 淡 入 淡出 特效 (Fade Effect) </option> 
<option value="fold"> 折 县 特效 (Fold Effect) </option> 
<option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value="puff"> 膨 胀 特效 (Puff Effect) </option> 
«option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
<option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
«option value="shake"> 震 动 特效 (Shake Effect) </option> 
«option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特效 (Slide Effect) </option> 
«option value="transfer"> 转 移 特效 (Transfer Effect) </option> 
</select> 


«a href="#" id="button" class="ui-state-default ui-corner-all"»izíT 


</body> 
</html> 


«| = 








Easing 演示 


本 实例 使 用 HTML Canvas 元 素 ， 绘 制 了 jQuery Ul 提供 的 所 有 easings。 点 击 每 
个 图 可 查看 该 easing 的 行为 。。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - Easing 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.graph { 
float: left; 
margin-left: 10px; 
} 
</style> 
<script> 
$(function() { 
if ( !$( "<canvas>" )[0].getContext ) { 
$( "<div>" ).text( 
"您 的 浏览 器 不 支持 canvas， 本 演示 需要 在 支持 canvas 的 浏览 器 下 进行 。" 
) .appendTo( "#graphs" ); 
return; 


} 


var i = 0, 
width = 100, 
height = 100; 


$.each( $.easing, function( name, impl ) { 
var graph = $( "<div>" ).addClass( "graph" ).appendTo( "£Zgra[ 
text = $( "<div>" ).text( ++i + ". " + name ).appendTo( gr: 
wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hi« 
canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; 


canvas.width = width; 
canvas.height = height; 
var drawHeight = height * 0.8, 
Cradius = 10; 
ctx = canvas.getContext( "2d" ); 
ctx.fillStyle = "black"; 


// 绘制 背景 

ctx.beginPath(); 

ctx.moveTo( cradius, 0 ); 

ctx.quadraticCurveTo( ©, ©, ©, cradius ); 

ctx.lineTo( ©, height - cradius ); 

ctx.quadraticCurveTo( 0, height, cradius, height ); 
ctx.lineTo( width - cradius, height ); 

ctx.quadraticCurveTo( width, height, width, height - cradius 


ctx.lineTo( width, © ) 
ctx.lineTo( cradius, © ); 
Cex talk 


// 绘制 底线 

ctx.strokeStyle = "#555"; 
ctx.beginPath(); 

ctx.moveTo( width * 0.1, drawHeight 
ctx.lineTo( width * 0.9, drawHeight 
ctx.stroke(); 


+ 十 
a 0 
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// 绘制 顶 线 
ctx.strokeStyle = "#555"; 
ctx.beginPath(); 
ctx.moveTo( width 
ctx.lineTo( width 
ctx.stroke(); 


* 0.1, drawHeight * .3 - 
509207 


drawHeight * .3 - 


// 绘制 easing 
ctx.strokeStyle - "white"; 
ctx.beginPath(); 
ctx.linewidth - 2; 
ctx.moveTo( width * 0.1, drawHeight ); 
$.each( new Array( width ), function( position ) { 
var state - position / width, 
val = impl( state, position, 0, 1, width ); 
ctx.lineTo( position * 0.8 + width * 0.1, 
drawHeight - drawHeight * val * 0.7 ); 
3); 


ctx.stroke(); 


// 点 击 时 动态 改变 
graph.click(function() { 
wrap 
.animate( { height: "hide" }, 2000, name ) 
.delay( 800 ) 
.animate( { height: "show" }, 2000, name ); 


}); 


graph.width( width ).height( height + text.height() + 10 ); 
19/5 
1); 
«/script» 
«/head» 
«body» 


«div id="graphs"></div> 


«/body» 
«/html» 








jQuery Ul 实例 - 显示 (Show) 


使 用 自 定 义 效 果 来 显示 匹配 的 元 素 。 
如 需 了 解 更 多 有 关 .show() 方法 的 细节 ， 请 查看 API 文档 .show()。 


.Show() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .show() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: ©.4em; position: 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runETfect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 
var options = {}; 


// 一 些 特效 带 有 必需 的 参数 


if ( selectedEffect === "Scale" ) { 
options = { percent: 100 }; 
} else if ( selectedEffect === "size" ) { 


options = { to: { width: 280, height: 185 } }; 


// 运行 特效 
$( "#effect" ) .Show( selectedEffect, options, 500, callback ` 
J; 


// [SER 
function callback() { 
setTimeout(function() { 


$( "#effect:visible" ).removeAttr( "style" ).fadeOut(); 
}, 1000 ); 
H 


// 根据 选择 菜单 值 设置 特效 

$( "#button" ).click(function() { 
runEffect(); 
return false; 


3); 


$( "#effect" ).hide(); 
1); 
«/script» 
«/head» 
<body> 


<div class="toggler"> 
«div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class="ui-widget-header ui-corner-all">% (Show) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
«option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
«option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
<option value="c1lip"> 剪 辑 特效 (Clip Effect) </option> 
<option value="drop"> 降 落 特效 (Drop Effect) </option> 
«option value="explode"> 爆 炸 特 效 (Explode Effect) </option> 
<option value="fold">#71 tF% (Fold Effect) </option> 
«option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value="puff"> 膨 胀 特效 (Puff Effect) </option> 
«option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
<option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
<option value="shake"> 震 动 特效 (Shake Effect) </option> 
<option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特 效 (Slide Effect) </option> 

</select> 


<a href="#" id="button" class="ui-state-default ui-corner-all"> 运 行 


</body> 
</html> 
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jQuery UI 实例 - 隐藏 (Hide) 


使 用 自 定 义 效果 来 隐藏 匹配 的 元 素 。 
如 需 了 解 更 多 有 关 .hide() 方法 的 细节 ， 请 查看 API 文档 .hide()。 


.hide() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .hide() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: ©.4em; position: 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runETfect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 
var options = {}; 


// 一 些 特 效 带 有 必需 的 参数 


if ( selectedEffect === "scale" ) { 
options = { percent: 0 }; 
} else if ( selectedEffect === "size" ) { 


options = { to: { width: 200, height: 60 } }; 


// 运行 特效 
$( "#effect" ).hide( selectedEffect, options, 1000, callback 
J; 


// [SER 
function callback() { 
setTimeout(function() { 


$( "#effect" ).removeAttr( "style" ).hide().fadeIn(); 
), 1000 ); 
H 


// 根据 选择 菜单 值 设置 特效 
$( "#button" ).click(function() { 
runEffect(); 
return false; 
3); 
3); 
«/script» 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class-"ui-widget-header ui-corner-all">(4ig (Hide) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
«option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
«option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
«option value-"clip"»23334 4X (Clip Effect) </option> 
«option value="drop"> 降 落 特效 (Drop Effect) </option> 
«option value="explode"> 爆 炸 特效 (Explode Effect) </option> 
«option value-"fold"»j tF% (Fold Effect) </option> 
«option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value="puff"> 膨 胀 特效 (Puff Effect) </option> 
<option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
«option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
«option value="shake"> 震 动 特效 (Shake Effect) </option> 
<option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特效 (Slide Effect) </option> 

</select> 


<a href="#" id="button" class="ui-state-default ui-corner-all"> 运 行 


</body> 
</html> 
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jQuery UI 实例 - 切换 (Toggle) 


使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 素 。 
如 需 了 解 更 多 有 关 .toggle() 方法 的 细节 ， 请 查看 API 文档 .toggle()。 


.toggle() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .toggle() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { 
width: 500px; 
height: 200px; 


#button { 
padding: .5em 1em; 
text-decoration: none; 


} 

#effect { 
position: relative; 
width: 240px; 
height: 135px; 
padding: 0.4em; 


} 

#effect h3 { 
margin: 0; 
padding: 0.4em; 
text-align: center; 


} 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runEffect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 


var options = {}; 
// 一 些 特效 带 有 必需 的 参数 


if ( selectedEffect === "Scale" ) { 
options = { percent: 0 }; 
} else if ( selectedEffect === "size" ) { 
options - ( to: ( width: 200, height: 60 ) Y; 
} 


// 运行 特效 
$( "#effect" ).toggle( selectedEffect, options, 500 ); 
J; 


// 根据 选择 菜单 值 设置 特效 
$( "#button" ).click(function() { 
runEffect(); 
return false; 
3); 
3); 
</script> 
</head> 
<body> 


<div class="toggler"> 
«div id="effect" class="ui-widget-content ui-corner-all"> 
«h3 class="ui-widget-header ui-corner-all">H# (Toggle) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
«option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
<option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
«option value-"clip"»23$34 4X (Clip Effect) </option> 
«option value="drop"> 降 落 特效 (Drop Effect) «/option» 
«option value="explode"> 爆 炸 特效 (Explode Effect) </option> 
<option value="fold">#1 tF% (Fold Effect) </option> 
«option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value="puff"> 膨 胀 特效 (Puff Effect) </option> 
«option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
<option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
<option value="shake"> 震 动 特效 (Shake Effect) </option> 
<option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特效 (Slide Effect) </option> 

</select> 


<a href="#" id="button" class="ui-state-default ui-corner-all"> 运 行 


</body> 
</html> 
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jQuery UI 实例 - 添加 Class (Add Class) 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 添 加 指定 的 Class. 
如 需 了 解 更 多 有 关 .addclass() 方法 的 细节 ， 请 查看 API 文档 .addClass()。 


.addClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .addClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; padding: 1em; font-size: 1.2em; bord: 
.hewClass ( text-indent: 40px; letter-spacing: .4em; width: 41( 
</style> 
<script> 
$(function() { 
$( "#button" ).click(function() { 
$( "#effect" ).addClass( "newClass", 1000, callback ); 
return false; 


3); 


function callback() { 
setTimeout(function() { 
$( "#effect" ).removeClass( "newClass" ); 
}, 1500 ); 
} 
3); 
</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</div> 
</div> 


<a href="#" id="button" class="ui-state-default ui-corner-all'"»iz17 


</body> 
</html> 
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jQuery UI 实例 - 移 除 Class (Remove Class) 


M AERAR t, ALAM REAANNS Tce eR Class, 
如 需 了 解 更 多 有 关 .removeclass() 方法 的 细节 ， 请 查看 API 文档 


.removeClass()。 


.removeClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .removeClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { position: relative; width: 240px; padding: 1em; leti 
.hewClass { text-indent: 40px; letter-spacing: .4em; width: 410p) 
</style> 
<script> 
$(function() { 

$( "#button" ).click(function() { 
$( "#effect" ).removeClass( "newClass", 1000, callback ); 
return false; 


3); 


function callback() { 
setTimeout(function() { 
$( "#effect" ).addClass( "newClass" ); 
}, 1500 ); 
} 
3); 
</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="newClass ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. £ 
«/div» 
«/div» 


<a href="#" id="button" class="ui-state-default ui-corner-all'"»izí1T7 


</body> 
</html> 
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jQuery UI 实例 - 切换 Class (Toggle Class) 


当 动 男 样 式 改 变 时 ， 根 据 Class 是 否 存在 以 及 switch 参数 的 值 ， 为 匹配 的 元 素 集合 
内 的 每 个 元 素 添 加 或 移 除 一 个 或 多 个 Class。 


如 需 了 解 更 多 有 关 .toggleclass() 方法 的 细节 ， 请 查看 API 文档 
.toggleClass()。 


.toggleClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .toggleClass() 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect {position: relative; width: 240px; padding: 1em; lette! 
.hewClass { text-indent: 40px; letter-spacing: .4em; width: 410p) 
</style> 
<script> 
$(function() { 
$( "#button" ).click(function() { 
$( "#effect" ).toggleClass( "newClass", 1000 ); 
return false; 
3); 
3); 
«/script» 
</head> 
<body> 


<div class="toggler"> 
«div id="effect" class="newClass ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</div> 
</div> 


地 二 


«a href="#" id-"button" class="ui-state-default ui-corner-all'»iz17 


«/body» 
«/html» 
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jQuery UI 实例 - 转换 Class (Switch Class) 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 添加 和 移 除 指定 的 Class. 


如 需 了 解 更 多 有 关 .switchclass() 方法 的 细节 ， 请 查看 API 文档 
.switchClass(). 


.switchClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .switchClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { position: relative; } 
.hewClass { width: 240px; padding: 1em; letter-spacing: 0; font. 
.anotherNewClass { text-indent: 40px; letter-spacing: .4em; widtt 
</style> 
<script> 
$(function() { 
$( "#button" ).click(function(){ 
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "new 
return false; 
3); 
3); 
«/script» 
«/head» 
«body» 


«div class="toggler"> 
«div id="effect" class="newClass ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</div> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 颜色 动画 (Color Animation) 


使 用 .animate() 实现 颜色 动画 效果 。 


如 需 了 解 更 多 有 关 颜 色 动 画 (Color Animation) 的 细节 ， 请 查看 API 文档 颜色 动 
Œ] (Color Animation) 。 


jQuery UI 捆绑 了 jQuery Color 插件 ，jQuery Color 插件 提供 了 颜色 动画 及 其 他 许 
多 和 与 颜色 相关 的 实用 功能 。 


动画 (Animation) 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - 动画 (Animation) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: 0.4em; positior 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
</style> 
<script> 
$(function() { 
var state = true; 
$( "#button" ).click(function() { 
if ( state ) { 
$( "#effect" ).animate({ 
backgroundColor: "#aa0000", 
color: "#fff", 


width: 500 
}, 1000 ); 
} else { 


$( "#effect" ).animate({ 
backgroundColor: "#fff", 
color: "#000", 
width: 240 

jJ, 1000 ); 


state - !state; 


3); 


3); 

</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class="ui-widget-header ui-corner-all"># Hj (Animation) «/h3 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<a href="#" id="button" class="ui-state-default ui-corner-all">W# 


</body> 
</html> 
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jQuery UI 实例 - fz (Position) 


相对 窗口 、 文 档 、 锚 、 光 标 /鼠标 等 元 素 定位 一 个 元 素 。 
如 需 了 解 更 多 有 关 .position() 方法 的 细节 ， 请 查看 API 文档 .position()。 


默认 功能 
使 用 表单 控件 配置 位 置 ， 或 者 拖 搜 被 定位 的 元 素来 修改 它 的 偏 移 量 。 向 四 周 拖 搜 父 
元 素来 查看 碰撞 检测 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 定位 (Position) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#parent { 


} 


width: 60%; 

height: 40px; 

margin: 10px auto; 
padding: 5px; 

border: 1px solid #777; 
background-color: #fbca93; 
text-align: center; 


.positionable { 


} 


position: absolute; 
display: block; 

right: 0; 

bottom: 0; 
background-color: #bcd5e6; 
text-align: center; 


#positionable1 { 


} 


width: 75px; 
height: 75px; 


#positionable2 { 


width: 120px; 
height: 40px; 


select, input { 


margin-left: 15px; 


j 
</style> 
<script> 
$(function() { 
function position() { 
$( ".positionable" ).position({ 
of: $( "£parent" ), 


my: $( "4my horizontal" ).val() + " " + $( "4my vertical" ` 

at: $( "4at horizontal" ).val() +" " + $( "Zat vertical" ` 

collision: $( "#collision_horizontal" ).val() + " "+ $( "+ 
}); 


} 
$( ".positionable" ).css( "opacity", 0.5 ); 
$( "select, input" ).bind( "click keyup change", position ); 


$( "#parent" ).draggable({ 
drag: position 


3); 
position(); 
1); 
</script> 
</head> 
<body> 
«div id="parent"> 
<p> 
这 是 父 元 素 的 位 置 。 
</p> 
</div> 


«div class="positionable" id="positionable1"> 
<p> 
to position 
</p> 

</div> 


<div class="positionable" id="positionable2"> 
<p> 
to position 2 
</p> 

</div> 


<div style="padding: 20px; margin-top: 75px;"> 
fe (ee 
<div style="padding-bottom: 20px;"> 
<b>my : </b> 
<select id="my_horizontal"> 
<option value="left">left</option> 
«option value="center">center</option> 
<option value="right">right</option> 


</select> 
<select id="my_vertical"> 
<option value="top">top</option> 
<option value="center">center</option> 
<option value="bottom">bottom</option> 
</select> 
</div> 
<div style="padding-bottom: 20px;"> 
<b>at : </b> 
<select id="at_horizontal"> 
<option value="left">left</option> 
«option value="center">center</option> 
<option value="right">right</option> 
</select> 
<select id="at_vertical"> 
<option value="top">top</option> 
«option value="center">center</option> 
<option value="bottom">bottom</option> 
</select> 
</div> 
<div style="padding-bottom: 20px;"> 
<b>collision: </b> 
<select id="collision_horizontal"> 
<option value="flip">flip</option> 
<option value="fit">fit</option> 
<option value="flipfit">flipfit</option> 
<option value="none">none</option> 
</select> 
<select id="collision_vertical"> 
<option value="flip">flip</option> 
<option value="fit">fit</option> 
<option value="flipfit">flipfit</option> 
<option value="none">none</option> 
</select> 
</div> 
</div> 


</body> 
</html> 


E x zs 





像 循环 


一 个 照片 浏览 器 的 原型 ， 使 用 Position 分 别 把 图 片 定 为 在 左边 、 中 间 、 右 边 ， 然 后 
循环 显示 。 使 用 顶部 的 链接 来 循环 图 像 ， 或 者 在 图 像 的 左 侧 或 右 侧 点 击 来 循环 图 
像 。 请 注意 ， 当 调整 窗口 大 小 时 ， 会 重新 定位 图 像 。 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>jQuery UI 定位 (Position) - 图 像 循 环 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
body { 

margin: 0; 
} 
#container { 

overflow: hidden; 

position: relative; 

height: 400px; 
j 


img { 
position: absolute; 
} 
</style> 
<script> 
$(function() { 
// 重 构 部 件 ， 去 除 这 些 插 件 方法 
$.fn.left = function( using ) { 
return this.position({ 
my: "right middle", 
at: "left+25 middle", 
of: "#container", 
collision: "none", 
using: using 
3); 
J; 
$.fn.right = function( using ) { 
return this.position({ 
my: "left middle", 
at: "right-25 middle", 
of: "#container", 
collision: "none", 
using: using 
3); 
$.fn.center - function( using ) ( 
return this.position({ 
my: "center middle", 
at: "center middle", 
of: "#container", 
using: using 
3); 
J; 


$( "img:eq(0)" ).left(); 
$( "img:eq(1)" ).center(); 
$( "img:eq(2)" ).right(); 


function animate( to ) { 
$( this ).stop( true, false ).animate( to ); 


function next( event ) { 

event.preventDefault(); 

$( "img:eq(2)" ).center( animate ); 

$( "img:eq(1)" ).left( animate ); 

$( "img:eq(0)" ).right().appendTo( "#container" ); 
} 
function previous( event ) { 

event .preventDefault(); 

$( "img:eq(0)" ).center( animate ); 

$( "img:eq(1)" ).right( animate ); 

$( "img:eq(2)" ).left().prependTo( "#container" ); 


$( "previous" ).click( previous ); 
$( "#next" ).click( next ); 


$( "img" ).click(function( event ) { 
$( "img" ).index( this ) === © ? previous( event ) : next( e 


3); 


$( window ).resize(function() { 
$( "img:eq(0)" ).left( animate ); 
$( "img:eq(1)" ).center( animate ); 
$( "img:eq(2)" ).right( animate ); 
3); 
3); 
«/script» 
«/head» 
«body» 


«div id="container"> 
«img src="img/earth. jpg" width="458" height="308" alt="earth"> 
<img src="img/flight.jpg" width="512" height="307" alt="flight"> 
<img src="img/rocket.jpg" width="300" height="353" alt="rocket"> 


<a id=" previous href="#"> 上 一 个 </a> 
<a id="next" href="#"> 下 一 个 </a> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 部 件 库 (Widget Factory) 


使 用 与 所 有 jQuery UI 小 部 件 相 同 的 抽象 化 来 创建 有 状态 的 jQuery 插件 。 


如 需 了 解 更 多 有 关 部 件 库 (Widget Factory) 的 细节 ， 请 查看 API 文档 部 件 库 
(Widget Factory) 。 


默认 功能 


该 演示 展示 了 一 个 简单 的 使 用 部 件 库 queryui.widgetjs) 创建 的 自 定义 的 小 部 
件 。 


三 个 区 块 是 以 不 同 的 方式 初始 化 的 。 点 击 改变 他 们 的 背景 颜色 。 查 看 源码 及 注释 理 
解 工 作 原 理 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 部 件 库 (Widget Factory) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.custom-colorize { 
font-size: 20px; 
position: relative; 
width: 75px; 
height: 75px; 
} 
.CUStom-colorize-changer { 
font-size: 10px; 
position: absolute; 


right: 0; 
bottom: 0; 
} 
</style> 
<script> 


$(function() { 

// 部 件 定义 ， 其 中 "custom" 是 命名 空间 ，"colorize" 是 部 件 名 称 
$.widget( "custom.colorize", { 

// 默认 选项 

options: { 

red: 255, 

green: ©, 

blue: 0, 


// 回调 
change: null, 
random: null 


ty 


// HERZ 
_create: function() { 
this.element 
// 添加 一 个 主题 化 的 class 
.addClass( "custom-colorize" ) 
// 防止 双击 来 选择 文本 
.disableSelection(); 


this.changer = $( "<button>", { 
text: "AZ", 
"class": "custom-colorize-changer" 
}) 
.appendTo( this.element ) 
.button(); 


// 绑 定 changer 按钮 上 的 click 事件 到 random 方法 
this. on( this.changer, { 

// 当 小 部 件 被 禁用 时 ，_on 不 会 调用 random 

click: "random" 


}); 


this._refresh(); 


ty 


// 当 创建 及 之 后 改变 选项 时 调用 
_refresh: function() { 
this.element.css( "background-color", "rgb(" + 
this.options.red +"," + 
this.options.green + "," + 
this.options.blue + ")" 


); 


// 触发 一 个 回调 /事件 
this. trigger( "change" ); 


ty 


// 一 个 改变 颜色 为 随机 值 的 公共 方法 
// 可 通过 .colorize( "random" ) 直接 调用 
random: function( event ) { 
var colors = { 
red: Math.floor( Math.random() * 256 ), 
green: Math.floor( Math.random() * 256 ), 
blue: Math.floor( Math.random() * 256 ) 


H 
// 触发 一 个 事件 ， 检 查 是 否 已 取消 
if ( this. trigger( "random", event, colors ) !== false ). 


this.option( colors ); 


j 


ty 


// 自动 移 除 通过 _on 绑 定 的 事件 
// 在 这 里 重 置 其 他 的 修改 
_destroy: function() { 

// 移 除 生成 的 元 素 


this.changer.remove(); 


this.element 
.removeClass( "custom-colorize" ) 
.enableSelection() 
.css( "background-color", "transparent" ); 


ty 


// _setOptions 是 通过 一 个 带 有 所 有 改变 的 选项 的 哈 希 来 调用 的 
// 当 改 变 选项 时 总 是 刷新 
_setOptions: function() { 

// _super 和 _superApply 

this. superApply( arguments ); 

this. refresh(); 


// _setOption 是 为 每 个 独立 的 改变 的 选项 调用 的 
_setOption: function( key, value ) { 
// 防止 无 效 的 颜色 值 
if ( /red|green|blue/.test(key) && (value < 0 || value > 2! 
return; 


this. super( key, value ); 
} 
3); 


// 通过 默认 选项 进行 初始 化 
$( "#my-widget1" ).colorize(); 


// 通过 两 个 自 定 义 的 选项 进行 初始 化 
$( "#my-widget2" ).colorize({ 


red: 60, 
blue: 60 
3); 


// 通过 自 定义 的 green 值 和 一 个 只 允许 颜色 足够 绿 的 随机 的 回调 进行 初始 化 
$( "#my-widget3" ).colorize( { 
green: 128, 
random: function( event, ui ) { 
return ui.green > 128; 


} 
3): 
// 点 击 切换 enabled/disabled 
$( "#disable" ).click(function() { 


// 为 每 个 小 部 件 使 用 自 定义 的 选择 器 来 找到 所 有 的 实例 
// 所 有 的 实例 一 起 切换 ， 所 以 我 们 可 以 从 第 一 个 开始 检查 状态 


if ( $( ":custom-colorize" ).colorize( "option", "disabled" ` 
$( ":custom-colorize" ).colorize( "enable" ); 

) else ( 
$( ":custom-colorize" ).colorize( "disable" ); 


} 
3); 
// 在 初始 化 后 ， 点 击 设 置 选项 
$( "#black" ).click( function() { 


$( ":custom-colorize" ).colorize( "option", { 
red: 0, 


</script> 
</head> 
<body> 


<div> 
<div id="my-widget1"> 改 变 颜色 </div> 
«div id="my-widget2"> 改 变 颜色 </div> 
<div id="my-widget3"> 改 变 颜 色 </div> 
<button id="disable"> 切 换 disabled 选项 </button> 
<button id="black"> 改 为 黑色 </button> 
</div> 


</body> 
</html> 





jQuery UI API 参考 


jQuery UI API 类 别 - 特效 (Effects) 


jQuery UI 在 jQuery 内 置 的 特效 上 添加 了 一 些 功能 。jQuery UI 支持 颜色 动画 和 
Class 转换 ， 同 时 也 提供 了 一 些 额外 的 Easings。 另外 ， 提 供 了 一 套 完 整 的 定制 特 


效 ， 供 显示 和 隐藏 元 素 时 或 者 只 是 添加 一 些 视觉 显示 时 使 用 。 
API 描述 也 属于 类 别 
当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 a aae ses 
.addClass() 集合 内 的 每 个 元 素 添加 指定 的 (Method ‘ 
Class. Overrides) 
百叶 窗 特 效 百叶 窗 特 效 (Blind Effect) 通过 将 
(Blind 元 素 包 应 在 一 个 容器 内 ， 采 用 " 拉 百 
Effect) 叶 窗 "效果 来 隐藏 或 显示 元 素 。 
eee 反弹 特效 (Bounce Effect) 反弹 一 
a TR. ^ri BER 
Effect) 时 ， 最 后 一 次 或 第 一 次 反弹 会 呈现 
淡 入 /淡出 效果 。 


Sis (Clip 


Effect) ASCH, 
j Ah EB] . " 
"ur 使 用 .animate() 实现 颜色 动画 效 
Animation) Ro 
降落 特效 降落 特效 (Drop Effect) 通过 单个 
(Drop 方向 滑动 的 淡 入 淡出 来 隐藏 或 显示 
Effect) 二 个 元 来 
| Easing 画 数 指定 动画 在 不 同 点 上 的 
paning 行进 速度 。 
特效 核心 (Effects 
.effect() 对 一 个 元 素 应 用 动画 特效 。 Core) | JI FA 
(Method) 

爆炸 特效 爆炸 特效 (Explode Effect) 通过 把 

(Explode 元 素 裂 成 碎片 来 隐藏 或 显示 一 个 元 
Effect) 素 。 
淡 入 淡出 特效 淡 入 淡出 特效 (Fade Effect) 通过 

(Fade 淡 入 淡出 元 素来 隐藏 或 显示 一 个 元 


Effect) 


剪辑 特效 (Clip Effect) 通过 垂直 或 
水 平方 向 夹 剪 元 素来 隐藏 或 显示 一 


素 。 
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(Fold Effect) 


hide() 


突出 特效 
(Highlight 

Effect) 

膨胀 特效 (Puff 

Effect) 


跳动 特效 
(Pulsate 
Effect) 


.removeClass() 


缩放 特效 
(Scale 
Effect) 


震动 特效 
(Shake 
Effect) 


.show() 


尺寸 特效 
(Size Effect) 


滑动 特效 
(Slide 
Effect) 


.SwitchClass() 


.toggle() 


jQuery UI API X 3 


- 特效 (Effects) 


素来 隐藏 或 显示 一 个 元 素 。 
特效 核心 (Effects 


使 用 自 定义 效果 来 隐藏 匹配 的 元 Core) | A 


x (Method 
e Overrides) | 方法 
(Method) 


突出 特效 (Highlight Effect) 3833 Ej 
先 改变 背景 颜色 来 隐藏 或 显示 一 个 
元 素 。 


通过 在 缩放 元 素 的 同时 隐藏 元 素来 
创建 膨胀 特效 (Puff Effect) 。 


跳动 特效 (Pulsate Effect) 38:1 BE 
动 来 隐藏 或 显示 一 个 元 素 。 


特效 核心 (Effects 
Core) | JAER 
(Method 
Overrides) 


当 动 画 样式 改变 时 ， 为 匹配 的 元 素 
集合 内 的 每 个 元 素 移 除 指定 的 


Class。 


按照 某 个 百分比 缩放 元 素 。 


垂直 或 水 平方 向 多 次 震动 元 素 。 


特效 核心 (Effects 


使 用 自 定 义 效果 来 显示 匹配 的 元 Core) | FER 


= (Method 
wem Overrides) | 方法 
(Method) 


调整 元 素 尺 寸 到 指定 宽度 和 高 度 。 


把 元 素 滑 动 出 视 区 。 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 
集合 内 的 每 个 元 素 添加 和 移 除 指定 
的 Class。 


特效 核心 (Effects 
Core) 


特效 核心 (Effects 
Core) | RH 
MAR MRM RMB mena 


的 元 素 。 
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的 元 素 。 


当 动 男 样 式 改变 时 ， us Class 是 
否 存在 以 及 switch 参数 的 值 ， 为 匹 

toggleClass() ， 配 的 元 素 集合 内 的 每 个 元 素 添 加 或 
移 除 一 个 或 多 个 Class。 


panes 把 一 个 元 素 的 轮 廊 转移 到 另 一 个 元 
Effect) mE 


jQuery UI API 类 别 - 特效 (Effects) 


Overrides) | 方法 
(Method) 


特效 核心 (Effects 
Core) | JAER 
(Method 
Overrides) 
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jQuery UI API - .addClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) 
用 法 


描述 : 当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 添 加 指定 的 Class. 
返回 : jQuery 


.addClass( className [, duration ] [, easing ] [, complete ] ) 


we a g M. 
参数 类 型 描述 默认 
值 
要 添加 到 每 个 匹配 的 元 素 的 class 属性 中 
className String 的 一 个 或 多 个 class 名 称 ， 多 个 class 名 
称 用 空格 分 隔 。 
Number 一 个 字符 串 或 一 个 数字 ， 指 定 动画 将 运行 
duration 或 String BX. 400 
一 个 空 b- \ i K 
easing String 一 个 字符 串 ， 指 示 要 使 用 的 easing K Sins 


o 


complete Function) — E z/i&ise px ed 2 38 FH BER ZA, 


.addClass( className [, options ] ) 


参数 类 型 描述 


要 添加 到 每 个 匹配 的 元 素 的 class 属性 中 的 一 个 或 多 个 
class 名 称 ， 多 个 class 名 称 用 空格 分 隔 。 


options Object ”所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 


className String 


e duration (默认 值 : 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e easing (默认 值 : swing ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing IR. 

e complete 类 型 : Function() 描述 : — E z/ji&ise px d 32 38 FH ER ZACS 


e children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应用 到 
匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因为 判断 元 素 是 否 是 动画 的 后 代 的 
代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长。 

e queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 
表示 的 队列 中 。 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI 的 class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， a .addClass() ， 人 允许 自 定 
义 动画 持续 时 间 和 easing 函数 ， 在 动画 完成 时 也 提供 了 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
画 化 的 样式 都 将 在 动画 的 结尾 改变 。 


该 插件 扩展 自 jQuery AEM .addClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.addClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 
预期 的 行为 。 


实例 


添加 class "big-blue" 到 匹配 的 元 素 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.addClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
} 
.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div></div> 


<script> 
$( "div" ).click(function() { 

$( this ).addClass( "big-blue", 1000, "easeOutBounce" ); 
3): 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 百叶 窗 特 效 (Blind Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 百叶 窗 特效 (Blind Effect) 通过 将 元 素 包 于 在 一 个 容器 内 ， 采 用 " 拉 百 叶 
窗 " 效 果 来 隐藏 或 显示 元 素 。 


blind 
参数 xd 描述 RA 


值 


隐藏 元 素 时 拉动 百叶 窗 的 方向 ， 显 示 元 素 时 拉动 


direction String 百叶 窗 的 方向 


可 能 的 值 : up, down, left, right, vertical, horizontal, | "up" | 


容器 应 用 overflow: hidden 时 ， 高 度 的 变化 会 影响 到 元 素 的 可 见 性 。 


实例 


使 用 百叶 窗 特 效 (Blind Effect) 切换 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 百 叶 窗 特效 (Blind Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "blind" ); 
3); 


«/script» 


«/body» 
«/html» 


E  ” OB 





jQuery UI API - 反弹 特效 (Bounce Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 反弹 特效 (Bounce Effect) 反弹 一 个 元 素 。 当 与 隐藏 或 显示 一 起 使 用 时 ， 最 
后 一 次 或 第 一 次 反弹 会 呈现 淡 入 /淡出 效果 。 


bounce 

EX 
参数 类 型 描述 认 

值 
distance Number 最 大 的 反弹 距离 ， 以 像素 为 单位 。 20 
l 元 素 反 弹 的 次 数 。 当 隐藏 或 显示 时 ， 会 为 淡 入 / 淡 
times | Integer 出 效果 添加 半 个 反 涪 。 z 
实例 


使 用 反弹 特效 (Bounce Effect) 切换 一 个 divo 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 反 弹 特效 (Bounce Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 
$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" ); 


3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 剪辑 特效 (Clip Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 剪辑 特效 (Clip Effect) 通过 垂直 或 水 平方 向 夹 剪 元 素来 隐藏 或 显示 一 个 元 


Zino 


clip 
参数 类 型 描述 默认 值 


direction String 剪辑 特效 隐藏 或 显示 元 素 的 方向 。 


vertical 剪辑 上 下 边缘 ，horizontal 剪辑 左右 边缘 。 | "vertical" | 


实例 


使 用 剪辑 特效 (Clip Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> #4} (Clip Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "clip" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 颜色 动画 (Color Animation) 


jQuery UI 特效 核心 添加 了 使 用 rgb() 、 rgba() 、 十 六 进 制 值 或 者 颜色 名 比 
如 "aqua" 来 动态 改变 color 属性 的 功能 。 只 需要 包含 jQuery Ul 特效 核心 文 
件 ， .animate() 就 会 支持 颜色 。 


支持 下 列 属性 : 


backgroundColor 
borderBottomColor 
borderLeftColor 
borderRightColor 
borderTopColor 
color 
columnRuleColor 
outlineColor 
textDecorationColor 
textEmphasisColor 


对 颜色 动画 的 支持 来 自 jQuery Color 插件 。Color 插件 提供 了 一 些 用 于 颜色 的 函 
数 。 如 需 查 看 完整 文档 ， 请 访问 jQuery Color 文档 。 


Class 动画 (Class Animations) 


虽然 可 以 直接 对 color 属性 进行 动画 化 ， 但 是 通常 采用 另 一 种 更 好 的 方法 ， 即 在 一 
个 class 中 包含 样式 。jQuery Ul 提供 了 一 些 动态 添加 或 去 除 CSS 类 的 方法 ， 分 别 
是 .addclass() . .removeClass() 、  .toggleClass() 和 

Eee lass (ue 这 些 方法 将 自动 确定 哪些 属性 需要 改变 ， 哪些 需要 应 用 适当 
的 动 男 。 


实例 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 颜 色 动 画 (Color Animation) 演示 </title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.4/the 
<style> 
#elem { 
color: #006; 
background-color: #aaa; 
font-size: 25px; 
padding: 1em; 
text-align: center; 
} 
</style> 
«script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></sci 
</head> 
<body> 


«div id="elem"> 颜 色 动 画 </div> 
«button id="toggle"> 改 变 颜色 </button> 


<script> 
$( "#toggle" ).click(function() { 
$( "#elem" ).animate({ 
color: "green", 
backgroundColor: "rgb( 20, 20, 20 )" 
3); 
3); 


</script> 


</body> 
</html> 





jQuery UI API - 降落 特效 (Drop Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 降落 特效 (Drop Effect) 通过 单个 方向 滑动 的 淡 入 淡出 来 隐藏 或 显示 一 个 元 


71*0 


drop 
参数 类 型 描述 默认 


值 


隐藏 元 素 时 元 素 降落 的 方向 ， 显 示 元 素 时 元 素 出 
现 的 方向 。 


direction String 
可 能 的 值 : up. down, left, right, | "left" | 


实例 


使 用 降落 特效 (Blind Effect) 切换 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1e> 降 落 特效 (Drop Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "drop" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - Easings 


Easing BRE z/ BITE A RENTHIRE. jQuery 核心 带 有 两 个 easings : 一 个 
是 linear ， 整 个 动画 以 一 个 不 变 的 速度 行进 ; 另 一 个 是 swing (jQuery 核心 
默认 的 easing) ， 行 进 速度 在 动画 开始 和 结束 时 比 在 动画 中 间 时 稍 慢 。jQuery UI 
提供 了 一 些 额外 的 easing 函数 ， 范 围 从 摆动 行为 上 的 变化 到 定制 特效 ， 上 比如 弹 
Bko 


一 些 easings 会 在 动画 中 产生 负 值 。 根 据 动 画 的 不 同属 性 ， 实 际 值 可 能 为 需 。 例 
如 ， 您 可 以 把 left 取 为 负 值 ， 但 是 不 能 把 height 或 opacity 取 为 负 值 。 


想 要 更 好 地 理解 一 个 easing 如 何 影响 一 个 动画 ， 需 多 花 时 间 研 究 方程 图 。 请 看 下 
面 所 列 出 的 jQuery UI 中 所 有 可 用 动画 的 曲线 图 。 
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jQuery UI API - .effect() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 (Methods) 
用 法 


描述 : 对 一 个 元 素 应 用 动画 特效 。 
返回 : jQuery 


.effect( effect [, options ] [, duration ] [, complete ] ) 


参数 类 型 描述 pu 

值 

effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

options Object 特效 具体 的 设置 和 easing. 

se ND sb AA n Bess JS oz 
duration Number 或 as 八 数 字 ， 指 定 动画 将 运 400 
String 行 多 久 。 
complete Function() 一 有 旦 动画 完成 时 要 调用 的 函数 。 


.effect( options ) 


参数 类 型 描述 
options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect。 


e effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

e easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing IR. 

e duration (默认 值 : 400 ) 类 型 Number z String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

e queue (默认 值 true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 
表示 的 队列 中 。 


.effect() 方法 对 一 个 元 素 应 用 了 一 个 命名 的 动画 特效 。 许 多 特效 也 支持 显示 
或 隐藏 模式 ， 这 些 可 通过 .show() .hide() 和 .toggle() 方法 来 完成 。 


实例 
对 一 个 div 应 用 反弹 特效 (Bounce Effect) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.effect() 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background: £ccc; 
border: 1px solid #000; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 


<body> 

<p> 点 击 任意 地 方 应 用 特效 。</p> 
<div></div> 

<script> 


$( document ).click(function() { 
$( "div" ).effect( "bounce", "slow" ); 


3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 爆炸 特效 (Explode Effect) 


所 属 类 别 
特效 (Effects) 
用 法 
描述 : 爆炸 特效 (Explode Effect) 通过 把 元 素 裂 成 碎片 来 隐藏 或 显示 一 个 元 素 。 
explode 
EAN 
参数 类 型 描述 认 
值 
爆炸 裂 开 的 碎片 数目 ， 应 该 是 个 平方 数 ， 任 何其 他 
ER 值 被 伟人 到 最 近 的 平方 数 。 


实例 


使 用 爆炸 特效 (Explode Effect) 切换 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1e> 爆 炸 特效 (Explode Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "explode" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 淡 人 淡出 特效 (Fade Effect) 


所 属 类 别 

特效 (Effects) 

用 法 

描述 : 淡 入 淡出 特效 (Fade Effect) 通过 淡 和 淡出 元 素来 隐藏 或 显示 一 个 元 素 。 


fade 


实例 


使 用 淡 入 淡出 特效 (Fade Effect) 切换 一 个 divo 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 淡 入 淡出 特效 (Fade Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "fade" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - #72 5X (Fold Effect) 
所 属 类 别 
特效 (Effects) 


用 法 


描述 : Tat (Fold Effect) 通过 折 党 元 素来 隐藏 或 显示 一 个 元 素 。 


fold 
参数 类 型 描述 
Number 
size 或 RIT A TRIIR T. 
String 


horizFirst Boolean ST A EA ARTA BT e. di 


得 ， 显 示 的 时 候 与 隐藏 的 时 候 顺 序 相反 。 


实例 


使 用 折 和 壹 特效 (Fold Effect) 切换 一 个 divo 


默认 


false 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1le> 折 县 特效 (Fold Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "fold" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .hide() 


所 属 类 别 


特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) | 方 
法 (Methods) 


用 法 


描述 : 使 用 自 定 义 效果 来 隐藏 匹配 的 元 素 。 


返回 : jQuery 


.hide( effect [, options ] [, duration ] [, complete ] ) 


参数 类 型 描述 SA 
值 
effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 
options Object 特效 具体 的 设置 和 easing. 
BY 一 个 字 x 或 一 个 类 = = Wisk: 将 in 
duration Number 或 一 个 字符 串 或 人 数字， 指定 动画 将 运 400 
String 行 多 久 。 
complete Function() 一 旦 动画 完成 时 要 调用 的 函数 。 


.hide( options ) 


参数 类 型 描述 


options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect。 


effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing ERX. 

duration (默认 值 : 400 ) 类 型 Number zx String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

queue (默认 值 : true ) 类 型 Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 #2, queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 


表示 的 队列 中 。 


该 插件 扩展 自 jQuery NBA .hide() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.hide() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 
的 行为 。 


实例 
使 用 降落 特效 (Drop Effect) 隐藏 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.hide() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div d 
width: 100px; 
height: 100px; 
background: £Zccc; 
border: 1px solid #000; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button> 隐 藏 div</button> 
<div></div> 


<script> 
$( "button" ).click(function() { 
$( "div" ).hide( "drop", { direction: "down" }, "slow" ); 


3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 突出 特效 (Highlight Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 突出 特效 (Highlight Effect) 通过 首先 改变 背景 产 色 来 隐藏 或 显示 一 个 元 
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highlight 
参数 类 型 描述 默认 值 
color String 动画 期 间 使 用 的 背景 颜色 。 "#ffff99" 
实例 
头 


使 用 突出 特效 (Highlight Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 突 出 特效 (Highlight Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "highlight" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API -膨胀 特效 (Puff Effect) 


默认 值 
150 


所 属 类 别 
特效 (Effects) 
用 法 
描述 : 通过 在 缩放 元 素 的 同时 隐藏 元 素来 创建 膨胀 特效 (Puff Effect) 。 
puff 
参数 类 型 描述 
percent Number 要 缩放 到 的 百分比 。 
实例 


使 用 膨胀 特效 (Puff Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1le> 膨 胀 特效 (Puff Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "puff" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 跳动 特效 (Pulsate Effect) 


所 属 类 别 

特效 (Effects) 

用 法 

描述 : 跳动 特效 (Pulsate Effect) 通过 跳动 来 隐藏 或 显示 一 个 元 素 。 


pulsate 


参数 类 型 描述 


times | Integer 元 素 跳动 的 次 数 。 当 隐藏 或 显示 时 ， 会 添加 半 个 跳 
动 。 


实例 


使 用 跳动 特效 (Pulsate Effect) 切换 一 个 div。 


默认 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 跳 动 特 效 (Pulsate Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "pulsate" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .removeClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) 
用 法 


描述 : 当 动 画 样式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 移 除 指定 的 Class. 
返回 : jQuery 


.removeClass( className [, duration ] [, easing ] [, complete ] ) 


mi = ma uj 


we ae 里 M. 
参数 类 型 描述 默认 
值 
要 从 每 个 匹配 的 元 素 的 class 属性 中 移 除 
className String 的 一 个 或 多 个 class 名 称 ， 多 个 class 名 
称 用 空格 分 隔 。 
Number 一 个 字符 串 或 一 个 数字 ， 指 定 动画 将 运行 
duration 或 String 多 久 。 400 
一 个 字 b- S | > 
easing String 字符 串 ， 指 示 要 使 用 的 easing E Sis 


complete Function) — E z/i&ise px ed 2 38 FH BER ZA, 


.removeClass( className [, options ] ) 


参数 类 型 描述 


要 从 每 个 匹配 的 元 素 的 class 属性 中 移 除 的 一 个 或 多 个 
class 名 称 ， 多 个 class 名 称 用 空格 分 隔 。 


options Object ”所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 


className String 


e duration (默认 值 400 ) 类 型 : Number x String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e easing (默认 值 : swing ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing IZ. 


e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

e children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应 用 到 
匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因 为 判断 元 素 是 否 是 动画 的 后 代 的 
代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长。 

queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 

1.7 ij, queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 
表示 的 队列 中 。 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， 包 括 es a , iF 
自 定义 动画 持续 时 间 和 casing 函数 ， 在 动画 完成 时 也 提供 了 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
男 化 的 样式 都 将 在 动画 的 结尾 改变 。 


该 插件 扩展 了 jQuery AEH .removeClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.removeClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 
生 预 期 的 行为 。 


实例 


从 匹配 的 元 素 中 移 除 class "big-blue" 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.removeClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
} 
.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div class="big-blue"></div> 


<script> 
$( "div" ).click(function() { 

$( this ).removeClass( "big-blue", 1000, "easeInBack" ); 
3): 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 缩放 特效 (Scale Effect) 


所 属 类 别 

特效 (Effects) 

用 法 

描述 : 按照 某 个 百分比 缩放 元 素 。 


scale 
参数 类 型 描述 默认 值 


特效 的 方向 。 可 能 的 值 : "both", "vertical" 


direction — String 或 "horizontal" "both" 
[ . 
origin Array 消失 点 。 eee: i 
center 


] 


percent Number ”要 缩放 到 的 百分比 。 
元 素 的 哪个 区 域 将 被 调整 尺 
寸 : "both"、"box"、"content"。 当 值 为 
scale String "box" 时 ， 调 整 元 素 的 边框 (border) 和 内 "both" 
边 距 (padding) 的 尺寸 。 当 值 为 "content" 
时 ， 调 整 元 素 内 的 所 有 内 容 的 尺寸 。 


实例 


实例 1 : 
使 用 缩放 特效 (Scale Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 缩 放 特 效 (Scale Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "scale" ); 
3); 


«/script» 


«/body» 
«/html» 


4] sé 
实例 2 : 
只 在 一 个 方向 上 使 用 缩放 特效 (Scale Effect) 切换 一 个 div。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>> 缩 放 特 效 (Scale Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 
$( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" 


3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 晨 动 特效 (Shake Effect) 
所 属 类 别 

特效 (Effects) 

用 法 

描述 : 垂直 或 水 平方 向 多 次 震动 元 素 。 


Shake 


参数 类 型 描 


学 


"left" 或 "right" 的 值 将 水 平 震动 元 素 ，"up" 或 
direction — String "down" 的 值 将 垂直 震动 元 素 。 该 值 指定 元 素 治 
轴线 移动 时 第 一 步 的 方向 。 
distance ”Number ”要 震动 的 距离 。 


times Integer ”要 震动 的 次 数 。 


实例 


震动 一 个 div。 


默认 
值 


"left" 


20 
3 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 震 动 特 效 (Shake Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 震动 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).effect( "shake" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .show() 


所 属 类 别 


特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) | 方 
法 (Methods) 


用 法 


描述 : 使 用 自 定 义 效果 来 显示 匹配 的 元 素 。 


返回 : jQuery 


.show( effect [, options ] [, duration ] [, complete ] ) 


" <i E 
参数 类 型 描述 SA 
值 

effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 
options Object 特效 具体 的 设置 和 easing. 

st — AN EE st — A #6 SS bd- JS a5 
duration Number 或 一 个 字符 串 或 人 数字， 指定 动画 将 运 400 

String 行 多 久 。 

complete Function() 一 旦 动画 完成 时 要 调用 的 函数 。 


,Show( options ) 


参数 类 型 描述 


options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect。 


effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing ERX. 

duration (默认 值 : 400 ) 类 型 Number zx String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

queue (默认 值 : true ) 类 型 Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 #2, queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 


表示 的 队列 中 。 


该 插件 扩展 自 jQuery NBN .show() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.Show() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 
的 行为 。 


实例 
使 用 折 和 壹 特效 (Fold Effect) 显示 一 个 divo 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.show() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
display: none; 
width: 100px; 
height: 100px; 
background: #ccc; 
border: 1px solid #000; 


} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button> 显 示 div</button> 
<div></div> 


<script> 

$( "button" ).click(function() f 
$( "div" ).show( "fold", 1000 ); 

3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 尺寸 特效 (Size Effect) 


所 属 类 别 


特效 (Effects) 


用 法 
描述 : 


size 


origin 


scale 


实例 


EAR 


调整 元 素 尺 寸 到 指定 宽度 和 高 度 。 


学 


类 型 fü 


Object ”要 调整 到 的 高 度 和 宽度 。 
Array ”消失 点 。 


元 素 的 哪个 区 域 将 被 调整 尺 

寸 : "both"、"box"、"content"。 当 值 为 "box" Hj, 
String ”调整 元 素 的 边框 (border) 和 内 边 距 (padding) 

的 尺寸 。 当 值 为 "content" 时 ， 调 整 元 素 内 的 所 有 

内 容 的 尺寸 。 


寸 特 效 (Size Effect) 调整 元 素 尺 寸 。 


默认 
值 


[ 
"top" f 
"left" ] 


"both" 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 尺 寸 特效 (Size Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进 行 尺寸 调整 。 </p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 
$( "#toggle" ).effect( "size", { 
to: { width: 200, height: 60 } 
jJ, 1000 ); 
3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 滑动 特效 (Slide Effect) 
所 属 类 别 

特效 (Effects) 

用 法 


描述 : 把 元 素 滑动 出 视 区 。 


slide 
参数 类 型 描述 


特效 的 方向 。 可 能 的 
值 : "left", "right", "up", "down". 


特效 的 距离 。 默 认为 元 素 的 高 度 
(height) 还 是 宽度 (width) 取决 于 

distance Number direction 参数 。 可 以 设置 为 小 于 元 素 的 宽 
度 (width) /高 度 (height) 的 任意 整 


o 


direction String 


实例 


使 用 滑动 特效 (Slide Effect) 切换 一 个 div。 


默认 值 


"both" 


元 素 的 
outerWidth 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 滑 动 特 效 (Slide Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "slide" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .switchClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) 
用 法 


描述 : 当 动 画 样式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 添加 和 移 除 指定 的 
Class。 


返回 : jQuery 


.SwitchClass( removeClassName, addClassName [, duration ] [, easint 





参数 类 型 描述 p 
要 从 每 个 匹配 的 元 素 的 class 属 
性 中 移 除 的 一 个 或 多 个 class 名 
称 ， 多 个 class 名 称 用 空格 分 隔 


o 


要 添加 到 每 个 匹配 的 元 素 的 class 
属性 中 的 一 个 或 多 个 class 名 


removeClassName String 


addClassName String 称 ， 多 个 class 名 称 用 空格 分 
UN 
Number 一 个 字符 串 或 一 个 数字 ， 指 定 动 
at String 画 将 运行 多 久 。 a 
ONE 已 一 
easing String a 指示 要 使 用 的 swing 
complete Function) ， 一 且 动 画 完 成 时 要 调用 的 函数 。 


.switchClass( removeClassName, addClassName [, options ] ) 


参数 类 型 描述 


要 从 每 个 匹配 的 元 素 的 class 属性 中 移 除 的 一 
removeClassName String ”个 或 多 个 class 名 称 ， 多 个 class 名 称 用 空格 


分 隔 。 
要 添加 到 每 个 匹配 的 元 素 的 class 属性 中 的 一 
addClassName String 个 或 多 个 class 名 称 ， 多 个 class 名 称 用 空格 
分 隔 。 
options Object ”所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 


e duration (默认 值 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e easing (默认 值 : swing ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing HA. 

e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应 用 到 

匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因 为 判断 元 素 是 否 是 动画 的 后 代 的 

代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长 。 

queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 

示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 

1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 

表示 的 队列 中 。 


.switchClass() 方法 允许 您 在 动画 过 渡 中 ， 添 加 Class 的 同时 移 除 Class, 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， 包 括 fupe , JU 
自 定义 动画 持续 时 间 和 casing HRM, Fase hte T — 1 [173. 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
画 化 的 样式 都 将 在 动画 结束 时 改变 。 


该 插件 扩展 自 jQuery 内 置 的 .switchClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.switchClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 
生 预 期 的 行为 。 


实例 


添加 class "blue" 到 匹配 的 元 素 ， 并 从 匹配 的 元 素 中 移 除 class "big". 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>.switchClass() 演示 </title> 


<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 


<style> 

div { 
width: 100px; 
height: 100px; 


j 
.big { 
width: 200px; 
height: 200px; 
} 
.blue { 


} 
</style> 


background-color: #ccc; 


background-color: #00f; 


«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


</head> 
<body> 


<div class="big"></div> 


<script> 


$( "div" ).click(function() { 
$( this ).switchClass( "big", 


3): 


«/script» 


«/body» 
«/html» 


Bp p——[ ms 


"blue", 1000, 


"easeInOutQuad" ); 





jQuery UI API - .toggle() 


所 属 类 别 


特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) | 方 
法 (Methods) 


用 法 


描述 : 使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 素 。 
返回 : jQuery 


.toggle( effect [, options ] [, duration ] [, complete ] ) 


参数 类 型 描述 SA 
值 
effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 
options Object 特效 具体 的 设置 和 easing. 
BY 一 个 字 x 或 一 个 类 = = Wisk: 将 in 
duration Number 或 一 个 字符 串 或 人 数字， 指定 动画 将 运 400 
String 行 多 久 。 
complete Function() 一 有 旦 动画 完成 时 要 调用 的 函数 。 


.toggle( options ) 


参数 类 型 描述 


options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect。 


e effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

e easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing ERX. 

e duration (默认 值 : 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

e queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 


表示 的 队列 中 。 


该 插件 扩展 自 jQuery AEH .toggle() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.toggle() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 
期 的 行为 。 


实例 
使 用 折 释 特效 (Fold Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.toggle() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div d 
width: 100px; 
height: 100px; 
background: £Zccc; 
border: 1px solid #000; 
} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button>Wie div</button> 
<div></div> 


<script> 
$( "button" ).click(function() { 

$( "div" ).toggle( "fold", 1000 ); 
3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - .toggleClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) 
用 法 


描述 : 当 动 画 样 式 改变 时 ， 根 据 Class 是 否 存 在 以 及 switch 参数 的 值 ， 为 匹配 的 元 
素 集 合 内 的 每 个 元 素 添 加 或 移 除 一 个 或 多 个 Class。 


返回 : jQuery 


.toggleClass( className [, switch ] [, duration ] [, easing ] [, c« 





" T gr; 
参数 类 型 His 默认 
值 
为 匹配 的 元 素 集 合 中 的 每 个 元 素 要 切换 的 
ClassName String 一 个 或 多 个 class 名 称 ， 多 个 class 名 称 
用 空格 分 隔 。 
= 已 中 - hb uni 
switch Boolean Ue 指定 class 应 被 添加 还 是 被 
. Number 一 个 字符 串 或 一 个 数字 ， 指 定 动画 将 运行 
duration 或 String 多 久 。 400 
一 个 字 ore d j K] 
easing String 5 字符 串 ， 指 示 要 使 用 的 easing EX suus 


complete Function) — E z/i&ise px ed 2 38 FH BER ZA, 


.toggleClass( className [, switch ] [, options ] ) 


ClassName String 


参数 xm 描述 


为 匹配 的 元 素 集 合 中 的 每 个 元 素 要 切换 的 一 个 或 多 个 
class 名 称 ， 多 个 class 名 称 用 空格 分 隔 。 


switch Boolean ， 一 个 布尔 值 ， 指 定 class 应 被 添加 还 是 被 移 除 。 
options Object 所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 
e duration (默认 值 : 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 


个 数字 ， 指 定 动画 将 运行 多 久 。 
easing (默认 值 : swing ) 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing HR. 


e complete 类 型 : Function() 描述 : — E z/ji&ise px sd BRAY, 


children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应 用 到 
匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因 为 判断 元 素 是 否 是 动画 的 后 代 的 
代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长 。 

queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 #2, queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 
表示 的 队列 中 。 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI 的 class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， 包 括 ea ， 人 允许 
自 定义 动画 持续 时 间 和 easing 范 数 ， 在 动画 完成 时 也 提供 了 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
画 化 的 样式 都 将 在 动画 结束 时 改变 。 


该 插件 扩展 自 jQuery AEH .toggleClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.toggleClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 
生 预 期 的 行为 。 


实例 


为 匹配 的 元 素 切 换 class "big-blue"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.toggleClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
} 
.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div></div> 


<script> 
$( "div" ).click(function() { 

$( this ).toggleClass( "big-blue", 1000, "easeOutSine" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 转移 特效 (Transfer Effect) 
所 属 类 别 

特效 (Effects) 

用 法 


描述 : 把 一 个 元 素 的 轮廓 转移 到 另 一 个 元 素 。 


transfer 

参数 类 型 描述 
className String 转移 的 元 素 将 接收 的 参数 化 的 class 名 称 。 
to String jQuery 选择 器 ， 要 转移 到 的 元 素 。 


当 尝 试 两 个 元 素 之 间 的 可 视 化 交互 时 非常 有 用 。 


转移 的 元 素 本 身 带 有 class ui-effects-transfer ， 其 他 的 样式 需要 由 您 来 定 
义 ， 上 比如 添加 背景 或 边框 。 


实例 


在 绿色 元 素 上 点 击 把 它 转移 到 另 一 个 元 素 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 转 移 特 效 (Transfer Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div.green { 
width: 100px; 
height: 80px; 
background: green; 
border: 1px solid black; 
position: relative; 
J 
div.red { 
margin-top: 10px; 
width: 50px; 
height: 30px; 
background: red; 
border: 1px solid black; 
position: relative; 
J 
.ui-effects-transfer ( 
border: 1px dotted black; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div class="green"></div> 
<div class="red"></div> 


<script> 
$( "div" ).click(function() { 

var i = 1 - $( "div" ).index( this ); 

$( this ).effect( "transfer", ( to: $( "div" ).eq( i ) }, 1000 ), 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API 类别 


API 


.addClass() 


颜色 动画 


(Color 


Animation) 


.effect() 


hide() 


前 端 教程 ; 


FAVE 


.removeClass() 


.Show() 


.SwitchClass() 


.toggle() 


.toggleClass() 
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当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 
合 内 的 每 个 元 素 添 加 指定 的 Class。 


使 用 .animate() 实现 颜色 动画 效果 。 


对 一 个 元 素 应 用 动画 特效 。 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 
合 内 的 每 个 元 素 移 除 指 定 的 Class。 


使 用 自 定 义 效果 来 显示 匹配 的 元 素 。 


当 动 画 样 式 改 变 时 ， 
合 内 的 每 个 元 素 添 加 和 移 除 指定 


Class。 


使 用 自 定 义 效 果 来 显示 或 隐藏 匹配 的 


元 素 。 


当 动 画 样 式 改变 时 ， 根 据 Class 是 否 
存在 以 及 switch 参数 的 值 ， 为 匹配 的 
元 素 集合 内 的 每 个 元 素 添 加 或 移 除 一 


个 或 多 个 Class。 


- 特效 核心 (Effects Core) 


由 jquery.ui.effect.js 提供 的 功能 。 除 了 下 面 列 出 的 方法 ，jquery.ui.effect.js 还 
一 些 Easings。 


下 包括 


也 属于 类 别 


特效 (Effects) | 
方法 重 载 (Method 


Overrides) 


特效 (Effects) | 
方法 (Method) 


特效 (Effects) | 

方法 重 载 (Method 
Overrides) | 方法 
(Method) 


特效 (Effects) | 
方法 重 载 (Method 


Overrides) 


特效 (Effects) | 

AKER (Method 
Overrides) | 方法 
(Method) 


特效 (Effects) 


特效 (Effects) | 

方法 重 载 (Method 
Overrides) | 方法 
(Method) 


特效 (Effects) | 
方法 重 载 (Method 


Overrides) 
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jQuery UI API - 颜色 动画 (Color Animation) 


jQuery UI 特效 核心 添加 了 使 用 rgb() 、 rgba() 、 十 六 进 制 值 或 者 颜色 名 比 
如 "aqua" 来 动态 改变 color 属性 的 功能 。 只 需要 包含 jQuery Ul 特效 核心 文 
件 ， .animate() 就 会 支持 颜色 。 


支持 下 列 属性 : 


backgroundColor 
borderBottomColor 
borderLeftColor 
borderRightColor 
borderTopColor 
color 
columnRuleColor 
outlineColor 
textDecorationColor 
textEmphasisColor 


对 颜色 动画 的 支持 来 自 jQuery Color 插件 。Color 插件 提供 了 一 些 用 于 颜色 的 函 
数 。 如 需 查 看 完整 文档 ， 请 访问 jQuery Color 文档 。 


Class 动画 (Class Animations) 


虽然 可 以 直接 对 color 属性 进行 动画 化 ， 但 是 通常 采用 另 一 种 更 好 的 方法 ， 即 在 一 
个 class 中 包含 样式 。jQuery Ul 提供 了 一 些 动态 添加 或 去 除 CSS 类 的 方法 ， 分 别 
是 .addclass() . .removeClass() 、  .toggleClass() 和 

Eee lass (ue 这 些 方法 将 自动 确定 哪些 属性 需要 改变 ， 哪些 需要 应 用 适当 
的 动画 。 


实例 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 颜 色 动 画 (Color Animation) 演示 </title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.4/the 
<style> 
#elem { 
color: #006; 
background-color: #aaa; 
font-size: 25px; 
padding: 1em; 
text-align: center; 
} 
</style> 
«script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></sci 
</head> 
<body> 


«div id="elem"> 颜 色 动 画 </div> 
«button id="toggle"> 改 变 颜色 </button> 


<script> 
$( "#toggle" ).click(function() { 
$( "#elem" ).animate({ 
color: "green", 
backgroundColor: "rgb( 20, 20, 20 )" 
3); 
3); 


</script> 


</body> 
</html> 





jQuery UI API 类 别 - 交互 (Interactions) 


jQuery Ul 提供 了 一 套 基 于 鼠标 的 交互 。 


API 描述 也 属于 类 别 
立 
nom (Draggable 允许 使 用 鼠标 移动 元 素 。 
可 放置 小 部 件 (Droppable , 
Widget) 为 可 拖 搜 小 部 件 创建 目标 。 
鼠标 交互 (Mouse — 实用 工具 
Interaction) 基本 交互 层 。 (Utilities) 
可 调整 尺寸 小 部 件 Ea 1- Mr ae 一 HA 
(Resizable Widget) 48 FH Bg AUF CRN RT. 
可 选择 小 部 件 (Selectable  ， 使 用 鼠标 选择 单个 元 素 或 一 组 
Widget) 元 素 。 


可 排序 小 部 件 (Sortable 使 用 鼠标 调整 列表 中 或 者 网 格 
Widget) 中 元 素 的 排序 。 


a 


i C) arv lll N Lh ( ntarartinne ) 
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jQuery UI API - 可 拖 搜 小 部 件 (Draggable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 允许 使 用 鼠标 移动 元 素 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
e BÆ (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : 让 被 选 元 素 可 被 鼠标 拖 搜 。 如 果 您 不 只 是 拖 搜 ， 而 是 拖 搜 & 放置 ， 请 查看 
jQuery UI 可 放置 (Droppable) 插件 ， 为 可 拖 搜 元 素 提供 了 一 个 放置 目标 。 


快速 导航 


addClassesappendToaxiscancelconnectToSortablecontainmentcursorcursorAtde 


addClasses 
类 型 : Boolean 


描述 : 如 果 设 置 为 false ， 将 阻止 ui-draggable class 被 添加 。 当 在 数 百 个 
元 素 上 调用 .draggable() 时 ， 这 人 么 设置 有 利于 性 能 优化 。 


代码 实例 : 
初始 化 带 有 指定 addClasses 选项 的 draggable : 


$( ".selector" ).draggable({ addClasses: false }); 


在 初始 化 后 ， 获 取 或 设置 addClasses 选项 : 


// getter 
var addClasses = $( ".selector" ).draggable( "option", "addClasses' 


// setter 
$( ".selector" ).draggable( "option", "addClasses", false ); 








q 





默认 值 : true 


appendTo 

类 型 : jQuery 或 Element 或 Selector 或 String 

描述 : 当 拖 搜 时 ，draggable BUF (helper) 要 追加 到 哪 一 个 元 素 。 
支持 多 个 类 型 : 


jQuery : 一 个 jQuery 对 象 ， 包 含 助手 (helper) 要 追加 到 的 元 素 。 
Element : 要 追加 助手 (helper) 的 元 素 。 

Selector : 一 个 选择 器 ， 指 定 哪 一 个 元 素 要 追加 助手 (helper) 。 

String: FE "parent" 将 促使 助手 (helper) 成 为 draggable 的 同 级 。 
代码 实例 : 


初始 化 带 有 指定 appendTo 选项 的 draggable : 


$( ".selector" ).draggable({ appendTo: "body" }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 


// getter 
var appendTo = $( ".selector" ).draggable( "option", "appendTo" ); 


// setter 
$( ".selector" ).draggable( "option", "appendTo", "body" ); 


二 2) 


默认 值 : "parent" 


axis 

类 型 : String 

描述 : 约束 在 水 平 轴 (x) 或 垂直 轴 (y) 上 拖 搜 。 可 能 的 值 : "x", "y" 。 
代码 实例 : 


初始 化 带 有 指定 axis 选项 的 draggable : 


$( ".selector" ).draggable({ axis: "x" }); 


在 初始 化 后 ， 获 取 或 设置 axis 选项 : 


// getter 
var axis = $( ".selector" ).draggable( "option", "axis" ); 


// setter 


$( ".selector" ).draggable( "option", "axis", "x" ); 


默认 值 : false 


cancel 

类 型 : Selector 

描述 : 防止 从 指定 的 元 素 上 开始 拖 搜 。 

代码 实例 : 

初始 化 带 有 指定 cancel 选项 的 draggable : 


$( ".selector" ).draggable({ cancel: ".title" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 
// getter 


var cancel = $( ".selector" ).draggable( "option", "cancel" ); 


// setter 
$( ".selector" ).draggable( "option", "cancel", ".title" ); 


默认 值 : "input, textarea, button, select, option" 


connectToSortable 
类 型 : Selector 


描述 : 允许 draggable 放置 在 指定 的 sortable 上 。 如 果 使 用 了 该 选项 ， 一 个 
draggable 可 被 放置 在 一 个 sortable 列表 上 ， 然 后 成 为 列表 的 一 部 分 。 注 

意 : helper 选项 必须 设置 为 "clone" ， 以 便 更 好 地 工作 。 必 须 包 含 可 排序 小 
部 件 (Sortable Widget) 。 


代码 实例 : 


初始 化 带 有 指定 connectToSortable 选项 的 draggable : 


$( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); 


‘| = zee | 


在 初始 化 后 ， 获 取 或 设置 connectToSortable 选项 : 








// getter 
var connectToSortable = $( ".selector" ).draggable( "option", "conr 


// setter 
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sot 
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默认 值 : false 





containment 


X 8! : Selector 或 Element 或 String 或 Array 
描述 : 约束 在 指定 元 素 或 区 域 的 边界 内 拖 搜 。 
支持 多 个 类 型 : 
。 Selector : 可 拖 搜 元 素 将 被 包含 在 selector 第 一 个 元 素 的 边界 内 。 如 果 未 找到 


元 素 ， 则 不 设置 containment, 
e Element : 可 拖 搜 元 素 将 被 韩寒 在 元 素 的 边界 。 
e String : 可 能 的 值 : "parent" 、 "document" , "window" 。 
e Array : 一 个 数组 ， 以 形式 [ x1，y1，x2，y2 ] 定义 元 素 的 边界 。 


代码 实例 : 


初始 化 带 有 指定 containment 选项 的 draggable : 


$( ".selector" ).draggable({ containment: "parent" }); 


在 初始 化 后 ， 获 取 或 设置 containment 选项 : 


// getter 
var containment = $( ".selector" ).draggable( "option", "containmer 


// setter 
$( ".selector" ).draggable( "option", "containment", "parent" ); 
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默认 值 : false 


cursor 

类 型 : String 

描述 : 拖 搜 操作 期 间 的 CSS 光标 。 
代码 实例 : 


初始 化 带 有 指定 cursor 选项 的 draggable : 


$( ".selector" ).draggable({ cursor: "crosshair" }); 


在 初始 化 后 ， 获 取 或 设置 cursor 选项 : 


// getter 
var cursor = $( ".selector" ).draggable( "option", "cursor" ); 


// setter 
$( ".selector" ).draggable( "option", "cursor", "crosshair" ); 


默认 值 : "auto" 


cursorAt 
类 型 : Object 


描述 : 设置 拖 搜 助 手 (helper) 相对 于 鼠标 光标 的 偏 移 。 坐 标 可 通过 一 个 或 两 个 键 
的 组 合成 一 个 哈 希 给 出 : { top, left, right, bottom } o 


代码 实例 : 


初始 化 带 有 指定 cursorAt 选项 的 draggable : 


$( ".selector" ).draggable({ cursorAt: { left: 5 } }); 


在 初始 化 后 ， 获 取 或 设置 cursorAt 选项 : 


// getter 
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" ); 


// setter 
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } ); 
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默认 值 : false 


delay 
类 型 : Number 


描述 : 鼠标 按 下 后 直到 抑 搜 开始 为 止 的 时 间 ， 以 毫秒 计 。 该 选项 可 以 防止 点 击 在 有 某 
个 元 素 上 时 不 必要 的 拖 搜 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 draggable : 


$( ".selector" ).draggable({ delay: 300 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).draggable( "option", "delay" ); 


// setter 
$( ".selector" ).draggable( "option", "delay", 300 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 draggable. 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 draggable : 


$( ".selector" ).draggable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).draggable( "option", "disabled" ); 


// setter 
$( ".selector" ).draggable( "option", "disabled", true ); 
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默认 值 : false 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 拖 搜 开 始 前 必须 移动 的 距离 ， 以 像素 计 。 该 选项 可 以 防止 点 击 在 
某 个 元 素 上 时 不 必要 的 拖 搜 。 


代码 实例 : 


初始 化 带 有 指定 distance 选项 的 draggable : 


$( ".selector" ).draggable({ distance: 10 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).draggable( "option", "distance" ); 


// setter 
$( ".selector" ).draggable( "option", "distance", 10 ); 


b Bi] 
默认 值 : 1 

grid 

类 型 : Array 


描述 : 对 齐 拖 搜 助手 (helper) 到 网 格 ， 每 个 x 和 y 像素 。 数 组 形式 必须 是 
[xy]。 


代码 实例 : 
初始 化 带 有 指定 grid 选项 的 draggable : 


$( ".selector" ).draggable({ grid: [ 50, 20 ] }); 


在 初始 化 后 ， 获 取 或 设置 grid 选项 : 


// getter 
var grid = $( ".selector" ).draggable( "option", "grid" ); 


// setter 
$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] ); 


默认 值 : false 


handle 


类 型 : Selector 或 Element 


描述 : 如 果 指 定 了 该 选项 ， 则 限制 开始 拖 搜 ， 除 非 鼠 标 在 指定 的 元 素 上 按 下 。 只 有 
可 拖 搜 (draggable) 元 素 的 后 代 元 素 才 人 允许 被 拖 搜 。 


代码 实例 : 
初始 化 带 有 指定 handle 选项 的 draggable : 


$( ".selector" ).draggable({ handle: "h2" }); 


在 初始 化 后 ， 获 取 或 设置 handle 选项 : 


// getter 
var handle = $( ".selector" ).draggable( "option", "handle" ); 


// setter 
$( ".selector" ).draggable( "option", "handle", "h2" ); 


默认 值 : false 


helper 

类 型 : String 或 Function() 

描述 : 允许 一 个 helper 元 素 用 于 拖 搜 显示 。 
支持 多 个 类 型 : 


e String : 如 果 设 置 为 "clone" ， 元 素 将 被 克隆 ， 且 克隆 将 被 拖 搜 。 
e Function : 一 个 玉 数 ， 将 返回 拖 搜 时 要 使 用 的 DOMEIement, 


代码 实例 : 
初始 化 带 有 指定 helper 选项 的 draggable : 


$( ".selector" ).draggable({ helper: "clone" }); 


在 初始 化 后 ， 获 取 或 设置 helper 选项 : 
// getter 


var helper = $( ".selector" ).draggable( "option", "helper" ); 


// setter 
$( ".selector" ).draggable( "option", "helper", "clone" ); 


默认 值 : "original" 


iframeFix 


类 型 : Boolean 或 Selector 


描述 : 防止 拖 搜 期 间 iframes 捕捉 鼠标 移动 (mousemove ) 事件 。 在 与 
cursorAt 选项 结合 使 用 时 ， 或 鼠标 光标 未 覆盖 在 助手 (helper) 上 时 ， 非 常 有 
用 。 


支持 多 个 类 型 : 


e Boolean: 当 设 置 为 true 时 ， 透 明 遮 罩 将 被 放置 在 页 面 上 所 有 iframes 
上 。 
e Selector : 匹配 selector MES iframes 将 被 透明 遮 罩 履 盖 。 


代码 实例 : 


初始 化 带 有 指定 iframeFix 选项 的 draggable : 


$( ".selector" ).draggable({ iframeFix: true }); 


在 初始 化 后 ， 获 取 或 设置 iframeFix 选项 : 


// getter 
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" ` 


// setter 
$( ".selector" ).draggable( "option", "iframeFix", true ); 





默认 值 : false 


opacity 


类 型 : Number 

描述 : 当 被 拖 搜 时 助手 (helper) 的 不 透明 度 。 
代码 实例 : 

初始 化 带 有 指定 opacity 选项 的 draggable : 


$( ".selector" ).draggable({ opacity: 0.35 }); 


在 初始 化 后 ， 获 取 或 设置 opacity 选项 : 


// getter 
var Opacity = $( ".selector" ).draggable( "option", "opacity" ); 


// setter 
$( ".selector" ).draggable( "option", "opacity", 0.35 ); 


默认 值 : false 


refreshPositions 


类 型 : Boolean 


描述 : 如 果 设 置 为 true ， 在 每 次 鼠标 移动 (mousemove) 时 都 会 计算 所 有 可 放 
置 的 位 置 。 注 意 : 这 解决 了 高 度 动态 的 问题 ， 但 是 明显 降低 了 性 能 。 


代码 实例 : 


初始 化 带 有 指定 refreshPositions 选项 的 draggable : 


$( ".selector" ).draggable({ refreshPositions: true }); 


在 初始 化 后 ， 获 取 或 设置 refreshPositions 选项 : 


// getter 
var refreshPositions = $( ".selector" ).draggable( "option", "refre 


// setter 
$( ".selector" ).draggable( "option", "refreshPositions", true ); 
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默认 值 : false 





revert 


类 型 : Boolean 或 String 或 Function() 
描述 : 当 拖 搜 停止 时 ， 元 素 是 否 还 原 到 它 的 开始 位 置 
支持 多 个 类 型 : 


e Boolean : 如 果 设 置 为 true ， 元 素 总 会 还 原 。 
e String : 如 果 设 置 为 "invalid" ， 还 原 仅 在 draggable 未 放置 在 droppable 
上 时 发 生 ， 如 果 设 置 为 "valid" 则 相反 。 
e Function : 一 个 函数 ， 确 定 元 素 是 否 还 原 到 它 的 开始 位 置 。 该 玉 数 必须 返回 
true 才能 还 原 元 素 。 
代码 实例 : 


初始 化 带 有 指定 revert 选项 的 draggable : 


$( ".selector" ).draggable({ revert: true }); 


在 初始 化 后 ， 获 取 或 设置 revert 选项 : 


// getter 
var revert = $( ".selector" ).draggable( "option", "revert" ); 


// setter 
$( ".selector" ).draggable( "option", "revert", true ); 


默认 值 : false 


revertDuration 
类 型 : Number 
de : 还 原 (revert) 动画 的 持续 时 间 ， 以 宫 秒 计 。 如 果 revert 选项 是 false 


代码 实例 : 


初始 化 带 有 指定 revertDuration 选项 的 draggable : 


$( ".selector" ).draggable({ revertDuration: 200 }); 


在 初始 化 后 ， 获 取 或 设置 revertDuration 选项 : 


// getter 
var revertDuration = $( ".selector" ).draggable( "option", "revertl 








// setter 

$( ".selector" ).draggable( "option", "revertDuration", 200 ); 
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默认 值 : 500 
scope 


类 型 : String 


描述 : 用 于 组 合 配套 draggable 和 droppable 项 ， 除 了 droppable 的 accept 选 
项 之 外 。 一 个 与 droppable 带 有 相同 的 scope 值 的 draggable 会 被 该 droppable 
接受 。 


代码 实例 : 
初始 化 带 有 指定 scope 选项 的 draggable : 


$( ".selector" ).draggable({ scope: "tasks" }); 


在 初始 化 后 ， 获 取 或 设置 scope 选项 : 


// getter 
var scope = $( ".selector" ).draggable( "option", "scope" ); 


// setter 


$( ".selector" ).draggable( "option", "scope", "tasks" ); 


默认 值 : "default" 


scroll 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 当 拖 搜 时 容器 会 自动 滚动 。 
代码 实例 : 


初始 化 带 有 指定 scroll 选项 的 draggable : 


$( ".selector" ).draggable({ scroll: false }); 


在 初始 化 后 ， 获 取 或 设置 scroll 选项 : 


// getter 
var scroll = $( ".selector" ).draggable( "option", "scroll" ); 


// setter 
$( ".selector" ).draggable( "option", "scroll", false ); 


默认 值 : true 


scrollSensitivity 
类 型 : Number 


描述 : 从 要 滚动 的 视 区 边缘 起 的 距离 ， 以 像素 计 。 距 离 是 相对 于 指针 的 ， 不 是 相对 
于 draggable。 如 果 scroll 选项 是 false 则 忽略 。 


代码 实例 : 


初始 化 带 有 指定 scrollSensitivity 选项 的 draggable : 


$( ".selector" ).draggable({ scrollSensitivity: 100 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSensitivity 选项 : 


// getter 
var scrollSensitivity = $( ".selector" ).draggable( "option", "scr 


// setter 
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 ); 


默认 值 : 20 





scrollSpeed 
类 型 : Number 


描述 : 当 鼠 标 指 针 获 取 到 在 scrollSensitivity 距离 内 时 ， 窗 体 滚动 的 速度 。 
如 果 scroll 选项 是 false 则 忽略 。 


代码 实例 : 
初始 化 带 有 指定 scrollSpeed 选项 的 draggable : 


$( ".selector" ).draggable({ scrollSpeed: 100 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSpeed 选项 : 


// getter 
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpee 


// setter 
$( ".selector" ).draggable( "option", "scrollSpeed", 100 ); 
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默认 值 : 20 


snap 


类 型 : Boolean 或 Selector 


描述 : 元 素 是 否 对 齐 到 其 他 元 素 。 


支持 多 个 类 型 : 
e Boolean: 当 设 置 为 true 时 ， 元 素 会 对 齐 到 其 它 可 拖 搜 (draggable ) 元 
。 Selector : 一 个 选择 器 ， 指 定 要 对 齐 到 哪个 元 素 。 

代码 实例 : 


初始 化 带 有 指定 snap 选项 的 draggable : 


$( ".selector" ).draggable({ snap: true }); 


在 初始 化 后 ， 获 取 或 设置 snap 选项 : 


// getter 
var snap = $( ".selector" ).draggable( "option", "snap" ); 


// setter 
$( ".selector" ).draggable( "option", "snap", true ); 


默认 值 : false 


snapMode 


类 型 : String 


描述 : AE draggable 将 对 齐 到 对 齐 元 素 的 哪个 边缘 。 如 果 snap 选项 是 
false 则 忽略 。 可 能 的 值 : "inner" 、 "outer" 、 "both" , 


代码 实例 : 
初始 化 带 有 指定 snapMode 选项 的 draggable : 


$( ".selector" ).draggable({ snapMode: "inner" }); 


在 初始 化 后 ， 获 取 或 设置 snapMode 选项 : 


// getter 
var snapMode = $( ".selector" ).draggable( "option", "snapMode" ); 


// setter 
$( ".selector" ).draggable( "option", "snapMode", "inner" ); 


加 [El:::fcl 
默认 值 : "both" 


snapTolerance 
类 型 : Number 


描述 : 从 要 发 生 对 齐 的 对 齐 元 素 边 缘起 的 距离 ， 以 像素 计 。 如 果 snap 选项 是 
false 则 忽略 。 


代码 实例 : 


初始 化 带 有 指定 snapTolerance 选项 的 draggable : 


$( ".selector" ).draggable({ snapTolerance: 30 }); 


在 初始 化 后 ， 获 取 或 设置 snapTolerance 选项 : 


// getter 
var snapTolerance = $( ".selector" ).draggable( "option", "snapTole 


// setter 
$( ".selector" ).draggable( "option", "snapTolerance", 30 ); 
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默认 值 : 20 





stack 


类 型 : Selector 


描述 : 控制 匹配 选择 器 (selector) 的 元 素 集 合 的 z-index， 总 是 在 当前 拖 搜 项 的 前 
面 ， 在 类 似 窗口 管 理 器 这 样 的 事物 中 非常 有 用 。 


代码 实例 : 
初始 化 带 有 指定 stack 选项 的 draggable : 


$( ".selector" ).draggable({ stack: ".products" 3); 


在 初始 化 后 ， 获 取 或 设置 stack 选项 : 


// getter 
var stack = $( ".selector" ).draggable( "option", "stack" ); 


// setter 


$( ".selector" ).draggable( "option", "stack", ".products" ); 


默认 值 : false 


zlndex 

类 型 : Number 

描述 : 当 被 拖 搜 时 ， 助 手 (helper) 的 Z-index。 
代码 实例 : 

初始 化 带 有 指定 zIndex 选项 的 draggable : 


$( ".selector" ).draggable({ zIndex: 100 }); 


在 初始 化 后 ， 获 取 或 设置 zIndex 选项 : 


// getter 
var zIndex = $( ".selector" ).draggable( "option", "zIndex" ); 


// setter 
$( ".selector" ).draggable( "option", "zIndex", 100 ); 


默认 值 : false 


方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 draggable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).draggable( "destroy" ) 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 draggable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).draggable( "disable" ) 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 draggable, 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).draggable( "enable" ) 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 


e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).draggable( "option", "disabled" ` 


gr 








option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 draggable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).draggable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 draggable 选项 的 值 。 


e optionName X Z! : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).draggable( "option", "disabled", true ) 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 4 draggable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 


调用 该 方法 : 


$( ".selector" ).draggable( "option", { disabled: true } ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 draggable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).draggable( "widget" ) 


事件 


create( event, ui ) 
类 型 : dragcreate 
描述 : 当 draggable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 draggable : 


$( ".selector" ).draggable({ 
create: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 dragcreate 事件 : 


$( ".selector" ).on( "dragcreate", function( event, ui ) {} ); 


drag( event, ui ) 


类 型 : drag 
描述 : 在 拖 搜 期 间 当 鼠标 移动 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o nd F : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 CSS 位 置 ， 比 如 
{ top, left ) 对 象 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 偏 移 位 置 ， 比 如 
{ top, left ) 对 象 。 


代码 实例 : 
初始 化 带 有 指定 drag 回调 的 draggable : 
$( ".selector" ).draggable({ 


drag: function( event, ui ) {} 


2r 


绑 定 一 个 事件 监听 器 到 drag 事件 : 


$( selector" ).on( "drag", function( event, ui ) {} ); 


start( event, ui ) 
类 型 : dragstart 
描述 : 当 拖 搜 开始 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o iUe c : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 CSS 位 置 ， 比 如 
{ top, left } 对 象 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 偏 移 位 置 ， 比 如 
{ top, left } 对 象 。 


代码 实例 : 
初始 化 带 有 指定 start 回调 的 draggable : 


$( ".selector" ).draggable({ 
start: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 dragstart 事件 : 


$( ".selector" ).on( "dragstart", function( event, ui ) {} ); 


stop( event, ui ) 


类 型 : dragstop 
描述 : 当 拖 搜 停止 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o jud > : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 CSS 位 置 ， 比 如 
{ top, left } 对 象 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 偏 移 位 置 ， 比 如 
{ top, left } 对 象 。 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 draggable : 


$( ".selector" ).draggable({ 
stop: function( event, ui ) {} 


3); 


线 定 一 个 事件 监听 器 到 dragstop 事件 : 


$( ".selector" ).on( "dragstop", function( event, ui ) {} ); 


实例 


一 个 简单 的 jQuery UI 可 拖 搜 小 部 件 (Draggable Widget) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 拖 搜 小 部 件 (Draggable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#draggable { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="draggable"> 请 拖 搜 我 1 </div> 
<script> 
$( "#draggable" ).draggable(); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 可 放置 小 部 件 (Droppable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 为 可 拖 搜 小 部 件 创建 目标 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
e BÆ (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery Ul 可 放置 (Droppable) 插件 让 被 选 元 素 可 放置 (意味 着 它们 在 拖 搜 
后 接受 被 放置 ) 。 您 可 以 逐个 指定 哪 一 个 draggable 会 接受 。 
快速 导航 


选项 


acceptactiveClassaddClassesdisabledgreedyhoverClassscopetolerance | destr 


accept 

类 型 : Selector 或 Function() 

描述 : 控制 哪个 可 拖 搜 (draggable) 元 素 可 被 droppable 接受 。 

支持 多 个 类 型 : 
e Selector: 一 个 选择 器 ， 指 定 哪个 可 抑 搜 (draggable) 元 素 可 被 droppable 接 
e ae, : 一 个 函数 ， 将 被 页 面 上 每 个 draggable 调用 (作为 第 一 个 参数 传 

MARR) 。 如 果 draggable 被 接受 ， 该 函数 必须 返回 true o 
代码 实例 : 
初始 化 带 有 指定 accept 选项 的 droppable : 


$( ".selector" ).droppable({ accept: ".special" }); 


在 初始 化 后 ， 获 取 或 设置 accept 选项 : 


// getter 
var accept = $( ".selector" ).droppable( "option", "accept" ); 


// setter 
$( ".selector" ).droppable( "option", "accept", ".special" ); 


默认 值 : "nx" 


activeClass 
X 8! : String 


描述 : 如 果 指 定 了 该 选项 ， 当 一 个 可 接受 的 draggable 被 拖 搜 时 ，class 将 被 添加 
到 droppable。 


代码 实例 : 


初始 化 带 有 指定 activeClass 选项 的 droppable : 


$( ".selector" ).droppable({ activeClass: "ui-state-highlight" }); 
了 — Bi 


在 初始 化 后 ， 获 取 或 设置 activeClass 选项 : 


// getter 
var activeClass = $( ".selector" ).droppable( "option", "activeCla: 


// setter 
$( ".selector" ).droppable( "option", "activeClass", "ui-state-higl 


Ti — 3 


默认 值 : false 





addClasses 


类 型 : Boolean 


描述 : 如 果 设 置 为 ”false ， 将 防止 ui-droppable class 被 添加 。 这 在 数 百 个 
元 素 上 调用 .droppable() 时 有 助 于 性 能 优化 。 


代码 实例 : 


初始 化 带 有 指定 addclasses 选项 的 droppable : 


$( ".selector" ).droppable({ addClasses: false }); 


在 初始 化 后 ， 获 取 或 设置 addClasses 选项 : 


// getter 
var addClasses = $( ".selector" ).droppable( "option", "addClasses' 


// setter 
$( ".selector" ).droppable( "option", "addClasses", false ); 


PL "i. 


默认 值 : true 





disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 droppable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 droppable : 


$( ".selector" ).droppable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).droppable( "option", "disabled" ); 


// setter 
$( ".selector" ).droppable( "option", "disabled", true ); 


LEN ©) 


默认 值 : false 


greedy 
类 型 : Boolean 


描述 : 默认 情况 下 ， 当 一 个 元 素 被 放置 在 蔚 套 是 droppable 上 时 ， 每 个 droppable 
将 接收 该 元 素 。 然 而 ， 通 过 设置 该 选项 为 true ， 任 何 父 元 素 的 droppable 将 无 
法 接收 该 元 素 。 drop 事件 仍 将 照常 ， 但 会 检查 event.target 以 便 查看 哪个 


droppable 接收 draggable 元 素 。 
代码 实例 : 
初始 化 带 有 指定 greedy 选项 的 droppable : 


$( ".selector" ).droppable({ greedy: true }); 


在 初始 化 后 ， 获 取 或 设置 greedy 选项 : 


// getter 
var greedy = $( ".selector" ).droppable( "option", "greedy" ); 


// setter 
$( ".selector" ).droppable( "option", "greedy", true ); 


默认 值 : false 


hoverClass 
类 型 : String 


描述 : 如 果 指 定 了 该 选项 ， 当 一 个 可 接受 draggable 被 覆盖 在 droppable Ert, 
class 将 被 添加 到 droppable。 


代码 实例 : 


初始 化 带 有 指定 hoverclass 选项 的 droppable : 


$( ".selector" ).droppable({ hoverClass: "drop-hover" }); 


在 初始 化 后 ， 获 取 或 设置 hoverClass 选项 : 


// getter 
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass' 


// setter 
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" ), 


Mees ==s====s==s=ss====== = 


默认 值 : false 





scope 


类 型 : String 


描述 : 用 于 组 合 配套 draggable 和 droppable 项 ， 除 了 droppable 的 accept 选 
项 之 外 。 一 个 与 droppable 带 有 相同 的 scope 值 的 draggable 会 被 该 droppable 
接受 。 


代码 实例 : 
初始 化 带 有 指定 scope 选项 的 droppable : 


$( ".selector" ).droppable({ scope: "tasks" }); 


在 初始 化 后 ， 获 取 或 设置 scope 选项 : 


// getter 
var scope = $( ".selector" ).droppable( "option", "scope" ); 


// setter 
$( ".selector" ).droppable( "option", "scope", "tasks" ); 


默认 值 : "default" 


tolerance 
类 型 : String 


描述 : 指定 用 于 测试 一 个 draggable 是 否 履 盖 在 一 个 droppable 上 的 模式 。 可 能 的 
fà : 


"fit" : draggable Sf #7 droppable E, 

"intersect" : draggable Æ & T£ droppable 上 ， 两 个 方向 上 至 少 5096, 
"pointer" : Wrta Æ #2 droppable E. 

"touch" : draggable & & f£ droppable +, FAAEE T., 

代码 实例 : 


初始 化 带 有 指定 tolerance 选项 的 droppable : 


$( ".selector" ).droppable({ tolerance: "fit" }); 


在 初始 化 后 ， 获 取 或 设置 tolerance 选项 : 


// getter 
var tolerance = $( ".selector" ).droppable( "option", "tolerance" ` 


// setter 
$( ".selector" ).droppable( "option", "tolerance", "fit" ); 


4 — 





默认 值 : "intersect" 
方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 droppable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).droppable( "destroy" ) 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 droppable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).droppable( "disable" ); 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 droppable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).droppable( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).droppable( "option", "disabled" . 


| = sooo 





option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 droppable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).droppable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 droppable 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).droppable( "option", "disabled", true ); 


option( options ) 


类 型 : jQuery (plugin only) 


描述 : 为 droppable 设置 一 个 或 多 个 选项 。 

e options 类 型 : Object 描述 : 要 设置 的 option-value 对 。 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).droppable( "option", { disabled: true } ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 droppable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).droppable( "widget" ) 


事件 


activate( event, ui ) 


类 型 : dropactivate 


描述 : 当 一 个 可 接受 的 draggable 开始 拖 搜 时 触发 。 如 果 您 想 让 droppable 被 放置 
vi. 该 选项 就 可 以 派 上 用 场 。 


e event 类 型 : Event 
e ui 类 型 : Object 


o draggable 3: €! : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o helper 类 型 : 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
(helper) 。 


o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
置 ， 比 如 { top, left ) 对 象 。 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 
比如 { top, left } 对 象 。 
代码 实例 : 


初始 化 带 有 指定 activate 回调 的 droppable : 


$( ".selector" ).droppable({ 
activate: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 dropactivate 事件 : 


$( ".selector" ).on( "dropactivate", function( event, ui ) 4? ); 


create( event, ui ) 


类 型 : dropcreate 
描述 : 当 droppable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 droppable : 


$( ".selector" ).droppable({ 
create: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 dropcreate 事件 : 


$( "selector" ).on( "dropcreate", function( event, ui ) t5; 


deactivate( event, ui ) 


类 型 : dropdeactivate 
描述 : 当 一 个 可 接受 的 draggable 停止 拖 搜 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o draggable 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o ee - : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
E, ILAN { top, left ) WR. 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 ， 


比如 { top, left } 对 象 。 
代码 实例 : 
初始 化 带 有 指定 deactivate 回调 的 droppable : 
$( ".selector" ).droppable({ 


deactivate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dropdeactivate 事件 : 


$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} ); 


M | 
drop( event, ui ) 


类 型 : drop 


描述 : 当 一 个 可 接受 的 draggable 被 放置 在 droppable (基于 
[tolerance](#option-tolerance) 选项 ) 上 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o draggable 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o pain P : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
置 ， 比 如 { top, left ) WR. 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 ， 
比如 { top, left ) 对 象 。 


代码 实例 : 
初始 化 带 有 指定 drop 回调 的 droppable : 


$( ".selector" ).droppable({ 
drop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 drop 事件 : 


$( ".selector" ).on( "drop", function( event, ui ) {} ); 


out( event, ui ) 


类 型 : dropout 


描述 : 当 droppable 被 拖 搜 出 droppable (基于 
[tolerance](#option-tolerance) 选项 ) 时 触发 。 


e event 类 型 : Event 

e ui 类 型 : Object 
注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 out 回调 的 droppable : 


$( ".selector" ).droppable({ 
out: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 dropout 事件 : 


$( ".selector" ) .on( “dropout”, function( event, ui ) 13 ); 


over( event, ui ) 


类 型 : dropover 


描述 : 当 一 个 可 接受 的 draggable 被 拖 搜 在 droppable (基于 
[tolerance](#option-tolerance) 选项 ) 上 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o draggable 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o pn m : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
置 ， 比 如 { top, left ) WR. 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 ， 
比如 ( top, left ) 对 象 。 


代码 实例 : 
初始 化 带 有 指定 over 回调 的 droppable : 
$( ".selector" ).droppable({ 


over: function( event, ui ) {} 


T): 


绑 定 一 个 事件 监听 器 到 dropover 事件 : 


$( ".selector" ).on( "dropover", function( event, ui ) {} ); 


实例 


一 对 draggable 和 droppable 元 素 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 放置 小 部 件 (Droppable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#draggable { 
width: 100px; 
height: 100px; 
background: £Zccc; 


} 

#droppable { 
position: absolute; 
left: 250px; 
top: 0; 
width: 125px; 
height: 125px; 
background: #999; 
color: Zfff; 
padding: 10px; 


} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="droppable"> 请 放置 到 这 里 1 </div> 
<div id="draggable"> 请 拖 搜 我 1 </div> 


<script> 
$( "#draggable" ).draggable(); 
$( "#droppable" ).droppable(1 
drop: function() { 
alert( "dropped" ); 
} 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 鼠标 交互 (Mouse Interaction) 


所 属 类 别 


交互 (Interactions) | 实用 工具 (Utilities) 


用 法 
描述 : 基本 交互 层 。 
依赖 : 

e MEX (Widget Factory) 
注释 :与 jQuery.Widget AU, BRA RBJEHBSATIEIBEEERB. REPS 
给 其 他 小 部 件 继承 用 的 基础 层 。 该 页 面 有 添加 到 jQuery.widget 的 文档 ， 但 是 
它 包含 了 不 能 被 覆盖 的 内 部 方法 。 公 共 的 API 是 


_mouseStart() 、 _mouseDrag() 、 _mouseStop() 和 
_mouseCapture() o 


快速 导航 
选项 


canceldelaydistance _mouseCapture_mouseDelayMet_mouseDestroy_mouse 


cancel 

类 型 : Selector 

描述 : 防止 从 指定 的 元 素 上 开始 交互 。 
代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 mouse : 


$( ".selector" ).mouse({ cancel: ".title" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).mouse( "option", "cancel" ); 


// setter 


$( ".selector" ).mouse( "option", "cancel", ".title" ); 


默认 值 : "input, textarea, button, select, option" 


delay 
类 型 : Number 


描述 : 鼠标 按 下 后 直至 交互 开始 的 事件 ， 以 毫秒 计 。 该 选项 可 用 于 防止 点 击 在 一 个 
元 素 上 时 不 必要 的 交互 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 mouse : 


$( ".selector" ).mouse({ delay: 300 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).mouse( "option", "delay" ); 


// setter 


$( ".selector" ).mouse( "option", "delay", 300 ); 


默认 值 : 0 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 交互 开始 前 鼠标 必须 移动 的 距离 ， 以 像素 计 。 该 选项 可 用 于 防止 
点 击 在 一 个 元 素 上 时 不 必要 的 交互 。 


代码 实例 : 
初始 化 带 有 指定 distance 选项 的 mouse : 


$( ".selector" ).mouse({ distance: 10 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).mouse( "option", "distance" ); 


// setter 


$( ".selector" ).mouse( "option", "distance", 10 ); 


默认 值 : 1 
方法 


_mouseCapture() 
类 型 : Boolean 


描述 : 决定 交互 是 否 应 该 基于 交互 的 事件 目标 开始 。 默 认 的 实现 总 是 返回 


true ov 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseCapture 方法 : 


$( ".selector" ).mouse( " mouseCapture" ); 


. mouseDelayMet() 

类 型 : Boolean 

描述 : 决定 [delay](#option-delay) 选项 是 否 满足 当前 交互 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseDelayMet 方法 : 


$( ".selector" ).mouse( " mouseDelayMet" ); 


. mouseDestroy() 


类 型 : jQuery (plugin only) 


描述 : BRAS AER, SUDAGSRIKEBJ RYAN destroy() A 


法 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseDestroy 方法 : 


$( ".selector" ).mouse( " mouseDestroy" ); 


. mouseDistanceMet() 

类 型 : Boolean 

描述 : 决定 [distance](Zoption-distance) 选项 是 否 满 足 当 前 交互 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseDistanceMet 方法 : 


$( ".selector" ).mouse( " mouseDistanceMet" ); 


_mouseDown() 


类 型 : jQuery (plugin only) 


描述 : 处 理 交 互 的 开始 。 确 认 与 主要 的 鼠标 按钮 关联 的 事件 ， 确 保 
[delay](#option-delay) 与 [distance](#option-distance) 在 交互 启动 

之 前 得 到 满足 。 当 交互 已 经 准备 开始 ， 为 要 义理 的 扩展 小 部 件 调 用 
[_mouseStart](#method-_mouseStart) 方法 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseDown 方法 : 


$( ".selector" ).mouse( " mouseDown" ); 


_mouseDrag() 


类 型 : jQuery (plugin only) 


描述 : 扩展 小 部 件 应 实现 一 个 _mouseDrag() 方法 ， 来 处 理 交 互 的 每 个 移动 。 该 
方法 将 接收 与 鼠标 移动 相关 联 的 鼠标 事件 。 


。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
调用 _mouseDrag 方法 : 


$( ".selector" ).mouse( " mouseDrag" ); 


_mouselnit() 


类 型 : jQuery (plugin only) 


描述 : 初始 化 交互 事件 处 理 程序 。 这 必须 调用 来 自 扩 展 的 小 部 件 的 create() 
方法 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouselnit 方法 : 


$( ".selector" ).mouse( " mouseInit" ); 


_mouseMove() 

类 型 : jQuery (plugin only) 

描述 : 义理 交互 的 每 个 移动 。 为 要 义理 的 扩展 小 部 件 调用 _mouseDrag 方法 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseMove 方法 : 


$( ".selector" ).mouse( " mouseMove" ) 


. mouseStart() 
类 型 : jQuery (plugin only) 


描述 : 扩展 小 部 件 应 实现 一 个 _mouseStart() 方法 ， 来 处 理 交 互 的 开始 。 该 方 
法 将 接收 与 交互 开始 相关 联 的 鼠标 事件 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseStart 方法 : 


$( ".selector" ).mouse( "_mouseStart" ); 


_mouseStop() 


类 型 : jQuery (plugin only) 


描述 : 扩展 小 部 件 应 实现 一 个 _mouseStop() 方法 ， 来 处 理 交 互 的 结束 。 该 方法 
将 接收 与 交互 结束 相关 联 的 鼠标 事件 。 


。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseStop 方法 : 


$( ".selector" ).mouse( " mouseStop" ); 


_mouseUp() 

类 型 : jQuery (plugin only) 

描述 : 义理 交互 的 结束 。 为 要 义理 的 扩展 小 部 件 调用 _mouseStonp 方法 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseUp 方法 : 


$( ".selector" ).mouse( " mouseUp" ); 


jQuery UI API - 可 调整 尺寸 小 部 件 (Resizable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 使 用 鼠标 改变 元 素 的 尺寸 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery Ul 可 调整 尺寸 (Resizable) 插件 让 被 选 元 素 可 调整 尺寸 (意味 着 它 
们 有 可 拖 搜 的 调整 大 小 的 手柄 ) 。 您 可 以 指定 一 个 或 多 个 手柄 ， 也 可 以 指定 宽度 和 
高 度 的 最 小 值 也 最 大 值 。 


附加 说 明 : 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 
定义 的 主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


快速 导航 


alsoResizeanimateanimateDurationanimateEasingaspectRatioautoHidecancelco 


alsoResize 

类 型 : Selector 或 jQuery 或 Element 

描述 : 一 个 或 多 个 通过 resizable 元 素 进行 同步 调整 尺寸 的 元 素 。 
代码 实例 : 


初始 化 带 有 指定 alsoResize 选项 的 resizable : 


$( ".selector" ).resizable({ alsoResize: "#mirror" }); 


在 初始 化 后 ， 获 取 或 设置 alsoResize 选项 : 








// getter 
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize' 
// setter 
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); 
«| = — 
默认 值 : false 
animate 


类 型 : Boolean 
描述 : 调整 尺寸 后 动态 变化 到 最 终 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 animate 选项 的 resizable : 


$( ".selector" ).resizable({ animate: true }); 


在 初始 化 后 ， 获 取 或 设置 animate 选项 : 


// getter 
var animate = $( ".selector" ).resizable( "option", "animate" ); 


// setter 
$( ".selector" ).resizable( "option", "animate", true ); 


默认 值 : false 


animateDuration 

类 型 : Number 或 String 

描述 : 当 使 用 [animate](#option-animate) 选项 时 ， 动 画 持续 的 时 间 。 
支持 多 个 类 型 : 


e Number : 持续 时 间 ， 以 宫 秒 计 。 
e String: 一 个 命名 的 持续 时 间 ， 比 如 "slow" 或 "fast" 。 


代码 实例 : 


初始 化 带 有 指定 animateDuration 选项 的 resizable : 


$( ".selector" ).resizable({ animateDuration: "fast" }); 


在 初始 化 后 ， 获 取 或 设置 animateDuration 选项 : 








// getter 
var animateDuration = $( ".selector" ).resizable( "option", "anima! 
// setter 
$( ".selector" ).resizable( "option", "animateDuration", "fast" ); 
‘| 
默认 值 : "slow" 
animateEasing 


类 型 : String 
描述 : 当 使 用 [animate](#option-animate) 选项 时 要 使 用 的 Easings。 
代码 实例 : 


初始 化 带 有 指定 animateEasing 选项 的 resizable : 


$( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); 


在 初始 化 后 ， 获 取 或 设置 animateEasing 选项 : 


// getter 
var animateEasing = $( ".selector" ).resizable( "option", "animatet 


// setter 
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBour 


LEN 


默认 值 : "swing" 





aspectRatio 
类 型 : Boolean 或 Number 
描述 : 元 素 是 否 应 该 被 限制 在 一 个 特定 的 长 宽 比 。 
支持 多 个 类 型 : 
e Boolean: 当 设 置 为 true 时， 元素 将 保持 其 原 有 的 长 宽 比 。 


e Number : 强制 在 调整 尺寸 时 元 素 保 持 特定 的 长 宽 比 。 
代码 实例 : 


初始 化 带 有 指定 aspectRatio 选项 的 resizable : 


$( ".selector" ).resizable({ aspectRatio: true }); 


在 初始 化 后 ， 获 取 或 设置 aspectRatio 选项 : 


// getter 
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRat: 


// setter 
$( ".selector" ).resizable( "option", "aspectRatio", true ); 


BE 


默认 值 : false 





autoHide 

类 型 : Boolean 

描述 : 当 用 户 妃 标 没 有 关 浮 在 元 素 上 时 是 否 隐藏 手柄 。 
代码 实例 : 


初始 化 带 有 指定 autoHide 选项 的 resizable : 


$( ".selector" ).resizable({ autoHide: true }); 


在 初始 化 后 ， 获 取 或 设置 autoHide 选项 : 


// getter 
var autoHide = $( ".selector" ).resizable( "option", "autoHide" ); 


// setter 
$( ".selector" ).resizable( "option", "autoHide", true ); 


| 
默认 值 : false 
cancel 


类 型 : Selector 


描述 : 防止 从 指定 的 元 素 上 开始 调整 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 resizable : 


$( ".selector" ).resizable({ cancel: ".cancel" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).resizable( "option", "cancel" ); 


// setter 
$( ".selector" ).resizable( "option", "cancel", ".cancel" ); 


默认 值 : "input, textarea, button, select, option" 


containment 

类 型 : Selector 或 Element 或 String 

描述 : 约束 在 指定 元 素 或 区 域 的 边界 内 调整 尺寸 。 
支持 多 个 类 型 : 


e Selector : 可 调整 尺寸 元 素 将 被 包含 在 selector 第 一 个 元 素 的 边界 内 。 如 果 未 
找到 元 素 ， 则 不 设置 containment, 
e Element : 可 调整 尺寸 元 素 将 被 包含 在 元 素 的 边界 内 。 
e String : 可 能 的 值 : "parent" 、 "document" , 
代码 实例 : 


初始 化 带 有 指定 containment 选项 的 resizable : 


$( ".selector" ).resizable({ containment: "parent" }); 


在 初始 化 后 ， 获 取 或 设置 containment 选项 : 


// getter 
var containment = $( ".selector" ).resizable( "option", "containmer 


// setter 
$( ".selector" ).resizable( "option", "containment", "parent" ); 





«| cm 








默认 值 : false 


delay 

类 型 : Number 

描述 : 鼠标 按 下 后 直到 调整 尺寸 开始 为 止 的 时 间 ， 以 毫秒 计 。 如 果 指 定 了 该 选项 ， 
调整 只 有 在 鼠标 移动 超过 时 间 后 才 开 始 。 该 选项 可 以 防止 点 击 在 某 个 元 素 上 时 不 必 
要 的 调整 尺寸 。 

代码 实例 : 

初始 化 带 有 指定 delay iM resizable : 


$( ".selector" ).resizable({ delay: 150 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).resizable( "option", "delay" ); 


// setter 
$( ".selector" ).resizable( "option", "delay", 150 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 resizable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 resizable : 


$( ".selector" ).resizable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).resizable( "option", "disabled" ); 


// setter 
$( ".selector" ).resizable( "option", "disabled", true ); 


«] m — BE | 





默认 值 : false 


distance 

类 型 : Number 

描述 : 鼠标 按 下 后 调整 尺寸 开始 前 必须 移动 的 距离 ， 以 像素 计 。 如 果 指 定 了 该 选 
项 ， 调 整 只 有 在 鼠标 移动 超过 距离 后 才 开 始 。 该 选项 可 以 防止 点 击 在 某 个 元 素 上 时 
不 必要 的 调整 尺寸 。 

代码 实例 : 


初始 化 带 有 指定 distance 选项 的 resizable : 


$( ".selector" ).resizable({ distance: 30 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).resizable( "option", "distance" ); 


// setter 
$( ".selector" ).resizable( "option", "distance", 30 ); 


S 了 | 
默认 值 1 

ghost 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 为 调整 尺寸 显示 一 个 半 透 明 的 辅助 元 素 。 

代码 实例 : 


初始 化 带 有 指定 ghost 选项 的 resizable : 


$( ".selector" ).resizable({ ghost: true }); 


在 初始 化 后 ， 获 取 或 设置 ghost 选项 : 


// getter 
var ghost = $( ".selector" ).resizable( "option", "ghost" ); 


// setter 


$( ".selector" ).resizable( "option", "ghost", true ); 


默认 值 : false 
grid 
类 型 : Array 


描述 : 把 可 调整 尺寸 元 素 对 齐 到 网 格 ， 每 个 x 和 y 像素 。 数 组 形式 必须 是 
[x y]。 


代码 实例 : 
初始 化 带 有 指定 grid 选项 的 resizable : 


$( ".selector" ).resizable({ grid: [ 20, 10 ] }); 


在 初始 化 后 ， 获 取 或 设置 grid 3t 


u 
= 


// getter 
var grid = $( ".selector" ).resizable( "option", "grid" ); 


// setter 
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] ); 


默认 值 : false 


handles 

类 型 : String 或 Object 

描述 : 可 用 于 调整 尺寸 的 处 理 程 序 。 
支持 多 个 类 型 : 


e String : 一 个 去 号 分 隔 的 列表 ， 列 表 值 为 下 面 所 列 出 的 任意 值 : n, e, s, w, ne, 
se, sw, nw, all。 必 要 的 处 理 程序 由 插件 自动 生成 。 

e Object : 支持 下 面 的 键 : { n, e, s, w ne, se, sw nw }。 任 何 指定 的 值 应 该 是 一 
个 匹配 作为 处 理 程序 使 用 的 resizable 的 子 元 素 的 jQuery 选择 器 。 


注释 : 当 生 成 您 自己 的 义理 程序 时 ， 每 个 处 理 程 序 必 须 有 
ui-resizable-handle class， 也 可 以 是 适当 的 
appropriate ui-resizable-{direction} class， 比 如 ui-resizable-s. 


代码 实例 : 


初始 化 带 有 指定 handles 选项 的 resizable : 


$( ".selector" ).resizable({ handles: "n, e, s, w" }); 


在 初始 化 后 ， 获 取 或 设置 handles 选项 : 


// getter 
var handles = $( ".selector" ).resizable( "option", "handles" ); 


// setter 


$( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); 


默认 值 : "e, s, se" 


helper 
类 型 : String 


描述 : 一 个 将 被 添加 到 代理 元 素 的 class 名 称 ， 用 于 描绘 调整 手柄 拖 搜 过 程 中 调整 
的 轮廓 。 一 旦 调整 完成 ， 原 来 的 元 素 则 被 重新 定义 尺寸 。 


代码 实例 : 


初始 化 带 有 指定 helper 选项 的 resizable : 
$( ".selector" ).resizable({ helper: "resizable-helper" }); 


在 初始 化 后 ， 获 取 或 设置 helper 选项 : 


// getter 
var helper = $( selector ).resizable( "option", "helper" ); 


// setter 
$( ".selector" ).resizable( "option", "helper", "resizable-helper" 





默认 值 : false 


maxHeight 


类 型 : Number 
描述 : resizable 允许 被 调整 到 的 最 大 高 度 。 
代码 实例 : 


初始 化 带 有 指定 maxHeight 选项 的 resizable : 


$( ".selector" ).resizable({ maxHeight: 300 }); 


在 初始 化 后 ， 获 取 或 设置 maxHeight 选项 : 


// getter 
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" 


// setter 
$( ".selector" ).resizable( "option", "maxHeight", 300 ); 





默认 值 null 


maxWidth 

类 型 : Number 

描述 : resizable 人 允许 被 调整 到 的 最 大 宽度 。 
代码 实例 : 


初始 化 带 有 指定 maxwidth 选项 的 resizable : 


$( ".selector" ).resizable({ maxwidth: 300 }); 


在 初始 化 后 ， 获 取 或 设置 maxwidth 选项 : 


// getter 
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "maxWwidth", 300 ); 


EB] 
默认 值 : null 


minHeight 


类 型 : Number 
描述 : resizable 允许 被 调整 到 的 最 小 高 度 。 
代码 实例 : 


初始 化 带 有 指定 minHeight 选项 的 resizable : 


$( ".selector" ).resizable({ minHeight: 150 }); 


在 初始 化 后 ， 获 取 或 设置 minHeight 选项 : 


// getter 
var minHeight = $( ".selector" ).resizable( "option", "minHeight" 


// setter 
$( ".selector" ).resizable( "option", "minHeight", 150 ); 





默认 值 : 10 


minWidth 

类 型 : Number 

描述 : resizable 人 允许 被 调整 到 的 最 小 宽度 。 
代码 实例 : 


初始 化 带 有 指定 minwidth 选项 的 resizable : 


$( ".selector" ).resizable({ minWwidth: 150 }); 


在 初始 化 后 ， 获 取 或 设置 minwidth 选项 : 


// getter 
var minwidth = $( ".selector" ).resizable( "option", "minWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "minWidth", 150 ); 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 resizable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).resizable( "destroy" ) 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 resizable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).resizable( "disable" ) 


enable() 
类 型 : jQuery (plugin only) 
描述 : FA resizable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).resizable( "enable" ) 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 


e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).resizable( "option", "disabled" ` 


E 








option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 resizable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).resizable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 resizable 选项 的 值 。 


e optionName 类 型 String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).resizable( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 resizable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value 对 。 
代码 实例 : 


调用 该 方法 : 


$( ".selector" ).resizable( "option", { disabled: true } ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 resizable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).resizable( "widget" ); 


事件 


create( event, ui ) 
类 型 : resizecreate 
描述 : 当 resizable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 resizable : 


$( ".selector" ).resizable({ 
create: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 resizecreate 事件 : 


$( ".selector" ) .on( "resizecreate", function( event, ui ) {} 


resize( event, ui ) 


类 型 : resize 
描述 : 在 调整 尺寸 期 间 当 调整 手柄 拖 搜 时 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o element 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 要 被 调整 尺寸 的 元 素 。 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 调整 尺寸 的 助手 


(helper) 。 
o originalElement 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 包 囊 之 前 的 原 
RATER. 


o originalPosition 类 型 : Object 描述 : resizable 调整 前 的 位 置 ， 表 示 为 
+ EOD, lent Mi 
o originalSize 类 型 : Object 描述 : resizable 调整 前 的 尺寸 ， 表 示 为 
{ width, height } 。 
o position 类 型 : Object 描述 : 当前 位 置 ， 表 示 为 { top, left } 。 
o size 类 型 : Object 描述 : 当前 位 置 ， 表 示 为 { width, height } 。 
代码 实例 : 


初始 化 带 有 指定 resize 回调 的 resizable : 


$( ".selector" ).resizable({ 
resize: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 resize 事件 : 


$( ".selector" ).on( "resize", function( event, ui ) {} ); 


start( event, ui ) 
类 型 : resizestart 
描述 : 当 调 整 尺寸 操作 开始 时 触发 。 


e event 类 型 : Event 

e ui 类 型 : Object 
o element 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 要 被 调整 尺寸 的 元 素 。 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 调整 尺寸 的 助手 


(helper) 。 
o originalElement 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 包 衷 之 前 的 原 
始 元 素 。 


o originalPosition 类 型 : Object 描述 : resizable 调整 前 的 位 置 ， 表 示 为 
{ top, left } 。 

o originalSize 类 型 : Object 描述 : resizable 调整 前 的 尺寸 ， 表 示 为 
{ width, height } 。 


o position 类 型 : Object 描述 : 当前 位 置 ， 
o Size 类 型 : Object 描述 : 当前 位 置 ， 
代码 实例 : 


初始 化 带 有 指定 start 回调 的 resizable : 


$( ".selector" ).resizable({ 
start: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 resizestart 事件 : 


$( ".selector" ).on( "resizestart", 


stop( event, ui ) 
描述 : 当 调 整 尺寸 操作 停止 


e event 类 型 : Event 
e ui 类 型 : Object 


resizestop 


表示 为 { top, left } 。 
表示 为 ( width, height } 。 


function( event, ui ) {} ); 


o element 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 要 被 调整 尺寸 的 元 素 。 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 调整 尺寸 的 助手 


(helper) 。 


o originalElement 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 包 应 之 前 的 原 


始 元 素 。 


o originalPosition 类 型 : Object 描述 : 


{ top, left } 。 
o originalSize 类 型 : Object 描述 : 
{ width, height } 。 
o position 类 型 : Object 描述 
o size 类 型 Object 描述 : 当前 位 置 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 resizable : 


$( ".selector" ).resizable({ 
stop: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 resizestop 事件 : 


resizable 调整 


resizable 调整 前 的 位 置 ， 表 示 为 


前 的 尺寸 ， 表 示 为 


: 当前 位 置 ， 表 示 为 { top, left } 。 


， 表 示 为 ( width, height } 。 


$( ".selector" ).on( "resizestop", function( event, ui ) {} ); 


实例 
一 个 简单 的 jQuery Ul 可 调整 尺寸 小 部 件 (Resizable Widget) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 调整 尺寸 小 部 件 (Resizable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#resizable { 
width: 100px; 
height: 100px; 
background: #ccc; 
} </style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="resizable"></div> 
<script> 
$( "#resizable" ).resizable(); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 可 选择 小 部 件 (Selectable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 使 用 鼠标 选择 单个 元 素 或 一 组 元 素 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery UI 可 选择 (Selectable) 插件 允许 通过 鼠标 拖 搜 选择 元 素 (有 时 被 称 
为 一 个 套 索 ) 。 可 以 在 按 住 ctrl/meta 键 的 同时 单 击 或 拖 动 来 选择 多 个 (不 连续 的 ) 
元 素 。 


附加 说 明 : 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 
定义 的 主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


快速 导航 


选项 


appendToautoRefreshcanceldelaydisableddistancefiltertolerance | destroydisab 


appendTo 

i 8! : Selector 

描述 : 选择 助手 (BR) 要 被 添加 到 哪 一 个 元 素 。 
代码 实例 : 


初始 化 带 有 指定 appendro 选项 的 draggable : 


$( ".selector" ).selectable({ appendTo: "#someElem" }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 





// getter 

var appendTo = $( ".selector" ).selectable( "option", "appendTo" ), 

// setter 

$( ".selector" ).selectable( "option", "appendTo", "#someElem" ); 
‘| — gh 
默认 值 : "body" 
autoRefresh 


类 型 : Boolean 

描述 : 该 选项 决定 是 否 在 每 个 选择 操作 的 开始 时 更 新 (重新 计算 ) 每 个 选择 项 的 位 

置 和 尺寸 。 如 果 您 有 多 个 项 目 ， 您 可 能 要 设置 该 选项 为 false， 并 手动 调用 
[refresh()](#method-refresh) 方法 。 

代码 实例 : 


初始 化 带 有 指定 autoRefresh 选项 的 draggable : 


$( ".selector" ).selectable({ autoRefresh: false }); 


在 初始 化 后 ， 获 取 或 设置 autoRefresh 选项 : 


// getter 
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefre 


// setter 
$( ".selector" ).selectable( "option", "autoRefresh", false ); 


LEN - 


默认 值 : true 





cancel 

类 型 : Selector 

描述 : 防止 从 匹配 选择 器 的 元 素 上 开始 选择 。 
代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 selectable : 


$( ".selector" ).selectable({ cancel: "a,.cancel" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).selectable( "option", "cancel" ); 


// setter 
$( ".selector" ).selectable( "option", "cancel", "a,.cancel" ); 


默认 值 : "input, textarea, button, select, option" 


delay 
类 型 : Number 


描述 : 鼠标 按 下 后 直到 选择 开始 的 时 间 ， 以 宫 秒 计 。 该 选项 可 以 防止 点 击 在 有 录 个 元 
素 上 时 不 必要 的 选择 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 selectable : 


$( ".selector" ).selectable({ delay: 150 3); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).selectable( "option", "delay" ); 


// setter 
$( ".selector" ).selectable( "option", "delay", 150 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 selectable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 selectable : 


$( ".selector" ).selectable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).selectable( "option", "disabled" ), 


// setter 
$( ".selector" ).selectable( "option", "disabled", true ); 
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默认 值 : false 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 选择 开始 前 必须 移动 的 距离 ， 以 像素 计 。 如 果 指 定 了 该 选项 ， 选 
择 只 有 在 鼠标 拖 搜 超出 指定 距离 时 才 会 开始 。 该 选项 可 以 防止 点 击 在 某 个 元 素 上 时 
不 必要 的 选择 。 


代码 实例 : 


初始 化 带 有 指定 distance 选项 的 selectable : 


$( ".selector" ).selectable({ distance: 30 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).selectable( "option", "distance" ), 


// setter 
$( ".selector" ).selectable( "option", "distance", 30 ); 


Aoo: .-—- 
默认 值 : 0 





filter 

类 型 : Selector 

描述 : 要 制作 选择 项 (可 被 选择 的 ) 的 匹配 的 子 元 素 。 
代码 实例 : 


初始 化 带 有 指定 filter 选项 的 selectable : 


$( ".selector" ).selectable({ filter: "li" }); 


在 初始 化 后 ， 获 取 或 设置 filter 选项 : 


// getter 
Var filter = $( "selector" )-selectable( "option", "filter" ); 


// setter 
$( ".selector" ).selectable( "option", "filter", "li" ); 


默认 值 : "nx" 


tolerance 
类 型 : String 
描述 : 指定 用 于 测试 套 索 是 否 选择 一 个 项 目的 模式 。 可 能 的 值 : 


e "fit" : BRE AEAEE. 
e "touch" :BRBéEmBtl, THAE T, 


代码 实例 : 


初始 化 带 有 指定 tolerance 选项 的 selectable : 


$( ".selector" ).selectable({ tolerance: "fit" }); 


在 初始 化 后 ， 获 取 或 设置 tolerance 选项 : 


// getter 
var tolerance = $( ".selector" ).selectable( "option", "tolerance" 


// setter 
$( ".selector" ).selectable( "option", "tolerance", "fit" ); 


默认 值 : "touch" 


方法 





destroy() 


类 型 : jQuery (plugin only) 

描述 : 完全 移 除 selectable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).selectable( "destroy" ); 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 selectable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).selectable( "disable" ) 


enable() 
类 型 : jQuery (plugin only) 
描述 : FA selectable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).selectable( "enable" ) 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 


代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).selectable( "option", "disabled" 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 selectable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).selectable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 selectable 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).selectable( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 selectable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value 对 。 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).selectable( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 更 新 每 个 选择 项 元 素 的 位 置 和 尺寸 。 当 
[autoRefresh](#option-autoRefresh) 选项 被 设置 为 false 时 ， 该 方法 可 用 于 
手动 重新 计算 每 个 选择 项 的 位 置 和 尺寸 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).selectable( "refresh" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 selectable 元 素 的 jQuery WR, 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).selectable( "widget" ); 


事件 


create( event, ui ) 


类 型 : selectablecreate 
描述 : 当 selectable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 


初始 化 带 有 指定 create 回调 的 selectable : 


$( ".selector" ).selectable({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 selectablecreate 事件 : 


$( ".selector" ).on( "selectablecreate", function( event, ui ) {} | 
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selected( event, ui ) 


类 型 : selectableselected 
描述 : 当 每 个 元 素 被 添加 选择 时 ， 在 选择 操作 结尾 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o selected 类 型 : Element 描述 : 被 选择 的 可 选择 项 目 。 
代码 实例 : 
初始 化 带 有 指定 selected 回调 的 selectable : 


$( ".selector" ).selectable({ 
selected: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 selectableselected 事件 : 


$( ".selector" ).on( "selectableselected", function( event, ui ) (. 
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selecting( event, ui ) 


类 型 : selectableselecting 
描述 : 当 每 个 元 素 被 添加 选择 时 ， 在 选择 操作 期 间 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o selecting 类 型 : Element 描述 : 正 被 选择 的 当前 可 选择 项 目 。 
代码 实例 : 


初始 化 带 有 指定 selecting 回调 的 selectable : 


$( ".selector" ).selectable({ 
selecting: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 selectableselecting 事件 : 


$( ".selector" ).on( "selectableselecting", function( event, ui ) = 
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start( event, ui ) 


类 型 : selectablestart 
描述 : 在 选择 操作 开头 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 start 回调 的 selectable : 


$( ".selector" ).selectable({ 
start: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 selectablestart 事件 : 


$( ".selector" ).on( "selectablestart", function( event, ui ) {} ), 
B ——————————————————————————— dÀ—— e D('eÜ'n( 
stop( event, ui ) 
类 型 : selectablestop 


描述 : 在 选择 操作 结尾 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 selectable : 


$( ".selector" ).selectable({ 
stop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 selectablestop 事件 : 


$( ".selector" ).on( "selectablestop", function( event, ui ) {} ); 


a Bil 
unselected( event, ui ) 


类 型 : selectableunselected 


e event 类 型 : Event 
e ui 类 型 : Object 
o unselected 类 型 : Element 描述 : 未 被 选择 的 可 选择 项 目 。 


代码 实例 : 
初始 化 带 有 指定 unselected 回调 的 selectable : 


$( ".selector" ).selectable({ 
unselected: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 selectableunselected 事件 : 


$( ".selector" ).on( "selectableunselected", function( event, ui ) 
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unselecting( event, ui ) 


类 型 : selectableunselecting 
描述 : 当 每 个 元 素 从 选择 中 被 移 除 时 ， 在 选择 操作 期 间 触 发 。 
e event 类 型 : Event 


e ui 类 型 : Object 
o unselecting 类 型 : Element 描述 : 正 未 被 选择 的 当前 可 选择 项 目 。 


N 


代码 实例 : 
初始 化 带 有 指定 unselecting 回调 的 selectable : 


$( ".selector" ).selectable({ 
unselecting: function( event, ui ) {} 


3): 


线 定 一 个 事件 监听 器 到 selectableunselecting 事件 : 


$( ".selector" ) ,on( "selectableunselecting", function( event, ui ` 
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实例 


一 个 简单 的 jQuery UI 可 选择 小 部 件 (Selectable Widget) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 选择 小 部 件 (Selectable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#selectable .ui-selecting { 
background: #ccc; 
} 
#selectable .ui-selected { 
background: #999; 
} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<ul id="selectable"> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 
«li»Item 5«/li» 
«/ul» 


«script» 
$( "#selectable" ).selectable(); 
</script> 


</body> 
</html> 
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jQuery UI API - 可 排序 小 部 件 (Sortable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 使 用 鼠标 调整 列表 中 或 者 网 格 中 元 素 的 排序 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery UI 可 排序 (Sortable) 插件 让 被 选 元 素 通 过 鼠标 拖 搜 进行 排序 。 
注释 : 为 了 排序 表格 行 ， tbody 必须 是 可 排序 的 (sortable) ， 而 不 是 
table 。 


快速 导航 


append ToaxiscancelconnectWithcontainmentcursorcursorAtdelaydisableddistanc 


appendTo 

类 型 : jQuery 3 Element 或 Selector 或 String 

描述 : 当 拖 搜 时 ， 通 过 最 标 移动 的 助手 被 追加 到 哪里 〈 例 如 ， 解 决 overlap/zlndex 
问题 ) o 

支持 多 个 类 型 : 

jQuery : 一 个 jQuery 对 象 ， 包 含 助手 (helper) 要 追加 到 的 元 素 。 

Element : 要 追加 助手 (helper) 的 元 素 。 

Selector : 一 个 选择 器 ， 指 定 哪 个 元 素 要 追加 助手 (helper) 。 


String: 字符 串 "parent" 将 促使 助手 (helper) 成 为 sortable 项 目的 同 
级 。 


代码 实例 : 
初始 化 带 有 指定 appendTo 选项 的 sortable : 


$( ".selector" ).sortable({ appendTo: document.body }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 


// getter 
var appendTo = $( ".selector" ).sortable( "option", "appendTo" ); 


// setter 
$( ".selector" ).sortable( "option", "appendTo", document.body ); 
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默认 值 : "parent" 


axis 
类 型 : String 


描述 : 如 果 定 义 了 该 选项 ， 项 目 只 能 在 水 平 或 垂直 方向 上 被 拖 搜 。 可 能 的 
值 Ws) ; nn » 


代码 实例 : 


初始 化 带 有 指定 axis 选项 的 sortable : 


$( "selector" ).sortable({ axis: "x" }); 


在 初始 化 后 ， 获 取 或 设置 axis 选项 : 


// getter 
var axis = $( ".selector" ).sortable( "option", "axis" ); 


// setter 
$( ".selector" ).sortable( "option", "axis", "x" ); 


默认 值 : false 


cancel 
类 型 : Selector 


描述 : 防止 从 匹配 选择 器 的 元 素 上 开始 排序 。 


代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 sortable : 


$( ".selector" ).sortable({ cancel: "a,button" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).sortable( "option", "cancel" ); 


// setter 
$( ".selector" ).sortable( "option", "cancel", "a,button" ); 


默认 值 : "input, textarea, button, select, option" 


connectWith 
类 型 : Selector 


描述 : 列表 中 的 项 目 需 被 连接 的 其 他 sortable 元 素 的 选择 器 。 这 是 一 个 单 向 关系 ， 
如 果 您 想 要 项 目 被 双向 连接 ， 必 须 在 两 个 sortable 元 素 上 都 设置 connectwith 
选项 。 


代码 实例 : 


初始 化 带 有 指定 connectwith 选项 的 sortable : 


$( ".selector" ).sortable({ connectWith: "#shopping-cart" }); 


在 初始 化 后 ， 获 取 或 设置 connectwith 选项 : 


// getter 
var connectWith = $( ".selector" ).sortable( "option", "connectWitl 


// setter 
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cari 
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默认 值 : false 





containment 


类 型 : Element 或 Selector 5% String 


描述 : 定义 拖 搜 时 ，sortable 项 目 被 约束 的 边界 。 


注释 : 为 containment 指定 的 元 素 必须 有 一 个 已 计算 的 宽度 和 高 度 (尽管 它 不 需要 
ext) 。 例 如 ， 如 果 您 有 float: left sortable 子 元 素 ， 并 指定 了 
containment: "parent" ， 请 确保 在 sortable/parent 容器 上 有 float: left 
, KMENE height: 0 ， 导 致 未 定义 的 行为 。 

支持 多 个 类 型 : 


e Element : 一 个 要 作为 容器 使 用 的 元 素 。 
e Selector : 一 个 选择 器 ， 指 定 一 个 要 作为 容器 使 用 的 元 素 。 
e String : 一 个 字符 串 ， 标 识 一 个 要 作为 容器 使 用 的 元 素 。 可 能 的 


值 : "parent" 、 "document" 、 "window" 。 
代码 实例 : 


初始 化 带 有 指定 containment 选项 的 sortable : 


$( ".selector" ).sortable({ containment: "parent" }); 


在 初始 化 后 ， 获 取 或 设置 containment 选项 : 


// getter 
var containment = $( ".selector" ).sortable( "option", "containment 


// setter 
$( ".selector" ).sortable( "option", "containment", "parent" ); 
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默认 值 : false 





cursor 

类 型 : String 

描述 : 定义 当 排序 时 被 显示 的 光标 。 
代码 实例 : 


初始 化 带 有 指定 cursor 选项 的 sortable : 


$( ".selector" ).sortable({ cursor: "move" }); 


在 初始 化 后 ， 获 取 或 设置 cursor 选项 : 


// getter 
var cursor = $( ".selector" ).sortable( "option", "cursor™ ); 


// setter 


$( ".selector" ).sortable( "option", "cursor", "move" ); 


默认 值 : "auto" 


cursorAt 

类 型 : Object 

描述 : 移动 排序 元 素 或 助手 (helper) ， 这 样 光标 总 是 出 现 ， 以 便 从 相同 的 位 置 进 
行 拖 搜 。 坐 标 可 通过 一 个 或 两 个 键 的 组 合成 一 个 哈 希 给 

WH: { top, left, right, bottom } o 

代码 实例 : 


初始 化 带 有 指定 cursorAt 选项 的 sortable : 


$( ".selector" ).sortable({ cursorAt: { left: 5 ) }); 


在 初始 化 后 ， 获 取 或 设置 cursorAt 选项 : 


// getter 
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" ); 


// setter 
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } ); 
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默认 值 : false 


delay 
类 型 : Integer 


描述 : 妃 标 按 下 后 直到 排序 开始 的 时 间 ， 以 毫秒 计 。 该 选项 可 以 防止 点 击 在 某 个 元 
素 上 时 不 必要 的 拖 搜 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 sortable : 


$( ".selector" ).sortable({ delay: 150 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).sortable( "option", "delay" ); 


// setter 
$( ".selector" ).sortable( "option", "delay", 150 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 sortable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 sortable : 


$( ".selector" ).sortable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).sortable( "option", "disabled" ); 


// setter 
$( ".selector" ).sortable( "option", "disabled", true ); 
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默认 值 : false 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 排序 开始 前 必须 移动 的 距离 ， 以 像素 计 。 如 果 指 定 了 该 选项 ， 排 
ea 该 选项 可 以 用 于 人 允许 在 一 个 手柄 内 的 
元 素 上 点 击 。 


代码 实例 : 


初始 化 带 有 指定 distance 选项 的 sortable : 


$( ".selector" ).sortable({ distance: 5 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).sortable( "option", "distance" ); 


// setter 
$( ".selector" ).sortable( "option", "distance", 5 ); 
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默认 值 : 1 


dropOnEmpty 


类 型 : Boolean 


描述 : 如 果 为 ”false ， 从 该 sortable 的 项 目 不 能 被 放置 在 空 连接 的 sortable 上 
(请 查看 [connectwith](#option-connectwith) 选项 ) o 


代码 实例 : 


初始 化 带 有 指定 droponEmpty 选项 的 sortable : 


$( ".selector" ).sortable({ dropOnEmpty: false }); 


在 初始 化 后 ， 获 取 或 设置 droponEmpty 选项 : 


// getter 
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpt: 


// setter 
$( ".selector" ).sortable( "option", "dropOnEmpty", false ); 
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默认 值 : true 





forceHelperSize 

类 型 : Boolean 

描述 : 如 果 为 true ， 强 制 助手 (helper) 有 一 个 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 forceHelperSize 选项 的 sortable : 


$( ".selector" ).sortable({ forceHelperSize: true }); 


在 初始 化 后 ， 获 取 或 设置 forceHelperSize 选项 : 


// getter 
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHe 


// setter 
$( ".selector" ).sortable( "option", "forceHelperSize", true ); 
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默认 值 : false 





forcePlaceholderSize 

类 型 : Boolean 

描述 : 如 果 为 true ， 强 制 占 位 符 (placeholder) 有 一 个 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 forcePlaceholderSize 选项 的 sortable : 


$( ".selector" ).sortable({ forcePlaceholderSize: true }); 


在 初始 化 后 ， 获 取 或 设置 forcePlaceholderSize 选项 : 


// getter 
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "f« 


// setter 
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true ` 





默认 值 : false 
grid 
类 型 : Array 


描述 : 对 齐 排 序 元 素 或 助手 (helper) 到 网 格 ， 每 个 x 和 y 像素 。 数 组 形式 必须 是 
[x yj]j。 


代码 实例 : 
初始 化 带 有 指定 grid 选项 的 sortable : 


$( ".selector" ).sortable({ grid: [ 20, 10 ] }); 


在 初始 化 后 ， 获 取 或 设置 grid 3& 


u 
= 


// getter 
var grid = $( ".selector" ).sortable( "option", "grid" ); 


// setter 
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] ); 


默认 值 : false 


handle 

类 型 : Selector 或 Element 

描述 : 如 果 指 定 了 该 选项 ， 则 限制 在 指定 的 元 素 上 开始 排序 。 
代码 实例 : 


初始 化 带 有 指定 handle 选项 的 sortable : 


$( ".selector" ).sortable({ handle: ".handle" }); 


在 初始 化 后 ， 获 取 或 设置 handle 选项 : 


// getter 
var handle = $( ".selector" ).sortable( "option", "handle" ); 


// setter 


$( ".selector" ).sortable( "option", "handle", ".handle" ); 


默认 值 : false 


helper 

类 型 : String 或 Function() 

描述 : 允许 一 个 helper 元 素 用 于 拖 搜 显 示 。 
支持 多 个 类 型 : 


e String : 如 果 设 置 为 "clone" ， 元 素 将 被 克隆 ， 且 克隆 将 被 拖 搜 。 


e Function : 一 个 画 数 ， 将 返回 拖 搜 时 要 使 用 的 DOMEIement。 男 数 接收 事 


件 ， 且 元 素 正 被 排序 。 
代码 实例 : 
初始 化 带 有 指定 helper 选项 的 sortable : 


$( ".selector" ).sortable({ helper: "clone" 3); 


在 初始 化 后 ， 获 取 或 设置 helper 选项 : 


// getter 
var helper = $( ".selector" ).sortable( "option", "helper" ); 


// setter 
$( ".selector" ).sortable( "option", "helper", "clone" ); 


默认 值 : "original" 


items 

类 型 : Selector 

描述 : 指定 元 素 内 的 哪 一 个 项 目 应 是 sortable。 
代码 实例 : 

初始 化 带 有 指定 items 选项 的 sortable : 


$( ".selector" ).sortable({ items: "&gt; li" }); 


在 初始 化 后 ， 获 取 或 设置 items 选项 : 


// getter 
var items = $( ".selector" ).sortable( "option", "items" ); 


// setter 
$( ".selector" ).sortable( "option", "items", "&gt; li" ); 


默认 值 : "> *" 


opacity 


类 型 : Number 


描述 : 当 排 序 时 助手 (helper) 的 不 透明 度 。 从 0.01 到 1. 
代码 实例 : 


初始 化 带 有 指定 opacity 选项 的 sortable : 


$( ".selector" ).sortable({ opacity: 0.5 }); 


在 初始 化 后 ， 获 取 或 设置 opacity 选项 : 


// getter 
var opacity = $( ".selector" ).sortable( "option", "opacity" ); 


// setter 


$( ".selector" ).sortable( "option", "opacity", 0.5 ); 


默认 值 : false 


placeholder 

类 型 : String 

描述 : 要 应 用 的 class 名 称 ， 否 则 为 白色 空白 。 
代码 实例 : 


初始 化 带 有 指定 placeholder 选项 的 sortable : 


$( ".selector" ).sortable({ placeholder: "sortable-placeholder" }), 





在 初始 化 后 ， 获 取 或 设置 placeholder 选项 : 


// getter 
var placeholder = $( ".selector" ).sortable( "option", "placeholde!: 


// setter 
$( ".selector" ).sortable( "option", "placeholder", "sortable-place 
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默认 值 : false 





revert 


类 型 : Boolean 或 Number 


描述 : sortable 项 目 是 否 使 用 一 个 流畅 的 动画 还 原 到 它 的 新 位 置 。 
支持 多 个 类 型 : 
e Boolean: 当 设 置 为 true ， 该 项 目 将 会 使 用 动画 ， 动 画 使 用 默认 的 持续 时 


间 。 
e Number : 动画 的 持续 时 间 ， 以 毫秒 计 。 
代码 实例 : 


初始 化 带 有 指定 revert 选项 的 sortable : 


$( ".selector" ).sortable({ revert: true }); 


在 初始 化 后 ， 获 取 或 设置 revert 选项 : 


// getter 
var revert = $( ".selector" ).sortable( "option", "revert" ); 


// setter 


$( ".selector" ).sortable( "option", "revert", true ); 


默认 值 : false 


scroll 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 当 到 达 边 缘 时 页 面 会 滚动 。 
代码 实例 : 


初始 化 带 有 指定 scroll 选项 的 sortable : 


$( ".selector" ).sortable({ scroll: false }); 


在 初始 化 后 ， 获 取 或 设置 scroll 选项 : 


// getter 
var scroll = $( ".selector" ).sortable( "option", "scroll" ); 


// setter 
$( ".selector" ).sortable( "option", "scroll", false ); 


默认 值 : true 


scrollSensitivity 

类 型 : Number 

描述 : 定义 鼠标 距离 边缘 多 少 距离 时 开始 滚动 。 
代码 实例 : 


初始 化 带 有 指定 scrollSensitivity 选项 的 sortable : 


$( ".selector" ).sortable({ scrollSensitivity: 10 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSensitivity 选项 : 


// getter 
var scrollSensitivity = $( ".selector" ).sortable( "option", "scro. 


// setter 
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 ); 
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默认 值 : 20 





scrollSpeed 

类 型 : Number 

描述 : 当 鼠 标 指针 获取 到 在 
[scrollSensitivity](#option-scrollSensitivity) 距离 内 时 ， 窗 体 滚 动 的 

速度 。 如 果 scroll 选项 是 false 则 忽略 。 

代码 实例 : 


初始 化 带 有 指定 scrollspeed 选项 的 sortable : 


$( ".selector" ).sortable({ scrollSpeed: 40 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSpeed 选项 : 


// getter 
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeec 


// setter 
$( ".selector" ).sortable( "option", "scrollSpeed", 40 ); 
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默认 值 : 20 


tolerance 
类 型 : String 
描述 : 指定 用 于 测试 项 目 被 移动 时 是 否 履 盖 在 另 一 个 项 目 上 的 模式 。 可 能 的 值 : 


e "intersect" : 项 目 至 少 50% € & TER (hm B.E. 
e "pointer" : 鼠标 指针 重 亚 在 其 他 项 目 上 。 


代码 实例 : 


初始 化 带 有 指定 tolerance 选项 的 sortable : 


$( ".selector" ).sortable({ tolerance: "pointer" }); 


在 初始 化 后 ， 获 取 或 设置 tolerance 选项 : 


// getter 
var tolerance = $( ".selector" ).sortable( "option", "tolerance" ), 


// setter 
$( ".selector" ).sortable( "option", "tolerance", "pointer" ); 
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默认 值 : "intersect" 





zlndex 

类 型 : Integer 

描述 : 当 被 排序 时 ， 元 素 / 助 手 (helper) 的 Z-index。 
代码 实例 : 


初始 化 带 有 指定 zIndex 选项 的 sortable : 


$( ".selector" ).sortable({ zIndex: 9999 }); 


在 初始 化 后 ， 获 取 或 设置 zIndex 选项 : 


// getter 
var zIndex = $( ".selector" ).sortable( "option", "zIndex" ); 


// setter 
$( ".selector" ).sortable( "option", "zIndex", 9999 ); 


默认 值 : 1000 
方法 
cancel() 


类 型 : jQuery (plugin only) 


描述 : 当前 排序 开始 时 ， 取 消 一 个 在 当前 sortable 中 的 改变 ， 且 恢复 到 之 前 的 状 
态 。 在 stop 和 receive 回调 画 数 中 非常 有 用 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 cancel 方法 : 


$( ".selector" ).sortable( "cancel" ) 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 sortable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).sortable( "destroy" ) 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 sortable. 

。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).sortable( "disable" ); 


enable() 
类 型 : jQuery (plugin only) 
描述 : FA sortable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).sortable( "enable" ); 


option( optionName ) 
i 8! : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName X # : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).sortable( "option", "disabled" ), 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 draggable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).sortable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 sortable 选项 的 值 。 


e optionName X Z! : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).sortable( "option", "disabled", true ) 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 sortable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).sortable( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 刷新 sortable 项 目 。 触 发 所 有 sortable 项 目 重 新 加 载 ， 导致 新 的 项 目 被 认 
Ay, 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).sortable( "refresh" ); 


refreshPositions() 


类 型 : jQuery (plugin only) 


描述 : 刷新 sortable 项 目的 缓存 位 置 。 调 用 该 方法 刷新 所 有 sortable 的 已 缓存 的 项 
目 位 置 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refreshPositions 方法 : 


$( ".selector" ).sortable( "refreshPositions" ); 


serialize( options ) 
X 8! : String 


描述 : 序列 化 sortable 的 项 目 id 为 一 个 form/ajax 可 提交 的 字符 串 。 调 用 该 方 
法 会 产生 一 个 可 被 追加 到 任何 url 中 的 哈 希 ， 以 便 简 单 地 把 一 个 新 的 项 目 顺 序 提交 
回 服务 器 。 


默认 情况 下 ， 它 通过 每 个 项 目的 id 进行 工作 ，id 格式 为 
"setname number" ， 且 它 会 产生 一 个 形 如 
"setname[]=number&setname[]=number" 的 哈 希 。 


注释 : 如 果 序 列 化 返回 一 个 空 的 字符 串 ， 请 确认 id 属性 包含 一 个 下 划 线 () 。 
形式 必须 是 "set_number"”。 例 如 ， 一 个 id 属性 为 

"foo 1". "foo 5" 、 "foo 2" 的 3 元 素 列 表 将 序列 化 为 
"foo[]=1&foo[]=5&foo[]=2”。 您 可 以 使 用 下 划 线 () 、 等 号 (=) 或 连 字符 
(-) 来 分 隔 集合 和 数字 。 例 如 ， "foo=1" 、 "foo-1" 、 "foo_1" 所 有 都 序列 
化 为 "foo[]-1" . 


e options 类 型 : Object 要 自 定义 序列 化 的 选项 。 
o key (默认 值 : 属性 中 分 隔 符 前 面 的 部 分 ) 类 型 : String 描述 : 把 
parti[] 替换 为 指定 的 值 。 
o attribute (默认 值 : "id" ) 类 型 String 描述 : 值 要 使 用 的 属性 名 称 。 
o expression (默认 值 : /(.+)[-=_](.+)/ ) 类 型 : RegExp 描述 : 用 
于 把 属性 值 分 隔 为 键 和 值 两 部 分 的 正则 表达 式 。 


代码 实例 : 
调用 serialize 方法 : 


var sorted = $( ".selector" ).sortable( "Serialize", { key: "sort" 


«| = 











toArray( options ) 
类 型 : Array 
描述 : 序列 化 sortable 的 项 目 id 为 一 个 字符 串 的 数组 。 


e options 类 型 : Object 要 自 定义 序列 化 的 选项 。 
o attribute (默认 值 : "id" ) 类 型 String 描述 : 值 要 使 用 的 属性 名 称 。 


代码 实例 : 
调用 toArray 方法 : 


var sortedIDs = $( ".selector" ).sortable( "toArray" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 sortable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).sortable( "widget" ); 


事件 


activate( event, ui ) 


类 型 : sortactivate 
描述 : 当 使 用 被 连接 列表 时 触发 该 事件 ， 每 个 被 连接 列表 在 拖 搜 开始 时 接收 它 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o ja = : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
< con, left f=. 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 


Atop lert ri, 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o pec 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 activate 回调 的 sortable : 


$( ".selector" ).sortable({ 
activate: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 sortactivate 事件 : 


$( ".selector" ) .on( "sortactivate", function( event, ui ) {} ); 


beforeStop( event, ui ) 


类 型 : sortbeforestop 


描述 : 当 排 序 停 止 时 触发 该 事件 ， 除 了 当 占 位 符 (placeholder) /助手 (helper) 13 
然 可 用 时 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o he bor 5 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
(foODLUee 用。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 beforeStop 回调 的 sortable : 


$( ".selector" ).sortable({ 
beforeStop: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 sortbeforestop 事件 : 


$( ".selector™ ).on( "sortbeforestop", function( event, ui ) {} ); 


4 mE h 





change( event, ui ) 


类 型 : sortchange 
描述 : 在 排序 期 间 触 发 该 事件 ， 除 了 当 DOM 位 置 改变 时 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o pound 25 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o Bu 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 change 回调 的 sortable : 


$( ".selector" ).sortable({ 
change: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 sortchange 事件 : 


$( ".selector" ).on( "sortchange", function( event, ux ) {} ); 


create( event, ui ) 


X 8! : sortcreate 
描述 : 34 droppable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 和 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 sortable : 


$( ".selector" ).sortable({ 
create: function( event, ui ) {} 


T) 


绑 定 一 个 事件 监听 器 到 sortcreate 事件 : 


$( "selector" ).on( "sortcreate", function( event, ui ) {} ); 


deactivate( event, ui ) 


类 型 : sortdeactivate 
描述 : 当 排 序 停 止 时 触发 该 事件 ， 该 事件 传播 到 所 有 可 能 的 连接 列表 。。 


e event 类 型 : Event 
e ui 类 型 : Object 
o pe Bor a : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : F (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
4 top, ett. 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o pecu 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 deactivate 回调 的 sortable : 


$( ".selector" ).sortable({ 
deactivate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortdeactivate 事件 : 


$( ".selector™ ) .on( "sortdeactivate", function( event, ui ) {} ); 


4 mE h 





out( event, ui ) 

X 8! : sortout 

描述 : 当 一 个 sortable 项 目 从 一 个 sortable 列表 移 除 时 触发 该 事件 。 
注释 : 当 一 个 sortable 项 目 被 撤销 时 也 会 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o p und m : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o Po o 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 out 回调 的 sortable : 


$( ".selector" ).sortable({ 
out: function( event, ux ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortout 事件 : 


$( ".selector™ ) .on( "sortout", fünction( event, ui ) {} ); 


over( event, ui ) 
类 型 : sortover 
描述 : 当 一 个 sortable 项 目 移动 到 一 个 sortable 列表 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o 人 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable, 
o pcne 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 over 回调 的 sortable : 


$( ".selector" ).sortable({ 
out: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortover 事件 : 


$( ".selector" ).on( "sortout", function( event, ui ) {} ); 


receive( event, ui ) 


类 型 : sortreceive 


描述 : 当 来 自 一 个 连接 的 sortable 列表 的 一 个 项 目 被 放置 到 另 一 个 列表 时 触发 该 事 
件 。 后 者 是 事件 目标 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
(helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 


(topo E. 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
4 top, left ri, 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left e. 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o B 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 receive 回调 的 sortable : 


$( ".selector" ).sortable({ 
receive: function( event, ui ) {} 


T): 


绑 定 一 个 事件 监听 器 到 sortreceive 事件 : 


$( ".selector" ).on( "sortreceive", function( event, ui ) {} ); 


remove( event, ui ) 


类 型 : sortremove 


描述 : 当 来 自 一 个 连接 的 sortable 列表 的 一 个 项 目 被 放置 到 另 一 个 列表 时 触发 该 事 
件 。 前 者 是 事件 目标 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o Due a : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o B 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 remove 回调 的 sortable : 


$( ".selector" ).sortable({ 
remove: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 sortremove 事件 : 


$( ".selector" ).on( "sortremove", function( event, ui ) {} ); 


sort( event, ui ) 
类 型 : sort 
描述 : 在 排序 期 间 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o ia as : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left Mi, 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable, 
o eer 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 sort 回调 的 sortable : 


$( ".selector" ).sortable({ 
sort: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 sort 事件 : 


$( selector ).on( "sort", function( event, ui ) {} ); 


start( event, ui ) 


类 型 : sortstart 
描述 : 当 排 序 开始 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o BAN F : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
ME efe) ev ed n A ON 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
4 top, Left } 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o Bp ho 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 start 回调 的 sortable : 


$( ".selector" ).sortable({ 
start: function( event, ui ) {} 


1) 


绑 定 一 个 事件 监听 器 到 sortstart 事件 : 


$( ".selector" ).on( "sortstart", function( event, ui ) {} ); 


stop( event, ui ) 


类 型 : sortstop 
描述 : 当 排 序 停止 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o aed er : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
top, lert ri, 


Oo 


o 


o 


originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable, 
B 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 sortable : 


$( ".selector" ).sortable( { 


stop: 


}); 


function( event, ui ) {} 


BRXE — “SBF 5 T2521 sortstop 事件 : 


$( ".selector" ).on( "sortstop", function( event, ui ) {} ); 


update( event, ui ) 


类 型 : sortupdate 
描述 : 当 用 户 停止 排序 且 DOM 位 置 改 变 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 


o 


helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
(helper) 。 


o item X €! : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : F (helper) 的 当前 的 绝对 位 置 ， 表 示 为 


{ top, left } 。 
position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
BE Oe 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 update 回调 的 sortable : 


$( ".selector" ).sortable({ 
update: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortupdate 事件 : 


$( ".selector" ).on( "sortupdate", function( event, ui ) {} ); 


实例 
一 个 简单 的 jQuery Ul 可 排序 小 部 件 (Sortable Widget) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 排序 小 部 件 (Sortable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<ul id="sortable"> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 
«li»Item 5«/li» 
«/ul» 


<script>$("#sortable").sortable();</script> 


</body> 
</html> 


加 ER 





jQuery UI API 类 别 - 方法 重 载 (Method 


Overrides) 


jQuery Ul 重 载 了 几 个 内 置 的 jQuery 方法 ， 以 提供 额外 的 功能 。 当 使 用 这 些 重 载 


时 ， 确 保 加 载 jQuery Ul 是 很 重要 的 。 如 果 jQuery Ul 未 加 载 ， 


预期 的 功能 将 不 可 用 ， 


API 


.addClass() 


.focus() 


hide() 


.position() 


.removeClass() 


.Show() 


.toggle() 


.toggleClass() 


这 会 导致 难以 追踪 的 错误 。 


B 


一 


iach 


M AERA A t, 7 ERRA 
内 的 每 个 元 素 添 加 指定 的 Class. 


异步 聚焦 到 一 个 元 素 。 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


相对 另 一 个 元 素 定 位 一 个 元 素 。 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 
内 的 每 个 元 素 移 除 指定 的 Class。 


使 用 自 定 义 效果 来 显示 匹配 的 元 素 。 


使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 


71*0 


当 动 画 样 式 改 变 时 ， 根 据 Class BBE 
在 以 及 switch 参数 的 值 ， 为 匹配 的 元 
素 集合 内 的 每 个 元 素 添加 或 移 除 一 个 或 


多 个 Class。 


方法 依然 存在 ， 但 


也 属于 类 别 


特效 (Effects) | 
特效 核心 
(Effects Core) 


方法 (Method) | 
Ul 核心 (UI 
Core) 


特效 (Effects) | 
特效 核心 
(Effects Core) 

| 方法 (Method) 


方法 (Method) | 
实用 工具 
(Utilities ) 


特效 (Effects) | 
特效 核心 
(Effects Core) 


特效 (Effects) | 
特效 核心 
(Effects Core) 

| 方法 (Method) 


特效 (Effects) | 
特效 核心 
(Effects Core) 

| 方法 (Method) 


特效 (Effects) | 
特效 核心 
(Effects Core) 


jQuery UI API - .focus() 


所 属 类 别 
方法 重 载 (Method Overrides) | 方法 (Methods) | UI 核心 (UI Core) 
用 法 


描述 : 异步 聚焦 到 一 个 元 素 。 


返回 : jQuery 


.focus( delay [, callback ] )Returns: jQuery 


参数 类 型 描述 
delay Integer 聚焦 前 等 待 的 毫秒 数 。 
callback Function() 元 素 被 聚焦 后 要 调用 的 函数 。 


该 插件 扩展 自 jQuery AEH .focus() 方法 。 如 果 jQuery Ul 未 加 载 ， 调 用 


.focus() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 
的 行为 。 


jQuery UI API - .position() 


所 属 类 别 


方法 重 载 (Method Overrides) | 方法 (Methods) | 实用 工具 (Utilities) 


用 法 


描述 : 相对 另 一 个 元 素 定位 一 个 元 素 。 


返回 : jQuery 
版 本 新 增 : 1.8 


.position( options ) 


参数 


| 


Hs 


$H 
Ef 


options Object 


my (默认 值 : "center" ) 类 型 String 描述 : 定义 被 定位 元 素 上 对 准 目标 
元 素 的 位 置 : "horizontal vertical" 对 齐 方式 。 一 个 单一 的 值 ， 上 比如 "right" 将 规 
范 为 "right center", "top" 将 规范 为 "center top" (下面 的 CSS 公约 ) 。 可 接 
受 的 水 平 值 : "left"、"center"、"right"。 可 接受 的 垂直 
值 : "top"、"center"、"bottom"。 例 如 ，"left top" 或 "center center"。 每 个 纬度 
也 可 以 包含 偏 移 ， 以 像素 计 或 以 百分比 计 ， 例 如 "right+10 top-25%"。 百 分 比 
偏 移 是 相对 于 被 定位 的 元 素 。 
at (默认 值 : "center" ) 类 型 String 描述 : 定义 目标 元 素 上 对 准 被 定位 元 
素 的 位 置 : "horizontal vertical" 对 齐 方 式 。 如 需 了 解 更 多 细节 请 查看 my 选项 
上 的 可 能 值 。 百 分 比 偏 移 是 相对 于 目标 元 素 。 
of (默认 值 : null) 类 型 Selector 或 Element 3 jQuery 或 Event 描述 : 
要 定位 的 元 素 。 如 果 您 提供 一 个 选择 器 (Selector) 或 jQuery 对 象 ， 将 使 用 第 
一 个 匹配 元 素 。 如 果 您 提供 一 个 事件 (Event) 对 象 ， 将 使 用 pageX 和 pageY 
属性 ， 例 如 "#top-menu". 
collision (默认 值 : "flip" ) 类 型 String 描述 : 当 被 定位 元 素 在 某 些 方 
向 上 浴 出 窗口 ， 则 移动 它 到 另 一 个 位 置 。 与 my 和 at 选项 相似 ， 该 选项 会 接受 
一 个 单一 的 值 或 一 对 horizontal/vertical 值 。 例 如 : "flip", "fit", "fit flip", "fit 
none", 

o "flip" : 翻转 元 素 到 目标 的 相对 一 边 ， 再 次 运行 collision 检测 一 表 查 看 元 素 

是 否 适合 。 无 论 哪 一 边 人 允许 更 多 的 元 素 可 见 ， 则 使 用 那 一 边 。 
o "fit" : 把 元 素 从 窗口 的 边缘 移 开 。 
o "flipfit" : 首先 应 用 flip 逻辑 ， 把 元 素 放 置 在 允许 更 多 元 素 可 见 的 那 一 边 。 
然后 应 用 代 逮 和 辑 ， 确 保 尽 可 能 多 的 元 素 可 见 。 


o "none" : 不 应 用 任何 collision 检测 。 

e using (默认 值 : null) 类 型 : Function() 描述 : 当 指定 了 该 选项 ， 实 际 属 
性 设置 则 委托 给 该 回调 。 接 受 两 个 参数 : 第 一 个 是 位 置 top 和 left 值 的 哈 希 ， 
可 被 转发 到 .css() 或 .animate() ; 第 二 个 提供 了 关于 两 个 元 素 的 位 置 和 尺寸 的 
反馈 ， 同 时 也 计算 它们 的 相对 位 置 。target 和 element 都 有 下 列 属性 : 
element, left, top. width, height, 另外 ， 还 有 horizontal, vertical 和 
important， 提 供 了 十 二 个 可 能 的 方向 ， 如 ( horizontal: "center", vertical: "left", 
important: "horizontal" }。 

e within (默认 值 : window ) 类 型 Selector 或 Element 或 jQuery 描述 : 元 
素 定 位 为 within， 会 影响 collision 检测 。 如 果 您 提供 了 一 个 选择 器 

(Selector) 或 jQuery 对 象 ， 则 使 用 第 一 NERS. 


jQuery UI .position() 方法 允许 您 相对 窗 体 (window) 、 文 档 、 另 一 个 元 素 或 
ps ey /鼠标 (mouse) 来 定位 一 个 元 素 ， 无 需 考 外 相对 父 元 素 的 偏 移 
offset) 。 


注释 : jQuery Ul 不 支持 定位 隐藏 元 素 。 
这 是 一 个 独立 的 jQuery 插件 ， 且 对 其 他 jQuery UI 组 件 没有 依赖 关系 。 


该 插件 扩展 自 jQuery AEH position) 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.position() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 
预期 的 行为 。 


实例 
一 个 简单 的 jQuery Ul 定位 (Position) 实例 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.position() 实例 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
.positionDiv { 
position: absolute; 
width: 75px; 
height: 75px; 
background: green; 


} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="targetElement"> 
<div class="positionDiv" id="position1"></div> 
<div class="positionDiv" id="position2"></div> 


<div class="positionDiv" id="position3"></div> 
<div class="positionDiv" id="position4"></div> 
</div> 


<script> 

$( "#position1" ).position({ 
my: "center", 
at: "center", 
of: "#targetElement" 


3); 


$( "#position2" ).position({ 
my: "left top", 
at: "left top", 
of: "#targetElement" 


3); 


$( "#position3" ).position({ 
my: "right center", 
at: "right bottom", 
of: "#targetElement" 


3); 


$( document ).mousemove(function( event ) ( 
$( "#position4" ).position({ 
my: "left+3 bottom-3", 
of: event, 
collection iit 
3); 
3); 


«/script» 


«/body» 
«/html» 


E —————————————————H———Á 
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jQuery UI API 类 别 -方法 (Methods) 


尽管 jQuery Ul 主要 由 小 部 件 (Widgets) . 2H (Interactions) 和 特效 
(Effects) 组 成 ， 但 是 还 有 一 些 简 单 的 方法 ， 增 加 了 便利 性 。 


API 描述 也 属于 类 别 
禁用 选择 匹配 的 元 
.disableSelection() ， 素 集合 内 的 文本 内 UI 核心 (UI Core) 
Bo 
effect() 对 一 个 元 素 应 用 动 特效 (Effects) | 特效 核心 
男 特 效 。 (Effects Core) 
启用 选择 匹配 的 元 
.enableSelection() ， 素 集合 内 的 文本 内 UI 核心 (UI Core) 
Bo 
focus() 异步 聚焦 到 一 个 元 方法 重 载 (Method Overrides) | 
l 素 。 UI 核心 (UI Core) 
cg AB 特效 (Effects) | 特效 核心 
hide() ele eas (Effects Core) | 方法 重 载 
5S m (Method Overrides) 
" 相对 另 一 个 元 素 定 方法 重 载 (Method Overrides) | 
ee 位 一 个 元 素 。 实用 工具 (Utilities) 
为 匹配 的 元 素 集 合 
removeUniqueld() ， 移 除 由 .uniqueld() UI 核心 (UI Core) 
设置 的 |d。 
.scrollParent() m PUT UI 核心 (UI Core) 
— 特效 (Effects) | 特效 核心 
.show() ERE RR (Effects Core) | 方法 重 载 
ud ids (Method Overrides) 
使 用 自 定义 效果 来 特效 (Effects) | 特效 核心 
.toggle() 显示 或 隐藏 匹配 的 (Effects Core) | AER 
元 素 。 (Method Overrides) 
为 匹配 的 元 素 集 合 
.Uniqueld() 生成 并 申请 一 个 唯 UI 核心 (UI Core) 
一 的 Id. 
zindex() 为 元 素 获 取 z- Ul 核心 (UI Core) 


index. 
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jQuery UI API - .disableSelection() 


所 属 类 别 


方法 (Methods) | Ul 核心 (UI Core) 


用 法 

描述 : 禁用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 
返回 : jQuery 

版 本 新 增 : 1.6 

版 本 废弃 : 1.9 


.disableSelection() 


该 方法 不 接受 任何 参数 。 
茶 用 的 文本 选择 是 有 害 的 ， 不 建议 使 用 。 


jQuery UI API - .enableSelection() 


所 属 类 别 


方法 (Methods) | Ul 核心 (UI Core) 


用 法 

描述 : 启用 选择 匹配 的 元 素 集合 内 的 文本 内 容 。 
返回 : jQuery 

版 本 新 增 : 1.6 

版 本 废弃 : 1.9 


.enableSelection() 


该 方法 不 接受 任何 参数 。 


.enableselection() 方法 可 用 于 启用 通过 
[.disableSelection()](api-disableSelection.html) 


茶 用 的 文本 选择 。 


jQuery UI API - .removeUniqueld() 


所 属 类 别 


方法 (Methods) | Ul 核心 (UI Core) 


用 法 
描述 : 为 匹配 的 元 素 集 合 移 除 由 .uniqueld() 设置 的 Id, 
返回 : jQuery 


版 本 新 增 : 1.9 


. removeUniqueld() 


该 方法 不 接受 任何 参数 。 


.removeUniqueId() 移 除 由 [.uniquerd()](api-uniqueId.html) 设置 的 
id。 在 未 使 用 .uniqueId() 设置 id 的 元 素 上 调用 .removeUniqueId() 则 无 影 
响 ， 即 使 该 元 素 有 一 个 id。 


jQuery UI API - .scrollParent() 


所 属 类 别 


方法 (Methods) | UI 核心 (UI Core) 


用 法 
描述 : 获取 最 近 的 可 滚动 的 祖先 。 


返回 : jQuery 


.scrollParent() 


该 方法 不 接受 任何 参数 。 


该 方法 查找 最 近 的 可 滚动 的 祖先 。 换 名 话说， .scrollParent() 查找 当前 所 选 元 
素 在 其 内 滚动 的 元 素 。 


该 方法 只 在 包含 一 个 元 素 的 jQuery 对 象 上 工作 。 


jQuery UI API - .uniqueld() 


所 属 类 别 


方法 (Methods) | UI 核心 (UI Core) 


用 法 

描述 : 为 匹配 的 元 素 集合 生成 并 申请 一 个 唯一 的 Id. 
返回 : jQuery 

版 本 新 增 : 1.9 


.uniqueId() 


该 方法 不 接受 任何 参数 。 


许多 小 部 件 需要 元 素 生成 唯一 的 id。 .uniqueId() 会 检查 元 素 是 否 有 id, MRT 
素 没 有 id， 它 将 生成 一 个 id， 并 设置 为 该 元 素 的 id。 在 未 检查 元 素 是 否 具 有 id 就 
调用 .uniquerd() 是 安全 的 。 当 小 部 件 使 用 后 需要 清除 ， 如 果 id 是 通过 
.ÜuniqueId() 添加 的 ， [.removeUniqueId()](api-removeUniqueId.html) 
方法 将 从 元 素 上 移 除 jd， 如果 id 不 是 通过 .uniqueId() 添加 的 ， 则 无 影 

响 。 .removeUniqueId() 之 所 以 能 区 分 id， 是 因为 .uniqueId() 生成 的 id # 
有 前 级 "ui-id-" 。 


jQuery UI API - .zindex() 


所 属 类 别 


方法 (Methods) | Ul 核心 (UI Core) 


.zindex() 用 法 


描述 : 为 元 素 获 取 z-index。 
返回 : jQuery 


.ZIndex() 


该 方法 不 接受 任何 参数 。 


.zIndex() 方法 在 查找 一 个 元 素 的 z-index 时 非常 有 用 ， 忽 略 z-index 是 否 是 直 
接 设 置 在 元 素 上 还 是 设置 在 祖先 元 素 上 。 为 了 确定 z-index， 该 方法 会 在 指定 的 元 
素 上 开始 ， 且 会 治 着 DOM 查找 ， 直 到 找到 一 个 带 有 z-index 的 已 定位 的 元 素 。 如 
果 未 找到 这 样 的 元 素 ， 该 方法 将 返回 一 个 o fA. 

该 方法 假设 带 有 铸 套 z-index 的 元 素 不 带 有 一 个 0 值 的 z-index。 例 如 ， 给 出 下 
HAY DOM, Asics RY MA A z-index， 因 为 在 Internet Explorer 中 无 法 区 
分 一 个 9 显 式 值 和 无 值 。 


«div style="z-index: -10;"> 
<div style="z-index: 0;"></div> 
</div> 


.zindex( zindex ) 用 法 


描述 : 为 元 素 设 置 z-index。 
返回 : Integer 


.ZIndex( zIndex ) 


学 


参数 类 描 


zlndex Integer 要 设置 的 z-index。 


| 
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这 相当 于 .css( "zIndex", zIndex ) 。 
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jQuery UI API 类 别 - 


API 
:data() Selector 


‘focusable 
Selector 


:tabbable 
Selector 


描述 


选择 器 (Selectors) 


~ 已 存储 在 指定 的 键 下 的 元 


选择 可 被 聚 


选择 用 户 可 通 


RARE IES 


it tab 键 聚 焦 的 元 


也 属于 类 别 


UI 核心 (UI 
Core) 


Ul 核心 (UI 
Core) 


Ul 核心 (UI 
Core) 


jQuery UI API - :data() Selector 


所 属 类 别 

选择 器 (Selectors) | Ul 核心 (Ul Core) 
用 法 

描述 : 选择 数据 已 存储 在 指定 的 键 下 的 元 素 。 


jQuery( ":data(key)" ) 


学 


参数 描 
key 数据 的 键 。 


表达 式 $( "div:data(foo)") 匹配 一 个 通过 .data( "foo", value ) 存储 
数据 的 div 。 


实例 


选择 带 有 数据 的 元 素 ， 改 变 它 们 的 背景 颜色 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>:data() Selector 实例 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
border: 1px solid #000; 
float: left; 
} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 


<script> 
$( "#one" ).data( "color", "blue" ); 
$( "#three" ).data( "color", "green" ); 


$( ":data(color)" ).each(function() { 
var element - $( this ); 
element.css( "backgroundColor", element.data( "color" ) ); 


3): 


«/script» 


«/body» 
«/html» 


Bp e——Há—— Moose 





jQuery UI API - :focusable Selector 


所 属 类 别 
选择 器 (Selectors) | Ul 核心 (UI Core) 
法 


描述 : 选择 可 被 聚焦 的 元 素 。 


dB 


jQuery( ":focusable" ) 


一 些 元 素 本 身 是 可 聚焦 的 (focusable) ， 而 另 一 些 元 素 需 要 显 式 设置 tab S85. 

上 两 种 情况 ， 为 了 可 聚焦 (focusable) ， 元 素 都 必须 是 可 见 的 。 

下 面 类 型 的 元 素 如 果 未 被 禁用 ， 则 是 可 聚焦 的 

(focusable) : input, select 、 textarea. button 和 object > $% 
如 果 带 有 href 或 tabindex 属性 ， 则 是 可 聚焦 的 (focusable) 。 area 元 素 
如 果 在 一 个 已 命名 的 map 内 ， 且 带 有 href 属性 ， 且 有 一 个 可 见 的 图 像 使 用 了 访 
map， 则 是 可 聚焦 的 (focusable) 。 所 有 其 他 完全 基于 tabindex 属性 和 可 见 度 
的 元 素 是 可 聚焦 的 (focusable) 。 


注释 : FARA tab 索引 的 元 素 是 :focusable ， 不 是 
[:tabbable](api-tabbable-selector.html) 。 


Y 


实例 


选择 可 聚焦 的 元 素 ， 且 用 一 个 红色 边框 突出 显示 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>:focusable Selector 实例 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
input, a, p { 
border: 1px solid #000; 
} 
div { 
padding: 5px; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div><input value=" 文 本 输入 "></div> 

<div><a> 不 带 有 href 的 锚 </a></div> 

<div><a href="#"> 带 有 href 的 锚 </a></div> 
<div><p> 不 带 有 tabindex 的 段落 </p></div> 

<div><p tabindex="1"> 带 有 tabindex 的 段落 </p></div> 


<script> 
$( ":focusable" ).css( "border-color", "red" ); 
</script> 


</body> 
</html> 





jQuery UI API - :tabbable Selector 


所 属 类 别 

选择 器 (Selectors) | Ul 核心 (UI Core) 
用 法 

描述 : 选择 用 户 可 通过 tab 键 聚焦 的 元 素 。 


jQuery( ":tabbable" ) 


一 些 元 素 本 身 是 可 通过 tab 键 聚 焦 的 (tabbable) ， 而 另 一 些 元 素 需 要 显 式 设置 一 
DNEH tab 索引 。 以 上 两 种 情况 ， 为 了 可 通过 tab R Rf (tabbable) ， 元 素 都 必 
须 是 可 见 的 。 

下 面 类 型 的 元 素 如 果 不 带 有 负 的 tab 索引 且 未 被 禁用 ， 则 是 可 通过 tab 键 聚 焦 的 
(tabbable) : input 、 select, textarea, button 和 object 。 锚 如 
果 带 有 href 或 正 的 tabindex 属性 ， 则 是 可 通过 tab 键 聚焦 的 

(tabbable) > area 元 素 如 果 在 一 个 已 命名 的 map 内 ， 且 带 有 href Bile, 
且 有 一 个 可 见 的 图 像 使 用 了 该 map， 则 是 可 通过 tab 键 聚焦 的 (tabbable) 。 所 有 
其 他 完全 基于 tabindex 属性 和 可 见 度 的 元 素 是 可 通过 tab 键 聚焦 的 
(tabbable) 。 


注释 : 带 有 负 的 tab 索引 的 元 素 是 
[:focusable](api-focusable-selector.html) ， 不 是 :tabbable 。 


实例 


选择 可 通过 tab 键 聚焦 的 元 素 ， 且 用 一 个 红色 边框 突出 显示 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>:tabbable Selector 实例 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
input { 
border: 1px solid #000; 
} 
div { 
padding: 5px; 
} 
</style> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
</head> 
<body> 


<div><input value=" tabindex"></div> 
<div><input tabindex="5" value=" 正 的 tabindex"></div> 
<div><input tabindex="-1" value=" 负 的 tabindex"></div> 


<script> 
$( ":tabbable" ).css( "border-color", "red" ); 
</script> 


</body> 
</html> 
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jQuery UI API 类 别 - 主题 (Theming) 


jQuery Ul 包括 一 个 强大 的 CSS 框架 ， 用 于 创建 自 定义 的 jQuery 小 部 件 。 该 框架 
包括 涵盖 广泛 的 公共 用 户 界 面 需求 的 Class， 并 且 可 以 使 用 jQuery Ul ThemeRoller 
进行 操纵 。 通 过 使 用 jQuery UI CSS 框架 创建 您 自己 的 UI 组 件 ， 您 应 采用 共享 标 
记 公 约 ， 便 于 插件 社区 的 代码 集成 。 您 可 以 查看 jQuery Ul 主题 了 解 更 多 详情 。 


API 描述 

CSS 框架 (CSS jQuery UI 使 用 的 允许 组 件 主题 化 的 Class 名 称 
Framework) 列表 。 

图 标 (Icons) jQuery UI 提供 的 图 标 列表 。 


堆 过 元素 (Stacking 


一 种 处 理 z-index MHS TMNT. 
Elements) 


jQuery UI API - CSS 框架 (CSS Framework) 


下 面 是 jQuery UI 使 用 的 Class 名 称 列 表 。 这 些 Class 用 来 创建 跨 应 用 程序 的 视觉 

一 致 性 ， 且 人 允许 组 件 通 过 jQuery UI ThemeRoller 进行 主题 化 。 下 面 的 CSS 类 根据 
样式 是 否 是 固定 的 结构 化 的 ， 或 者 是 否 是 可 主题 化 的 (颜色 、 字 体 、 背 景 等 ) ， 分 
别 定 义 在 ui.core.css 和 ui.theme.css 两 个 文件 中 。 


布局 助手 


e .ui-helper-hidden : 对 元 素 应 用 display: none > 

e .ui-helper-hidden-accessible : 对 元 素 应 用 访问 隐藏 (通过 页 面 绝 对 定 
位 ) 。 

e .ui-helper-reset : Ul 元 素 的 基本 样式 重 置 。 重 置 的 元 素 比 
如 : padding 、 margin. text-decoration 、list-style， 等 等 。 

e .ui-helper-clearfix : 对 父 元 素 应 用 浮动 包装 属性 。 

.ui-helper-zfix :对 &lt;iframe&gt; 元 素 应 用 iframe "fix" CSS, 

e .ui-front : 应 用 z-index 来 管理 屏幕 上 多 个 小 部 件 的 堆 释 ， 如 需 了 解 更 多 
详情 ， 请 查看 AmA (Stacking Elements) 页 面 。 


小 部 件 容器 


e .ui-widget : 对 所 有 小 部 件 的 外 部 容器 应 用 的 Class。 对 小 部 件 应 用 字体 和 
字体 尺寸 ， 同 时 也 对 自 表单 元 素 应 用 相同 的 字体 和 1em 的 字体 尺寸 ， 以 应 对 
Windows 浏览 器 中 的 继承 问题 。 

e .ui-widget-header : 对 标题 容器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 链 接 、 图 标 应 用 标题 容器 样式 。 

e .ui-widget-content : 对 内 容 容 器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 链 接 、 图 标 应 用 内 容 容器 样式 。 (可 应 用 到 标题 的 父 元 素 或 者 同 级 元 素 ) 


交互 状态 


e .ui-state-default : 对 可 点 击 按钮 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "clickable default" 容器 样式 。 

e .ui-state-hover : 当 饮 标 苹 浮 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 
素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-focus : 当 键 盘 聚 焦 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 
素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-active : 当 鼠 标点 击 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 素 
及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable active" 容器 样式 。 


交互 提示 Cues 


ls les 
[=] 


e .ui-state-highlight : 对 高 完 或 者 选中 元 素 应 用 的 Class。 对 元 素 及 其 子 


元 素 的 文本 、 链 接 、 图 标 应 用 "highlight" 容器 样式 。 

e .ui-state-error : 对 错误 消息 容器 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "error" 容器 样式 。 

e .ui-state-error-text : 对 只 有 无 背景 的 错误 文本 颜色 应 用 的 Class, WI 
用 于 表单 标签 ， 也 可 以 对 子 图 标 应 用 错误 图 标 颜色 。 

e .ui-state-disabled : 对 禁用 的 UI 元 素 应 用 一 个 暗淡 的 不 透明 度 。 意 味 着 
对 一 个 已 经 定义 样式 的 元 素 添 加 额外 的 样式 。 

e .ui-priority-primary : 对 第 一 优先 权 的 按钮 应 用 的 Class。 应 用 粗 体 文 
本 。 

e .ui-priority-secondary : 对 第 二 优先 权 的 按钮 应 用 的 Class, © AER 
粗细 的 文本 ， 对 元 素 应 用 轻微 的 透明 度 。 


图 标 


状态 和 图 像 


e .ui-icon : 对 图 标 元 素 应 用 的 基本 Class。 设 置 尺 寸 为 16px 方块 ， 隐 藏 内 
部 文本 ， 对 "content" 状态 的 精灵 图 像 设 置 背 景 图 像 。 注 意 : .ui-icon 
class 将 根据 它 的 父 容 器 得 到 一 个 不 同 的 精灵 背景 图 像 。 例 
如 ， ui-state-default 容器 内 的 ui-icon 元 素 将 根据 
ui-state-default 的 图 标 颜 色 进 行 着 色 。 


图 标 类 型 


在 声明 .ui-icon class 之 后 ， 接 着 您 可 以 声明 一 个 秒 速 图 标 类 型 的 class。 通 常 
情况 下 ， 图 标 class 遵循 语法 


.ui-icon-(icon type}-{icon sub description}-{direction} o 
例如 ， 一 个 指向 右 侧 的 三 角形 图 标 ， 如 下 所 示 : .ui-icon-triangle-1-e 


jQuery UI 的 ThemeRoller 在 它 的 预览 一 栏 中 提供 了 全 套 的 CSS 框架 图 标 。 将 鼠标 
悬浮 在 图 标 上 可 查看 cass 名 称 。 


其 他 视觉 效果 


圆 角 半径 助手 


.ui-corner-tl : 对 元 素 的 左上 角 应 用 圆 角 半 径 。 
.ui-corner-tr : 对 元 素 的 右上 角 应 用 圆 角 半径 。 
.ui-corner-bl : 对 元 素 的 左下 角 应 用 圆 角 半径 。 
.ui-corner-br : 对 元 素 的 右 下 角 应 用 圆 角 半径 。 
.ui-corner-top : 对 元 素 上 边 的 左右 角 应 用 圆 角 半径 。 
.ui-corner-bottom : 对 元 素 下 边 的 左右 角 应 用 圆 角 半径 。 
.ui-corner-right : 对 元 素 右 边 的 上 下 角 应 用 圆 角 半径 。 
.Ui-corner-left : 对 元 素 左边 的 上 下 角 应 用 圆 角 半 径 。 


e .ui-corner-all : 对 元 素 的 所 有 四 个 角 应 用 圆 角 半径 。 
feta & 阴影 


e .ui-widget-overlay : 对 覆盖 屏幕 点 用 100% 宽度 和 高 度 ， 同 时 设置 背景 
颜色 /纹理 和 屏幕 不 透明 度 。 

e .ui-widget-shadow : 对 覆盖 应 用 的 Class， 设 置 了 不 透明 度 、 上 偏 移 / 左 偏 
移 ， 以 及 阴影 的 "厚度 "。 厚 度 是 通过 对 阴影 所 有 边 设 置 内 边 距 (padding) 进 
行 应 用 的 。 偏 移 是 通过 设置 上 外 边 距 (margin) 和 左 外 边 距 (margin) 进行 应 
用 的 (可 以 是 正 数 ， 也 可 以 是 负数 ) 。 


jQuery UI API - 图 标 (Icons) 


jQuery UI 提供 了 大 量 可 以 通过 对 元 素 应 用 Class 名 称 来 使 用 的 图 标 (Icons) 。 
Class 名 称 大 体 上 遵循 语法 

.Ui-icon-{icon type}-{icon sub description}-{direction} 。 例 如 ， 下 面 
将 显示 一 个 向 北 的 厚 箭头 的 图 标 : 


<span class="ui-icon ui-icon-arrowthick-1-n"></span> 


图 标 也 集成 到 一 些 jQuery UI 的 小 部 件 ， 比 如 accordion, button, menu. 
下 面 是 jQuery Ul 提供 的 图 标的 完整 列表 : 


jQuery UI API - E $ 7558 (Stacking Elements) 


堆 且 的 或 者 移动 到 其 他 元 素 前 面 的 小 部 件 (Widgets) 当 放 置 到 现实 世界 的 页 面 中 
时 经 常 面临 挑战 。 通 常 通过 简单 地 改变 堆 受 元 素 的 z-index 或 者 父 元 素来 避免 页 
面 上 的 冲突 。 但 是 ，jQuery Ul 需要 一 个 不 需要 手动 改变 z-index 值 的 通用 的 解 
决 方案 。 这 是 通过 ui-front class 来 完成 的 ， 通 常 还 伴随 着 堆 琶 组 件 上 的 
appendTo 选项 。 


ui-front class 


ui-front class 是 非常 基础 的 。 它 只 是 在 元 素 上 设置 了 一 个 静态 的 z-index 
值 。 但 是 ，class 的 存在 是 用 来 表明 堆 释 元 素 要 追加 到 哪里 。 这 人 允许 我 们 利用 府 套 
层 内 容 ， 生 成 一 个 在 大 多 数 情况 下 都 能 使 用 的 默认 的 DOM 位 置 。 


注释 : 当 使 用 ui-front 时 ， 您 必须 设置 position 7j relative 、 
absolute 或 fixed ， 以 便 应 用 z-index 。 


HE SFX (stacking technique) 


MEDIE & 5538 81 RAVE A) BB AB Z8 EA ui-front class， 且 在 大 多 数 情况 
下 ， 应 该 有 一 个 appendTo mm, HATO SIA RAPA : 


e 如 果 一 个 值 设置 为 appendTo 选项 ， 则 追加 堆 释 元 素 到 指定 的 元 素 。 
e 如 果 appendTo 选项 被 设置 为 null (默认 ) ， 则 小 部 件 应 从 相关 的 元 素 开 
Amm DOM。 例 如 ， 当 自动 完成 (autocomplete) 菜单 被 追加 到 DOM, iF 
则 从 相关 的 input 元 素 开始 。 

o 如 果 找 到 一 个 带 有 ui-front class 的 元 素 ， 则 追加 到 该 元 素 。 

o 如 果 没 有 找到 一 个 带 有 ui-front class 的 元 素 ， 则 追加 到 主体 

(body) 。 

HEATER position 必须 设置 为 relative, absolute 或 fixed , 
以 便 应 用 来 自 ui-front class 的 z-index 。 使 用 .position() 将 自动 设置 


position 。 
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jQuery UI API X #] - UI 核心 (UI Core) 


由 jquery.ui.core.js 提供 的 功能 。 


API 


:data() Selector 


.disableSelection() 


.enableSelection() 


.focus() 


:focusable 
Selector 


jQuery.ui.keyCode 


.removeUniqueld() 


.scrollParent() 


:tabbable Selector 


.uniqueld() 


.ZIndex() 


描述 


选择 数据 已 存储 在 指定 的 
键 下 的 元 素 。 


茶 用 选择 匹配 的 元 素 集 合 
内 的 文本 内 容 。 


启用 选择 匹配 的 元 素 集 合 
内 的 文本 内 容 。 


异步 聚焦 到 一 个 元 素 。 


选择 可 被 聚焦 的 元 素 。 
一 个 相对 于 数字 值 的 关键 
代码 描述 的 映射 。 


为 匹配 的 元 素 集 合 移 除 由 
.uniqueld() 设置 的 Id. 


获取 最 近 的 可 滚动 的 和 祖 


o 


选择 用 户 可 通过 tab sez 
焦 的 元 素 。 


为 匹配 的 元 素 集合 生成 并 
申请 一 个 唯一 的 Id. 


为 元 素 获 取 z-index。 


也 属于 类 别 


选择 器 (Selectors) 
方法 (Methods) 


方法 (Methods) 


方法 重 载 (Method 
Overrides) | 方法 
(Methods) 


选择 器 (Selectors) 


方法 (Methods) 
方法 (Methods) 
选择 器 (Selectors) 


方法 (Methods) 


方法 (Methods) 
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jQuery UI API # 2| - 实用 工具 (Utilities) 


API 描述 也 属于 类 别 
m Easing 要 指定 动画 在 不 同 点 上 的 行 让 如 
M ago, 使 用 与 所 有 jQuery U1 小 部 件 相同 的 抽象 化 。 小 部 件 
Boe 来 创建 有 状态 的 jQuery 插件 。 (Widgets) 
Factory) 
插件 桥 jQuery.widget.bridge() 方法 是 jQuery 部 件 
(Widget Æ (Widget Factory) 的 一 部 分 。 它 扮演 着 。 小 部 件 
Plugin 由 $.widget() 创建 的 对 象 和 jQuery API 之 (Widgets) 
Bridge) 间 的 中 介 。 
鼠标 交互 i 
(Mouse 基本 交互 层 。 a 


; (Interactions) 
Interaction) 
方法 重 载 
(Method 
Overrides) | Æ 
法 (Method) 


.position() 相对 另 一 个 元 素 定 位 一 个 元 素 。 
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jQuery UI API - B4 F € (Widget Factory) 
所 属 类 别 
实用 工具 (Utilities) | 小 部 件 (Widgets) 


jQuery.widget( name [, base ], prototype ) 用 法 
描述 : 使 用 与 所 有 jQuery UI 小 部 件 相 同 的 抽象 化 来 创建 有 状态 的 jQuery 插件 。 


jQuery.widget( name [, base ], prototype ) 


参数 类 型 类 型 
name String 要 创建 的 小 部 件 名 称 ， 包 括 命名 空间 。 
xr A = S 
Dade esten 要 继承 的 基础 小 部 件 。 必 须 是 一 个 可 以 使 用 new 


关键 词 实例 化 的 构造 画 数 。 默 认为 jQuery.Widget。 
prototype ”PlainObject ”要 作为 小 部 件 原型 使 用 的 对 象 。 
您 可 以 使 用 $.widget 对 象 作为 要 继承 的 基础 ， 或 者 可 以 明确 地 从 现 有 的 jQuery 


Ul 或 第 三 方 控件 ， 从 头 开始 创建 新 的 小 部 件 。 定 义 一 个 带 有 相同 名 称 的 小 部 件 来 继 
承 基 础 部 件 ， 甚 至 允许 您 适当 地 扩展 小 部 件 。 


jQuery Ul 中 包含 许多 保持 状态 的 小 部 件 ， 因 此 比 典型 的 jQuery 插件 稍 有 不 同 的 使 
用 模式 。 所 有 的 jQuery UI 小 部 件 使 用 相同 的 模式 ， 这 是 由 部 件 库 (Widget 
Factory) 定义 的 。 所 以 ， 只 要 您 学 会 使 用 其 中 一 个 ， 您 就 知道 如 何 使 用 其 他 的 小 部 
件 (Widget) 。 


注释 : 本 章节 使 用 进度 条 部 件 (Progressbar Widget) 演示 实例 ， 但 是 语法 适用 于 
每 个 小 部 件 。 


初始 化 


为 了 跟踪 小 部 件 的 状态 。 我 们 必须 引入 小 部 件 的 全 生命 周期 。 小 部 件 初始 化 时 生命 
周期 开始 。 要 初始 化 一 个 小 部 件 ， 我 们 只 需要 简单 地 在 一 个 或 多 个 元 素 上 调用 插 
件 。 


$( "#elem" ).progressbar(); 


这 将 初始 化 jQuery 对 象 中 的 每 个 元 素 。 上 面 实 例 中 元 素 id 为 "elem", 


选项 
由 于 progressbar() 调用 时 不 带 参 数 ， 小 部 件 是 使 用 默认 选项 进行 初始 化 的 。 
我 们 可 以 在 初始 化 时 传递 一 组 选项 来 覆盖 默认 选项 : 


$( "#elem" ).progressbar({ value: 20 }); 


我 们 可 以 根据 需要 传递 选项 的 个 数 ， 任 何 我 们 未 传递 的 选项 都 使 用 它们 的 默认 值 。 


您 可 以 传递 多 个 选项 参数， 这 些 参 数 将 会 被 合并 为 一 个 对 象 (类 似 于 
$.extend( true, target, objecti, objectN ) ) 。 这 在 为 所 有 实例 覆盖 一 
些 设置 ， 实 例 间 共享 选项 时 很 有 用 : 


var options = { modal: true, show: "slow" }; 
$( "#dialogi" ).dialog( options ); 
$( "#dialog2" ).dialog( options, { autoOpen: false }); 
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对 象 。 数 组 是 唯一 的 例外 ， 它 们 是 按 原样 引用 的 。 这 个 例外 是 为 了 适当 地 支持 数据 
绑 定 ， 其 中 数据 源 必须 作为 引用 。 


默认 值 保存 在 小 部 件 的 属性 中 ， 因 此 我 们 可 以 覆盖 jQuery Ul 设置 的 值 。 例 如 ， 在 
下 面 的 设置 后 ， 所 有 将 来 的 进度 条 实例 将 默认 为 值 80 : 


$.ui.progressbar.prototype.options.value = 80; 


选项 是 小 部 件 状 态 的 组 成 部 分 ， 所 以 我 们 也 可 以 在 初始 化 后 设置 选项 。 我 们 会 在 后 
续 看 到 option 方法 。 


方法 
现在 小 部 件 已 经 初始 化 ， 我 们 可 以 查询 它 的 状态 ， 或 者 在 小 部 件 上 执行 动作 。 所 有 
初始 化 后 的 动作 都 是 以 方法 调用 方式 执行 。 为 了 在 小 部 件 上 调用 一 个 方法 ， 我 们 向 


jQuery 插件 传递 方法 的 名 称 。 例 如 ， 在 进度 条 部 件 (Progressbar Widget) 上 调用 
value() 方法 ， 我 们 可 以 使 用 : 


$( "#elem" ).progressbar( "value" ); 


如 果 方 法 接受 参数 ， 我 们 可 以 在 方法 名 称 后 传递 参数 。 例 如 ， 要 传递 参数 40 到 
value() 方法 ， 我 们 可 以 使 用 : 


$( "#elem" ).progressbar( "value", 40 ); 


就 像 jQuery 中 的 其 他 方法 ， 大 多 数 的 小 部 件 方法 返回 jQuery 对 象 : 
$( "#elem" ) 


.progressbar( "value", 90 ) 
.addClass( "almost-done" ); 


每 个 小 部 件 都 有 自己 的 方法 设置 ， 这 些 设置 是 基于 小 部 件 提供 的 功能 。 但 是 ， 有 一 
些 方法 是 存在 于 所 有 的 小 部 件 上 ， 这 会 在 下 面 和 行 洋 细 讲解 


事件 
所 有 的 小 部 件 都 有 与 它们 各 种 行为 相关 的 事件 ， 以 便 在 状态 改变 的 时 候 通知 您 。 对 


于 大 多 数 的 小 部 件 ， 当 事件 被 触发 时 ， 名 称 以 小 部 件 名 称 的 小 写字 母 形 式 作为 前 
级 。 例 如 ， 我 们 可 以 绑 定 进度 条 的 change 事件 ， 该 事件 在 值 改变 时 触发 。 


$( "#elem" ).bind( "progressbarchange", function() { 
alert( "The value has changed!" ); 


3); 


每 个 事件 都 有 一 个 对 应 的 回调 ， 这 会 作为 选项 。 如 果 需 要 ， 我 们 可 以 抓 住 进度 条 的 
change 回调 ， 而 不 用 绑 定 oret Ecc 事件 。 


$( "#elem" ).progressbar(( 
change: function() { 
alert( "The value has changed!" ); 


} 
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所 有 的 小 部 件 都 有 一 个 change 事件 ， 该 事件 在 实例 化 时 触发 。 


实例 化 


小 部 件 的 实例 是 使 用 带 有 小 部 件 全 称 作 为 键 的 jQuery.data() 存储 的 。 因 此 ， 
您 可 以 使 用 下 面 代码 从 元 素 检索 进度 条 部 件 (Progressbar Widget) 的 实例 对 象 。 


$( "#elem" ).data( "ui-progressbar" ); 
元 素 是 否 绑 定 了 给 定 小 部 件 ， 可 以 使 用 :data 选择 器 来 检测 。 


$( "#elem" ).is( ":data( 'ui-progressbar' )" ); // true 
$( "#elem" ).is( ":data( 'ui-draggable' )" ); // false 


您 也 可 以 使 用 :data 来 获得 作为 给 定 小 部 件 实例 的 所 有 元 素 的 列表 。 


$( ":data( 'ui-progressbar' )" ); 


属性 
所 有 的 小 部 件 都 有 下 面 的 属性 : 


defaultElement : 当 构 造 小 部 件 实例 未 提供 元 素 时 要 使 用 的 元 素 。 例 如 ， 由 于 
进度 条 的 defaultElement 是 

"&1t;div&gt; ", $.ui.progressbar(( value: 50 }) 在 一 个 新 建 的 
&lt;div&gt; 上 实例 化 进度 条 小 部 件 实例 。 

document : 其 内 包含 小 部 件 元 素 的 document 。 如 果 需 要 在 框架 内 与 小 部 件 


进行 交互 时 很 有 用 。 
e element : 一 个 jQuery 对 象 ， 包 含 用 于 实例 化 小 部 件 的 元 素 。 如 果 您 选择 多 


个 元 素 并 调用 .mywidget() ， 将 为 每 个 元 素 创建 一 个 单独 的 小 部 件 实 例 。 因 
此 ， 该 属性 总 是 包含 一 个 元 素 。 

namespace : 小 部 件 原型 存储 的 全 局 jQuery 对 象 的 位 置 。 例 如 ， "ui" 的 
namespace 表示 小 部 件 原 型 存储 在 $.ui 。 

options : 一 个 包含 小 部 件 当 前 使 用 选项 的 对 象 。 在 实例 化 时 ， 用 户 提 供 的 任 
何 选 项 将 会 自动 与 $.myNamespace.mywidget.prototype.options 中 定义 
的 默认 值 合 并 。 用 户 指定 的 选项 会 覆盖 默认 值 。 

uuid : 一 个 表示 控件 标识 符 的 唯一 整数 。 

version : 小 部 件 的 字符 串 版 本 。 对 于 jQuery UI 小 部 件 ， 该 属性 会 被 设置 为 小 
vi jQuery UI 的 版 本 。 插 件 开发 者 必须 在 他 们 的 原型 中 明确 设置 该 属 
widgetEventPrefix : 添加 到 小 部 件 事件 名 称 的 前 级 。 例 如 ， 可 拖 搜 小 部 件 
(Draggable Widget) 的 widgetEventPrefix 是 "drag" ， 因 此 当 创 建 
一 个 draggable 时 ， 事 件 的 名 称 是 "dragcreate" 。 默 认 情 况 下 ， 小 部 件 的 
widgetEventPrefix 是 它 的 名 称 。 注 意 : 该 属性 已 被 度 弃 ， 将 在 以 后 的 版 
本 中 非常 。 事 件 名 称 将 被 改 为 widgetName:eventName (例如 
"draggable:create" ) 。 

widgetFullName : 包含 命名 空间 的 小 部 件 全 称 。 对 于 

$.widget( "myNamespace.myWidget", () ) ， widgetFullName 将 是 
"myNamespace-myWidget" 。 

e widgetName : 小 部 件 的 名 称 。 对 于 

$.widget( "myNamespace.myWidget", () ) ， widgetName 将 是 
"mywidget" 。 

window : 其 内 包含 小 部 件 元 素 的 window 。 如 果 需 要 在 框架 内 与 小 部 件 进行 
交互 时 很 有 用 。 


jQuery.Widget 基础 小 部 件 用 法 


描述 : 部 件 库 (Widget Factory) 使 用 的 基础 小 部 件 。 


快速 导航 


选项 


disabledhideshow | create delay destroy focusable getCreateEventData ge 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 小 部 件 。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 小 部 件 : 


$( ".selector" ) ,widget({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).widget( "option", "disabled" ); 


// setter 
$( ".selector" ).widget( "option", "disabled", true ); 


默认 值 : false 


hide 

类 型 : Boolean 或 Number 或 String 或 Object 

描述 : 是 否 使 用 动画 隐藏 元 素 ， 以 及 如 何 动画 隐藏 元 素 。 
支持 多 个 类 型 : 


e Boolean: 当 设 置 为 false 时 ， 则 不 使 用 动画 ， 元 素 会 立即 隐藏 。 当 设置 为 
true 时 ， 元 素 会 使 用 默认 的 持续 时 间 和 默认 的 easing 淡出 。 

e Number : 元 素 将 使 用 指定 的 持续 时 间 和 默认 的 easing 淡出 。 

e String : 元 素 将 使 用 指定 的 特效 隐藏 。 该 值 可 以 是 一 个 内 建 的 jQuery 动画 方法 
名 称 ， 上 比如 "slideup" ， 也 可 以 是 一 个 jQuery Ul 特效 的 名 称 ， 比 
如 "fold" 。 以 上 两 种 情况 的 特效 将 使 用 默认 的 持续 时 间 和 默认 的 easing。 

e Object : 如 果 值 是 一 个 对 象 ， 则 effect 、 delay 、 duration 和 
easing 属性 会 被 提供 。 如 果 effect 属性 包含 jQuery 方法 的 名 称 ， 则 使 
用 该 方法 ， 否 则 ， 它 被 认为 是 一 个 jQuery UI 特效 的 名 称 。 当 使 用 一 个 支持 额 
外 设置 的 jQuery Ul 特效 时 ， 您 可 以 在 对 象 中 包含 这 些 设置 ， 且 它们 会 被 传递 


给 特效 。 如 果 duration 或 easing 被 省 略 ， 则 使 用 默认 值 。 如 果 
effect 被 省 略 ， 则 使 用 "fadeout" 。 如 果 delay 被 省 略 ， 则 不 使 用 延 


A. 
代码 实例 : 
初始 化 带 有 指定 hide 选项 的 小 部 件 : 

$( ".selector" ) ,widget({ hide: { effect: "explode", duration: 100( 
‘| — 
在 初始 化 后 ， 获 取 或 设置 hide wR: 








// getter 
var hide = $( ".selector" ).widget( "option", "hide" ); 


// setter 
$( ".selector" ).widget( "option", "hide", { effect: "explode", du 





默认 值 : null 


show 

类 型 : Boolean 或 Number 或 String 或 Object 

描述 : 是 否 使 用 动画 显示 元 素 ， 以 及 如 何 动画 显示 元 素 。 
支持 多 个 类 型 : 


e Boolean: 当 设 置 为 false 时 ， 则 不 使 用 动画 ， 元 素 会 立即 显示 。 当 设置 为 
true 时 ， 元 素 会 使 用 默认 的 持续 时 间 和 默认 的 easing RA. 

e Number : 元 素 将 使 用 指定 的 持续 时 间 和 默认 的 easing SKA. 

e String : 元 素 将 使 用 指定 的 特效 显示 。 该 值 可 以 是 一 个 内 建 的 jQuery 动画 方法 
名 称 ， 比 如 "slideDown" ， 也 可 以 是 一 个 jQuery Ul 特效 的 名 称 ， 比 
如 "fold" 。 以 上 两 种 情况 的 特效 将 使 用 默认 的 持续 时 间 和 默认 的 easing. 

e Object : 如 果 值 是 一 个 对 象 ， 则 effect, delay, duration 和 
easing 属性 会 被 提供 。 如 果 effect 属性 包含 jQuery 方法 的 名 称 ， 则 使 
用 该 方法 ， 否 则 ， 它 被 认为 是 一 个 jQuery UI 特效 的 名 称 。 当 使 用 一 个 支持 额 
外 设置 的 jQuery Ul 特效 时 ， 您 可 以 在 对 象 中 包含 这 些 设置 ， 且 它们 会 被 传递 
给 特效 。 如 果 duration 或 easing 被 省 略 ， 则 使 用 默认 值 。 如 果 
effect 被 省 略 ， 则 使 用 "fadeIn" 。 如 果 delay 被 省 略 ， 则 不 使 用 延 


R, 
代码 实例 : 
初始 化 带 有 指定 show 选项 的 小 部 件 : 


$( ".selector" ) ,widget({ show: { effect: "blind", duration: 800 } 





«| 


在 初始 化 后 ， 获 取 或 设置 show 选项 : 





// getter 
var show = $( ".selector" ).widget( "option", "show" ); 


// setter 
$( ".selector" ).widget( "option", "show", { effect: "blind", dural 


默认 值 : null 


方法 





_create() 


类 型 : jQuery (plugin only) 


描述 : _create() DAE DSH ERNA. SB (B= this.element 
和 this.options 已 经 设置 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
基于 一 个 选项 设置 小 部 件 元 素 的 背景 颜色 。 


_create: function() { 
this.element.css( "background-color", this.options.color ); 


} 


_delay( fn [, delay ] ) 

类 型 : Number 

描述 : 在 指定 延迟 后 调用 提供 的 函数 。 保 持 this 上 下 文正 确 。 本 质 上 是 
SetTimeout() 。 


使 用 clearTimeout() 返回 超时 ID, 


e fn X Zi : Function() 或 String 描述 : 要 调用 的 函数 。 也 可 以 是 小 部 件 上 方法 的 
名 称 。 
e delay 类 型 Number 描述 : 调用 函数 前 等 待 的 毫秒 数 ， 默 认为 0 。 


代码 实例 : 
100 毫秒 后 在 小 部 件 上 调用 foo() 方法 。 


this._delay( this._foo, 100 ); 


_destroy() 


类 型 : jQuery (plugin only) 


描述 : 公共 的 destroy() 方法 清除 所 有 的 公共 数据 、 事 件 等 等 。 代 表 了 定制 、 
指定 小 部 件 、 清 理 的 _destroy() 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
当 小 部 件 被 销毁 时 ， 从 小 部 件 的 元 素 移 除 一 个 class. 


destroy: function() { 
this.element.removeClass( "my-widget" ); 


j 


. focusable( element ) 


类 型 : jQuery (plugin only) 


描述 : 建立 聚焦 在 元 素 上 时 要 应 用 ui-state-focus class 的 element , 
e element 类 型 : jQuery 描述 : 要 应 用 focusable 行为 的 元 素 。 
代码 实例 : 


向 小 部 件 内 的 一 组 元 素 应 用 focusable 样式 : 


this. focusable( this.element.find( ".my-items" ) ); 


_getCreateEventData() 
类 型 : Object 


描述 : 所 有 的 小 部 件 触发 create 事件 。 默 认 情 况 下 ， 事 件 中 不 提供 任何 的 数 
据 ， 但 是 该 方法 会 返回 一 个 对 象 ， 作 为 “create 事件 的 数据 被 传递 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 


向 create 事件 处 理 程 序 传 递 小 部 件 的 选项 ， 作 为 参数 。 


_getCreateEventData: function() { 
return this.options; 


} 


_getCreateOptions() 
类 型 : Object 
描述 : 该 方法 允许 小 部 件 在 初始 化 期 间 为 定义 选项 定义 一 个 自 定 义 的 方法 。 用 户 提 
供 的 选项 会 覆盖 该 方法 返回 的 选项 ， 即 会 覆盖 默认 的 选项 。 
。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
让 小 部 件 元 素 的 id 属性 作为 选项 可 用 。 


_getCreateOptions: function() { 
return { id: this.element.attr( "id" ) }; 


} 


_hide( element, option [, callback ] ) 


类 型 : jQuery (plugin only) 
描述 : 使 用 内 置 的 动画 方法 或 使 用 自 定义 的 特效 隐藏 一 个 元 素 。 如 需 了 解 可 能 的 
option 值 ， 请 查看 hide, 
e element 类 型 : jQuery 描述 : 要 隐藏 的 元 素 。 
e option 类 型 : Object 描述 : 定义 如 何 隐 藏 元 素 的 设置 。 
e callback 类 型 : Function() 描述 : 元 素 完 全 隐藏 后 要 调用 的 回调 。 
代码 实例 : 
为 自 定 义 动 画 传 递 hide 选项 。 


this. hide( this.element, this.options.hide, function() { 


// Remove the element from the DOM when it's fully hidden. 
$( this ).remove(); 


3); 


. hoverable( element ) 


类 型 : jQuery (plugin only) 


描述 : 建立 悬浮 在 元 素 上 时 要 应 用 ui-state-hover class 的 element 。 事 件 
义理 程序 在 销毁 时 自动 清理 。 


e element 类 型 : jQuery 描述 : 要 应 用 hoverable 行为 的 元 素 。 
代码 实例 : 
当 晨 浮 在 元 素 上 时 ， 向 元 素 内 所 有 的 div 应 用 hoverable 样式 。 


this. hoverable( this.element.find( "div" ) ); 


_init() 
类 型 : jQuery (plugin only) 


描述 : 小 部 件 初始 化 的 理念 与 创建 不 同 。 任 何 时 候 不 带 参 数 的 调用 插件 或 者 只 带 一 
个 选项 哈 希 的 调用 插件 ， 初 始 化 小 部 件 。 当 小 部 件 被 创建 时 会 包含 这 个 方法 。 


注释 : 如 果 存 在 不 带 参数 成 功 调用 小 部 件 时 要 执行 的 逻辑 动作 ， 初 始 化 只 能 在 这 时 
处 理 。 


。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

如 果 设 置 了 _ autoopen 选项 ， 则 调用 open() 方法 。 
_init: function() ( 


if ( this.options.autoOpen ) { 
this.open(); 


_off( element, eventName ) 


类 型 : jQuery (plugin only) 
描述 : 从 指定 的 元 素 取消 绑 定 事件 处 理 程 序 。 


e element 类 型 : jQuery 描述 : 要 取消 绑 定 事件 处 理 程序 的 元 素 。 不 像 _on() 
Ask, _off() 方法 中 元 素 是 必需 的 。 
e eventName 类 型 : String 描述 : 一 个 或 多 个 空格 分 隔 的 事件 类 型 。 


代码 实例 : 
从 小 部 件 的 元 素 上 取消 绑 定 所 有 click 事件 。 


this. off( this.element, "click" ); 


_on( [suppressDisabledCheck ] [, element ], handlers ) 


类 型 : jQuery (plugin only) 


描述 : 授权 通过 事件 名 称 内 的 选择 器 被 支持 ， 例 如 "Click .foo" 。  on() A 
法 提供 了 一 些 直接 事件 绑 定 的 好 人 处: 


保持 处 理 程序 内 适当 的 this 上下文。 

自动 处 理 禁 用 的 部 件 : 如 果 小 部 件 被 禁用 或 事件 发 生 在 带 有 
ui-state-disabled class 的 元 素 上 ， 则 不 调用 事件 义理 程序 。 可 以 被 
suppressDisabledCheck 参数 重 写 。 

事件 义理 程序 会 自动 添加 命名 空间 ， 在 销毁 时 会 自 自动 清理 。 

suppressDisabledCheck (默认 值 : false ) 类 型 Boolean 描述 : 是 否 

要 绕 过 禁用 的 检查 。 

element 类 型 : jQuery 描述 : 要 绑 定 事件 处 理 程 序 的 元 素 。 如 果 未 提供 元 

素 ， this.element 用 于 未 授权 的 事件 ，widget 元 素 用 于 授权 的 事件 。 

handlers 类 型 : Object 描述 : 一 个 map， 其 中 字符 串 键 代 表 事件 类 型 ， 可 选 
的 选择 器 用 于 授权 ， 值 代表 事件 调用 的 处 理 隙 数 。 


代码 实例 : 
放置 小 部 件 元 素 内 所 有 被 点 击 的 链接 的 默认 行为 。 


this._on( this.element, { 
"click a": function( event ) { 
event .preventDefault(); 


} 
] 


_setOption( key, value ) 


类 型 : jQuery (plugin only) 


描述 : 为 每 个 独立 的 选项 调用  setoptions() 方法 。 小 部 件 状态 随 着 改变 而 更 
新 。 


e key 类 型 String 描述 : 要 设置 的 选项 名 称 。 
e value 类 型 : Object 描述 : 为 选项 设置 的 值 。 


代码 实例 : 
当 小 部 件 的 height 或 width 选项 改变 时 ， 更 新 小 部 件 的 元 素 。 


_setOption: function( key, value ) { 
if ( key === "width" ) { 
this.element.width( value ); 


} 
if ( key === "height" ) { 
this.element.height( value ); 


this. super( key, value ); 


j 


_setOptions( options ) 


类 型 : jQuery (plugin only) 


描述 : 当 调 用 option() 方法 时 调用 ， 无 论 以 什么 形式 调用 option() 。 如 果 
您 要 根据 多 个 选项 的 改变 而 改变 处 理 器 密集 型 ， 重 载 该 方法 是 很 有 用 的 。 


e options 类 型 : Object 描述 : 为 选项 设置 的 值 。 

代码 实例 : 

如 果 小 部 件 的 height 或 width 选项 改变 ， 调用 resize 方法 。 
_setOptions: function( options ) { 


var that this, 
resize false; 


$.each( options, function( key, value ) { 
that. ee cose key, value ); 
if ( key === "height" &#124;&#124; key === "width" ) { 
resize = ee 
} 


}); 


if ( resize ) ( 
this.resize(); 
} 
} 


_show( element, option [, callback ] ) 


类 型 : jQuery (plugin only) 


描述 : 使 用 内 置 的 动画 方法 或 使 用 自 定 义 的 特效 显示 一 个 元 素 。 如 需 了 解 可 能 的 
option 值 ， 请 查看 show。 


e element 类 型 : jQuery 描述 : 要 显示 的 元 素 。 
e option 类 型 Object 描述 : 定义 如 何 显示 元 素 的 设置 


e callback 类 型 : Function() 描述 : 元 素 完全 显示 后 要 调用 的 回调 。 
代码 实例 : 
为 自 定义 动画 传递 show 选项。 


this. show( this.element, this.options.show, function() { 
// Focus the element when it's fully visible. 
this.focus(); 


} 


_super( [arg ] [, … ] ) 
类 型 : jQuery (plugin only) 


描述 : 从 父 部 件 中 调用 相同 名 称 的 方法 ， 带 有 任意 指定 的 参数 。 本 质 上 是 
ae. 


e arg 类 型 Object 描述 : 要 传递 给 父 部 件 的 方法 的 需 到 多 个 参数 。 
代码 实例 : 
义理 title 选项 更 新 ， 并 调用 付 部 件 的 _setoption() 来 更 新 选项 的 内 部 存 
储 。 
_setOption: function( key, value ) { 
if ( key === "title" ) { 
this.element.find( "h3" ).text( value ); 


this._super( key, value ); 


_superApply( arguments ) 
类 型 : jQuery (plugin only) 


描述 : 从 父 部 件 中 调用 相同 名 称 的 方法 ， 带 有 参数 的 数组 。 本 质 上 是 
.apply() o 


e arguments 类 型 : Array 描述 : 要 传递 给 父 部 件 的 方法 的 参数 数组 。 
代码 实例 : 


XIE title 选项 更 新 ， 并 调用 付 部 件 的 _setOption() 来 更 新 选项 的 内 部 存 
储 。 


_setOption: function( key, value ) { 


if ( key === "title" ) { 
this.element.find( "h3" ).text( value ); 

j 

this. superApply( arguments ); 


j 


_trigger( type [, event ] [, data ] ) 


类 型 : Boolean 


描述 : 触发 一 个 事件 及 其 相关 的 回调 。 带 有 该 名 称 的 选项 与 作为 回调 被 调用 的 类 型 
相等 。 

事件 名 称 是 小 部 件 名 称 和 类 型 的 小 写字 母 串 。 

注释 : 当 提 供 数据 时 ， 您 必须 提供 所 有 三 个 参数 。 如 果 没 有 传递 事件 ， 则 传递 
null o 


如 果 上 默认 行为 是 阻止 的 ， 则 返回 false, FURE true 。 当 义理 程序 返回 
false 时 或 调用 event.preventDefault() 时 ， 则 阻止 默认 行为 发 生 。 


e type 类 型 : String 描述 : type 应 该 匹配 回调 选项 的 名 称 。 完 整 的 事件 类 型 
会 自动 生成 。 
e event 类 型 : Event 描述 : 导致 该 事件 发 生 的 原始 事件 ， 想 听众 提供 上 下 文 时 


很 有 用 。 
e data 类 型 : Object 描述 : 一 个 与 事件 相关 的 数据 哈 希 。 
代码 实例 : 


当 按 下 一 个 键 时 ， 触 发 search 事件 。 


this. on( this.element, { 
keydown: function( event ) { 


// Pass the original event so that the custom search event has 
// useful information, such as keyCode 
this. trigger( "search", event, { 


// Pass additional information unique to this event 
value: this.element.val() 


3); 
} 
3); 
00 eI 


destroy() 


类 型 : jQuery (plugin only) 


描述 : 完全 移 除 小 部 件 功能 。 这 会 把 元 素 返 回 到 它 的 预 初 始 化 状态 。 


。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
当 点 击 小 部 件 的 任意 锚 点 时 销毁 小 部 件 。 


this._on( this.element, { 
"click a": function( event ) { 
event .preventDefault(); 
this.destroy(); 


} 
}); 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 小 部 件 。 

。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
当 点 击 小 部 件 的 任意 锚 点 时 禁用 小 部 件 。 


this. on( this.element, { 
"click a": function( event ) { 
event.preventDefault(); 
this.disable(); 


} 
T); 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 小 部 件 。 
。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
当 点 击 小 部 件 的 任意 锚 点 时 启用 小 部 件 。 


this. on( this.element, { 
"click a": function( event ) { 
event .preventDefault(); 
this.enable(); 


} 
3): 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 


获得 width 选项 的 值 。 


this.option( "width" ); 


option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 小 部 件 选 项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

记录 每 个 小 部 件 选项 的 键 / 值 对 ， 用 于 调试 。 
var options = this.option(); 
for ( var key in options ) { 


console.log( key, options[ key ] ); 
} 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 小 部 件 选项 的 值 。 


e optionName X Z! : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 


设置 width 选项 为 500 。 


this.option( "width", 500 ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 小 部 件 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 


设置 height 和 width 选项 为 500 。 


this.option({ 


width: 500, 
height: 500 
3): 
widget() 


类 型 : jQuery 

描述 : 返回 一 个 包含 原始 元 素 或 其 他 相关 的 生成 元 素 的 jQuery WR. 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

当 创建 小 部 件 时 ， 在 小 部 件 的 原始 元 素 周围 放置 一 个 红色 的 边框 。 


_create: function() { 
this.widget().css( "border", "2px solid red" ); 
j 


事件 


create( event, ui ) 


类 型 : widgetcreate 
描述 : 当 小 部 件 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 小 部 件 : 


$( ".selector" ).widget({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 widgetcreate 事件 : 


$( ".selector" ).on( "widgetcreate", function( event, ui ) {} ); 


jQuery UI API - 插件 桥 (Widget Plugin Bridge) 


所 属 类 别 


实用 工具 (Utilities) | 小 部 件 (Widgets) 


用 法 


描述 : jQuery.widget.bridge() 方法 是 jQuery 部 件 库 (Widget Factory) 的 一 部 
分 。 它 扮演 着 由 $.widget() 创建 的 对 象 和 jQuery API 之 间 的 中 介 。 


jQuery.widget.bridge( name, constructor ) 


参数 类 型 类 型 
name String 要 创建 的 插件 名 称 。 
constructor Function() 当 插 件 被 调用 时 要 实例 化 的 对 象 。 


$.widget.bridge() 做 如 下 事情 : 


连接 一 个 常规 的 JavaScript 构造 画 数 到 jQuery API. 
自动 创建 对 象 实例 ， 并 存储 在 元 素 的 $.data RFA. 
允许 调用 公有 方法 。 

防止 调用 私有 方法 。 

防止 在 未 初始 化 的 对 象 上 调用 方法 。 

防止 多 个 初始 化 。 


jQuery UI 小 部 件 使 用 $.widget( "foo.bar", () ); 语法 定义 一 个 对 象 来 创 
建 。 给 出 一 个 带 有 五 个 .foo, $( ".foo" ).bar(); 的 DOM 结构 将 创建 
"bar" 对 象 的 五 个 实例 。 $.widget.bridge() 基于 "bar' 对 象 和 一 个 公共 的 API 
在 库 内 工作 。 因 此 ， 您 可 以 通过 编写 $( ".foo" ).bar() 来 创建 实例 ， 通 过 编 
写 $( ".foo" ).bar( "baz" ) 来 调用 方法 。 


如 果 您 只 想 一 次 性 初始 化 并 调用 方法 ， 那 么 您 所 传递 给 
jQuery.widget.bridge() 的 对 象 可 以 很 小 : 


var Highlighter = function( options, element ) { 
this.options = options; 
this.element = $( element ); 
this._set( 800 ); 
3; 
Highlighter.prototype - ( 
toggle: function() { 
this. set( this.element.css( "font-weight") === 400 ? 800 : 40( 
3 
_set: function(value) ( 
this.element.css( "font-weight", value ); 





在 这 里 ， 您 需要 的 只 是 一 个 构造 画 数 ， 接 收 两 个 参数 : 


e options : 一 个 配置 选项 的 对 象 
e element : 该 实例 在 其 上 创建 的 DOM 元 素 


后 您 可 以 使 用 桥 (bridge) 把 该 对 象 作为 一 个 jQuery 插件 ， 且 可 以 在 任意 的 
EU. 


// Hook up the plugin 
$.widget.bridge( "colorToggle", Highlighter ); 


// Initialize it on divs 

$( "div" ).colorToggle().click(function() { 
// Call the public method on click 
$( this ).colorToggle( "toggle" ); 

3); 


为 了 使 用 桥 (bridge) 的 所 有 特性 ， 您 的 对 象 原型 需要 有 一 方法 。 该 
方法 在 调用 插件 且 实 例 已 存在 时 调用 。 在 这 种 情况 下 ， ae 

option() 方法 。 该 方法 将 会 以 选项 作为 第 一 个 参数 被 调用 。 如 果 没 有 选项 ， 则 
参数 为 一 个 空 对 象 。 如 需 了 解 option 方法 的 使 用 ， 请 查看 $.widget o 


桥 (bridge) 有 一 个 可 选 的 属性 ， 如 果 存 在 : 如 果 对 象 原型 有 一 
widgetFullName 属性 ， 则 该 属性 将 被 作为 存储 和 检索 实例 的 键 。 否 则 ， 将 使 用 
name 参数 。 


a= SANT OK 


jQuery UI API 类 别 - 小 部 件 (Widgets) 


小 部 件 (Widgets) 是 功能 丰富 、 有 状态 的 插件 ， 它 有 一 个 完整 的 生命 周期 ， 带 有 
方法 和 事件 。 您 可 以 查看 部 件 库 (Widget Factory) 文档 了 解 更 多 详情 。 


API 描述 也 属于 类 别 
H & HAR aw 
(Accordion 把 一 对 标题 和 内 容 面板 转换 成 折 生 面板 。 
Widget) 
自动 完成 部 件 自动 完成 功能 根据 用 户 输入 值 进行 搜索 和 过 
(Autocomplete ” 滤 ， 让 用 户 快速 找到 并 从 预 设 值 列表 中 选 
Widget) 择 。 
按钮 部 件 
(Button 可 主题 化 的 按钮 和 按钮 集合 。 
Widget) 
日 期 选择 器 部 件 
(Datepicker 从 弹出 框 或 在 线 日 历 选 择 一 个 日 期 。 
Widget) 
对 话 框 部 件 
(Dialog 在 一 个 交互 覆盖 层 中 打开 内 容 。 
Widget) 
部 件 库 (Widget ”使 用 与 所 有 jQuery UI 小 部 件 相 同 的 抽象 化 实用 工具 
Factory) 来 创建 有 状态 的 jQuery 插件 。 (Utilities) 
jQuery.widget.bridge() 方法 是 jQuery 部 件 
插件 桥 (Widget œ (Widget Factory) 的 一 部 分 。 它 扮演 着 实用 工具 
Plugin Bridge) FA $.widget() 创建 的 对 象 和 jQuery API 之 间 (Utilities) 


的 中 介 。 


带 有 鼠标 和 键盘 交互 的 用 于 导航 的 可 主题 化 
Widget) 人 
进度 条 部 件 
(Progressbar 显示 一 个 确定 的 或 不 确定 的 进程 状态 。 
Widget) 
滑 块 部 件 
(Slider 拖 动 手柄 可 以 选择 一 个 数值 。 
Widget) 
旋转 器 部 件 


(Spinner 


if aris ] / \ [9 
Iw] lel VU Al 


通过 向 上 /向 下 按钮 和 箭头 键 处 理 ， 为 输入 数 


W3School 前 端 教程 合集 


标签 页 部 件 一 种 多 面板 的 单 内 容 区 ， 每 个 面板 与 列表 中 
(Tabs 的 标题 相关 

Widget) iia 

pod al 可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 替 代 
ene 原生 的 工具 提示 框 。 

Widget) 
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jQuery UI API - 折 受 面板 部 件 (Accordion 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 把 一 对 标题 和 内 容 面 板 转 换 成 折 受 面板 。 
版 本 新 增 : 1.0 
折 和 过 面板 容器 的 标记 需要 一 对 标题 和 内 容 面板 。 
<div id="accordion"> 
<h3>First header</h3> 
<div>First content panel</div> 
<h3>Second header</h3> 


<div>Second content panel</div> 
</div> 


Te mdxHHEXGG, GESTAAMRY RSESRARHS BRA TAA 
级 。 请 查看 header 选项 了 解 如 何 使 用 自 定 义 的 标记 结构 。 
面板 可 以 通过 设置 active 选项 以 编程 的 方式 激活 。 


键盘 交互 


e DOWN/RIGHT - 移动 焦点 到 下 一 个 标题 (header) 。 如 果 在 最 后 一 个 标题 


e HOME -移动 焦点 到 第 一 个 标题 (header) E. 
e END - 移动 焦点 到 最 后 一 个 标题 (header) 上 。 
e SPACE/ENTER - 激活 与 获得 焦点 的 标题 (header) 相关 的 面板 (panel) 。 


主题 化 


Hrá mièi (Accordion Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 
观 的 样式 。 如 果 需 要 使 用 折 且 面 板 指定 的 祥 式 ， 则 可 以 使 用 下 面 的 CSS class 名 
FR : 


e ui-accordion : 折 受 面板 的 外 层 容器 。 
o ui-accordion-header : 折 营 面板 的 标题 。 如 果 标 题 包 含 icons ， 则 
标题 会 另外 有 个 ui-accordion-icons class。 
o ui-accordion-content : 折 受 面板 的 内 容 面板 。 


依赖 

e Ul 核心 (UI Core) 

e 部 件 库 (Widget Factory) 

e 特效 核心 (Effects Core) (可 选 的 ; 44 animate 选项 一 起 使 用 时 ) 
附加 说 明 

e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 

主题 ， 请 使 用 小 部 件 指 定 的 CSS 文件 作为 起 点 。 
快速 导航 
选项 


activeanimatecollapsibledisabledeventheaderheightStyleicons | destroydisablee 


active 

类 型 : Boolean 3 Integer 
描述 : 当前 打开 哪 一 个 面板 。 
支持 多 个 类 型 : 


e Boolean: 设置 active 为 false 将 折 辣 所 有 的 面板 。 这 要 求 
collapsible 选项 必须 为 true 。 

e Integer : 激活 打开 的 面板 索引 ， 以 需 为 基础 。 负 值 则 表示 从 最 后 一 个 面板 后 退 
选择 面板 。 


代码 实例 : 


初始 化 带 有 指定 active 选项 的 accordion : 


$( ".selector" ).accordion({ active: 2 }); 


在 初始 化 后 ， 获 取 或 设置 active 选项 : 
// getter 


var active = $( ".selector" ).accordion( "option", "active" ); 


// setter 
$( ".selector" ).accordion( "option", "active", 2 ); 


默认 值 : 0 


animate 

类 型 : Boolean 或 Number 或 String 或 Object 

描述 : 是 否 使 用 动画 改变 面板 ， 且 如 何 使 用 动画 改变 面板 。 
支持 多 个 类 型 


Boolean: false 值 业 禁用 动画 。 
Number : easing 默认 的 持续 时 间 ， 以 毫秒 计 。 
String : 默认 的 持续 时 间 要 使 用 的 easing 名 称 。 
Object: easing 和 duration 属性 的 动画 设置 
e 上 面 任意 的 选项 都 可 以 包含 down 属性 。 
e 当 被 激活 的 面板 有 一 个 比 当前 激活 面板 较 低 的 指数 时 ， 发 生 "Down" 动画 
代码 实例 : 


初始 化 带 有 指定 animate 选项 的 accordion : 


$( ".selector" ).accordion({ animate: "bounceslide" }); 


在 初始 化 后 ， 获 取 或 设置 animate 选项 : 


// getter 
var animate = $( ".selector" ).accordion( "option", "animate" ); 


// setter 
$( ".selector" ).accordion( "option", "animate", "bounceslide" ); 


SSS n ——sÁ'PÓüÓc aco Yi] al 
默认 值 : 人 
collapsible 


类 型 : Boolean 


描述 : 所 有 部 分 是 否 都 可 以 马上 关闭 。 人 允许 折 受 激活 的 部 分 。 
代码 实例 : 


初始 化 带 有 指定 collapsible 选项 的 accordion : 


$( ".selector" ).accordion({ collapsible: true }); 


在 初始 化 后 ， 获 取 或 设置 collapsible 选项 : 


// getter 
var collapsible = $( ".selector" ).accordion( "option", "collapsib- 


// setter 
$( ".selector" ).accordion( "option", "collapsible", true ); 


EC a ee ee 


默认 值 : false 





disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 accordion, 
代码 实例 : 


初始 化 带 有 指定 disabled 选项 的 accordion : 


$( ".selector" ).accordion({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).accordion( "option", "disabled" ); 


// setter 
$( ".selector" ).accordion( "option", "disabled", true ); 


BESS y Ol 
默认 值 : false 
event 


类 型 : String 


描述 : accordion 头 部 会 作出 反应 的 事件 ， 用 以 激活 相关 的 面板 。 可 以 指定 多 个 事 
件 ， 用 空格 间隔 。 


代码 实例 : 


初始 化 带 有 指定 event 选项 的 accordion : 


$( ".selector" ).accordion({ event: "mouseover" }); 


在 初始 化 后 ， 获 取 或 设置 event 选项 : 


// getter 
var event = $( ".selector" ).accordion( "option", "event" ); 


// setter 
$( ".selector" ).accordion( "option", "event", "mouseover" ); 


默认 值 : "click" 


header 
类 型 : Selector 


描述 : 标题 元 素 的 选择 器 ， 通 过 主要 accordion 元 素 上 的 find) 进行 应 用 。 内 容 面 
板 必须 是 紧 跟 在 与 其 相关 的 标题 后 的 同 级 元 素 。 


代码 实例 : 


初始 化 带 有 指定 header 选项 的 accordion : 


$( ".selector" ).accordion({ header: "h3" 3); 


在 初始 化 后 ， 获 取 或 设置 header 选项 : 


// getter 
var header = $( ".selector" ).accordion( "option", "header" ); 


// setter 
$( ".selector" ).accordion( "option", "header", "h3" ); 


PRIMA : "> li > :first-child,> :not(li):even" 


heightStyle 


类 型 : String 


描述 : 控制 accordion 和 每 个 面板 的 高 度 。 可 能 的 值 : 
e "auto" : 所 有 的 面板 将 会 被 设置 为 最 高 的 面板 的 高 度 。 
e "fill" : 基于 accordion 的 父 元 素 的 高 度 ， 扩 展 到 可 用 的 高 度 。 
e "content" : 每 个 面板 的 高 度 取决 于 它 的 内 容 。 

代码 实例 : 


初始 化 带 有 指定 heightStyle 选项 的 accordion : 


$( ".selector" ).accordion({ heightStyle: "fill" }); 


在 初始 化 后 ， 获 取 或 设置 heightStyle 选项 : 


// getter 
var heightStyle = $( ".selector" ).accordion( "option", "heightSty- 


// setter 
$( ".selector" ).accordion( "option", "heightStyle", "fill" ); 


E ————————————!————— M —MÀ— Ma 
默认 值 "auto" 





icons 
类 型 : Object 


描述 : 标题 要 使 用 的 图 标 ， 和 与 jQuery UI CSS 框架 提供 的 图 标 (Icons) 匹配 。 设 
A false 则 不 显示 图 标 。 


e header (string, EA 4& : "ui-icon-triangle-1-e") 
e activeHeader (string, SA f& : "ui-icon-triangle-1-s") 


代码 实例 : 


初始 化 带 有 指定 icons 选项 的 accordion : 


$( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "ac 
——————— a ee; 


在 初始 化 后 ， 获 取 或 设置 icons 选项 : 





// getter 
var icons = $( ".selector" ).accordion( "option", "icons" ); 


// setter 
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icor 
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默认 值 : { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" } 
方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 accordion 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).accordion( "destroy" ); 


disable() 


类 型 : jQuery (plugin only) 
描述 : 禁用 accordion. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).accordion( "disable" ); 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 accordion, 


。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).accordion( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).accordion( "option", "disabled" ` 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 accordion 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).accordion( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 accordion 选项 的 值 。 


e optionName 类 型 String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).accordion( "option", "disabled", true ) 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 accordion 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).accordion( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 处 理 任何 在 DOM 中 直接 添加 或 移 除 的 标题 和 面板 ， 并 重新 计算 accordion 
的 高 度 。 结 果 取 决 于 内 容 和 ([heightStyle](#option-heightStyle ) 选项 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).accordion( "refresh" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 accordion 的 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).accordion( "widget" ); 


事件 


activate( event, ui ) 


类 型 : accordionactivate 


描述 : 面板 被 激活 后 触发 〈 在 动画 完成 之 后 ) o WR accordion LAE bg, n 
ui.oldHeader 和 ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 accordion 正在 
tt#, n] ui.newHeader 和 ui.newPanel 将 是 空 的 jQuery 对 象 。 


注意 : 由 于 activate 事件 只 有 在 面板 激活 时 才能 触发 ， 当 创建 accordion 部 件 
时 ， 最 初 的 面板 不 会 触发 该 事件 。 如 果 您 需要 一 个 用 于 部 件 创建 的 钧 ， 请 使 用 
Create 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o newHeader 类 型 : jQuery 描述 : 刚 被 激活 的 标题 。 
o oldHeader 类 型 : jQuery 描述 : 刚 被 取消 激活 的 标题 。 
o newPanel 类 型 : jQuery 描述 : 刚 被 激活 的 面板 。 
o oldPanel 类 型 jQuery 描述 : 刚 被 取消 激活 的 面板 。 
代码 实例 : 


初始 化 带 有 指定 activate 回调 的 accordion : 


$( ".selector" ).accordion({ 
activate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 accordionactivate 事件 : 


$( ".selector" ).on( "accordionactivate", function( event, ui ) {} 





beforeActivate( event, ui ) 


类 型 : accordionbeforeactivate 


描述 : 面板 被 激活 前 直接 触发 。 可 以 取消 以 防止 面板 被 激活 。 如 果 accordion 当前 
EARI, W) ui.oldHeader 和 ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 
accordion E} Æ, | ui.newHeader 和 ui.newPanel 将 是 空 的 jQuery 对 


象 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o newHeader 类 型 : jQuery 描述 : 将 被 激活 的 标题 。 
o oldHeader 类 型 : jQuery 描述 : 将 被 取消 激活 的 标题 。 


o newPanel 类 型 : jQuery 描述 : 将 被 激活 的 面板 。 
o oldPanel 类 型 jQuery 描述 : 将 被 取消 激活 的 面板 。 


代码 实例 : 
初始 化 带 有 指定 beforeActivate 回调 的 accordion : 


$( ".selector" ).accordion({ 
beforeActivate: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 accordionbeforeactivate 事件 : 


$( ".selector" ).on( "accordionbeforeactivate", function( event, u: 
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create( event, ui ) 


类 型 : accordioncreate 


描述 : 4 4) accordion 时 触发 。 如 果 accordion 是 折 和 县 的 ， ui.header 和 
ui.panel 将 是 空 的 jQuery 对 象 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o header 类 型 : jQuery 描述 : 激活 的 标题 。 
o panel 类 型 jQuery 描述 : 激活 的 面板 。 
代码 实例 : 


初始 化 带 有 指定 create 回调 的 accordion : 


$( ".selector" ).accordion({ 
create: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 accordioncreate 事件 : 


$( ".selector" ).on( "accordioncreate", function( event, ui ) {} )， 


| 


实例 


一 个 简单 的 jQuery UI Hr mik (Accordion) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1le> 折 有 又 面板 部 件 (Accordion Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="accordion"> 
<h3> 部 分 1</h3> 
<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. 
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, 
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. 
Nam mi. Proin viverra leo ut odio.</p> 
</div> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus 
Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, 
faucibus interdum tellus libero ac justo.</p> 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
Quisque lobortis.Phasellus pellentesque purus in massa.</p> 
<ul> 
<li>List item one</1li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
</div> 


<script> 
$( "#accordion" ).accordion(); 
</script> 


</body> 
</html> 
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jQuery UI API - 目 动 完成 部 件 (Autocomplete 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 


描述 : 自动 完成 功能 根据 用 户 输 入 值 进行 搜索 和 过 小 ， 让 用 户 快速 找到 并 从 预 设 值 
列表 中 选择 。 


版 本 新 增 : 1.8 


任何 可 以 接收 输入 的 字段 都 可 以 转换 为 Autocomplete， 即 ， &lt;input&gt; 元 
素 ， &lt;textarea&gt; 元 素 及 带 有 contenteditable 属性 的 元 素 。 


通过 给 Autocomplete 字段 焦点 或 者 在 其 中 输入 字符 ， 插 件 开 始 搜索 匹配 的 条 目 并 
显示 供 选择 的 值 的 列表 。 通 过 输入 更 多 的 字符 ， 用 户 可 以 过 滤 列表 以 获得 更 好 的 匹 
配 。 


该 部 件 可 用 于 选择 先前 选 定 的 值 ， 比 如 输入 文章 标签 或 者 输入 从 地 址 筹 中 输入 地 址 
邮件 地 址 。Autocomplete 也 可 以 用 来 填充 相关 的 信息 ， 比 如 输入 一 个 城市 的 名 称 来 
获得 该 城市 的 邮政 编码 。 


您 可 以 从 本 地 源 或 者 远程 源 获取 数据 : 本 地 源 适 用 于 小 数据 集 ， 例 如 ， 带 有 50 个 
条 目的 地 址 簿 ; 远程 源 适 用 于 大 数据 集 ， 比 如 ， 带 有 数 百 个 或 者 成 干 上 万 个 条 目的 
数据 库 。 如 需 了 解 更 多 有 关 自 定义 数据 源 的 信息 ， 请 查看 source 选项 的 文档 。 


键盘 交互 
当 菜 单打 开 时 ， 下 面 的 键盘 命令 可 用 : 
e UP - 移动 焦点 到 上 一 个 项 目 。 如 果 在 第 一 个 项 目 上 ， 则 移动 焦点 到 输入 
(input) 。 如 果 在 输入 (input) 上 ， 则 移动 焦点 到 最 后 一 个 项 目 。 
e DOWN - 移动 焦点 到 下 一 个 项 目 。 如 果 在 最 后 一 个 项 目 上 ， 则 移动 焦点 到 输入 
(input) 。 如 果 在 输入 (input) 上 ， 则 移动 焦点 到 第 一 个 项 目 。 
e ESCAPE - 关闭 菜单 。 
e ENTER - 选择 当前 获得 焦点 的 项 目 ， 并 关闭 菜单 。 
e TAB - 选择 当前 获得 焦点 的 项 目 ， 关 闭 菜单 ， 并 移动 焦点 到 下 一 个 可 聚焦 


(focusable) 的 元 素 。 
e PAGE UP/DOWN - 滚动 一 屏 的 项 目 (基于 菜单 的 高 度 ) 。 


SRAKA, FAREMA AMH : 


e UP/DOWN - 如 果 满 足 minLength ， 则 打开 菜单 。 


主题 化 


自动 完成 部 件 (Autocomplete Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 
和 感 观 的 样式 。 如 果 需 要 使 用 自动 完成 部 件 指 定 的 样式 ， 则 可 以 使 用 下 面 的 CSS 
class 名 称 : 


e ui-autocomplete : 用 于 显示 匹配 用 户 的 菜单 (menu) 
e ui-autocomplete-input : 自动 完成 部 件 (Autocomplete Widget) 实例 化 
的 input 元 素 。 


依赖 


Ul 核心 (UI Core) 

部 件 库 (Widget Factory) 
定位 (Position) 
菜单 部 件 (Menu Widget) 


附加 说 明 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定 义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 

e 该 部 件 以 编程 方式 操作 元 素 的 值 ， 因 此 当 元 素 的 值 改 变 时 不 会 触发 原生 的 
change 事件 。 


快速 导航 


选项 


appendToautoFocusdelaydisabledminLengthpositionsource | closedestroydisak 


appendTo 
X 8! : Selector 


描述 : 菜单 应 该 被 附加 到 哪 一 个 元 素 。 当 该 值 为 null 时 ， 输 入 域 的 父 元 素 将 检 
查 ui-front class。 如 果 找 到 带 有 ui-front class 的 元 素 ， 菜 单 将 被 附加 到 


该 元 素 。 如 果 未 找到 带 有 ui-front class 的 元 素 ， 不 管 值 为 多 少 ， 菜 单 将 被 附 
加 到 body。 


注意 : 当 建 议 菜单 打开 时 ， appendTo 选项 不 应 改变 。 
代码 实例 : 


初始 化 带 有 指定 appendTo 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ appendTo: "#someElem" }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 











// getter 

var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" 

// setter 

$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" ), 
| = a | 
默认 值 : null 
autoFocus 


类 型 : Boolean 
描述 : 如 果 设 置 为 true ， 当 菜单 显示 时 ， 第 一 个 条 目 将 自动 获得 焦点 。 
代码 实例 : 


初始 化 带 有 指定 autoFocus 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ autoFocus: true }); 


在 初始 化 后 ， 获 取 或 设置 autofocus 选项 : 


// getter 
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocu: 


// setter 
$( ".selector" ).autocomplete( "option", "autoFocus", true ); 


OO == 一 一 


默认 值 : false 





delay 


类 型 : Integer 


描述 : 按键 和 执行 搜索 之 间 的 延迟 ， 以 宫 秒 计 。 对 于 本 地 数据 ， 采 用 需 延 迟 是 有 意 
义 的 〈 更 具 响 应 性 ) ， 但 对 于 远程 数据 会 产生 大 量 的 负荷 ， 同 时 降低 了 响应 性 。 


代码 实例 : 


初始 化 带 有 指定 delay 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ delay: 500 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).autocomplete( "option", "delay" ); 


// setter 
$( ".selector" ).autocomplete( "option", "delay", 500 ); 


默认 值 : 300 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 autocomplete, 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).autocomplete( "option", "disabled" 


// setter 
$( ".selector" ).autocomplete( "option", "disabled", true ); 


默认 值 : false 





minLength 


类 型 : Integer 


描述 : 执行 搜索 前 用 户 必 须 输入 的 最 小 字符 数 。 对 于 仅 带 有 几 项 条 目的 本 地 数据 ， 
通常 设置 为 需 ， 但 是 当 单个 字符 搜索 会 匹配 几 千 项 条 目 时 ， 设 置 个 高 数值 是 很 有 必 
要 的 。 


代码 实例 : 


初始 化 带 有 指定 minLength 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ minLength: © }); 


在 初始 化 后 ， 获 取 或 设置 minLength 选项 : 


// getter 
var minLength = $( ".selector" ).autocomplete( "option", "minLengtl 


// setter 
$( ".selector" ).autocomplete( "option", "minLength", © ); 





默认 值 : 1 


position 
类 型 : Object 


描述 : 标识 建议 菜单 的 位 置 与 相关 的 input 元 素 有 关系 。 of 选项 默认 为 input 元 
素 ， 但 是 您 可 以 指定 另 一 个 定位 元 素 。 如 需 了 解 各 种 选项 的 更 多 细节 ， 请 查看 
jQuery UI 定位 (Position) 。 


代码 实例 : 


初始 化 带 有 指定 position 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ position: { my : "right top", at: 
E EE] 


在 初始 化 后 ， 获 取 或 设置 position 选项 : 





// getter 
var position = $( ".selector" ).autocomplete( "option", "position" 
// setter 
$( ".selector" ).autocomplete( "option", "position", ( my : "right 


| m x 





默认 值 : { my: "left top", at: "left bottom", collision: "none" } 


source 


类 型 : Array 或 String 或 Function( Object request, Function response( Object 
data ) ) 


描述 : 定义 要 使 用 的 数据 ， 必 须 指 定 。 


独立 于 您 要 使 用 的 变量 ， 标 签 总 是 被 视 为 文本 。 如 果 您 想 要 标签 被 视 为 n ka i 
以 使 用 Scott González html 扩展 。 演 示 侧 重 于 source 选项 的 不 同 变量 - 您 
以 查找 其 中 匹配 您 的 使 用 情况 的 那个 ， 并 查看 相关 代码 。 


支持 多 个 类 型 : 


e Array : 可 用 于 本 地 数据 的 一 个 数组 。 支 持 两 种 格式 : 
o 字符 串 数 组 : [ "Choicei", "Choice2" | 
o 带 有 label 和 value 属性 的 对 象 数 
组 : [ { label: "Choicei", value: "valuei" }, ... ] label 属性 
显示 在 建议 菜单 中 。 当 用 户 选 择 一 个 条 目 时 ，value 将 被 插入 到 input 元 素 
中 。 如 果 只 是 指定 了 一 个 属性 ， 则 该 属性 将 被 视 为 label 和 value， 例 如 ， 
如 果 您 只 提供 了 value BMY, value 也 会 被 视 为 标签 。 
e String : 当 使 用 一 个 字符 串 ，Autocomplete 插件 希望 该 字符 串 指向 一 个 能 返回 
JSON 数据 的 URL 资源 。 它 可 以 是 在 相同 的 主机 上 ， 也 可 以 是 在 不 同 的 主机 
上 (必须 提供 JSONP) 。Autocomplete 插件 不 过 滤 结 果 ， 而 是 通过 一 个 
term 字段 添加 了 一 个 查询 字符 串 ， 用 于 服务 器 端 脚本 过 滤 结果 。 例 如 ， 如 
果 source 选项 设置 为 "http://example.com" ， 且 用 户 键入 了 foo, 
GET 请 求 则 为 http://example.com?term=foo 。 数 据 本 身 的 格式 可 以 与 前 
面 描述 的 本 地 数据 的 格式 相同 。 
Function: 第 三 个 变量 ， 一 个 回调 画 数 ， 提 供 最 大 的 灵活 性 ， 可 用 于 连接 任何 
数据 源 到 Autocomplete. Eha EGAL E SE mDNER : 


o 一 个 request 对 象 ， 带 有 一 个 term 属性 ， 表 示 当 前 文本 输入 中 的 
值 。 例 如 ， 如 果 用 户 在 city AA "new yo" ， 则 Autocomplete term 
等 同 于 "new yo" , 

o 一 个 response EAR, HATER: 建议 给 用 户 的 数据 。 该 数据 
应 基于 被 提供 的 term 进行 过 滤 ， 且 可 以 是 上 面 描述 的 本 地 数据 的 任何 格 
式 。 用 于 在 请 求 期 间 提 供 自 定 义 source 回调 来 处 理 错 误 。 即 使 遇 到 错 
误 ， 您 也 必须 调用 response 回调 函数 。 这 就 确保 了 小 部 件 总 是 正确 的 
状态 。 

您 可 以 使 用 内 置 的 $.ui.autocomplete.escapeRegex 
会 接受 一 个 字符 串 参 数 ， 转 义 所 有 的 正则 表达 式 字 符 ， 让 结果 安全 地 
E new RegExp() o 


代码 实例 : 


初始 化 带 有 指定 source 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "Cc 
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在 初始 化 后 ， 获 取 或 设置 source 选项 : 


// getter 
var source = $( ".selector" ).autocomplete( "option", "source" ); 


// setter 
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", 
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默认 值 : none; must be specified 
方法 


close() 


类 型 : jQuery (plugin only) 


描述 : 关闭 Autocomplete 菜单 。 当 与 [search](#method-search) 方法 结合 使 
用 时 ， 可 用 于 关闭 打开 的 菜单 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 close 方法 : 


$( ".selector" ).autocomplete( "close" ) 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 autocomplete 功能 。 这 会 把 元 素 返回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).autocomplete( "destroy" ); 


disable() 
类 型 : jQuery (plugin only) 


描述 : 禁用 autocomplete. 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).autocomplete( "disable" ); 


enable() 

类 型 : jQuery (plugin only) 

描述 : 启用 autocomplete. 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 enable 方法 : 


$( ".selector" ).autocomplete( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).autocomplete( "option", "disablec 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 autocomplete 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).autocomplete( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 autocomplete 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).autocomplete( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 autocomplete 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).autocomplete( "option", { disabled: true } ); 


search( [value ] ) 


类 型 : jQuery (plugin only) 


描述 : 触发 search 事件 ， 如 果 该 事件 未 被 取消 则 调用 数据 源 。 当 被 点 击 时 ， 可 
被 类 似 选择 框 按钮 用 来 打开 建议 。 当 不 带 参 数 调 用 该 方法 时 ， 则 使 用 当前 输入 的 
值 。 可 带 一 个 空 字符 串 和 minLength: 0 进行 调用 ， 来 显示 所 有 的 条 目 。 


e value 类 型 String 
代码 实例 : 
调用 search 方法 : 


$( ".selector" ).autocomplete( "search", "" ); 


widget() 
类 型 : jQuery 


描述 : 返回 一 个 包含 菜单 元 素 的 jQuery 对 象 。 虽 然 菜单 项 不 断 地 被 创建 和 销 
毁 。 菜 单元 素 本 身 会 在 初始 化 时 创建 ， 并 不 断 的 重复 使 用 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 widget 方法 : 


$( ".selector" ).autocomplete( "widget" ); 


自动 完成 部 件 (Autocomplete Widget) 通过 部 件 库 (Widget Factory) 创建 的 ， 
且 可 被 扩展 。 当 对 部 件 进 行 扩展 时 ， 您 可 以 重 载 或 者 添加 扩展 部 件 的 行为 。 下 面 提 
供 的 方法 作为 扩展 点 ， 与 上 面 列 出 的 插件 方法 具有 相同 的 API 稳定 性 。 如 需 了 解 
更 多 有 关 小 部 件 扩展 的 知识 ， 请 查看 通过 部 件 库 (Widget Factory) 扩展 小 部 件 . 


_renderltem( ul, item ) 


类 型 : jQuery 


描述 : Method that controls the creation of each option in the widget's menu. The 
method must create anew &lt;li&gt; element, append it to the menu, and 
return it. 


Note: At this time the &1t;ul&gt; element created must contain an 
&lt;a&gt; element for compatibility with the menu widget. See the example 
below. 


e ul X € : jQuery 描述 : 新 创建 的 &1t;1i&gt; 元 素 必 须 追 加 到 的 
&lt;ul&gt; Ro 
e item 类 型 : Object 


o label 类 型 : String 描述 : 条 目 显 示 的 字符 串 。 
o item X €! : String 描述 : 当 条 目 被 选中 时 插入 到 输入 框 中 的 值 。 


代码 实例 : 
添加 条 目 的 值 作为 &lt;li&gt; 上 的 data 属性 。 


_renderItem: function( ul, item ) { 
return $( "&lt;li&gt;" ) 
.attr( "data-value", item.value ) 
.append( $( "&lt;a&gt;" ).text( item.label ) ) 
.appendTo( ul ); 


_renderMenu( ul, items ) 


类 型 : jQuery (plugin only) 


描述 : 该 方法 负责 在 菜单 显示 前 调整 菜单 尺寸 。 菜 单元 素 可 通过 
this.menu.element 使 用 。 


e ul 类 型 : jQuery 描述 : 一 个 要 作为 小 部 件 的 菜单 使 用 的 空 的 &1t;ul&gt; 


INO 


e items 类 型 : Array 描述 : 一 个 数组 ， 数 组 元 素 为 匹配 用 户 输入 的 条 目 。 
条 目 是 二 个 带 有 label 和 value 属性 的 对 象 。 


代码 实例 : 
添加 一 个 CSS class 名 称 到 旧 的 菜单 项 。 
_renderMenu: function( ul, items ) { 
var that = this; 


$.each( items, function( index, item ) { 
that. renderItemData( ul, item ); 


}); 
$( ul ).find( "li:odd" ).addclass( "odd" ); 
} 


_resizeMenu() 


类 型 : jQuery (plugin only) 


描述 : 该 方法 负责 在 菜单 显示 前 调整 菜单 尺寸 。 菜 单元 素 可 通过 
this.menu.element 使 用 。 


。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
菜单 总 .是 显示 为 500 RRE 和 To 


_resizeMenu: function() { 
this.menu.element.outerWidth( 500 ); 


} 


元 


事件 


change( event, ui ) 


类 型 : autocompletechange 
描述 : 如 果 输 入 域 的 值 改 变 则 触发 该 事件 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o item 类 型 : Object 描述 : 从 菜单 中 选择 的 条 目 ， 否 则 属性 为 null. 
代码 实例 : 
初始 化 带 有 指定 change 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
change: function( event, ui ) {} 


3); 


线 定 一 个 事件 监听 器 到 autocompletechange 事件 : 


$( ".selector" ).on( "autocompletechange", function( event, ui ) (. 
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close( event, ui ) 


i 8! : autocompleteclose 
描述 : 当 菜 单 隐藏 时 触发 。 不 是 每 一 个 close 事件 都 伴随 着 change 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 close 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
close: function( event, ux ) {} 


3); 


线 定 一 个 事件 监听 器 到 autocompleteclose 事件 : 


$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} 





gl 
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create( event, ui ) 
类 型 : autocompletecreate 
描述 : 当 创 建 autocomplete 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 


初始 化 带 有 指定 create 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
create: function( event, ui ) (3 


3); 


线 定 一 个 事件 监听 器 到 autocompletecreate 事件 : 


$( ".selector" ) ,on( "autocompletecreate", function( event, ui ) (. 
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focus( event, ui ) 


类 型 : autocompletefocus 
描述 : 当 焦 点 移动 到 一 个 条 目 上 (Rt) 时 触发 。 默 认 的 动作 是 把 文本 域 中 的 值 
替换 为 获得 焦点 的 条 目的 值 ， 即 使 该 事件 是 通过 键盘 交互 触发 的 。 取 消 该 事件 会 阻 
止 值 被 更 新 ， 但 不 会 阻止 菜单 项 获得 焦点 。 
e event 类 型 Event 
e ui 类 型 : Object 
o item 类 型 : Object 描述 : 获得 焦点 的 条 目 。 


代码 实例 : 
初始 化 带 有 指定 focus 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
focus: function( event, ui ) (3 


I) 


线 定 一 个 事件 监听 器 到 autocompletefocus 事件 : 


$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} 
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open( event, ui ) 
类 型 : autocompleteopen 
描述 : 当 打 开 建 议 菜单 或 者 更 新 建议 菜单 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 open 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
open: function( event, ui ) {} 


3); 


线 定 一 个 事件 监听 器 到 autocompleteopen 事件 : 


$( ".selector” ).on( "autocompleteopen", function( event, ui ) {} ` 





response( event, ui ) 


类 型 : autocompleteresponse 


描述 : 在 搜索 完成 后 菜单 显示 前 触发 。 用 于 建议 数据 的 本 地 操作 ， 其 中 自 定义 的 
source 选项 回调 不 是 必需 的 。 该 事件 总 是 在 搜索 完成 时 触发 ， 如 果 搜 索 无 结果 
或 者 禁用 了 Autocomplete， 导 致 菜单 未 显示 ， 该 事件 一 样 会 被 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o content 类 型 : Array 描述 : 包含 响应 数据 ， 且 可 被 修改 来 改变 显示 结 
果 。 该 数据 已 经 标准 化 ， 所 以 如 果 您 要 修改 数据 ， 请 确保 每 个 条 目 都 包含 
value 和 label 属性 。 
代码 实例 : 


初始 化 带 有 指定 response 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
response: function( event, ui ) {} 


3); 


线 定 一 个 事件 监听 器 到 autocompleteresponse 事件 : 


$( ".selector" ).on( "autocompleteresponse", function( event, ui ) 
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search( event, ui ) 


类 型 : autocompletesearch 


描述 : 在 搜索 执行 前 满足 minLength 和 delay 后 触发 。 如 果 取 消 该 事件 ， 则 
不 会 提交 请 求 ， 也 不 会 提供 建议 条 目 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 search 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
search: function( event, ui ) (3 


3); 


线 定 一 个 事件 监听 器 到 autocompletesearch 事件 : 


$( ".selector" ) ,on( "autocompletesearch", function( event, ui ) (. 
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select( event, ui ) 


类 型 : autocompleteselect 


描述 : 当 从 荣 单 中 选择 条 目 时 触发 。 默 认 的 动作 是 把 文本 域 中 的 值 蔡 换 为 被 选中 的 
条 目的 值 。 取 消 该 事件 会 阻止 值 被 更 新 ， 但 不 会 阻止 菜单 关闭 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o item 类 型 : Object 描述 : 一 个 带 有 被 选项 的 label 和 value 属性 的 
对 象 。 


代码 实例 : 
初始 化 带 有 指定 select 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
select: function( event, ui ) {} 


3): 


线 定 一 个 事件 监听 器 到 autocompleteselect 事件 : 


$( ".selector" ) ,on( "autocompleteselect", function( event, ui ) (. 
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实例 


实例 1 : 
一 个 简单 的 jQuery Ul 自动 完成 (Autocomplete) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 自 动 完成 部 件 (Autocomplete Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«label for="autocomplete"> 选 择 一 个 编程 语言 : </label> 
<input id="autocomplete"> 


<script> 
$( "#autocomplete" ).autocomplete({ 
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp' 


3); 


«/script» 


«/body» 
«/html» 


eras 
实例 2 : 
使 用 自 定义 源 回调 来 匹配 条 件 的 开始 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 自 动 完 成 部 件 (Autocomplete Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«label for="autocomplete"> 选 择 一 个 编程 语言 : </label> 
<input id="autocomplete"> 


<script> 
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asi 
$( "#autocomplete" ).autocomplete({ 
source: function( request, response ) { 
var matcher = new RegExp( "A" + $.ui.autocomplete.escapel 
response( $.grep( tags, function( item )( 
return matcher.test( item ); 


ye 
} 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 按钮 部 件 (Button Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 可 主题 化 的 按钮 和 按钮 集合 。 
版 本 新 增 : 1.8 


按钮 部 件 (Button Widget) 加 强 了 标准 表单 元 素 的 功能 ， 比 如 按钮 (button) 、 输 
A (input) 、 锚 (anchor) , FHi&:4B At (hover) 和 激活 (active) 样式 来 主题 
化 按钮 。 


除了 基本 的 按钮 ， 单 选 按钮 和 复 选 框 (input 类 型 为 radio 和 checkbox) 也 可 以 转 
换 为 按钮 。 相 关 的 标签 (label) 设计 成 按钮 的 样式 ， 点 击 时 更 新 底层 的 输入 。 为 了 
能 正常 工作 ， 需 要 给 input 一 个 id 属性 ， 并 指向 标签 (label) 的 for 属性 。 
不 要 把 input 放 在 标签 (label) 内 ， 否 则 会 引起 可 访问 性 问题 。 


为 了 分 组 单 选 按钮 ，Button 也 提供 了 一 个 额外 的 小 部 件 ， 名 为 Buttonset。 
Buttonset 通过 选择 一 个 容器 元 素 (包含 单 选 按钮 ) 并 调用 .buttonset() 来 使 
用 。Buttonset 也 提供 了 可 视 化 分 组 ， 因 此 当 有 一 组 按钮 时 都 可 考虑 使 用 它 。 它 会 
选择 所 有 的 后 代 ， 并 对 它们 应 用 .button() 。 您 可 以 启用 和 禁用 一 个 按钮 集 ， 这 
将 会 启用 和 禁用 所 有 包含 的 按钮 。 销 毁 按钮 集会 调用 每 个 按钮 的 destroy Aik. 
对 于 分 组 的 单 选 按钮 和 复 选 框 按钮 ， 推 荐 使 用 带 有 legend 的 fieldset 来 提 
供 一 个 可 访问 的 分 组 标签 。 


当 使 用 一 个 类 型 为 button, submit 或 reset 的 input 时 ， 仅 限于 支持 纯 文 本 无 图 标 


主题 化 


按钮 部 件 (Button Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 按钮 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-button : 表示 按钮 的 DOM 元 素 。 该 元 素 会 根据 text 和 icons 选项 添加 
下 列 class 之 
一 : ui-button-text-only 、 ui-button-icon-only 、 ui-button-icon 
ui-button-text-icons 。 
o ui-button-icon-primary : 用 于 显示 按钮 主要 图 标的 元 素 。 只 有 当主 
要 图 标 在 icons 选项 中 提供 时 才 呈 现 。 
o ui-button-text : 在 按钮 的 文本 内 容 周围 的 容器 。 


o ui-button-icon-secondary : 用 于 显示 按钮 的 次 要 图 标 。 只 有 当 次 要 
图 标 在 icons 选项 中 提供 时 才 呈 现 。 
e ui-buttonset : Buttonset 的 外 层 容器 。 


依赖 


e UI 核心 (UI Core) 
e 部 件 库 (Widget Factory) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


快速 导航 
选项 方法 事件 


disablediconslabeltext destroydisableenableoptionrefreshwidget create 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 button, 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 button : 


$( ".selector" ).button({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).button( "option", "disabled" ); 


// setter 
$( ".selector" ).button( "option", "disabled", true ); 


默认 值 : false 


icons 


类 型 : Object 


描述 : 要 显示 的 图 标 ， 包 括 带 有 文本 的 图 标 和 不 带 有 文本 的 图 标 (查看 text 3k 
项 ) 。 默 认 情 况 下 ， 主 图 标 显示 在 标签 文本 的 左边 ， 副 图 标 显 示 在 右边 。 显 示 位 置 
可 通过 CSS 进行 控制 。 


primary 和 secondary 属性 值 必须 是 图 标 class 名 称 ， 例 

Jl, "ui-icon-gear" 。 如 果 只 使 用 一 个 图 标 ， 则 

icons: f primary: "ui-icon-locked" } 。 如 果 使 用 两 个 图 标 ， 则 

icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" 


代码 实例 : 

初始 化 带 有 指定 icons 选项 的 button : 
$( ".selector" ).button({ icons: { primary: "ui-icon-gear", second: 

E — B 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 





// getter 
var icons = $( ".selector" ).button( "option", "icons" ); 


// setter 
$( ".selector" ).button( "option", "icons", { primary: "ui-icon-ge: 


E — 





默认 值 :{ primary: null, secondary: null ) 


label 
类 型 : String 


描述 : 要 显示 在 按钮 中 的 文本 。 当 未 指定 时 ( null ) ， 则 使 用 元 素 的 HTML 内 
容 ， 或 者 如 果 元 素 是 一 个 submit 或 reset 类 型 的 input 元 素 ， 则 使 用 它 的 value 
属性 ， 或 者 如 果 元 素 是 一 个 radio 或 checkbox 类 型 的 input 元 素 ， 则 使 用 相关 的 
label 元 素 的 HTML 内 容 。 


代码 实例 : 
初始 化 带 有 指定 label 选项 的 button : 


$( ".selector" ).button({ label: "custom label" 3); 


在 初始 化 后 ， 获 取 或 设置 label 选项 : 


// getter 
var label = $( ".selector" ).button( "option", "label" ); 


// setter 
$( ".selector" ).button( "option", "label", "custom label" ); 


默认 值 : null 


text 
类 型 : Boolean 


描述 : 是 否 显示 标签 。 当 设置 为 false 时 ， 不 显示 文本 ， 但 是 此 时 必须 启用 
icons 选项 ， 否 则 text 选项 将 被 忽略 。 


代码 实例 : 
初始 化 带 有 指定 text 选项 的 button : 


$( ".selector" ).button({ text: false }); 


在 初始 化 后 ， 获 取 或 设置 text 选项 : 
// getter 
var text = $( ".selector" ).button( "option", "text" ); 


// setter 
$( ".selector" ).button( "option", "text", false ); 


默认 值 : true 
方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 button 功能 。 这 会 把 元 素 返 回 到 它 的 预 初 始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).button( "destroy" ) 


disable() 
i 8! : jQuery (plugin only) 
描述 : 禁用 button. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).button( "disable" ); 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 button, 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).button( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).button( "option", "disabled" ); 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 button 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).button( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 button 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).button( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 button 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value 对 。 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).button( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 刷新 按钮 的 视觉 状态 。 用 于 在 以 编程 方式 改变 原生 元 素 的 选中 状态 或 茜 用 状 
态 后 更 新 按钮 状态 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).button( "refresh" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 button 的 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).button( "widget" ); 


事件 


create( event, ui ) 


类 型 : buttoncreate 
描述 : 4 6) 37240 button 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 button : 


$( ".selector" ).button({ 
create: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 buttoncreate 事件 : 


$( ".selector" ).on( "buttoncreate", function( event, ui ) {} ); 


实例 


实例 1 : 
一 个 简单 的 jQuery UI 按钮 (Button) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 按 钮 部 件 (Button Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button> 按 钮 标签 </button> 
<script> 
$( "button" ).button(); 


</script> 


</body> 
</html> 


E 一 一 
实例 2 : 
一 个 简单 的 jQuery UI 按钮 集 (Buttonset) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 按 钮 部 件 (Button Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<form> 
«fieldset» 
<legend> 最 喜欢 的 jQuery 项 目 </legend> 
<div id="radio"> 
<input type="radio" id="sizzle" name="project"> 
<label for="sizzle">Sizzle</label> 


<input type="radio" id="qunit" name="project" checked="checke 
<label for="qunit">QUnit</label> 


<input type="radio" id="color" name="project"> 
«label for="color">Color</label> 
</div> 
</fieldset> 
</form> 


<script> 
$( "#radio" ).buttonset(); 
</script> 


</body> 
</html> 
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jQuery UI API -日 期 选择 器 部 件 (Datepicker 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 从 弹出 框 或 内 联 日 历 选择 一 个 日 期 。 
版 本 新 增 : 1.0 


jQuery UI 日 期 选择 器 (Datepicker) 是 向 页 面 添加 日 期 选择 功能 的 高 度 可 配置 插 
件 。 您 可 以 自 定 义 日 期 格式 和 语言 ， 限 制 可 选择 的 日 期 范围 ， 添 加 按钮 和 其 他 导航 
选项 。 


默认 情况 下 ， 当 相关 的 文本 域 获得 焦点 时 ， 在 一 个 小 的 覆盖 层 打开 日 期 选择 器 。 对 
于 一 个 内 联 的 日 历 ， 只 需 简单 地 将 日 期 选择 器 附加 到 div 或 者 span 上 。 


键盘 交互 
当日 期 选择 器 打开 时 ， 下 面 的 键盘 命令 可 用 : 


PAGE UP : 移 到 上 一 个 月 。 

PAGE DOWN : 移 到 下 一 个 月 。 
CTRL+PAGE UP : 移 到 上 一 年 。 
CTRL+PAGE DOWN : 移 到 下 一 年 。 
CTRL+HOME : 移 到 当前 月 份 。 如 果 日 期 选择 器 是 关闭 的 则 打开 。 
CTRL+LEFT : 移 到 上 一 天 。 

CTRL+RIGHT : 移 到 下 一 天 。 
CTRL+UP : 移 到 上 一 周 。 

CTRL+DOWN : 移 到 下 一 周 。 

ENTER : 选择 聚焦 的 日 期 。 
CTRL+END : 关闭 日 期 选择 器 ， 并 清除 日 期 。 
ESCAPE : 关闭 日 期 选择 器 ， 不 做 任何 选择 。 


实用 功能 
$.datepicker.setDefaults( settings ) 
为 所 有 的 日 期 选择 器 改变 默认 设置 。 


使 用 option() 方法 来 改变 个 别 实例 的 设置 。 
代码 实例 : 
设置 所 有 的 日 期 选择 器 在 获得 焦点 时 或 点 击 图 标 时 打开 。 


$.datepicker.setDefaults({ 
showOn: "both", 
buttonImageOnly: true, 
buttonImage: "calendar.gif", 
buttonText: "Calendar" 


3); 
设置 所 有 的 日 期 选择 器 都 有 法 语文 本 。 


$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); 


$.datepicker.formatDate( format, date, settings ) 


格式 化 日 期 为 一 个 带 有 指定 格式 的 字符 串 值 。 
格式 可 以 是 下 列 组 合 : 


e d -一 月 中 的 第 几 天 CRABS) 

e dd- 一 月 中 的 第 几 天 《两 位 数 ) 

e 0 - 一 年 中 的 第 几 天 CRASS) 

e 00 - 一 年 中 的 第 几 天 (三 位 数 ) 

e D - 天 的 短 名 称 

e DD - 天 的 长 名 称 

e nm -一 年 中 的 第 几 月 (没有 前 导 规 ) 

e mm -一 年 中 的 第 几 月 (两 位 数 ) 

e M- 月 的 短 名 称 

e MM - 月 的 长 名 称 

ey- 年 (两 位 数 ) 

e yy - 年 (四 位 数 ) 

e @ -Unix 时 间 惟 (ms since 01/01/1970) 
e !- Windows 钟表 (100ns since 01/01/0001) 
e. -文本 

e "- 35/5 

e 其 他 - 文本 


也 有 一 些 $.datepicker 预定 义 的 标准 日 期 格式 : 


e ATOM - 'yy-mm-dd' (4 RFC 3339/ISO 8601 相同 ) 
e COOKIE - 'D, dd M yy' 

e |SO 8601 - 'yy-mm-dd' 

e RFC_822-'D,dMy' (参照 RFC 822) 

e RFC 850 - 'DD, dd-M-y' (参照 RFC 850) 


RFC_1036-'D,dMy' (参照 RFC 1036) 
RFC_1123-'D,dMyy' (参照 RFC 1123) 
RFC_2822-'D,dMyy' (参照 RFC 2822) 
RSS -'D,dMy' (4 RFC 822 相同 ) 
TICKS - 

TIMESTAMP - '@' 

W3C - 'yy-mm-dd' (4 ISO 8601 相同 ) 


代码 实例 : 
以 ISO 格式 显示 日 期 。 产 生 "2007-01-26"。 


$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) ), 
DS SSS. Sa ee 
以 扩展 法 语 格式 显示 日 期 。 产 生 "Samedi, Juillet 14,2007". 


$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, 
dayNames: $.datepicker.regional[ "fr" ].dayNames, 
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, 
monthNames: $.datepicker.regional[ "fr" ].monthNames 


3); 





$.datepicker.parseDate( format, value, settings ) 


从 一 个 指定 格式 的 字符 串 值 中 提取 日 期 。 
格式 可 以 是 下 列 组 合 : 


d - 一 月 中 的 第 几 天 (没有 前 导 雾 ) 

dd -一 月 中 的 第 几 天 (两 位 数 ) 

0 - 一 年 中 的 第 几 天 GRBRBU FS) 

oo -一 年 中 的 第 几 天 (三 位 数 ) 

D - 星期 几 的 短 名 称 

DD - 星期 几 的 长 名 称 

m - 一 年 中 的 第 几 月 CRASS) 

mm - 一 年 中 的 第 几 月 (两 位 数 ) 

M - 月 的 短 名 称 

MM - 月 的 长 名 称 

y -年 《两 位 数 ) 

yy - 年 《四 位 数 ) 

@ - Unix 时 间 玲 (ms since 01/01/1970) 
! - Windows 钟表 (100ns since 01/01/0001) 
'..' -文本 

"- 单 引号 


e 其 他 - 文本 
一 些 可 能 被 抛 出 的 异常 : 


e ‘Invalid arguments' - 如 果 格 式 或 值 为 空 则 抛 出 此 异常 。 

e 'Missing number at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 数值 则 抛 出 此 异 
常 。 

e 'Unknown name at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 星期 几 名 称 或 月 
份 名 称 则 抛 出 此 异常 。 

e 'Unexpected literal at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 文本 值 则 抛 出 


此 异常 。 
e ‘Invalid date’ - 如 果 日 期 无 效 则 抛 出 此 异常 ， 上 比如 '31/02/2007'。 
代码 实例 : 


提取 一 个 ISO 格式 的 日 期 。 


$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" ); 


提取 一 个 扩展 法 语 格式 的 日 期 。 


$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", 
shortYearCuroff: 20, 
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, 
dayNames: $.datepicker.regional[ "fr" ].dayNames, 
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, 
monthNames: $.datepicker.regional[ "fr" ].monthNames 


3): 
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$.datepicker.iso8601Week( date ) 

确定 一 个 给 定 的 日 期 在 一 年 中 的 第 几 周 : 1 到 53, 

该 函数 使 用 ISO 8601 定义 一 周 : 一 周 从 星期 一 开始 ， 每 一 年 的 第 一 周 包含 1 月 4 
日 。 这 意味 着 上 一 年 至 多 有 三 天 可 能 包含 在 当年 的 第 一 周 中 ， 当 年 至 多 有 三 天 可 能 
包含 在 上 一 年 的 最 后 一 周 中 。 

WB calculateweek 选项 的 默认 实现 。 

代码 实例 : 

查找 日 期 在 一 年 中 的 第 几 周 。 


$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) ); 


$.datepicker.noWeekends 


i240 beforeShowDay 函数 ， 防 止 选择 周末 。 


我 们 可 以 在 beforeShowDay 选项 中 提供 noweekends() 男 数 ， 用 来 计算 所 有 
工作 日 ， 提 供 一 个 true / false 值 的 数组 ， 用 来 指示 日 期 是 否 可 选择 。 


代码 实例 : 
设置 DatePicker， 让 周末 不 可 选 。 


$( "#datepicker" ).datepicker({ 
beforeShowDay: $.datepicker.noWeekends 


3); 


局 限 


日 期 选择 器 提供 了 迎合 不 同 的 语言 和 日 期 格式 本 地 化 内 容 的 支持 。 每 个 本 地 化 包含 
在 名 称 后 追加 语言 代码 的 文件 中 ， 例 如 法 语 为 jquery.ui.datepicker-fr.js o 
所 需 的 本 地 化 文件 需要 包含 在 主要 的 日 期 选择 器 代码 后 面 。 每 个 本 地 化 文件 添加 了 
它 自己 的 设置 到 可 用 的 本 地 化 集合 中 ， 所 有 实例 自动 应 用 这 些 设 置 为 默认 设置 。 


$.datepicker.regional 属性 保存 了 一 个 本 地 化 数组 ， 以 语言 代码 作为 前 置 
默认 前 置 为 "" ， 表 示 英 语 。 每 个 条 目 是 一 个 带 有 下 列 属性 的 对 

象 : closeText 、 prevText 、 nextText 、 currentText 、 monthNames 、 
monthNamesShort 、 dayNames 、 dayNamesShort 、 dayNamesMin 、 weekH 
、 dateFormat 、 firstDay 、 isRTL 、 showMonthAfterYear 和 
yearSuffix 。 


您 可 以 通过 下 面 代码 恢复 默认 的 本 地 化 : 


$.datepicker.setDefaults( $.datepicker.regional[ "" ] ); 


您 可 以 通过 下 面 代 码 履 盖 一 个 特定 地 点 的 日 期 选择 器 : 
$( selector ).datepicker( $.datepicker.regional[ "fr" ] ); 


主题 化 


日 期 选择 器 部 件 (Datepicker Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 
如 果 需 要 使 用 日 期 选择 器 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS 
class 名 称 


e ui-datepicker :日 期 选择 器 的 外 层 容 器 。 如 果 日 期 选择 器 是 内 联 的， 该 元 
素 会 另外 带 有 一 个 ui-datepicker-inline class。 如 果 设 置 了 isRTL 选 
项 ， 该 元 素 会 另外 带 有 一 个 ui-datepicker-rtl class, 

o ui-datepicker-header :日 期 选择 器 的 头 部 容器 。 
m Ui-datepicker-prev : 用 于 选择 上 一 月 的 控件 。 
m Ui-datepicker-next : 用 于 选择 下 一 月 的 控件 。 
= ui-datepicker-title :日 期 选择 器 包含 月 和 年 的 标题 容器 。 


= Ui-datepicker-month : 月 的 文本 显示 ， 如 果 设 置 了 
changeMonth 选项 则 显示 &lt;select&gt; 元 素 。 
= Ui-datepicker-year : 年 的 文本 显示 ， 如 果 设 置 了 
changeYear 选项 则 显示 &lt;select&gt; 元 素 。 
o ui-datepicker-calendar : 包含 日 历 的 表格 。 
= ui-datepicker-week-end : 周末 的 单元 格 。: Cells containing 
weekend days. 
m Ui-datepicker-other-month :发生 在 某 月 但 不 是 当前 月 天 数 的 
单元 格 。 
@ Ui-datepicker-unselectable : 用 户 不 可 选择 的 单元 格 。 
w Ui-datepicker-current-day :已 选中 日 期 的 单元 格 。 
= ui-datepicker-today : 当天 日 期 的 单元 格 。 
o ui-datepicker-buttonpane : 当 设 置 showButtonPanel 选项 时 使 
用 按钮 面板 (buttonpane) 。 
m Ui-datepicker-current : 用 于 选择 当天 日 期 的 按钮 。 


如 果 numberOfMonths 选项 用 于 显示 多 个 月 份 ， 则 使 用 一 些 额外 的 class : 


e ui-datepicker-multi :一 个 多 月 份 日 期 选择 器 的 最 外 层 容器 。 该 元 素 会 根 
据 要 显示 的 月 份 个 数 另外 带 有 
ui-datepicker-multi-2 、 ui-datepicker-multi-3 或 
ui-datepicker-multi-4 class 名 称 。 
o ui-datepicker-group : 分 组 内 单独 的 选择 器 。 该 元 素 会 根据 它 在 分 组 
中 的 位 置 另 外 带 有 
ui-datepicker-group-first 、 ui-datepicker-group-middle 或 
ui-datepicker-group-last class 名 称 。 


依赖 

e UI 核心 (UI Core) 

e 特效 核心 (Effects Core) (WN; 4S showAnim 选项 一 起 使 用 时 ) 
附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 

e 该 部 件 以 编程 方式 操作 元 素 的 值 ， 因此 当 元 素 的 值 改变 时 不 会 触发 原生 的 
change 事件 。 

e 不 支持 在 &lt;input type-"date"&gt; 上 创建 日 期 选择 器 ， 因 为 会 造成 与 
本 地 选择 器 的 Ul 冲突 。 


实例 


一 个 简单 的 jQuery UI 日 期 选择 器 (Datepicker) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 日 期 选择 器 部 件 (Datepicker Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="datepicker"></div> 
<script> 
$( "#datepicker" ).datepicker(); 


</script> 


</body> 
</html> 


居于 





jQuery UI API - 对 话 框 部 件 (Dialog Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 在 一 个 交互 覆盖 层 中 打开 内 容 。 
版 本 新 增 : 1.0 


对 话 框 是 一 个 基 浮 窗口 ， 包 括 一 个 标题 栏 和 一 个 内 容 区 域 。 对 话 框 窗口 可 以 移动 ， 
重新 调整 大 小 ， 默 认 情 况 下 通过 'x' 图 标 关 闭 。 


如 果 内 容 长 度 超过 最 大 高 度 ， 一 个 滚动 条 会 自动 出 现 。 
一 个 底部 按钮 栏 和 一 个 半 透 明 的 模式 必 盖 层 是 常见 的 添加 选项 。 


焦点 

当 打 开 一 个 对 话 框 时 ， 焦 点 会 自动 移动 到 满足 下 面条 件 的 第 一 个 项 目 : 
1. 带 有 autofocus 属性 的 对 话 框 内 的 第 一 个 元 素 

2. 对 话 框 内 容 内 的 第 一 个 :tabbable 元 素 

3. 对 话 框 按钮 面板 内 的 第 一 个 :tabbable 元 素 

4. 对话 框 的 关闭 按钮 

5. 对 话 框 本 身 


当 打开 时 ， 对 话 框 部 件 (Dialog Widget) 确保 通过 tab 切换 对 话 框 内 元 素 间 的 焦 
点 ， 不 包括 对 话 框 外 的 元 素 。 模 态 对 话 框 防 止 鼠 标 用 户 点 击 对 话 框 外 的 元 素 。 


当 关 闭 对 话 框 时 ， 焦 点 自动 返回 到 之 前 对 话 框 打 开 时 获得 焦点 的 元 素 上 。 
隐藏 关闭 按钮 
在 一 些 情况 下 ， 您 可 能 想 要 隐藏 关闭 按钮 ， 例 如 ， 在 按钮 面板 中 已 经 有 一 个 关闭 按 


钮 的 情况 。 最 好 的 解决 方法 是 通过 CSS。 作 为 实例 ， 您 可 以 定义 一 个 简单 的 规则 ， 
比如 : 


.no-close .ui-dialog-titlebar-close { 
display: none; 


然后 ， 您 可 以 添加 no-close class 到 任意 的 对 话 框 ， 用 来 隐藏 关闭 按钮 : 


$( "#dialog" ).dialog({ 
dialogClass: "no-close", 
buttons: [ 


text: "OK", 
click: function() { 
$( this ).dialog( "close" ); 


3); 


主题 化 


对 话 框 部 件 (Dialog Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 
样式 。 如 果 需 要 使 用 对 话 框 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-dialog : 对 话 框 的 外 层 容器 。 

o ui-dialog-titlebar : 包含 对 话 框 标题 和 关闭 按钮 的 标题 栏 。 
= ui-dialog-title : 对 话 框 文本 标题 周转 的 容器 。 
m Ui-dialog-titlebar-close : 对 话 框 的 关闭 按钮 。 

o ui-dialog-content : 对 话 框 内 容 周 围 的 容器 。 这 也 是 部 件 被 实例 化 的 

元 素 。 

o ui-dialog-buttonpane : 包含 对 话 按钮 的 面板 。 只 有 当 设 置 了 
buttons 选项 时 才 呈 现 。 
= Ui-dialog-buttonset : 按钮 周围 的 容器 。 


此 外 ， 当 设置 了 modal 选项 时 ， 一 个 带 有 ui-widget-overlay class 名称 的 
元 素 被 追加 到 &lt;body&gt; o 


依赖 


Ul 核心 (UI Core) 

部 件 库 (Widget Factory) 

定位 (Position) 

按钮 部 件 (Button Widget) 

可 拖 搜 小 部 件 (Draggable Widget) 【可 选 的 ; 4S draggable 选项 一 起 

使 用 时 ) 

e 可 调整 尺寸 小 部 件 (Resizable Widget) (可 选 的 ; 当 与 resizable 选项 
一 起 使 用 时 ) 

e 特效 核心 (Effects Core) (PÉI; 44 show 和 hide 选项 一 起 使 用 

时 ) 


附加 说 明 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 
一 个 简单 的 jQuery Ul 对 话 框 (Dialog) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 对 话 框 部 件 (Dialog Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«button id="opener">#] F xtig#E</but ton> 
«div id="dialog" title=" 对 话 框 标题 "> 我 是 一 个 对 话 框 </div> 


<script> 
$( "#dialog" ).dialog(( autoOpen: false }); 
$( "#opener" ).click(function() { 
$( "#dialog" ).dialog( "open" ); 
3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 菜单 部 件 (Menu Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 带 有 鼠标 和 键 胡 交互 的 用 于 导航 的 可 主题 化 菜单 。 
版 本 新 增 : 1.9 


菜单 可 以 用 任何 有 效 的 标记 创建 ， 只 要 元 素 有 严格 的 父 / 子 关系 且 每 个 条 目 都 有 一 个 
锚 。 最 常用 的 元 素 是 无 序列 表 ( &lt;ul&gt; ) : 


«ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
<li><a href="#">Item 2«/a»«/li» 
<li><a href="#">Item 3</a> 
<ul> 
<li><a href="#">Item 3-1«/a»«/li» 
<li><a href="#">Item 3-2«/a»«/li» 
<li><a href="#">Item 3-3«/a»«/li» 
<li><a href="#">Item 3-4«/a»«/li» 
<li><a href="#">Item 3-5«/a»«/li» 
</ul> 
</li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5«/a»«/li» 
</ul> 


如 果 使 用 一 个 非 &lt;ul&gt; / &1lt;li&gt; 的 结构 ， 为 菜单 和 菜单 条 目 使 用 相 
同 的 元 素 ， 请 使 用 menus 选项 来 区 分 两 个 元 素 ， 例 如 


menus: "div.menuElement" 。 


可 通过 向 元 素 添 加 ui-state-disabled class 来 禁用 任何 菜单 条 目 。 


标 
为 了 向 菜单 添加 图 标 ， 请 在 标记 中 包含 图 标 : 


<ul id="menu"> 
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</é 
</ul> 


«| E 








菜单 (Menu) 会 自动 向 无 图 标的 条 目 添加 必要 的 内 边 距 。 
分 陋 符 
分 隔 符 元 素 可 通过 包含 未 链接 的 菜单 条 目 来 创建 ， 荣 单条 目 只 能 是 空格 / 破 折 号 : 


«ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
«li»-«/li» 
<li><a href="#">Item 2«/a»«/li» 
</ul> 


REH 


ENTER/SPACE : 调用 获得 焦点 的 菜单 项 的 动作 ， 可 能 会 打开 一 个 子 菜单 。 
UP : 移动 教导 到 上 一 个 菜单 项 。 

DOWN : 移动 教导 到 下 一 个 菜单 项 。 

RIGHT : 如 果 可 用 ， 则 打开 子 菜单 。 

LEFT : 关闭 当前 子 菜单 ， 移 动 焦点 到 父 菜单 项 。 如 果 焦 点 不 在 子 菜单 上 ， 则 
不 进行 任何 操作 。 

e ESCAPE : 关闭 当前 子 菜单 ， 移 动 焦点 到 父 菜单 项 。 如 果 焦 点 不 在 子 菜单 上 ， 
则 不 进行 任何 操作 。 


输入 一 个 字母 ， 移 动 焦 点 到 以 该 字母 开头 的 第 一 个 条 目 。 重 复 相 同 的 字符 会 循环 显 
示 匹 配 的 条 目 。 在 一 个 时 间 内 输入 更 多 的 字符 则 匹配 所 输入 的 字符 。 


茶 用 项 可 获得 键盘 焦点 ， 但 是 不 允许 任何 交互 。 


主题 化 


菜单 部 件 (Menu Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 菜单 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 
e ui-menu : 菜单 的 外 层 容器 。 如 果菜 单 包含 图 标 ， 该 元 素 会 另外 带 有 一 个 
ui-menu-icons class, 
o Ui-menu-item : 单个 菜单 项 的 容器 。 
m Ui-menu-icon :通过 icons 选项 进行 子 菜单 图 标 设 置 。 
o Ui-menu-divider : 菜单 项 之 间 的 分 隔 符 元 素 。 


依赖 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e Zz (Position) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指 定 的 CSS 文件 作为 起 点 。 


实例 


一 个 简单 的 jQuery Ul 菜单 (Menu) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 菜 单 部 件 (Menu Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
.ui-menu { 
width: 200px; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
<li><a href="#">Item 2«/a»«/li» 
<li><a href="#">Item 3</a> 
<ul> 
<li><a href="#">Item 3-1«/a»«/li» 
<li><a href="#">Item 3-2«/a»«/li» 
<li><a href="#">Item 3-3«/a»«/li» 
<li><a href="#">Item 3-4</a></li> 
<li><a href="#">Item 3-5«/a»«/li» 
</ul> 
</li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5</a></li> 
</ul> 


<script> 
$( "#menu" ).menu(); 
</script> 


</body> 
</html> 


[E] 





jQuery UI API - 进度 条 部 件 (Progressbar 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 显示 一 个 确定 的 或 不 确定 的 进程 状态 。 
版 本 新 增 : 1.6 


进度 条 被 设计 来 显示 进度 的 当前 完成 百分比 。 进 度 条 通过 CSS 编码 灵活 调整 大 
小 ， 默 认 会 缩放 到 适应 父 容器 的 大 小 。 

一 个 确定 的 进度 条 只 能 在 系统 可 以 准确 更 新 当前 状态 的 情况 下 使 用 。 一 个 确定 的 进 
度 条 不 会 从 左 向 右 填充 ， 然 后 循环 回 到 空 - 如 果 不 能 计算 实际 状态 ， 则 使 用 不 确定 
的 进度 条 以 便 提供 用 户 反 馈 。 


主题 化 


进度 条 部 件 (Progressbar Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 
观 的 样式 。 如 果 需 要 使 用 进度 条 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 
e ui-progressbar : 进度 条 的 外 层 容 器 。 该 元 素 会 为 不 确定 的 进度 条 另外 添 
加 一 个 ui-progressbar-indeterminate class, 
o ui-progressbar-value : 该 元 素 代表 进度 条 的 填充 部 分 。 
w ui-progressbar-overlay : 用 于 为 不 确定 的 进度 条 显示 动画 的 覆 


=Æ B 
M/Z o 


依赖 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 


附加 说 明 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 
一 个 简单 的 jQuery Ul 不 确定 的 进度 条 (Indeterminate Progressbar) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 进 度 条 部 件 (Progressbar Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="progressbar"></div> 


<script> 
$( "#progressbar" ).progressbar({ 
value: false 


3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 滑 块 部 件 (Slider Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 拖 动 手柄 来 选择 一 个 数值 。 
版 本 新 增 : 1.5 


jQuery Ul 滑 块 (Slider) 插件 允许 通过 滑 块 进行 选择 。 有 各 种 不 同 的 选项 ， 比 如 多 
个 手柄 和 范围 。 手 柄 可 通过 最 标 或 箭头 按键 进行 移动 。 


滑 块 部 件 (Slider Widget) 会 在 初始 化 时 创建 带 有 class ui-slider-handle 的 
手柄 元 素 。 您 可 以 通过 在 初始 化 之 前 创建 并 追加 元 素 ， 同 时 向 元 素 添加 
ui-slider-handle class 来 指定 自 定义 的 手柄 元 素 。 它 只 会 创建 匹配 

value / values 长度 所 需 的 数量 的 手柄 。 例 如 ， 如 果 您 指定 

values: [ 1, 5, 18 ] ， 且 创建 一 个 自 定义 手柄 ， 插 件 将 创建 其 他 两 个 。 


主题 化 


滑 块 部 件 (Slider Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 滑 块 指 定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-slider : 滑 块 控件 的 轨道 。 该 元 素 会 根据 滑 块 的 orientation 另外 带 
有 一 个 ui-slider-horizontal 或 ui-slider-vertical class。 
o ui-slider-handle : 滑 块 手柄 。 
o ui-slider-range : 当 设 置 range 选项 时 使 用 的 已 选 范 围 。 如 果 
range 选项 设置 为 "min" 或 "max" ， 则 该 元 素 会 分 别 另 外 带 有 一 个 
ui-slider-range-min 或 ui-slider-range-max class。 


依赖 


UI fi. (UI Core) 
e 部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


附加 说 明 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 
一 个 简单 的 jQuery UI Æ} (Slider) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 滑 块 部 件 (Slider Widget) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style>#slider { margin: 10px; } </style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="slider"></div> 
<script> 
$( "#slider" ).slider(); 


</script> 


</body> 
</html> 
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jQuery UI API - 旋转 器 部 件 (Spinner Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 通过 向 上 /向 下 按钮 和 箭头 键 处 理 ， 为 输入 数值 增强 文本 输入 功能 。 
版 本 新 增 : 1.9 


旋转 器 (Spinner) ， 或 数 步 进 控件 (number stepper widget) ， 是 用 于 处 理 各 种 
数字 输入 的 完美 控件 。 它 允许 用 户 直接 输入 一 个 值 ， 或 通过 键 瘟 、 鼠 标 、 滚 轮 旋 转 
改变 一 个 已 有 的 值 。 当 与 全 球 化 (Globalize) 结合 时 ， 您 甚至 可 以 旋转 显示 不 同 地 
区 的 货币 和 日 期 。 


旋转 器 (Spinner) 使 用 两 个 按钮 将 文本 输入 覆盖 为 当前 值 的 递增 值 和 递减 值 。 旋 
转 器 增加 了 按键 事件 ， 以 便 可 以 用 键盘 完成 相同 的 递增 和 递减 。 旋 转 器 代表 全 球 化 
(Globalize) 的 数字 格式 和 解析 。 


ht f A 


e UP : 对 值 增加 一 步 。 

e DOWN : 对 值 减少 一 步 。 

e PAGE UP: 对 值 增加 一 页 。 

e PAGE DOWN : 对 值 减少 一 页 。 


当 旋转 器 不 是 只 读 ( &lt;input readonly&gt; ) 时 ， 用 户 可 以 输入 值 ， 这 可 能 
会 产生 无 效 的 值 (小 于 最 小 值 ， 大 于 最 大 值 ， 增 减 错 配 ， 非 数字 输入 ) 。 当 增 减 
时 ， 不 管 通过 编程 方式 还 是 旋转 按钮 方式 ， 值 都 会 被 强制 为 一 个 有 效 值 (如 需 了 解 
详情 ， 请 查看 stepup() 和 stepDown() 的 描述 。 


主题 化 


旋转 器 部 件 (Spinner Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 
样式 。 如 果 需 要 使 用 旋转 器 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-spinner : 旋转 器 的 外 层 容 器 。 
o ui-spinner-input : 旋转 器 部 件 (Spinner Widget) 实例 化 的 
&lt;input&gt; IH. 
o ui-spinner-button : 用 于 递增 或 递减 旋转 器 值 的 按钮 控件 。 向 上 按钮 


会 另外 带 有 一 个 ui-spinner-up class， 向 下 按钮 会 另外 带 有 一 个 


ui-spinner-down class, 


依赖 


UI 核心 (UI Core) 

部 件 库 (Widget Factory) 

按钮 部 件 (Button Widget) 

全 球 化 (Globalize) 外 部 的 ， 可 选 的 ; S5 culture 和 numberFormat 
选项 一 起 使 用 时 ) 


附加 说 明 


该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 

该 部 件 以 编程 方式 操作 元 素 的 值 ， 因 此 当 元 素 的 值 改 变 时 不 会 触发 原生 的 
change 事件 。 

不 支持 在 &lt;input type-"number"&gt; 上 创建 选择 器 ， 因 为 会 造成 与 本 
地 旋转 器 的 Ul 冲突 。 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 

<title> 旋 转 器 部 件 (Spinner Widget) 演示 </title> 

<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


</head> 
<body> 


«input id="Spinner"> 


<script> 
$( "#spinner" ).spinner(); 
«/script» 


«/body» 
«/html» 








jQuery UI API - 标签 页 部 件 (Tabs Widget) 


所 属 类 别 

小 部 件 (Widgets) 

用 法 

描述 : 一 种 多 面板 的 单 内 容 区 ， 每 个 面板 与 列表 中 的 标题 相关 。 
版 本 新 增 : 1.0 


标签 页 (Tabs) 通常 用 于 把 内 容 分 成 多 个 部 分 ， 以 便 节 省 空间 ， 就 像 折 生 面 板 
(accordion) 一 样 。 


标签 页 (Tabs) 有 一 组 必须 使 用 的 特定 标记 ， 以 便 标签 页 能 正常 工作 : 


e 标签 页 (Tabs) 必须 在 一 个 有 序 的 ( &lt;ol&gt; ) 或 无 序 的 
( &1t;ul&gt; ) 列表 中 

e 每 个 标签 页 的 "title" 必须 在 一 个 列表 项 ( &lt;li&gt; ) 的 内 部 ， 且 必须 用 一 
个 带 有 href 属性 的 锚 ( &lt;a&gt; ) x 

e 每 个 标签 页 面板 可 以 是 任意 有 效 的 元 素 ， 但 是 它 必 须 带 有 一 个 id， 该 id 与 相关 
标签 页 的 锚 中 的 哈 希 相对 应 。 


每 个 标签 页 面板 的 内 容 可 以 在 页 面 中 定义 好 ， 或 者 可 以 通过 Ajax 加 载 。 这 两 种 方 
式 都 是 基于 与 标签 页 相关 的 锚 的 href 上 自动 处 理 的 。 默 认 情 况 下 ， 标 签 页 在 点 
击 时 激活 ， 但 是 通过 event 选项 可 以 改变 或 覆盖 事件 。 


下 面 是 一 些 样品 标记 : 


<div id="tabs"> 
<ul> 
<li><a href="#fragment -1">—</a></1i> 
<li><a href="#fragment -2">—</a></1li> 
<li><a href="#fragment -3">=</a></1i> 
</ul> 
<div id="fragment-1"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ( 
«/div» 
«div id="fragment-2"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ( 
«/div» 
«div id="fragment-3"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed í 
«/div» 
«/div» 
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键盘 交互 
当 焦 点 在 标签 页 上 时 ， 下 面 的 键盘 命令 可 用 : 


e UP/LEFT : 移动 焦点 到 上 一 个 标签 页 。 如 果 在 第 一 个 标签 页 上 ， 则 移动 焦点 到 
最 后 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 页 。 

e DOWNRIGHT : 移动 焦点 到 下 一 个 标签 页 。 如 果 在 最 后 一 个 标签 页 上 ， 则 移 
动 焦点 到 第 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 页 。 

e HOME : 移动 焦点 到 第 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 


页 。 
e END: 移动 焦点 到 最 后 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 
页 。 


SPACE : 激活 与 获得 焦点 的 标签 页 相关 的 面板 。 

ENTER : 激活 或 切换 与 获得 焦点 的 标签 页 相关 的 面板 。 
ALT+PAGE UP : 移动 焦点 到 上 一 个 标签 页 ， 并 立即 激活 。 
ALT+PAGE DOWN : 移动 焦点 到 下 一 个 标签 页 ， 并 立即 激活 。 


当 焦 点 在 面板 上 时 ， 下 面 的 键盘 命令 可 用 : 


e CTRL*UP : 移动 焦点 到 相关 的 标签 页 。 
e ALT+PAGE UP: 移动 焦点 到 上 一 个 标签 页 ， 并 立即 激活 。 
e ALT+PAGE DOWN : 移动 焦点 到 下 一 个 标签 页 ， 并 立即 激活 。 


主题 化 


标签 页 部 件 (Tabs Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 标签 页 指定 的 祥 式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-tabs : 标签 页 的 外 层 容 器 。 当 设置 了 collapsible 选项 时 ， 该 元 素 会 
另外 带 有 一 个 ui-tabs-collapsible class. 


o ui-tabs-nav : 标签 页 列表 。 
m 导航 中 激活 的 列表 项 会 带 有 一 个 ui-tabs-active class。 内 容 通过 
Ajax 调用 加 载 的 列表 项 会 带 有 一 个 ui-tabs-loading class, 
w ui-tabs-anchor : 用 于 切换 面板 的 锚 。 
o ui-tabs-panel : 与 标签 页 相关 的 面板 。 只 有 和 与 其 对 应 的 标签 页 激活 时 
才 可 见 。 


依赖 


e Ul 核心 (UI Core) 

EM (Widget Factory) 

e 特效 核心 (Effects Core) (可 选 的 ; 4S show 和 hide 选项 一 起 使 用 
ay ) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 


一 个 简单 的 jQuery Ul 标签 页 (Tabs) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<title> 标 签 页 部 件 (Tabs Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 


<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


</head> 
<body> 


<div id="tabs"> 
<ul> 


<li><a href="#fragment -1"><span>—</span></a></1i> 
<li><a href="#fragment -2"><span>—</span></a></1i> 
<li><a href="#fragment -3"><span>=</span></a></1i> 


</ul> 
<div id="fragment-1"> 


<p> 第 一 个 标签 是 默认 激活 的 : </p> 


<code>$( "#tabs" ).tabs(); </code> 


</div> 

«div id="fragment-2"> 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 

</div> 

«div id="fragment-3"> 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 

</div> 

</div> 


<script> 
$( "#tabs" ).tabs(); 
</script> 


</body> 
</html> 
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jQuery UI API - 工具 提示 框 部 件 (Tooltip 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 蔡 代 原 生 的 工具 提示 框 。 
版 本 新 增 : 1.9 


工具 提示 框 (Tooltip) 取代 了 原生 的 工具 提示 框 ， 让 它们 可 主题 化 ， 也 人 允许 进行 各 
种 自 定义 : 


e 显示 不 仅仅 是 标题 的 其 他 内 容 ， 就 如 内 联 的 脚注 或 通过 Ajax 检索 的 额外 内 
合 。 

e 自 定义 定位 ， 例 如 ， 在 元 素 上 居中 工具 提示 框 。 

。 添加 额外 的 样式 来 定制 警告 或 错误 区 域 的 外 观 。 


默认 使 用 一 个 渐变 的 动画 来 显示 和 隐藏 工具 提示 框 ， 这 种 外 观 与 简单 的 切换 可 见 度 
相 比 更 具 灵 性 。 这 可 以 通过 show 和 hide 选项 进行 定制 。 


items 和 content 选项 需要 保持 同步 。 如 果 您 改变 了 其 中 一 个 ， 您 需要 同时 改 
变 另 一 个 。 

在 一 般 情况 下 ， 禁 用 的 元 素 不 会 触发 任何 DOM 事件 。 因 此 ， 适 当地 控制 禁用 元 素 
的 工具 提示 框 是 不 可 能 的 ， 因 为 我 们 需要 监听 事件 来 决定 何 时 显示 和 隐藏 工具 提示 
框 。 这 就 导致 jQuery Ul 不 能 保证 对 附加 到 禁用 元 素 上 的 工具 提示 框 任何 层次 上 的 
支持 。 这 意味 着 如 果 您 需要 在 禁用 元 素 上 进行 提示 ， 您 可 能 需要 使 用 一 个 原生 的 提 
示 框 和 jQuery Ul 工具 提示 框 的 混合 物 。 


主题 化 
工具 提示 框 部 件 (Tooltip Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 
观 的 样式 。 如 果 需 要 使 用 工具 提示 框 指定 的 桩 式 ， 则 可 以 使 用 下 面 的 CSS class 名 
称 : 
e ui-tooltip : 工具 提示 框 的 外 层 容 器 。 
o Ui-tooltip-content : 工具 提示 框 的 内 容 。 


依赖 


UI 核心 (UI Core) 

部 件 库 (Widget Factory) 

定位 (Position) 

特效 核心 (Effects Core) (可 选 的 ; 44 show 和 hide 选项 一 起 使 用 
时 ) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 


属性 的 所 有 元 素 的 事件 代理 ， 在 文档 上 创建 一 个 工具 提示 框 
Tooltip) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 工 具 提 示 框 部 件 (Tooltip Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 
«a href="#" title=" jam" ></a> 
<input title=" 输 入 帮助 "> 

</p> 

<script> 
$( document ).tooltip(); 

«/script» 


«/body» 
«/html» 


Ei — —Hg 





W3School jQuery Easy UI 教程 


来 源 : jQuery Easy UI 教程 
整理 : 飞龙 


jQuery EasyUl 简介 


jQuery EasyUl 是 一 个 基于 jQuery 的 框架 ， 集 成 了 各 种 用 户 界 面 插件 。 
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什么 是 jQuery EasyUl 
jQuery EasyUl 框架 提供 了 创建 网 页 所 需 的 一 切 ， 帮 助 您 轻松 建立 站 点 。 


e easyui 是 一 个 基于 jQuery 的 框架 ， 集 成 了 各 种 用 户 界 面 插件 。 

e easyui 提供 建立 现代 化 的 具有 交互 性 的 V pae M, 

e 使 用 easyui， 您 不 需要 写 太 多 javascript 代码 ， 一 般 情 况 下 您 只 需要 使 用 一 些 
html 标记 来 定义 用 户 界面 。 

e HTML 网 页 的 完整 框架 。 

e easyui 节省 了 开发 产品 的 时 间 和 规模 。 

e easyui 非常 简单 ， 但 是 功能 非常 强大 。 
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jQuery EasyUl 下 载 


您 可 以 从 http://www.jeasyui.com/download/index.php 上 下 载 您 需要 的 jQuery 
EasyUl 版 本 。 


轻松 使 用 jQuery 和 HTML5 


jQuery EasyUl 提供 易于 使 用 的 组 件 ， 它 使 Web 开发 人 员 快 速 地 在 流行 的 jQuery 
核心 和 HTML5 上 建立 程序 页 面 。 这 些 功能 使 您 的 应 用 适合 今天 的 网 络 。 有 两 个 方 
法 声明 的 UI 组 件 : 


1. 直接 在 HTML 声明 组 件 。 
«div class="easyui-dialog" style="width: 400px; height :200px" 
data-options="title: 'My Dialog',collapsible:true,iconCls:'icon: 


dialog content. 
</div> 


5 —H& 
2. 编写 JavaScript 代码 来 创建 组 件 。 





<input id="cc" style="width:200px" /> 


$('#cc' ).combobox( { 
Mieke Rapin 
required: true, 
valueField: 'id', 
textField: 'text' 
3): 


jQuery EasyUl 应 用 


jQuery EasyUl 应 用 - 创建 CRUD 应 用 


数据 收集 并 妥善 管理 数据 是 网 络 应 用 共同 的 必要 。CRUD 人 允许 我 们 生成 页 面 列表 ， 
并 编辑 数据 库 记 录 。 本 教程 将 向 你 演示 如 何 使 用 jQuery EasyUl 框架 实现 一 个 
CRUD DataGrid。 


我 们 将 使 用 下 面 的 插件 : 


datagrid : 向 用 户 展示 列表 数据 。 
dialog : 创建 或 编辑 一 条 单一 的 用 户 信 息 。 
form : 用 于 提交 表单 数据 。 


messager : 显示 一 些 操 作 信 息 。 


步骤 1 : 准备 数据 库 
我 们 将 使 用 MySql 数据 库 来 存储 用 户 信息 。 创 建 数 据 库 和 'users' X. 










Inamel (000)000-0000 name 1@qmail.com 
Iname2 (000)000-0000 name2@qmail.com 





4 fname2 


5 fname3 Iname3 (000)000-0000 name3@qmail.com 
7 fname4 Iname4 (000)000-0000 name4@qmail.com 
8 fname5 Iname5 (000)000-0000 name5 gmail.com 
9 fname6 Iname6 (000)000-0000 name6 gmail.com 
10 fname7 Iname7 (000)000-0000 name7 &gmail.com 
11 fname8 Inames (000)000-0000 name8 @qmail.com 
12 fname9 Iname9 (000)000-0000 name3@qmail.com 
13 fname 10 Iname 10 (000)000-0000 name 10 @gmail.com 


步骤 2 : 创建 DataGrid 来 显示 用 户 信 息 
创建 没有 javascript 代码 的 DataGrid。 


«table id="dg" title="My Users" class-"easyui-datagrid" style="widt 
url="get_users.php" 
toolbar="#toolbar" 
rownumbers="true" fitColumns="true" singleSelect="true"> 


<thead> 
<tr> 
«th field-"firstname" width="50">First Name</th> 
«th field-"lastname" width="50">Last Name</th> 
<th field="phone" width="50">Phone</th> 
«th field-"email" width="50">Email</th> 
«/tr» 
</thead> 
</table> 


«div id="toolbar"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" plain: 
«a href="#" class="easyui-linkbutton" iconCls="icon-edit" plair 
«a href="#" class="easyui-linkbutton" iconCls="icon-remove" pl: 
</div> 
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我 们 不 需要 写 任何 的 javascript 代码 ， 就 能 向 用 户 显示 列表 ， 如 下 图 所 示 : 
My Users 


中 New User e Edit User (==) Resove User 





First Name Last Name Fhone Ezail 

1 fnamel lnazei (000) 000-0000 namel@gmail. com + 
2  fnaze2 lnaze2 (000) 000-0000 name2@gmail. com 

3 fname3 lnaze3 (000) 000-0000 naze36gzail. coz 

1 fname¢ lnaze4 (000) 000-0000 name4@gmail. com 3 
5 00) 000-0000 

6  fnaze6 lnaze6 (000) 000-0000 name6@gmail. com T 
7  fname? lnaze? (000) 000-0000 name7@gmail. com 

8 fname8 iname8 (000) 000-0000 nameS@email. com z 


DataGrid 使 用 'url' 属性 ， 并 赋值 为 "get _users.php'， 用 来 从 服务 器 检索 数据 。 
get_users.php 文件 的 代码 


$rs = mysql_query('select * from users'); 

$result = array(); 

while($row = mysql fetch object($rs))( 
array push($result, $row); 

} 


echo json_encode($result); 


步骤 3 : 创建 表单 对 话 框 


我 们 使 用 相同 的 对 话 框 来 创建 或 编辑 用 户 。 


«div id="dlg" class="easyui-dialog" style="width: 400px; height :280p> 
closed-"true" buttons="#d1lg-buttons"> 
<div class="ftitle">User Information</div> 
<form id="fm" method="post"> 
<div class="fitem"> 
<label>First Name:</label> 
«input name="firstname" class="easyui-validatebox" reqt 
</div> 
<div class="fitem"> 
<label>Last Name:</label> 
«input name="lastname" class="easyui-validatebox" requ: 
</div> 
<div class="fitem"> 
<label>Phone:</label> 
<input name="phone"> 
</div> 
<div class="fitem"> 
<label>Email:</label> 
«input name="email" class="easyui-validatebox" validTy; 
</div> 
</form> 
</div> 
<div id="dlg-buttons"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclicl 
«a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onc 
</div> 





这 个 对 话 框 已 经 创建 ， 也 没有 任何 的 javascript 代码 :。 
Edit User e 


User Information 


First Name: fname3 
Last Name: lname3 
Phone: (000) 000-0000 





address. 


Email: [name3@zmail| A $ Please enter a valid email 





y Save P4 Cancel 


步骤 4: 实现 创建 和 编辑 用 户 
当 创 建 用 户 时 ， 打 开 一 个 对 话 框 并 清空 表单 数据 。 


function newUser(){ 
$('#d1g').dialog('open').dialog('setTitle', 'New User'); 
$('#fm').form('clear'); 
url = 'save_user.php'; 


当 编 辑 用 户 时 ， 打 开 一 个 对 话 框 并 从 datagrid 选择 的 行 中 加 载 表 单数 据 。 


var row = $('#dg').datagrid('getSelected'); 

if (row){ 
$('£dlg').dialog('open').dialog('setTitle','Edit User'); 
$('#fm').form('load', row); 
url = 'update_user.php?id='+row.id; 


url 存储 着 当 保 存 用 户 数据 时 表单 回 传 的 URL 地 址 。 


步骤 5 : 保存 用 户 数据 
我 们 使 用 下 面 的 代码 保存 用 户 数据 : 


function saveUser()( 
$('#fm').form('submit', { 
url: url, 
onSubmit: function(){ 
return $(this).form('validate'); 
}, 
success: function(result) { 
var result = eval('('*result-*')'); 
if (result.errorMsg) { 
$.messager .show( { 
title: "Error, 
msg: result.errorMsg 
1); 
) else { 
$('#dlg').dialog('close'); // close the dia: 
$('4dg').datagrid('reload'); // reload the user 





提交 表单 之 前 ，'"onSubmit 画 数 将 被 调用 ， 该 函数 用 来 验证 表单 字段 值 。 当 表单 字 
段 值 提交 成 功 ， 关 闭 对 话 框 并 重新 加 载 datagrid 数据 。 


步骤 6 : 删除 一 个 用 户 
我 们 使 用 下 面 的 代码 来 移 除 一 个 用 户 : 


function destroyUser(){ 
var row = $('#dg').datagrid('getSelected'); 


if (row){ 
$.messager.confirm('Confirm','Are you sure you want to des! 
if (r){ 
$.post('destroy user.php', (id:row.id), function(resi 
if (result.success)( 
$('#dg').datagrid('reload'); // reload 1 
} else { 
$.messager .show( { // show error message 
title: “Errors, 
msg: result.errorMsg 
3); 
3, json'); 
3): 
} 





My Users 
+ Ê Ed = 
First Name Last Name Phone Email 
1 fname inaze Ü E namel@email. com 
2 fname2 Confirm e ame2@email. com 


Are you sure you want to remove this | Bme36gzail. coz 


2) 
1  fnazeí Beet ame4¢@email. com 
: Ok Cancel mev@gzail.co 





除数 据 成 功 之 后 ， 调 用 'reload' 方法 来 刷新 datagrid 数据 。 
步骤 7 : 运行 代码 


开启 MySQL， 在 浏览 器 运行 代码 。 


下 载 jQuery EasyUl 实例 


W3School 前 端 教 程 合 


jeasyui-app-crud1.zip 


jQuery EasyUl 应 用 - 创建 CRUD 应 用 3152 


jQuery EasyUl 应 用 - 创建 CRUD 数据 网 格 
(DataGrid) 
在 上 一 章节 中 ， 我 们 使 用 对 话 框 (dialog) 组 件 创建 了 CRUD 应 用 来 创建 和 编辑 用 


户 信息 。 本 教程 我 们 将 告诉 您 如 何 创 建 一 个 CRUD 数据 网 格 (DataGrid) 。 我 们 
将 使 用 可 编辑 的 数据 网 格 (DataGrid) 插件 来 完成 这 些 CRUD 操作 动作 。 


My Users 
中 New (œ) Destroy = Save A Cancel 
First Name Last Name Phone Email 
3 tnames inaze3 UUUJ UUU-UUUU naze386gzail.cozm E 
4 fname¢ lnazeí (000) 000-0000 nazeí8gzail.coz 
S ]fname5 A< This field is required. |8gzail.coz 
6  fnaze6 lnaze6 (000) 000-0000 name6@gmail. com 
7  fname? lnaze? 000) 000-0000 name7@gmail. com 3 
8 fname8 lnaze8 (000) 000-0000 name8@gmail. com 
9 fnaze8 lnaze8 (000) 000-0000 naze88gzail. coz 
10 fnazei0 lnazei0 (000) 000-0000 nazei(08gzail.coz + 


步骤 1 :在 HTML 标签 中 定义 数据 网 格 (DataGrid) 


«table id="dg" title="My Users" style="width: 550px; height :250px" 
toolbar="#toolbar" idField="id" 
rownumbers="true" fitColumns="true" singleSelect="true"> 
<thead> 
<tr> 
<th field="firstname" width="50" editor="{type: 'validat 
«th field-"lastname" width="50" editor="{type: 'validate 
<th field="phone" width="50" editor="text">Phone</th> 
<th field="email" width="50" editor="{type: 'validatebo> 
</tr> 
</thead> 
</table> 
«div id="toolbar"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" plain: 
«a href="#" class="easyui-linkbutton" iconCls="icon-remove" pl: 
«a href="#" class="easyui-linkbutton" iconCls="icon-save" plair 
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plair 
</div> 


TE FEA] 


步骤 2 : 使 用 可 编辑 的 数据 网 格 (DataGrid) 





$('#dg').edatagrid({ 
url: 'get_users.php', 
saveUrl: 'save_user.php', 
updateUrl: 'update user.php', 
destroyUrl: 'destroy user.php' 


3): 


我 们 应 该 提供 'ur', 'saveUrl', 'updateUrl' 和 'destroyUrl' 属性 来 编辑 数据 网 格 
(DataGrid) 


url : 从 服务 器 端 检索 用 户 数据 。 

saveUrl : 保存 一 个 新 的 用 户 数 据 。 
updateUrl : 更 新 一 个 已 存在 的 用 户 数 据 。 
destroyUrl : 删除 一 个 已 存在 的 用 户 数 据 。 


步骤 3 : 写 服 务 器 处 理 代 码 
保存 一 个 新 的 用 户 (save_user.php) 


$firstname = $ REQUEST['firstname']; 
$lastname = $ REQUEST['lastname']; 
$phone = $ REQUEST['phone']; 

$email = $ REQUEST['email']; 


include 'conn.php'; 


$sql - "insert into users(firstname,lastname,phone,email) values(': 
Qmysql query($sql); 
echo json encode(array( 

'id' -» mysql insert id(), 

'firstname' -» $firstname, 

'lastname' => $lastname, 

'phone' => $phone, 

'email' => $email 





更 新 一 个 已 存在 用 户 (update user.php) 


$id = intval($ REQUEST['id']); 
$firstname = $ REQUEST['firstname']; 
$lastname = $ REQUEST['lastname']; 
$phone = $ REQUEST['phone']; 

$email = $ REQUEST['email']; 


include 'conn.php'; 


$sql-"update users set firstname='$firstname', lastname='$lastname' , 
Qmysql query($sql); 
echo json encode(array( 

'id' => $id, 

'firstname' => $firstname, 

'lastname' => $lastname, 

'phone' => $phone, 

'email' => $email 





删除 一 个 已 存在 用 户 (destroy user.php) 
$id = intval($_REQUEST['id']); 
include 'conn.php'; 
$sql - "delete from users where id-$id"; 


@mysql_query($sql); 
echo json encode(array('success'-»true)); 


FA jQuery EasyUl 实例 


jeasyui-app-crud2.zip 


jQuery EasyUl 应 用 - 创建 展开 行 明 细 编 辑 表单 的 
CRUD 应 用 


当 切 换 数据 网 格 视图 (datagrid view) 到 'detailview'"， 用 户 可 以 展开 一 行 来 显示 一 
些 行 的 明细 在 行 下 面 。 这 个 功能 允许 您 为 防止 在 明细 行 面板 (panel) 中 的 编辑 表 
单 (form) 提供 一 些 合适 的 布局 (layout) 。 在 本 教程 中 ， 我 们 使 用 数据 网 格 
(datagrid) 组 件 来 减 小 编辑 表单 (form) 所 占据 空间 。 


My Users 
中 New (Œ) Destroy 
First Name Last Name Phone Ezail 


中 fnazel lnazei (000) 000-0000 nazei8gzail. com ^ 
0 





First Name fname2 Last Name A This field is required. 


Phone (000) 000-0000 Email name28gmail. com 
fal Save P Cancel 
中 fnaze3 lnaze3 (000) 000-0000 naze38gzail. coz 


oe 1: Æ HTML 标签 中 定义 数据 网 格 (DataGrid) 


<table id="dg" title="My Users" style="width:550px;height:250px" 
url="get_users.php" 
toolbar="#toolbar" 
fitColumns-"true" singleSelect="true"> 
<thead> 
<tr> 
<th field="firstname" width="50">First Name</th> 
<th field="lastname" width="50">Last Name</th> 
<th field="phone" width="50">Phone</th> 
<th field="email" width="50">Email</th> 
</tr> 
</thead> 
</table> 
«div id="toolbar"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" plain: 
«a href="#" class="easyui-linkbutton" iconCls="icon-remove" pl: 
</div> 


| |: 





步骤 2 : 为 数据 网 格 (DataGrid) 应 用 明细 视图 


$('#dg').datagrid({ 
view: detailview, 
detailFormatter: function( index, row) { 
return '<div class="ddv"></div>'; 
}, 
onExpandRow: function( index, row) { 
var ddv = $(this).datagrid('getRowDetail',index).find('div 
ddv.panel({ 
border:false, 
cache: true, 
href: 'show_form. php?index='+index, 
onLoad: function() { 
$('#dg').datagrid('fixDetailRowHeight', index); 
$('#dg').datagrid('selectRow', index); 
$('#dg').datagrid( 'getRowDetail', index).find('form 


3); 
$('4dg').datagrid('fixDetailRowHeight',index); 





为 了 为 数据 网 格 (DataGrid) 应 用 明细 视图 ， 在 html 页 面 头 部 引入 'datagrid- 
detailview.js' 文件 。 


我 们 使 用 'detailFormatter' 范 数 来 生成 行 明 细 内 容 。 在 这 种 情况 下 ， 我 们 返回 一 个 

用 于 放置 编辑 表单 (form) 的 空 的 <div>。 当 用 户 点 击 行 展 开 按 钮 (€) 

时 ，'onExpandRow' 事件 将 被 触发 ， 我 们 将 通过 ajax 加 载 编辑 表单 (form) 。 iA 

用 'getRowDetail' 方法 来 得 到 行 明 细 容 器 ， 所 以 我 们 能 查找 到 行 明细 面板 

2 A 在 行 明 细 中 创建 面板 (panel) ， 加 载 从 'show_form.php' 返回 的 编辑 
单 (form) > 


步骤 3 : 创建 编辑 表单 (Form) 
编辑 表单 (form) 是 从 服务 器 加 载 的 。 


show form.php 


<form method="post"> 
«table class="dv-table" style="width:100%; background: #fafafa; p: 
<tr> 
<td>First Name</td> 
<td><input name="firstname" class="easyui-validatebox" 
<td>Last Name</td> 
<td><input name="lastname" class="easyui-validatebox" | 
</tr> 
<tr> 
<td>Phone</td> 
<td><input name="phone"></input></td> 
<td>Email</td> 
<td><input name="email" class="easyui-validatebox" val: 
</tr> 
</table> 
«div style="padding:5px 0; text-align: right; padding-right: 30px": 
«a href="#" class="easyui-linkbutton" iconCls="icon-save" [ 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
</div> 
</form> 


El —— B 


步骤 4 : 保存 或 取消 编辑 
调用 'saveltem' 函数 来 保存 一 个 用 户 或 者 调用 'cancelltem' 函数 来 取消 编辑 。 





function saveItem( index) { 
var row = $('#dg').datagrid('getRows' )[index]; 
var url = row.isNewRecord ? 'save user.php' : 'update user.php: 


$('4dg').datagrid('getRowDetail',index).find('form').form('subr 
url: url, 


onSubmit: function(){ 
return $(this).form('validate'); 
3 
success: function(data)( 
data = eval('('*data-*')'); 
data.isNewRecord - false; 
$('4dg').datagrid('collapseRow',index); 
$('4dg').datagrid('updateRow',( 
index: index, 
row: data 


3): 
3): 


«| mcm 








决定 要 回 传 哪 一 个 URL， 然 后 查找 表单 (form) 对 象 ， 并 调用 'submit' 方法 来 提交 
表单 (form) 数据 。 当 保存 数据 成 功 时 ， 折 和 合 并 更 新 行 数据 。 


function cancelItem( index) { 
var row = $('#dg').datagrid('getRows' )[index]; 
if (row.isNewRecord) { 
$('#dg').datagrid( 'deleteRow', index); 


} else { 
$('#dg').datagrid('collapseRow', index); 
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下 载 jQuery EasyUl 实例 


jeasyui-app-crud3.zip 


IX AAA. Bu 


jQuery EasyUl 应 用 - 创建 RSS Feed 阅读 器 


在 本 教程 中 ， 我 们 将 通过 jQuery EasyUl 框架 创建 一 个 RSS 阅读 器 。 















Seite id aaea bee mem St se tN le 
at-a - Top Stories 
poate US growth will strengthen this year, says fs 
Saveur onem Bemanke 


pun 


我 们 将 使 用 以 下 插件 : 
e layout: 创建 应 用 的 用 户 界面 。 


e datagrid : 显示 RSS Feed 列表 。 
e tree : 显示 feed 频道 。 


步骤 1 : 创建 布局 (Layout) 


JQuery CasyU 用 - Bs Roo 


&lt;body class="easyui-layout"&gt; 
<div region="north" border="false" class="rtitle"> 
jQuery EasyUI RSS Reader Demo 
</div> 
«div region="west" title="Channels Tree" split="true" border="1 
<ul id="t-channels" url="data/channels.json"></ul> 
</div> 
«div region="center" border="false"> 
<div class="easyui-layout" fit="true"> 
<div region="north" split="true" border="false" style=' 
<table id="dg" 
url-"get feed.php" border="false" rownumbei 
fit-"true" fitColumns-"true" singleSelect=' 
<thead> 
<tr> 
«th field-"title" width="100">Title</tl 
«th field="description" width="200">De: 
<th field="pubdate" width="80">Publish 
</tr> 
</thead> 
</table> 
</div> 
«div region="center" border="false" style="over flow: hic 
«iframe id="cc" scrolling="auto" frameborder="0" si 
</div> 
</div> 
</div> 
&lt;/body&gt; 


-| —^ ^o ?—— à 


步骤 2 : 数据 网 格 (DataGrid) 义理 事件 
在 这 里 我 们 要 处 理 一 些 由 用 户 触 发 的 事件 。 





$('#dg').datagrid({ 

onSelect: function(index, row) { 
$('Zcc').attr('src', row.link); 

}, 

onLoadSuccess: function(){ 
var rows = $(this).datagrid('getRows'); 
if (rows.length){ 

$(this).datagrid('selectRow',0); 

} 


} 
3); 


本 实例 使 用 'onSelect' 事件 来 显示 feed 的 内 容 ， 使 用 'onLoadSuccess' 事件 来 选择 
第 一 有 4 


步骤 3 : 树 形 菜单 (Tree) 义理 事件 
当 树 形 菜单 (Tree) 数据 已 经 加 载 ， 我 们 需要 选择 第 一 个 叶子 节点 ， 调 用 'select 


方法 来 选择 该 节点 。 使 用 'onSelect' 事件 来 得 到 已 选择 的 节点 ， 这 样 我 们 就 能 得 到 
对 应 的 'Url' 值 。 最 后 我 们 调用 数据 网 格 (DataGrid) 的 'load' 方法 来 刷新 feed 列 


表 数 据 。 


$('#t-channels').tree({ 
onSelect: function(node) { 
var url = node.attributes.url; 
$('#dg').datagrid('load', { 
url: url 


3): 
jp 


onLoadSuccess:function(node, data) { 
if (data.length){ 
var id = data[0].children[0O].children[0].id; 
var n = $(this).tree('find', id); 
$(this).tree('select', n.target); 


} 
3); 


FA jQuery EasyUl 实例 


jeasyui-app-rssreader.zip 


jQuery EasyUl 拖 放 


jQuery EasyUl 拖 放 - BAN Ha AS 


本 教程 向 您 展示 如 何 使 HTML 元 素 可 拖 动 ， 在 本 例 中 ， 我 们 将 创建 三 个 DIV 元 素 
然后 启用 他 们 的 拖 动 和 放置 。 





首先 ， 我 们 创建 三 个 «div» 元 素 : 


<div id="ddi" class="dd-demo"></div> 
<div id="dd2" class="dd-demo"></div> 
<div id="dd3" class="dd-demo"></div> 


对 于 第 一 个 «div» 元 素 ， 我 们 通过 默认 值 让 其 可 以 拖 动 。 


$('#dd1').draggable(); 


对 于 第 二 个 «div» 元 素 ， 我 们 通过 创建 一 个 克隆 (clone) 了 原来 元 素 的 代理 
(proxy) 让 其 可 以 拖 动 。 


$('#dd2').draggable({ 
proxy: 'clone' 


3); 


对 于 第 三 个 <div> 元 素 ， 我 们 通过 创建 自 定 义 代 理 (proxy) 让 其 可 以 拖 动 。 


$('4dd3').draggable(( 
proxy:function(source)( 
var p = $('«div class="proxy">proxy</div>'); 
p.appendTo('body'); 
return p; 
} 
}); 


FA jQuery EasyUl 实例 


jeasyui-dd-basic.zip 


jQuery EasyUI 拖 放 - 创建 拖 放 的 购物 车 
如 果 您 能 够 通过 您 的 Web 应 用 简单 地 实现 拖 动 和 放置 ， 您 就 会 知道 一 些 特 别 的 示 
西 。 通 过 jQuery EasyUl， 我 们 在 Web 应 用 中 可 以 简单 地 实现 拖 放 功能 。 


在 本 教程 中 ， 我 们 将 向 您 展示 如 何 创 建 一 个 启用 用 户 拖 动 和 放置 用 户 想 买 的 商品 的 
购物 车 页 面 。 购 物 篮 中 的 物品 和 价 咎 将 更 新 


oP 


显示 页 面 上 的 两 品 


Shopping Cart 





Total: $300 








Drop here to add to cart 


<ul class="products"> 
<li> 
<a href="#" class="item"> 
<img src-"images/shirti.gif"/» 


<div> 
<p>Balloon</p> 
<p>Price:$25</p> 
</div> 
</a> 
</li> 
<li> 


<a href="#" class="item"> 
<img src="images/shirt2.gif"/> 


<div> 
<p>Feeling</p> 
<p>Price:$25</p> 
</div> 
</a> 
</li> 
<!-- other products --> 


</ul> 


正如 您 所 看 到 的 上 面 的 代码 ， 我 们 添加 一 个 包含 一 些 <li> 元 素 的 <ul> 元 素来 显示 
商品 。 所 有 商品 都 有 名 字 和 价格 属性 ， 它 们 包含 在 <p> 元 素 中 。 


创建 购物 车 


<div class="cart"> 
<hi>Shopping Cart«/hi» 
«table id="cartcontent" style="width: 300px; height :auto;"> 
<thead> 
<tr> 
<th field="name" width=140>Name</th> 
«th field="quantity" width=60 align="right">Qué 
«th field="price" width=60 align="right">Price< 
</tr> 


</thead> 
</table> 
<p class="total">Total: $0</p> 
<h2>Drop here to add to cart</h2> 
</div> 





我 们 使 用 数据 网 格 (datagrid) 来 显示 购物 篮 中 的 物品 。 
拖 动 克隆 的 商品 


$('.item').draggable({ 

revert: true, 

proxy: 'clone', 

onStartDrag: function(){ 
$(this).draggable('options').cursor = 'not-allowed'; 
$(this).draggable('proxy').css('z-index',10); 

tr 

onStopDrag:function()( 
$(this).draggable('options').cursor='move'; 

} 


3); 


请 注意 ， 我 们 把 draggable 属性 的 值 从 'proxy' 设置 为 "clone'， 所 以 拖 动 元 素 将 由 
克隆 产生 。 


放置 选择 商品 到 购物 车 中 


$('.cart').droppable({ 
onDragEnter: function(e, source) { 
$(source) .draggable('options').cursor='auto'; 
tr 
onDragLeave: function(e, source) { 
$(source).draggable( 'options').cursor='not-allowed'; 
tr 
onDrop: function(e, source) { 
var name = $(source).find('p:eq(0)').html(); 
var price = $(source).find('p:eq(1)').htm1(); 
addProduct(name, parseFloat(price.split('$')[1])); 


} 
3); 
var data = {"total":0, "rows":[]}; 
var totalCost = 0; 
function addProduct(name, price) { 
function add(){ 
for(var i-0; i«data.total; i++){ 
var row - data.rows[i]; 


if (row.name == name)( 
row.quantity += 1; 
return; 

} 


data.total += 1; 
data. rows.push({ 
name:name, 
quantity:1, 
price:price 
3); 
} 
add(); 
totalCost += price; 


$('#cartcontent').datagrid('loadData', data); 
So div. cart. total). humb( Total: $'+totalCost); 


每 当 放 置 商品 的 时 候 ， 我 们 首先 得 到 商品 名 称 和 价格 ， 然 后 调用 'addProduct 函数 
来 更 新 购物 篮 。 


下 载 jQuery EasyUl 实例 


jeasyui-dd-shopping.zip 


jQuery EasyUl 拖 放 - 创建 学 校 课程 表 


本 教程 将 向 您 展示 如 何 使 用 jQuery EasyUl 创建 一 个 学 校 课 程 表 。 我 们 将 创建 两 个 
表格 : 在 左 侧 显示 学 校 科 目 ， 在 右 侧 显示 时 间 表 。 您 可 以 拖 动 学 校 科目 并 放置 到 时 
间 表 单元 格 上 。 学 校 科 目 是 一 个 <div class="item"> 元 素 ， 时 间 表 单元 格 是 一 个 
<td class="drop"> 元 素 。 








English Monday Tuesday Wednesday Thursday Friday 
Science 08:00 
Music 09:00 
History 10:00 
| Computer | 11:00 
Mathematics 12:00 
Arts | 13:00 Lunch 
Ethics 14:00 
15:00 Arts 
16:00 
显示 学 校 科 目 
<div class="left"> 
<table> 
<tr> 
<td><div class="item">English</div></td> 
</tr> 
<tr> 
<td><div class="item">Science</div></td> 
</tr> 
<!-- other subjects --> 
</table> 
</div> 


显示 时 间 表 


<div class="right"> 


<table> 

<tr> 
<td class="blank"></td> 
<td class="title">Monday</td> 
<td class="title">Tuesday</td> 
<td class="title">wednesday</td> 
<td class="title">Thursday</td> 
<td class="title">Friday</td> 

</tr> 

<tr> 
<td class="time">08:00</td> 
<td class="drop"></td> 
<td class="drop"></td> 
<td class="drop"></td> 
<td class="drop"></td> 
<td class="drop"></td> 

</tr> 

<!-- other cells --> 

</table> 
</div> 


拖 动 在 左 侧 的 学 校 科目 


$('.left .item').draggable({ 


revert: true, 


proxy: 'clone' 


3): 


放生 学 校 科目 在 时 间 表 单元 格 上 


$('.right td.drop').droppable( { 
onDragEnter : function(){ 
$(this).addClass('over'); 
ty 
onDragLeave: function(){ 
$(this).removeClass('over'); 
Pr 
onDrop: function(e, source) { 
$(this).removeClass('over'); 
if ($(source).hasClass('assigned' )){ 
$(this).append(source); 
} else { 
var c = $(source).clone().addClass('assigned'); 
$(this).empty().append(c); 
c.draggable({ 
revert: true 
31); 


} 
3): 


正如 您 所 看 到 的 上 面 的 代码 ， 当 用 户 拖 动 在 左 侧 的 学 校 科目 并 放置 到 时 间 表 单元 格 
中 时 ，onDrop 回调 函数 将 被 调用 。 我 们 克隆 从 左 侧 拖 动 的 源 元 素 并 把 它 附 加 到 时 
间 表 单元 格 上 。 当 把 学 校 科目 从 时 间 表 的 某 个 单元 格 拖 动 到 其 他 单元 格 ， 只 需 简单 
地 移动 它 即 可 。 


FA jQuery EasyUl 实例 


jeasyui-dd-timetable.zip 


jQuery EasyUl 菜单 与 按钮 


jQuery EasyUl 菜单 与 按钮 - 创建 简单 的 菜单 


Open > Word 
d Save Excel 
Exit FowerFoint 


32% (Menu) 定义 在 一 些 DIV 标记 中 ， 如 下 所 示 : 


«div id="mm" class="easyui-menu" style="width:120px;"> 
«div onclick="javascript:alert('new' )">New</div> 
<div> 

<span>Open</span> 
<div style="width:150px; "> 
<div><b>Word</b></div> 
<div>Excel</div> 
<div>PowerPoint</div> 
</div> 
</div> 
<div icon="icon-save">Save</div> 
<div class="menu-sep"></div> 
<div>Exit</div> 
</div> 


当 菜 单 创建 之 后 是 不 显示 的 ， 调 用 'show 方法 显示 它 或 者 调用 'hide' 方法 隐藏 它 : 


$('#mm').menu('show', { 


left: 200, 
top: 100 
3); 


FA jQuery EasyUl 实例 


jeasyui-mb-menu.zip 


jQuery EasyUl 菜单 与 按钮 - 创建 链接 按钮 (Link 
Button) 


通常 情况 下 ， 使 用 «button» 元 素来 创建 按钮 ， 而 链接 按钮 (Link Button) 则 是 使 
用 <a> 元 素来 创建 的 。 所 以 实际 上 一 个 链接 按钮 (Link Button) 就 是 一 个 显示 为 按 
钮 样式 的 <a> 元 素 。 


"E = n 
Cancel &5 Refresh Query text button Qal Print 
e NS =) 


X Cancel e Refresh |, Query text button 的 Print Ə 回 @ 


为 了 创建 链接 按钮 (Link Button) ， 所 有 您 需要 做 的 就 是 添加 一 个 名 为 'easyui- 
linkbutton' 的 class 属性 到 «a» 元 素 : 


<div style="padding:5px;background:#fafafa;width:500px;border:: 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
<a href="#" class="easyui-linkbutton" iconCls="icon-reload' 
«a href="#" class="easyui-linkbutton" iconCls="icon-search' 
«a href="#" class="easyui-linkbutton">text button</a> 
<a href="#" class="easyui-linkbutton" iconCls="icon-print": 
</div> 


<div style="padding: 5px; background:#fafafa; width: 500px; border:: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true">text bul 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 

</div> 


EE) 





正如 您 所 看 到 的 ，iconCls 属性 是 一 个 icon 的 CSS class 样式 ， 它 在 按钮 上 旺 示 一 
个 icon 图片。 


有 时 候 您 需要 禁用 链接 按钮 (Link Button) 或 者 启用 它 ， 下 面 的 代码 演示 了 如 何 禁 
用 一 个 链接 按钮 (Link Button) 


$(selector).linkbutton('disable'); // call the 'disable' met 


«| — EXE 











jQuery EasyUl 菜单 与 按钮 - 创建 菜单 按钮 (Menu 
Button) 


菜单 按钮 (Menu Button) 包含 一 个 按钮 (button) 和 一 个 菜单 (menu) 组 件 ， 当 
点 击 或 移动 鼠标 到 按钮 上 ， 将 显示 一 个 对 应 的 菜单 。 


£ Fditv| @ Hlp” 
A Undo 
(? Redo 

Cut 

Copy 


Faste 


(ms) Delete 


Select All 


为 了 定义 一 个 菜单 按钮 (Menu Button) ， 您 应 该 定义 一 个 链接 按钮 (Link 
Button) 和 一 个 菜单 (menu) ， 下 面 是 一 个 实例 : 


«div style-z"background:zZfafafa;padding:5px;width:200px;border:: 
«a href="#" class="easyui-menubutton" menu="#mm1" iconCls=' 
«a href="#" class="easyui-menubutton" menu="#mm2" iconCls=' 
</div> 
<div id="mmi" style="width:150px; "> 
<div iconCls="icon-undo">Undo</div> 
<div iconCls="icon-redo">Redo</div> 
<div class="menu-sep"></div> 
<div>Cut</div> 
<div>Copy</div> 
<div>Paste</div> 
<div class="menu-sep"></div> 
<div iconCls="icon-remove">Delete</div> 
<div>Select All</div> 
</div> 
«div id="mm2" style="width:100px; "> 
<div>Help</div> 
<div>Update</div> 
<div>About</div> 
</div> 





现在 已 经 定义 好 了 一 个 菜单 按钮 (Menu Button) ， 您 不 需要 写 任 何 的 javascript 
代码 。 


jQuery EasyUl 菜单 与 按钮 - 创建 分 割 按 钮 (Split 
Button ) 


分 割 按钮 (Split Button) 包含 一 个 链接 按钮 (Link Button) 和 一 个 菜单 
(Menu) 。 当 用 户 点 击 或 者 鼠标 县 停 在 向 下 箭头 区 域 ， 将 会 显示 一 个 对 应 的 菜 
单 。 本 实例 演示 了 如 何 创 建 和 使 用 分 割 按钮 (Split Button) 。 


2 Edit |™ x) 
A Undo 
(? Redo 

Cut 

Copy 


Faste 


Open > 
(ms) Delete 


Select All 
我 们 创建 一 个 分 割 按钮 (Split Button) 和 一 个 链接 按钮 (Link Button) 


«div style="border:ipx solid #ccc;background:#fafafa; padding: 5; 
«a href="#" class="easyui-splitbutton" menu="#mm" iconCls=' 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
</div> 
<div id="mm" style="width: 150px; "> 
<div iconCls="icon-undo">Undo</div> 
<div iconCls="icon-redo">Redo</div> 
<div class="menu-sep"></div> 
<div>Cut</div> 
<div>Copy</div> 
<div>Paste</div> 
<div class="menu-sep"></div> 
<div> 
<span>Open</span> 
«div style="width:150px; "> 
<div>Firefox</div> 
<div>Internet Explorer</div> 
<div class="menu-sep"></div> 
<div>Select Program. ..</div> 
</div> 
</div> 
<div iconCls="icon-remove">Delete</div> 
<div>Select All</div> 
</div> 


: = — BE 
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jQuery EasyUl 布局 


jQuery EasyUl 布局 - 为 网 页 创建 边框 布局 


边框 布局 (border layout) 提供 五 个 区 域 : east、west、north、south、center。 以 
下 是 一 些 通常 用 法 : 


north 区 域 可 以 用 来 显示 网 站 的 标语 。 

south 区 域 可 以 用 来 显示 版 权 以 及 一 些 说 明 。 
west 区 域 可 以 用 来 显示 导航 菜单 。 

east 区 域 可 以 用 来 显示 一 些 推广 的 项 目 。 
center 区 域 可 以 用 来 显示 主要 的 内 容 。 


Navigator « Language 


Select language: Introduction to Java language 


Java 
Cs 





lal 


tzi 


rlang 


为 了 应 用 布局 (layout) ， 您 应 该 确定 一 个 布局 (layout) 容器 ， 然 后 定义 一 ER 


域 。 布 局 (layout) 必 须 至 少 需要 一 个 center 区 域 ， 以 下 是 一 个 布局 (layout) 实 
例 : 


«div class="easyui-layout" style="width: 400px; height :200px; "> 
«div region="west" split-"true" title="Navigator" style="w: 
<p style="padding: 5px;margin:0;">Select language:</p> 
<ul> 
<li><a href="javascript:void(0)" onclick="showconte 
<li><a hrefz"javascript:void(0)" onclick="showconte 
<li><a hrefz"javascript:void(0)" onclick="showconte 


<li><a href="javascript:void(0)" onclick="showconte 
</ul> 


</div> 
«div id="content" region="center" title="Language" style="; 
</div> 

</div> 





我 们 在 一 个 «div» 容器 中 创建 了 一 个 边框 布局 (border layout) ， 布 局 (layout) 
把 容器 切割 为 两 个 部 分 ， 左 边 是 导航 菜单 ， 右 边 是 主要 内 容 。 


后 我 们 写 一 个 onclick 事件 处 理 画 数 来 检索 数据 ，'showcontent' 函数 非常 简单 : 


function showcontent (language) { 
$('#content').html('Introduction to ' + language + ' langué 
} 


«| = 








FA jQuery EasyUl 实例 


jeasyui-layout-layout.zip 


jQuery EasyUl 布局 - 在 面板 中 创建 复杂 布局 


面板 (Panel) 人 允许 您 创建 用 于 多 种 用 途 的 自 定义 布局 。 在 本 实例 中 ， 我 们 使 用 面 
板 (panel) 和 布局 (layout) 插件 来 创建 一 个 msn 消息 框 。 


4, Complex Panel Layout 


Search: 





Hi,I am easyui. 


4 mi» 


我 们 在 区 域 面板 中 使 用 多 个 布局 (layout) 。 在 消息 框 的 项 部 我 们 放置 一 个 查询 输 
入 框 ， 同 时 在 右边 放置 一 个 人 物 图 片 。 在 中 间 的 区 域 我 们 通过 设置 split 属性 为 
true， 把 这 部 分 切割 为 两 部 分 ， 人 允许 用 户 改变 区 域 面 板 的 尺寸 大 小 。 


以 下 就 是 所 有 代码 : 


«div class-"easyui-panel" title="Complex Panel Layout" iconCls: 
«div class="easyui-layout" fit="true"> 
<div region="north" border="false" class="p-search"> 
<label>Search:</label><input></input> 
</div> 
<div region="center" border="false"> 
<div class="easyui-layout" fit="true"> 
«div region="east" border="false" class="p-rigl 
<img src="images/msn.gif"/> 
</div> 
«div region="center" border="false" style="bor¢ 
<div class="easyui-layout" fit="true"> 
«div region-"south" split="true" borde! 
«textarea style-"border:0;width:10( 


«/div» 

«div region="center" border="false"> 
</div> 

</div> 
</div> 
</div> 
</div> 
</div> 


</div> 








我 们 不 需要 写 任何 的 javascript 代码 ， 它 自己 有 非常 强大 的 设计 用 户 界面 的 功能 。 


F jQuery EasyUl 实例 


jeasyui-layout-panel.zip 


jQuery EasyUl 布局 - 6) 27 4 Wik 


在 本 教程 中 ， 您 将 会 学 习 到 关于 easyui ft mirk (Accordion) 的 知识 。 折 受 面板 
(Accordion) 包含 一 系列 的 面板 (panel) 。 所 有 面板 (panel) 的 头 部 

(header) 都 是 可 见 的 ， 但 是 一 次 仅仅 显示 一 个 面板 (panel) 的 body 内 容 。 当 
用 户 点 击 面板 (panel) 的 头 部 (header) 时 ， 该 面板 (panel) 的 body 内 容 将 可 
见 ， 同 时 其 他 面板 (panel) 的 body 内 容 将 隐藏 不 可 见 。 


v Ab out Accordion 


A 


Accordion for jQuery 


Accordion is a part of easyul framework for 
jQuery. It lets you define your accordion 
component on web page more easily. 


EÈ About easyui Y 
Tree Menu 


Y 


我 们 将 创建 三 个 面板 (panel) ， 第 三 个 面板 (paneD 包含 一 个 树 形 菜 单 。 


«div class="easyui-accordion" style="width: 300px; height :200px;' 

«div title="About Accordion" iconCls="icon-ok" style="over1 
<h3 style="color:#0099FF;">Accordion for jQuery</h3> 
<p>Accordion is a part of easyui framework for jQuery. 

</div> 

«div title-"About easyui" iconCls="icon-reload" selected="1 
easyui help you build your web page easily 

«/div» 

«div title-"Tree Menu"> 
«ul id-"tti1" class="easyui-tree"> 


<li> 
<span>Folderi</span> 
<ul> 
<li> 
<span>Sub Folder 1</span> 
<ul> 
<li><span>File 11</span></1i> 
<li><span>File 12</span></1i> 
<li><span>File 13</span></1i> 
</ul> 
</li> 
<li><span>File 2</span></li> 
<li><span>File 3</span></li> 
</ul> 
</li> 
<li><span>File2</span></li> 
</ul> 
</div> 
</div> 
E 





FA jQuery EasyUl 实例 


jeasyui-layout-accordion.zip 


jQuery EasyUl 布局 - 创建 标签 页 (Tabs) 


本 教程 将 向 您 延 时 如 何 使 用 easyui 创建 一 个 Tabs 组 件 。 Tabs 有 多 个 可 以 动态 地 
添加 或 移 除 的 面板 (panel) 。 您 可 以 使 用 Tabs 来 在 相同 的 页 面 上 显示 不 同 的 实 
体 。 


Tabs 一 次 仅仅 显示 一 个 面板 (panel) ， 每 个 面板 (panel) 都 有 标题 、 图 标 和 关闭 
按钮 。 当 Tabs 被 选中 时 ， 将 显示 对 应 的 面板 (panel) HAA. 


First Tab Second Tab X & Third Tab X 


First Tab 


从 HTML 标记 创建 Tabs， 包 含 一 个 DIV 容器 和 一 些 DIV 面板 (panel) 。 


«div class="easyui-tabs" style="width: 400px;height :100px; "> 
«div title="First Tab" style="padding: 10px; "> 


First Tab 

</div> 

«div title="Second Tab" closable="true" style="padding: 10p> 
Second Tab 

</div> 

<div title="Third Tab" iconCls="icon-reload" closable="true 
Third Tab 

</div> 


</div> 
== — B 


我 们 创建 一 个 带 有 三 个 面板 (panel) 的 Tabs 组 件 ， 第 二 个 和 第 三 个 面板 
(panel) 可 以 通过 点 击 关 闭 按钮 进行 关闭 。 





FA jQuery EasyUl 实例 


jeasyui-layout-tabs1.zip 


jQuery EasyUl 布局 - 动态 添加 标签 页 (Tabs) 


通过 使 用 jQuery EasyUl 可 以 很 容易 地 添加 Tabs。 您 只 需要 调用 'add' 方法 即 可 。 


在 本 教程 中 ， 我 们 将 使 用 iframe 动态 地 添加 显示 在 一 个 页 面 上 的 Tabs. 当 点 击 添 
add 一 个 新 的 tab 将 被 添加 。 如 果 tab 已 经 存在 ， 它 将 被 激活 。 








| Home | easyui X x || jquery X | google X | 


jQuery EasyUl 


easyui help you build your web page easily! 





Welcome to jQuery EasyUI 


Tart Wenn rei || Tot Pras 








4 "m + 





步骤 1 : 创建 Tabs 


<div style="margin-bottom:10px"> 
«a href="#" class="easyui-linkbutton" onclick="addTab('goo( 
«a href="#" class="easyui-linkbutton" onclick="addTab( 'jque 
«a href="#" class="easyui-linkbutton" onclick-"addTab('eas 

</div> 

<div id="tt" class="easyui-tabs" style="width: 400px;height : 250; 
<div title="Home"> 
</div> 

</div> 


El em ee 


这 个 html 代码 非常 简单 ,我 们 创建 了 带 有 一 个 名 为 'Home' 的 tab 面板 的 Tabs. if 
注意 ， 我 们 不 需要 写 任 何 的 js 代码 。 





步骤 2 : 实现 'addTab' WAX 


function addTab(title, url){ 
af (S('Sstt').tabs(' exists ; title)){ 
$('#tt').tabs('select', title); 
) else { 
var content = '«iframe scrolling-"auto" frameborder="0' 
$('#tt').tabs('add', { 
title:title, 
content:content, 
closable: true 


3): 





我 们 使 用 'exists' 方法 来 判断 tab 是 否 已 经 存在 ， 如 果 已 存在 则 激活 tab。 如 果 不 存 
在 则 调用 'add' 方法 来 添加 一 个 新 的 tab 面板 。 


下 载 jQuery EasyUl 实例 


jeasyui-layout-tabs2.zip 


jQuery EasyUl 布局 - 添加 目 动 播放 标签 页 

(Tabs) 
本 教程 将 向 您 展示 如 何 创建 一 个 自动 播放 的 Tabs, Tabs 组 件 显示 第 一 个 tab m 
板 ， 然 后 显示 第 二 个 、 第 三 个 .我 们 将 写 一 些 代码 来 自动 地 切换 tab 面板 ， 然 后 让 


Shirti Shirt2 Shirt3 Shirt4 Shirt5 





步骤 1 : 创建 Tabs 


«div id="tt" class="easyui-tabs" style="width: 330px;height : 270; 
«div title="Shirti" style="padding: 20px;"> 
«img src="images/shirt1.gif"> 
</div> 
«div title="Shirt2" style="padding: 20px;"> 
«img src="images/shirt2.gif"> 
</div> 
«div title="Shirt3" style="padding: 20px;"> 
«img src="images/shirt3.gif"> 
</div> 
«div title="Shirt4" style="padding: 20px;"> 
«img src="images/shirt4.gif"> 
</div> 
«div title="Shirt5" style="padding: 20px;'"> 
«img src="images/shirt5.gif"> 
</div> 
</div> 





步骤 2: 写 目 动 播放 代 三 


var index = 0; 
var t = $('#tt'); 
var tabs = t.tabs('tabs'); 
setInterval(function(){ 
t.tabs('select', tabs[index].panel('options').title); 
index++; 
if (index >= tabs.length){ 
index = 0; 


j 
), 3000); 


正如 您 所 看 到 的 ， 我 们 调用 tabs' 方法 来 得 到 所 有 tab 面板 ， 并 使 用 'setinterval' K 
数 来 切换 他 们 。 


下 载 jQuery EasyUl 实例 


jeasyui-layout-tabs3.zip 





W3School 前 端 教 程 合集 


jQuery EasyUl 布局 - 创建 XP 风格 左 侧面 板 


通常 情况 下 ， 在 Windows XP 的 资源 管理 器 文件 来 中， 左 侧 的 面板 (panel) 包含 
me 本 教程 向 您 展示 如 何 通 过 easyui 的 面板 (panel) 插件 来 创建 XP 
左 侧面 板 。 


Picture Tasks 


View as a slide show 
Order prints online 
Print pictures 


File and Folder Tasks ^ 
Make a new folder 
Publish this folder to the 


Web 
Share this folder 


Other Places 


Details 


My documents 
File folder 


Date modified: Oct. 3rd 2010 





定义 一 些 面板 (panel) 


我 们 定义 一 些 面板 (panel) ， 这 些 面板 (panel) 用 来 显示 一 些 任务 。 每 个 面板 
(panel) 应 该 至 少 有 折 秋 /展开 工具 按钮 。 


代码 如 下 所 示 : 


jQuery EasyUl 布局 - 创建 XP 风格 左 侧面 板 3189 


<div style="width:200px;height:auto;background:#7190E0; padding 

<div class="easyui-panel" title="Picture Tasks" collapsible 
View as a slide show<br/> 
Order prints online<br/> 
Print pictures 

</div> 

<br/> 

<div class="easyui-panel" title="File and Folder Tasks" co- 
Make a new folder<br/> 
Publish this folder to the Web<br/> 
Share this folder 

</div> 

<br/> 

<div class="easyui-panel" title="Other Places" collapsible: 
New York<br/> 
My Pictures<br/> 
My Computer<br/> 
My Network Places 

</div> 

<br/> 

<div class="easyui-panel" title="Details" collapsible="true 
My documents<br/> 
File folder<br/><br/> 
Date modified: Oct.3rd 2010 

</div> 

</div> 
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自 定义 面板 (panel) 的 外 观 效果 


请 注意 ， 这 个 视图 外 观 效 果 不 是 我 们 想 要 的 ， 我 们 必须 改变 面板 (panel) 的 头 部 
背景 图 片 和 折 县 /展开 按钮 的 图 标 。 


做 到 这 一 点 并 不 难 ， 我 们 需要 做 的 只 是 重新 定义 一 些 CSS, 





. panel-body{ 
background: #f0fOf0; 
} 


. panel-header( 
background:#fff url('images/panel header bg.gif') no-repeat 
} 
.panel-tool-collapse{ 
background:url('images/arrow up.gif') no-repeat Opx -3px; 
} 
.panel-tool-expand{ 
background:url('images/arrow down.gif') no-repeat Opx -3px, 


} 








由 此 可 见 ， 使 用 easyui 定义 用 户 界 面 非 常 简单 。 


FA jQuery EasyUl 实例 


jeasyui-layout-xp.zip 


jQuery EasyUl 数据 网 格 


jQuery EasyUl 数据 网 格 - 转换 HTML 表格 为 数据 
网 格 


本 实例 演示 如 何 转换 表格 (table) 为 数据 网 格 (datagrid) 。 


Col 1 col 2 i Gol Aa cola Es Gold 
Data 1 Data 2 Data 3 Data 4 Data 5 Data 5 
Data 1 Data 2 Data 3 Data4 Data 5 Data 5 
Data 1 Data 2 Data 3 Data4 Data5 Data 5 
Data 1 Data 2 Data 3 Data4 Data S5 Data 


数据 网 格 (datagrid) 的 列 信息 是 定义 在 «thead» 标记 中 ， 数 据 是 定义 在 <tbody> 
标记 中 。 确 保 为 所 有 的 数据 列 设置 field 名 称 ， 请 看 下 面 的 实例 : 


«table id="tt" class="easyui-datagrid" style-"width:400px;heigt 


<the 


ad> 

<tr> 
<th 
<th 
<th 
<th 
<th 
<th 


field-"name1i" 
field-"name2" 
field="name3" 
field-"name4" 
field="name5" 
Field="name6" 


width="50">Col 
width="50">Col 
width="50">Col 
width="50">Col 
width="50">Col 
width="50">Col 


1</th> 
2</th> 
3</th> 
4</th> 
5</th> 
6</th> 


</tr> 
</thead> 
<tbody> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
</tbody> 
</table> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 





非常 棒 ， 您 可 以 定义 一 个 复 条 的 表 头 ， 例 如 : 


<thead> 
<tr> 
<th 
<th 
<th 
<th 
</tr> 
<tr> 
<th 
<th 
<th 
</tr> 
</thead> 


field-"namei1" width="50" rowspan="2">Col 1</th> 
field="name2" width="50" rowspan="2">Col 2</th> 
field="name3" width="50" rowspan="2">Col 3</th> 
colspan="3">Details</th> 


Ffield="name4" width="50">Col 4</th> 
field-"name5" width="50">Col 5</th> 
field-"name6" width="50">Col 6</th> 


现在 您 可 以 看 见 ， 复 条 表 头 已 经 创建 。 


Col 1 Col 2 ‘Col 3 


Details 


Col 4 ‘Col5 ‘Col 6 


Data 1 Data2 Data3 Data4 DataS Data 5 
Data 1 Data2 Data 3 Data 4 Data5 Data 6 
Data 1 Data2 Data3 Data 4 :Data5 Data 6 


Data 1 Data2 Data3 Data 4 :Data5 Data 6 
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下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid1.zip 


jQuery EasyUl 数据 网 格 - 取得 选中 行 数据 


本 实例 演示 如 何 取得 选中 行 数 据 。 














回 Load Data 

Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-SW-01 16.5 10 Large F ^ 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 

EST-11 RP-SN-01 18.5 12 Venomless E 

EST-13 RP-LI-02 18.5 12 Green Adult E p 
EST-14 FL-DSH-01 58:5 12 Tailless P 

EST-16 FL-DLH-02 93.5 12 Adult Female P 

EST-17 FL-DLH-02 93.5 12 Adult Male P Ex 
RST-12 AY-CR-ü1 103 5 Q9 Adali Mala P x 


数据 网 格 (datagrid) 组 件 包含 两 种 方法 来 检索 选中 行 数据 : 


e getSelected : 取得 第 一 个 选中 行 数据 ， 如 果 没 有 选中 行 ， 则 返回 null， 否 则 返 
回 记 录 。 
e getSelections : 取得 所 有 选中 行 数据 ， 返 回 元 素 记 录 的 数组 数据 。 


创建 数据 网 格 (DataGrid) 


«table id="tt" class="easyui-datagrid" style="width:600px;heigl 
url="data/datagrid_data.json" 
title="Load Data" iconCls="icon-save"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
«th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 


E —_ B 
使 用 演示 
取得 选中 行 数据 : 





var row = $('#tt').datagrid('getSelected'); 
if (row){ 

alert('Item ID: '+row.itemid+"\nPrice:"+row.listprice); 
J 


取得 所 有 选中 行 的 itemid : 
var ids = []; 
var rows = $('#tt').datagrid('getSelections'); 
for(var i-0; i«rows.length; i++){ 


ids.push(rows[i].itemid); 


alert(ids.join('\n')); 


下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid3.zip 


jQuery EasyUl 数据 网 格 - 添加 查询 功能 


本 实例 演示 如 何 从 数据 库 得 到 数据 ， 并 将 它们 显示 在 数据 网 格 (datagrid) 中 。 然 
后 演示 如 何 根据 用 户 输入 的 搜索 关键 词 搜 寻 显 示 结 果 。 








i Searching 
Item ID: Product ID: K Search 
Item ID Product ID List Price Unit Cost Attribute Stauts 

3 EST-23 K9-RT-02 145.49 100.00 Adult Female P € 
4 EST24 K9-RT-02 255.50 92.00 Adult Male P 

5 EST25 <9-RT-02 325.29 : Ll 
6 EST-26 K9-CW-01 125.50 92.00 Adult Male P 1 
7 EST27 K9-CW-01 155.29 90.00 Adult Female P 

8 EST28 K9-RT-01 155.29 90.00 Adult Female P = 
10 = |l Pagei of2 b bl 4 Displaying 1 to 10 of 12 items 


创建 数据 网 格 (DataGrid) 
创建 带 有 分 页 功能 的 数据 网 格 (datagrid) ， 然 后 添加 工具 栏 到 其 中 。 


«table id="tt" class="easyui-datagrid" style-"width:600px;heigt 
url-"datagrid24 getdata.php" toolbar="#tb" 
title-"Load Data" iconCls="icon-save" 
rownumbers="true" pagination="true"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut:s 
</tr> 
</thead> 
</table> 


| = E 


工具 栏 定义 如 下 : 





«div id="tb" style="padding: 3px"> 
<span>Item ID:</span> 
<input id="itemid" style-"line-height:26px;border:1px solic 
<span>Product ID:</span> 
<input id="productid" style="line-height:26px;border:1px s 
<a href="#" class="easyui-linkbutton" plain="true" onclick: 
</div> 


‘ ses 








当 用 户 输入 查询 值 并 按 下 查询 按钮 时 ，'doSearch' 函数 将 被 调用 : 


function doSearch(){ 
$('#tt').datagrid('load', { 
itemid: $('#itemid').val(), 
productid: $('#productid').val() 
3); 


上 面 的 代码 调用 了 "load' 方法 来 加 载 新 的 数据 网 格 (datagrid) 数据 。 我 们 需要 传 
i& 'itemid' 和 "productid' 参数 到 服务 器 。 


服务 器 端 代 码 


include 'conn.php'; 
$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
$itemid = isset($ POST['itemid']) ? mysql real escape string($. 
$productid = isset($ POST['productid']) ? mysql real escape st! 
$offset = ($page-1)*$rows; 
$result = array(); 
$where = "itemid like '$itemid%' and productid like '$productic 
$rs = mysql query("select count(*) from item where " . $where), 
$row - mysql fetch row($rs); 
$result["total"] = $row[0]; 
$rs = mysql query("select * from item where " . $where . " lim: 
$items - array(); 
while($row = mysql fetch object($rs))( 

array push($items, $row); 
$result["rows"] = $items; 


echo json encode($result); 
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FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid24.zip 


jQuery EasyUl 数据 网 格 - 添加 工具 栏 


本 实例 演示 如 何 添加 工具 栏 (toolbar) 到 数据 网 格 (datagrid) 。 


DataGrid with Toolbar 


GE Add of Cut [i] Save 





Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-S¥-01 16.5 10 Large F ^ 
EST-10 K3-DL-01 18.5 12 Spotted Adult Fe P 

 RP-SN-01 12 Venomless 

EST-12 RP-SH-01 18.5 12 Rattleless F = 
EST-13 RP-LI-02 18.5 12 Green Adult P 

EST-14 FL-DSH-01 58.5 12 Tailless P 

EST-15 FL-DSH-01 23.5 12 With tail P 

EST-16 FL-DLH-02 93.5 12 Adult Female E - 


创建 数据 网 格 (DataGrid) 


«table id="tt" class="easyui-datagrid" style="width:600px;heigl 
url="data/datagrid_data. json" 
title="DataGrid with Toolbar" iconCls="icon-save" 
toolbar="#tb"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field="listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 
<div id="tb"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" p. 
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" p- 
«a href="#" class="easyui-linkbutton" iconCls="icon-save" [ 
</div> 


| — B 


我 们 不 需要 写 任 何 的 javascript 代码 ， 只 需 通 过 ‘toolbar’ 属性 附加 工具 栏 
(toolbar) 到 数据 网 格 (datagrid) 。 





FA jQuery EasyUl 实例 


W3School 前 端 教 程 合 


jeasyui-datagrid-datagrid4.zip 
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jQuery EasyUl 数据 网 格 - 创建 复杂 工具 栏 


数据 网 格 (datagrid) 的 工具 栏 (toolbar) 可 以 包含 按钮 及 其 他 组 件 。 您 可 以 通 个 
一 个 已 存在 的 DIV 标签 来 简单 地 定义 工具 栏 布 局 ， 该 DIV 标签 将 成 为 数据 网 格 
(datagrid) 工具 栏 的 内 容 。 本 教程 将 向 您 展示 如 何 创建 数据 网 格 (datagrid) 组 


件 的 复杂 工具 栏 。 


创建 工具 栏 (Toolbar) 


«div id="tb" style="padding:5px;height:auto"> 
<div style="margin-bottom: 5px"> 


<a href="#" 
<a href= "+" 
<a href="#" 
<a href="#" 
<a href="#" 
</div> 
<div> 


class="easyui-linkbutton" 
class-z"easyui-linkbutton" 
class="easyui-linkbutton" 
class="easyui-linkbutton" 
class="easyui-linkbutton" 


iconCls="icon-ad¢ 
iconCls="icon-ed: 
iconCls="icon-sa\ 
iconCls="icon-cut 
iconCls="icon-rer 


Date From: «input class="easyui-datebox" style="width: é 
To: <input class="easyui-datebox" style="width: 80px"> 


Language: 


<input class="easyui-combobox" style="width:100px" 
url="data/combobox_data.json" 
valueField-"id" textField="text"> 

«a href="#" class="easyui-linkbutton" iconCls="icon-seé 


</div> 
</div> 


SSS 


创建 数据 网 格 (DataGrid) 





«table class="easyui-datagrid" style-'width:600px;height:250px' 
url-"data/datagrid data.json" 
title="DataGrid - Complex Toolbar" toolbar="#tb" 
singleSelect-"true" fitColumns="true"> 


«thead» 
«tr» 
«th 
«th 
«th 
«th 
«th 
«th 
«/tr» 
«/thead» 
«/table» 


-| ë ëR 


field="itemid" width="60">Item ID</th> 
field="productid" width="80">Product ID</th> 
field="listprice" align="right" width="70">Lis1 
field-"unitcost" align="right" width="70">Unit 
field="attri" width="200">Address</th> 
field="status" width="50">Status</th> 





正如 您 所 看 到 的 ， 数 据 网 格 (datagrid) 的 工具 栏 域 对 话 框 (dialog) 相似 。 我 们 不 
需要 写 任 何 的 javascript 代码 ， 就 能 创建 带 有 复杂 工具 栏 的 数据 网 格 (datagrid) 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid19.zip 


jQuery EasyUl 数据 网 格 - 设置 冻结 列 


本 实例 演示 如 何 冻 结 一 些 列 ， 当 用 户 在 网 格 上 移动 水 平 滚动 条 时 ， 冻 结 列 不 能 滚动 
到 视图 的 外 部 。 


fal Frozen Columns 














Item ID Product ID List Prica Unit Cost Attribute Status 

EST-1 FI-SW-01 16.5 10 Large P ^ 

EST-10 K3-DL-01 18.5 12 Spotted Adult Fe P | 

EST-11 RP-SN-01 18.5 12 Venomless P 

EST-12 RP-SN-01 18.5 12 Rattleless P E 
RP-LI-02 18.5. 12 Gr f 3 

EST-14 FL-DSH-01 - 56.5 — 12 Tailless P 

EST-15 FL-DSH-01 23.5 12 With tail P 

EST-18 FL-DLH-02 93.5 12 Adult Female P 

EST-17 FL-DLH-02 93.5 12 Adult Male P id 

ROT-12 AW-CR-n1 «| ut | ? 


为 了 冻结 列 ， 您 需要 定义 frozenColumns 属性 。frozenColumn 属性 和 columns Æ 
性 一 样 。 


$('#tt').datagrid({ 

title: 'Frozen Columns', 

iconCls:'icon-save', 

width:500, 

height:250, 

url: 'data/datagrid_data.json', 

frozenColumns:[[ 
(field:'itemid',title:'Item ID',width:80}, 
(field:'productid',title:'Product ID',width:80}, 


1l; 

columns:[[ 
(field:'listprice',title:'List Price',width:80,align:') 
(field:'unitcost',title:'Unit Cost',width:80,align:'rit 
{field:'attri',title: 'Attribute',width:100}, 
{field:'status', title: 'Status',width:60} 
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` 需 要 写 任 何 的 javascript 代码 ， 这 样 您 就 能 创建 一 个 数据 网 格 (datagrid) 组 
件 ， 如 下 所 示 : 


«table id="tt" title="Frozen Columns" class="easyui-datagrid" : 
url="data/datagrid_data.json" 
singleSelect="true" iconCls="icon-save"> 
<thead frozen="true"> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
</tr> 
</thead> 
<thead> 
<tr> 
«th field="listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
«th field="attri" width="150">Attribute</th> 
«th field-"status" width="60" align="center">Stauts 
</tr> 
</thead> 
</table> 


SAS 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid5.zip 


jQuery EasyUl 数据 网 格 - 动态 改变 列 


数据 网 格 (DataGrid) 列 可 以 使 用 'columns' 属性 简单 地 定义 。 如 果 您 想 动 态 地 改 
变 列 ， 那 根本 没有 问题 。 为 了 改变 列 ， 您 可 以 重新 调用 datagrid 方法 ， 并 传递 一 个 
新 的 columns 属性 。 


创建 数据 网 格 (DataGrid) 


«table id="tt" title="Frozen Columns" class="easyui-datagrid" : 
url="data/datagrid_data.json" 
singleSelect="true" iconCls="icon-save"> 

</table> 


[| 





$('#tt').datagrid({ 
columns: [[ 
(field:'itemid',title:'Item ID',width:80}, 
{field: 'productid',title:'Product ID',width:80}, 
{field:'attri',title: 'Attribute',width: 200}, 
{field:'status', title: 'Status',width:80} 
]] 
3); 


运行 网 页 ， 您 将 看 见 : 


回 Change Columns 


Item ID Product ID Attribute Status 

EST-1 FI-SW-01 Large P ^ 
EST-10 K3-DL-01 Spotted Adult Female F 

EST-11 RP-SN-01 Venomless P 

EST-12 RP-SN-01 Rattleless P 

EST-13 RP-LI-02 Green Adult P E 
EST-14 FL-DSH-01 Tailless P 

EST-15 FL-DSH-01 With tail P 

EST-18 FL-DLH-02 Adult Female P 

EST-17 FL-DLH-02 Adult Male P 

DoT CDN DT 1 3.. n 


可 是 有 时 候 您 想 改 变 列 ， 所 以 您 需要 写 一 些 代 码 : 


$('#tt').datagrid({ 
columns: [[ 

(field:'itemid',title:'Item ID',width:80}, 
{field: 'productid',title:'Product ID',width:80), 
(field:'listprice',title:'List Price',width:80,align:') 
{field: 'unitcost',title:'Unit Cost',width:80, align: 'ric 
{field:'attri',title: 'Attribute',width:100}, 
{field:'status', title: 'Status',width:60} 


3): 








请 记 住 ， 我 们 已 经 定义 了 其 他 属性 ， 比 如 : url, width, height 等 等 。 我 们 不 需 
再 一 次 定义 它们 ， 我 们 定义 那些 我 们 需要 改变 的 。 


fal Change Columns 


Item ID Product ID List Price Unit Cost Attribute Status 
EST-1 FI-S#-01 16.5 10 Large F c 
EST-10 K3-DL-01 18.5 12 Spotted Adult Fe P 
EST-11 RP-SH-O1 18.5 12 Venomless P 
EST-12 RP-SH-01 18.5 12 Rattleless F 
EST-13 RP-LI-02 18.5 12 Green Adult F E 
EST-14 FL-DSH-01 58.5 12 Tailless P 
EST-15 FL-DSH-01 23.5 12 With tail F 
EST-16 FL-DLH-02 93.5 12 Adult Female P 
EST-1T FL-DLH-02 93.5 12 Adult Male P 
c nO 12324 TTE E 


EST-19 AM-CPIO: in? 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid6.zip 


jQuery EasyUl 数据 网 格 - 格式 化 列 


以 下 实例 格式 化 在 easyui DataGrid 里 的 列 数据 ， 并 使 用 自 定义 列 的 formatter， 如 
果 价 格 小 于 20 就 将 文本 变 为 红色 。 


Formatting Columns 


Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-SW-01 (16.5) 10 Large P 全 
EST-10 K3-DL-01 (18. 5) 12 Spotted Adult Fe P 

ESI-11 RP-SN-01 (18. 5) 12 Venomless P 

EST-12 RP-SH-01 (18. 5) 12 Rattleless P 

EST-13 RP-LI-02 (18.5) 12 Green Adult F E 
EST-14 FL-DSH-O1 58.5 12 Tailless P 

EST-15 FL-DSH-O1 23.5 12 With tail P 

EST-16 FL-DLH-02 93.5 12 Adult Female P 

EST-1T FL-DLH-02 93.5 12 Adult Male P 

TOT to A PBN 102 c DO 21234 H.3. E 


为 了 格式 化 一 个 数据 网 格 (DataGrid) 列 ， 我 们 需要 设置 formatter 属性 ， 它 是 一 
个 男 数 。 这 个 格式 化 函数 包含 三 个 参数 : 


e value : 当前 列 对 应 字段 值 。 
e row : 当前 的 行 记 录 数 据 。 
e index : 当前 的 行 下 标 。 


创建 数据 网 格 (DataGrid) 


<table id="tt" title="Formatting Columns" class="easyui-datagr: 
url="data/datagrid_data.json" 
singleSelect="true" iconCls="icon-save"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right" forr 
«th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="100">Attribute</th> 
«th field="status" width="60" align="center">Stauts 
</tr> 
</thead> 
</table> 





写 格 式 化 加 数 


function formatPrice(val,row){ 
if (val < 20){ 
return '«span style="color:red;">('+val+')</span>'; 
} else { 
return val; 
j 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid7 .zip 


jQuery EasyUl 数据 网 格 - 设置 排序 


本 实例 演示 如 何 通过 点 击 列 表 头 来 排序 数据 网 格 (DataGrid) 。 








fal Load Data 
Item ID Product ID List Price 2 Unit Cost Attribute Stauts 
21 |EST-26 K9-CW-01 125. 50 82.00 Adult Male P = 
22 | EST-22 K9-RT-02 135. 50 100.00 Adult Male F 
23 EST-23 K9-RT-02 145.48 100.00 Adult Fezale F 
24 EST-28 K9-RT-01 155. 29 90.00 Adult Fezale P | 司 
25 | EST-27 K9-CW-01 155. 29 90.00 Adult Fezale F 
26 EST-16 AV-CB-0 93.50 | 92.00 
27 EST-24 K9-RT-02 255. 50 92.00 Adult Male F 
28 ST-25 K8-RT-02 325 29 8n fn Adult Female F as 
10 +» | |4 4  Page3 of 3 2 Displaying 21 to 28 of 28 items 


数据 网 格 (DataGrid) 的 所 有 列 可 以 通过 点 击 列表 头 来 排序 。 您 可 以 定义 哪 列 可 以 
排序 。 默 认 的 ， 列 是 不 能 排序 的 ， 除 非 您 设置 sortable 属性 为 true. 


创建 数据 网 格 (DataGrid) 


«table id="tt" class="easyui-datagrid" style="width:600px;heigl 
url="datagrid8_getdata.php" 
title="Load Data" iconCls="icon-save" 
rownumbers="true" pagination="true"> 


<thead> 
<tr> 
<th 
<th 
<th 
<th 
<th 
<th 
</tr> 
</thead> 
</table> 


E — B 
我 们 定义 一 些 可 排序 的 列 ， 


field="itemid" width="80" sortable="true">Item 
field-"productid" width="80" sortable="true">P) 
field="listprice" width="80" align="right" sort 
field="unitcost" width="80" align="right" sort: 
field="attri" width="150">Attribute</th> 

field="status" width="60" align="center">Staut: 





aå itemid, productid, listprice, unitcost 等 


=, ‘attr1' 列 和 'status' 列 不 能 排序 。 
当 排 序 时 ， 数 据 网 格 (DataGrid) 将 发 送 两 个 参数 到 远程 服务 器 : 


e sort : 排序 列 字段 名 。 


e order: 排序 方式 ， 可 以 是 'asc' 或 者 '"desc'， 默 认 值 是 'asc'。 


服务 器 端 代 码 


$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
$sort - isset($ POST['sort']) ? strval($ POST['sort']) : 'item: 


$order = isset($ POST['order']) ? strval($ POST['order']) : ‘as 
$offset = ($page-1)*$rows; 


$result = array(); 
include 'conn.php'; 
$rs - mysql query("select count(*) from item"); 
$row - mysql fetch row($rs); 
$result["total"] = $row[0]; 
$rs = mysql query("select * from item order by $sort $order lir 
$items - array(); 
while($row = mysql fetch object($rs))( 
array push(S$items, $row); 


$result["rows"] = $items; 


echo json_encode($result); 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid8.zip 


jQuery EasyUl 数据 网 格 - 自 定义 排序 


如 果 默 认 的 排序 行为 不 满足 您 的 需求 ， 您 可 以 自 定义 数据 网 格 (datagrid) 的 排序 


行为 。 


y Custom Sort 


Item ID :List Price : Unit Cost 
EST-15 23.5 12 
EST-11 18.5 12 
EST-18 193.5 92 
EST-1T 93.5 12 
EST-10 18.5 12 


EST-1 





EST-16 
EST-14 





16.5 10 
18.5 1 
93:5 12 
58.5 12 


2 Rattleless 


Attribute 


With tail 

Venomless 

Adult Male 

Adult Male 

Spotted Adult Female 
Large 





Adult Female 
Tailless 





Date a 


UJ) UU) COO 


11/04/2005 
12/31/2005 
03/04/2006 
03/04/2008 
05/04/2009 
03/04/2010 
03/21/2010 
03/23/2010 
07/04/2010 





m 








4 


最 基础 的 ， 用 户 可 以 在 列 上 定义 一 个 排序 沙 数 ， 范 数 名 是 sorter。 这 个 函数 将 接受 
两 个 值 ， 返 回 值 料 如 下 : 


valueA > valueB => ix 


valueA < valueB => 返 


目 定 义 排序 代码 


回 1 
回 - 


1 


<table id="tt"></table> 


$('#tt').datagrid({ 
title:'Custom Sort', 
iconCls:'icon-ok', 
width:520, 
height:250, 
singleSelect: true, 
remoteSort: false, 
columns: [[ 
(field:'itemid',title:'Item ID',width:60, sortable: true. 
(field:'listprice',title:'List Price',width:70,align:') 
(field:'unitcost',title:'Unit Cost',width: 70, align: 'ric 
{field:'attri',title: 'Attribute',width:120, sortable: trt 
{field:'date', title: 'Date',width:80,sortable: true, aligr 
sorter: function(a, b) { 
a=a.split('/'); 
b b.split('/'); 
if (a[2] == b[2]){ 
if (a[0] == Blot 
return (a[1]>b[1]?1:-1); 
} else { 
return (a[0]>b[0]?1:-1); 


} 
} else { 

return (a[2]>b[2]?1:-1); 
} 


} 
ty 
{field:'status', title: 'Status',width:40,align: center 
11 
}).datagrid('loadData', data); 





您 可 以 从 这 段 代 码 中 看 到 ， 我 们 为 date 列 创建 了 自 定 义 的 sorter。 日 期 的 格式 是 
dd/mm/yyyy'， 可 以 轻松 的 按 年 月 日 排序 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid14.zip 


jQuery EasyUl 数据 网 格 - 创建 列 组 合 


easyui 的 数据 网 格 (DataGrid) 可 以 创建 列 组 合 ， 如 下 所 示 : 


Column Group 


Item ID 


EST-1 

EST-10 
EST-11 
EST-12 


p: OO : =a: Ga: Ch: 4» : CO : IN: 
tzi 
v 
-3 
1 
m 
co 


Product ID 


FI-SW-01 
K3-DL-01 
RP-SN-01 
RP-SN-01 
RP-LI-02 
FL-DSH-01 
FL-DSH-01 
FL-DLH-02 


List Price 


16.5 
18.5 
18.5 
18.5 
18.5 
58.5 
23.5 
93.5 


Item Details 


Unit Cost 


Attribute Status 


Large P 
Spotted Adult Femalc P 
Venomless P 
Rattleless 
Green Adult 
Tailless 
With tail 
Adult Female 


p; "do: "d; "d : "d WES 


在 本 实例 中 ， 我 们 使 用 平面 数据 来 填充 数据 网 格 (DataGrid) 
listprice、unitcost、addr1、status 列 组 合 在 一 个 单一 的 列 下 。 


为 了 创建 列 组 合 ， 您 应该 定义 数据 网 格 (datagrid) 插件 的 columns 数据 。 列 的 每 


"n 


Tc 


的 数据 ， 并 把 


个 元 素 是 定义 一 组 可 使 用 rowspan 或 colspan 属性 来 进行 组 合 的 单元 格 。 
下 面 的 代码 实现 了 上 面 的 实例 : 


«table id="tt" title="Column Group" class="easyui-datagrid" st 


url="data/datagrid_data.json" 


singleSelect-"true" iconCls-"icon-save" rownumbers="trt 
<thead> 
<tr> 


</tr> 
<tr> 


</tr> 
</thead> 


</table> 


4 


rowspan="2" field="itemid" width="80">Item ID<, 
rowspan="2" field-"productid" width="80">Produc 


colspan="4">Item Details</th> 


field="listprice" widthz"80" align="right">List 
field-"unitcost" width="80" align="right">Unit 
width="100">Attribute</th> 
field="status" width="60" align="center">Staut: 


field="attri" 


下 载 jQuery EasyUl 实例 





W3School 前 端 教 程 合 


jeasyui-datagrid-datagrid9.zip 


jQuery EasyUl 数据 网 格 - 创建 列 组 合 3216 


jQuery EasyUl 数据 网 格 - 添加 复 选 框 


本 实例 演示 如 何 放 置 一 个 复 选 框 列 到 数据 网 格 (DataGrid) 。 通 过 复 选 框 ， 用 户 将 
可 以 选择 选中 /取消 选中 网 格 行 数 据 。 


y Checkbox Select 











Item ID Product ID List Price Unit Cost Attribute Status 
[P] : EST-1 FI-S¥-01 16.5 10 Large P 全 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 








m 


[P] : EST-11 RP-SN-01 18.5 12 Venomless P 





EST-14 FL-DSH-01 58.5 12 Tailless 了 




















EST-15 FL-DSH-01 23.5 12 With tail P 
FST-1R FT-TITH-n27 93 5 1? Adult Female P m 
10 - Pagel of 3 b bi 4 Displaying 1 to 10 of 28 items 


了 添加 一 个 复 选 框 列 ， 我 们 仅仅 需要 添加 一 个 列 的 checkbox 属性 ， 并 设置 它 为 
me 代码 如 下 所 示 : 


<table id="tt" title="Checkbox Select" class="easyui-datagrid" 
url="data/datagrid_data.json" 
idField="itemid" pagination="true" 
iconCls="icon-save"> 
<thead> 
<tr> 
<th field="ck" checkbox="true"></th> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="100">Attribute</th> 
«th field="status" width="60" align="center">Status 
</tr> 
</thead> 
</table> 


ye 


以 上 代码 添加 了 一 个 带 有 checkbox 属性 的 列 ， 所 以 它 将 成 为 复 选 框 列 。 如 果 
idField 属性 已 设置 ， 数 据 网 格 (DataGrid) 的 选择 集合 将 在 不 同 的 页 面 保持 。 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid10.zip 


jQuery EasyUl 数据 网 格 - 目 定 义 分 页 


数据 网 格 (datagrid) 内 置 一 个 很 好 特性 的 分 页 功能 ， ee 在 本 教 
我 们 将 创建 一 个 数据 网 格 (datagrid) ， 并 在 分 页 工具 栏 上 添加 一 些 自 定义 
安 钮 。 


[a] Load Data 

Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-S"-01 16.5 10 Large P A 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 

EST-11 RP-SN-01 18.5 12 Venomless FE 

EST-12 RP-SN-01 18.5 12 Rattleless P = 
EST-13 RP-LI-02 18.5 12 Green Adult P 

EST-14 FL-DSH-01 58.5 12 Tailless F 

EST-15 FL-DSH-01 23:5 12 With tail P 

EST-18 FL-DLH-02 93.5 12 Adult Female P - 


Page] £3 bp A 4 Displaying 1 to 10 of 28 items 
创建 数据 网 格 (DataGrid) 


<table id="tt" title="Load Data" class="easyui-datagrid" style: 
url="data/datagrid_data.json" 
iconCls="icon-save" pagination="true"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
«th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="100">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 





请 记得 ， 设 置 'pagination' 属性 为 true， 这 样 才 会 生成 分 页 工具 栏 。 


自 定义 分 页 工具 栏 


var pager = $('#tt').datagrid('getPager'); // get the pager 
pager .pagination({ 
showPageList: false, 
buttons: [{ 
iconCls:'icon-search', 
handler:function()( 
alert('search'); 
} 


3,1 
iconCls:'icon-add', 
handler: function(){ 

alert('add'); 
} 


3,1 
iconCls:'icon-edit', 
handler: function(){ 

alert('edit'); 
} 


}], 


onBeforeRefresh:function()( 
alert('before refresh'); 
return true; 





正如 您 所 看 到 的 ， 我 们 首先 得 到 数据 网 格 (datagrid) 的 pager 对 象 ， 然 后 重新 创 
建 分 页 (pagination) 。 我 们 隐藏 页 面 列 表 ， 并 添加 三 个 新 的 按钮 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid11.zip 


jQuery EasyUl 数据 网 格 - 启用 行内 编辑 


可 编辑 的 功能 是 最 近 添 加 到 数据 网 格 (datagrid) 的 。 它 可 以 使 用 户 添加 一 个 新 行 
到 数据 网 格 (datagrid) 。 用 户 也 可 以 更 新 一 个 或 多 个 行 。 
本 教程 向 您 展示 如 何 创 建 一 个 数据 网 格 (datagrid) 和 内 联 编辑 器 。 


f Editable DataGrid 


Item ID Product 
EST-1 Koi 

EST-10 Dalmation 
EST-11 Rattlesnake 
EST-12 Rattlesnake 


Koi 
Dalmation 
Rattlesnake 





Iguana 
——— Manx 


Persian 


List Price Unit Cost Attribute 


16.5 10 Large 

16.5 12 Spotted Adult Female 
vi18.5 12 Venomless 

18.5 12 Rattleless 


| ÁN This field is required. Green Adult 


58.5 12 Tailless 
23.5 12 With tail 
93.5 12 Adult Female 


93.5 12 Adult Male 


Amazon Parrot 


创建 数据 网 格 (DataGrid) 


$(function(){ 
$('#tt').datagrid({ 


title: 'Editable DataGrid', 
iconCls:'icon-edit', 
width: 660, 

height:250, 
singleSelect:true, 
idField:'itemid', 
url:'datagrid_data.json', 
columns: [[ 


Status 


Action 


Edit Delete ^ 


Edit Delete 


Save Cancel 


Edit Delete 





"m 


Edit Delete 


Edit Delete 


Edit Delete 


Edit Delete 


(field:'itemid',title:'Item ID',width:60}, 
(field:'productid',title:'Product',width:100, 


formatter:function(value)( 


for(var i-0; i«products.length; i++){ 
if (products[i].productid 


} 

return value; 
3 
editor:{ 


type: 'combobox', 


value) ret 


options: { 
valueField: 'productid', 
textField:'name', 
data:products, 
required:true 


j 
tr 
(field:'listprice',title:'List Price',width:80, alic 
(field:'unitcost',title:'Unit Cost',width:80, align 
{field:'attri',title: 'Attribute',width:150, editor: 
{field:'status', title: 'Status',width:50,align: 'cent 


editor:{ 
type: 'checkbox', 
options: { 
onm p 
Opa a 
j 
j 


ty 
{field:'action', title: 'Action',width:70,align: 'cent 
formatter: function(value, row, index) { 
if (row.editing) { 


var s = ‘<a href="#" onclick-"saverow(í 
var c = ‘<a href="#" onclick-"cancelrov 
return stc; 

) else { 
var e '«a href="#" onclick="editrow(1 


var d "<a href="#" onclick="deleterov 
return etd; 


} 
]], 


onBeforeEdit:function(index,row)( 
row.editing - true; 
updateActions(index); 

ty 

onAfterEdit: function( index, row) { 
row.editing = false; 
updateActions(index) ; 

ty 

onCancelEdit : function( index, row) { 
row.editing = false; 
updateActions(index) ; 

} 

3); 
3); 


function updateActions(index)( 
$('4stt').datagrid('updateRow',( 
index: index, 
row: {} 


3): 








为 了 启用 数据 网 格 行内 编辑 ， 您 应 该 添加 一 个 editor 属性 到 列 中 。 编 辑 器 
(editor) 会 告诉 数据 网 格 (datagrid) 如 何 编辑 字段 及 如 何 保存 字段 值 。 正 如 您 所 
看 到 的 ， 我 们 定义 的 三 个 编辑 器 (editor) : text, combobox 和 checkbox. 


function getRowIndex(target) { 
var tr = $(target).closest('tr.datagrid-row'); 
return parseInt(tr.attr('datagrid-row-index')); 


function editrow(target){ 
$('#tt').datagrid('beginEdit', getRowIndex(target) ); 


function deleterow(target){ 
$.messager.confirm('Confirm','Are you sure?', function(r){ 
if (r){ 
$('#tt').datagrid('deleteRow', getRowIndex(target): 
} 


}); 


function saverow(target){ 
$('#tt').datagrid('endEdit', getRowIndex(target)); 


function cancelrow(target){ 
$('#tt').datagrid('cancelEdit', getRowIndex(target)); 


LESE ü O O 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid12.zip 


jQuery EasyUl 数据 网 格 - 扩展 编辑 器 


一 些 常见 的 编辑 器 (editor) 添加 到 数据 网 格 (datagrid) ， 以 便 用 户 编辑 数据 。 所 
有 的 编辑 器 (editor) 都 定义 在 $.fn.datagrid.defaults.editors 对 象 中 ， 这 个 可 以 继 
承 扩 展 以 便 支持 新 的 编辑 器 (editor). 本 教程 将 向 您 展示 如 何 添加 一 个 新 的 
numberspinner 编辑 器 到 数据 网 格 (datagrid) 。 


@ Editable DataGrid 





Item ID List Price Unit Cost Attribute Status Action 
EST-1 16.5 10 Large P Edit Delete — ^ 
EST-10 18.5 12 Spotted Adult Female P Edit Delete 
EST-11 18.5 12 Venomless P Edit Delete 
18.5 12 ^ | Rattleless — (| Save Cancel | 
EST-13 18.5 12 Green Adult P Edit Delete | 
EST-14 58.5 12 Tailless P Edit Delete 
EST-15 23.5 12 With tail P Edit Delete 
EST-16 93.5 12 Adult Female P Edit Delete 
EST-17 93.5 12 Adult Male P Edit Delete ~ 


继承 扩展 numberspinner 编辑 器 


$.extend($.fn.datagrid.defaults.editors, { 
numberspinner: { 

init: function(container, options) { 
var input = $('«input type="text">').appendTo(conté 
return input.numberspinner (options); 

tr 

destroy: function(target) { 
$(target).numberspinner('destroy'); 


tr 
getValue: function(target){ 
return $(target).numberspinner('getValue' ); 


tr 
setValue: function(target, value) { 
$( target) .numberspinner('setValue', value); 


resize: function(target, width) { 
$(target).numberspinner('resize',width); 


3): 








f£ html 标记 中 创建 数据 网 格 (DataGrid) 


«table id="tt" style="width:600px;height:250px" 
url="data/datagrid_data.json" title="Editable DataGrid' 
singleSelect-"true" idField-"itemid" fitColumns-"true": 

<thead> 
<tr> 
<th field="itemid" width="60">Item ID</th> 
«th field-"listprice" width="80" align="right" edil 
«th field-"unitcost" width="80" align="right" edit: 
«th field="attri" width="180" editor="text">Attribt 
«th field="status" width="60" align="center" edito! 
<th field="action" width="80" align="center" format 
</tr> 
</thead> 
</table> 


a mE 


我 们 分 配 numberspinner 编辑 器 到 ‘unit cost’ 字段 。 当 开 始 编辑 一 行 ， 用 户 可 以 通 
过 numberspinner 编辑 器 来 编辑 数据 。 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid23.zip 


jQuery EasyUl 数据 网 格 - 列 运 算 


在 本 教程 中 ， 您 将 学 习 如 何在 可 编辑 的 数据 网 格 (datagrid) 中 包含 一 个 运算 的 
列 。 一 个 运算 列 通常 包含 一 些 从 一 个 或 多 个 其 他 列 运算 的 值 。 


@ Editable DataGrid with Calculated Column 


Item ID List Price 
EST-1 
E 


ST-1 
EST-11 

S 

S 





EST-12 

EST-13 

EST-14 58. 5 
EST-15 

EST-16 

EST-17 

EST-18 1 


16. 


bet 


D 


92 
2 


éd. 


Ca 


vo. 


52 


vo. 


52 


195. 


à à m 
eo eo eo eo 


ut ut ut ut ow 


ut ut ut ut 


rp 


Amount Unit Cost Attribute Status 
10 Large P 
12 Spotted Adult Female 
12 Venozless 
2 Rattleless 


T Green Adult 


P 
P 
P 
117 Tailless 
P 
P 
P 
P 


M 
c 


12 With tail 
12 Adult Female 
12 Adult Male 


92 Adult Male 


首先 ， 创 建 一 个 可 编辑 的 数据 网 格 (datagrid) 。 这 里 我 们 创建 了 一 些 可 编辑 
Jij, 'listprice', 'amount' 和 'unitcost' 列 定义 为 numberbox 编辑 类 型 。 运 算 列 是 
unitcost 字段 ， 将 是 listprice FLA amount 列 的 结果 。 


<table id="tt" style="width:600px;height:auto" 
title="Editable DataGrid with Calculated Column" iconC: 
idField="itemid" url="data/datagrid_data.json"> 


<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
«th field-"listprice" width="80" align="right" edil 
«th field-"amount" width="80" align="right" editor: 
«th field-"unitcost" width="80" align="right" edit: 
«th field="attri" width="150" editor="text">Attribt 
«th field="status" width="60" align="center" edito! 
</tr> 
</thead> 
</table> 
<] — B 





当 用 户 点 击 一 行 的 时 候 ， 我 们 开始 一 个 编辑 动作 。 


var lastIndex; 
$('#tt').datagrid({ 
onClickRow: function(rowIndex) { 
if (lastIndex != rowIndex){ 
$('#tt').datagrid('endEdit', lastIndex); 
$('#tt').datagrid('beginEdit', rowIndex); 
setEditing(rowIndex); 
} 
lastIndex = rowIndex; 
} 
3); 


为 了 在 一 些 列 之 间 创 建 运算 关系 ， 我 们 应 该 得 到 当前 的 editors， 并 绑 定 一 些 事件 到 
它们 上 面 。 


function setEditing(rowIndex) { 
var editors = $('#tt').datagrid('getEditors', rowIndex); 
var priceEditor = editors[0]; 
var amountEditor = editors[1]; 
var costEditor = editors[2]; 
priceEditor.target.bind('change', function(){ 
calculate(); 


, 
amountEditor.target.bind('change', function()( 
calculate(); 
3): 
function calculate(){ 
var cost = priceEditor.target.val() * amountEditor.tart( 
$(costEditor.target).numberbox('setValue',cost); 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid15.zip 


jQuery EasyUl 数据 网 格 - 合并 单元 格 
数据 网 格 (datagrid) 经 常 需要 合并 一 些 单元 格 。 本 教程 将 向 您 展示 如 何在 数据 网 
格 (datagrid) 中 合并 单元 格 。 


为 了 合并 数据 网 格 (datagrid) 单元 格 ， 只 需 简 单 地 调用 'mergeCells' 方法 ， 并 传 
入 合并 信息 参数 ， 告 诉 数据 网 格 (datagrid) 如 何 合并 单元 格 。 在 所 有 合并 的 单元 
格 中 ， 除 了 第 一 个 单元 格 ， 其 它 单元 格 在 合并 后 被 隐藏 。 


y Merge Cells 


Price 
Product Item ID Attribute Status 
List Price Unit Cost 
1 Koi EST-1 16.5 10 Large F ^ 
2 Dalmation EST-10 16.5 12 Spotted Adult Female P 
d EST-11 18.5 12 Venomless P 
Rattlesnake 
4 EST-12 18.5 12 Rattleless P — 
5 Iguana EST-13 18.5 12 Green Adult P 
6 EST-14 58.5 12 Tailless E 
Manx 
n EST-15 23.5 12 With tail P 
8 EST-16 93.5 12 Adult Female P 
Persian + 
9 EST-1T no C 19 A dela 988.17. D 
4 m + 
10 - i Pagel of 3 > bi p^ Displaying 1 to 10 of 28 items 


创建 数据 网 格 (DataGrid) 


«table id="tt" title-"Merge Cells" style-'width:550px;height :2: 
url="data/datagrid_data.json" 
SingleSelect="true" iconCls="icon-save" rownumbers="trt 
idField="itemid" pagination="true"> 
«thead frozen="true"> 
<tr> 
«th field="productid" width="80" formatter="formatt 
<th field="itemid" width="100">Item ID</th> 
</tr> 
</thead> 
<thead> 
<tr> 
<th colspan="2">Price</th> 
<th rowspan="2" field="attri" width="150">Attribute 
«th rowspan="2" field-"status" width="60" align="ce 
</tr> 
<tr> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
</tr> 
</thead> 
</table> 


B — y} 
合并 单元 格 


当 数 据 加 载 之 后 ， 我 们 合并 数据 网 格 (datagrid) 中 的 一 些 单元 格 ， 所 以 放置 下 面 
的 代码 在 onLoadSuccess Eha BAX. 





$('#tt').datagrid({ 
onLoadSuccess: function(){ 
var merges = [{ 
index:2, 
rowspan:2 
hti 
index:5, 
rowspan:2 
it 
index:7, 
rowspan:2 
Jl; 
for(var i=0; i«merges.length; i++) 
$('#tt').datagrid('mergeCells', { 
index:merges[i].index, 
field: 'productid', 
rowspan:merges[i].rowspan 


}); 
3); 


下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid13.zip 


jQuery EasyUl 数据 网 格 - 创建 自 定 义 视 图 


在 不 同 的 情况 下 ， 您 可 能 需要 为 数据 网 格 Coe 运用 更 灵活 的 布局 。 对 于 用 
户 来 说 ， 卡 片 视图 (Card View) 是 个 不 错 的 选择 。 这 个 工具 可 以 在 数据 网 格 
(datagrid) 中 迅速 获 天 取 和 显示 数据 。 在 数据 网 格 (iu 的 头 部 ， 您 可 以 仅仅 


本 教程 将 向 您 展示 如 何 创 建 自 定 义 卡 片 视图 (Card 
View 


DataGrid 一 CardView 


Item ID List Price Unit Cost Attribute Status 
A 

Item ID: EST-1 

d : E 
List Price: 16.5 

e 

M Unit Cost: 10 

i Attribute: Large 
Status: P 


Item ID: EST-10 


List Price: 





Unit Cost: 
Attribute: Spotted Adult Fezale 
Status- P 


创建 卡片 视图 (Card View) 


从 数据 网 格 (datagrid) 的 默认 视图 继承 ， 是 个 创建 自 定义 视图 的 不 错 方 法 。 我 们 
将 要 创建 一 个 卡片 视图 (Card View) 来 为 每 行星 示 一 些 信息 。 


var cardview = $.extend({}, $.fn.datagrid.defaults.view, { 
renderRow: function(target, fields, frozen, rowIndex, rowD: 
var cc = []; 
cc.push('«td colspan=' + fields.length + ' style="padd: 
if (!frozen){ 
var aa = rowData.itemid.split('-'); 
var img = 'shirt' + aa[1] + '.gif'; 
cc.push('«img src="images/' + img + '" style-'widtl 
cc.push('«div style-"float:left;margin-left:20px;": 
for(var i-0; i«fields.length; i++){ 
var copts - $(target).datagrid('getColumnOptior 
cc.push('«p»«span class="c-label">' + copts.til 


cc.push('«/div»'); 


cc.push('«/td»'); 
return cc.join(''); 





创建 数据 网 格 (DataGrid) 
现在 我 们 使 用 视图 创建 数据 网 格 (datagrid) 。 


«table id="tt" style="width:500px; height : 400px" 
title-"DataGrid - CardView" singleSelect-"true" fitColi 
url-"datagrid8 getdata.php" pagination="true" sortOrde! 

«thead» 
«tr» 
«th field-"itemid" width="80" sortable="true">Item 
«th field-"listprice" width="80" sortable="true">L: 
«th field-"unitcost" width="80" sortable="true">Un: 
«th field="attri" widthz"150" sortable="true">Attr: 
«th field="status" width="60" sortable="true">Statt 
</tr> 
</thead> 
</table> 


4 aaa 





$('#tt').datagrid({ 
view: cardview 


3); 


请 注意 ， 我 们 设置 view 属性 ， 且 它 的 值 为 我 们 的 卡片 视图 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid16.zip 


jQuery EasyUl 数据 网 格 - 创建 页 脚 摘要 


在 本 教程 中 ， 我 们 将 向 您 展示 如 何在 数据 网 格 (datagrid) 页 脚 显示 摘要 信息 行 。 





DataGrid 
Product Name Unit Price 

1 Chai 18 p 

2 Chang 19 

3 Aniseed Syrup | F 

4 Chef Anton s Cajun Seasoning 22 

5 Chef Anton’ s Gumbo Mix 21.35 

& Grandma’ s Boysenberry Spread 25 |. 
Total 282.35 
Average 31.31. 


为 了 显示 页 脚 行 ， 您 应该 设置 showFooter 属性 为 true， 然 后 准 各 定义 在 数据 网 格 
(datagrid) 数据 中 的 页 脚 行 。 以 下 是 示例 数据 : 


("total":1,"rows":[("id":1,"name":"Chai","price":18.00)], "foot« 


I | rg —3À—À— — á— 15] 
创建 数据 网 格 (DataGrid) 





<table id="tt" title="DataGrid" class="easyui-datagrid" style=' 
url-"data/datagrid17 data.json" 
fitColumns-"true" rownumbers="true" showFooter="true"> 
<thead> 
<tr> 
<th field="name" width="80">Product Name</th> 
«th field="price" width="40" align="right">Unit Pr: 
</tr> 
</thead> 
</table> 


" 一 一 一 
页 脚 行 和 显示 数据 行 一 样 ， 所 以 您 可 以 在 页 脚 显示 不 止 一 个 摘要 信息 。 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid17.zip 


jQuery EasyUl 数据 网 格 - 条 件 设 置 行 育 景 颜 色 


本 教程 将 向 您 展示 如 何 根据 一 些 条 件 改变 数据 网 格 (datagrid) 组 件 的 行 样式 。 当 
listprice 值 大 于 50 时 ， 我 们 将 为 该 行 设 置 不 同 的 颜色 。 


DataGrid 

Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-S¥-01 36.5 10 Large F 一 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female 了 

EST-11 RP-SN-01 28.5 12 Venomless F E 
EST-12 RP-SN-01 25.5 12 Rattleless P 

EST-13 RP-LI-02 35.5 12 Green Adult P 
EST-14 FL-DSH-01 158.5 12 Tailless P 
EST-15 FL-DSH-01 83.5 12 With tail P 

EST-16 FL-DLH-02 83:5 12 Adult Female P 
EST-1T FL-DLH-02 89.5 12 Adult Male P 

EST-1 FI-SW-01 36.5 10 Large Ep 

EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 

EST-11 RP-SN-01 28.5 12 Venomless E m 


数据 网 格 (datagrid) 的 rowStyler 函数 的 设计 目的 是 允许 您 自 定义 行 样式 。 以 下 代 
码 展示 如 何 改 变 行 样式 : 


«table id="tt" title="DataGrid" style-'width:600px;height:250p; 
url="data/datagrid_data.json" 
singleSelect-"true" fitColumns="true"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 





$('#tt').datagrid({ 
rowStyler : Function(index, row) { 
if (row. listprice>50) { 
return 'background-color:pink;color:blue; font -weigl 
} 
} 
3); 





ES — HR 
背景 色 ) 为 pink (33 





«| 


正如 您 所 看 到 的 ， 我 们 根据 一 些 条 件 设 置 background-color ( 
红包) ， 设 置 文本 颜色 为 blue (#8). 


下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid18.zip 


jQuery EasyUl 数据 网 格 - 创建 属性 网 格 


属性 网 格 (property grid) 带 有 一 个 内 置 的 expand (RF) /collapse (合并 ) H 
钮 ， 可 以 简单 地 为 行 分 组 。 您 可 以 简单 地 创建 一 个 可 编辑 属性 的 分 层 
(hierarchical) 列表 。 





Name Value 
c ID Settings 
Name Bill Smith 
Address 
40 
01/02/2012 四 | 
SSN 123-456-7890 
c Marketing Settings 
Ezail bill@gmail. coz 
FrequentBuyer false 


设置 HTML 


«table id="tt" class="easyui-propertygrid" style="width :300px" 
url-"propertygrid data.json" 


showGroup="true" scrollbarSize="0" 
></table> 


图 --- gh 
准备 json 数据 


{"name": "Name", "value":"Bill Smith","group":"ID Settings",' 
("name" : "Address", "value":"", "group": "ID Settings", "editor' 
("name" : "Age", "value" :"40", "group" :"ID Settings", "editor":' 
("name":"Birthday","value":"01/02/2012","group":"ID Settin( 
("name" : "SSN", "value" :"123-456-7890", "group": "ID Settings", 
("name":"Email","value":"billQgmail.com"," "group":"Marketin( 

"type" :"validatebox'", 

"options":{ 

"validType":"email" 
} 


}}, 
("name":"FrequentBuyer", "value":"false","group":" Marketing 
"type" :"checkbox", 
"options":{ 
"on":true, 
"off":false 





正如 您 所 看 到 的 ， 属 性 网 格 (property grid) 的 创建 不 需要 任何 的 javascript 代码 。 
您 可 以 简单 地 继承 扩展 editor 类 型 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid20.zip 


jQuery EasyUl 数据 网 格 - 扩展 行 显 示 细 节 


数据 网 格 (datagrid) 可 以 改变 它 的 视图 (view) 来 显示 不 同 的 效果 。 使 用 详细 视 
图 ， 数 据 网 格 (datagrid) 可 以 在 数据 行 的 左边 显示 展开 按钮 ("+ UH OUS) o 
户 可 以 展开 行 来 显示 附加 的 详细 信息 。 


DataGrid — Expand Row 


Item ID Product ID List Price Unit Cost Status 


qn EST-1 FI-SW-01 16.5 


10 P : 


EST-10 : i 18.5. m F | 
| 

Item ID: EST-10 Product ID: K9-DL-01 É 

List Price: 18.5 Unit Cost: 12 | | 
Attribute: | 





Spotted Adult Female 


= EST-i1 RF-SN-01 18.5 12 P 


À Item ID- EST-11 Product ID- RP-SN-01 
? List Price- 18.5 Unit Cost: 12 


Attribute: Venozless 


步骤 1 : 创建 数据 网 格 (DataGrid) 


«table id="dg" style="width: 500px; height: 250px" 
url="datagrid8_getdata.php" 
pagination="true" sortName="itemid" sortOrder="desc" 
title="DataGrid - Expand Row" 


singleSelect-"true" fitColumns="true"> 
<thead> 


<tr> 


<th field="itemid" width="60">Item ID</th> 

<th field="productid" width="80">Product ID</th> 
«th field="listprice" align="right" width="70">Lis1 
<th field="unitcost" align="right" width="70">Unit 


«th field="status" width="50" align="center">Statu: 
</tr> 


</thead> 
</table> 


4 aa 





步骤 2: 为 数据 网 格 (DataGrid) 设置 详细 视图 
为 了 使 用 详细 视图 ， 请 记得 在 页 面 头 部 引用 视图 脚本 文件 。 


«script type="text/javascript" src="http://www.w3cschool.cc/try/jez 


到 — 














$('#dg').datagrid({ 
view: detailview, 
detailFormatter: function( index, row) { 
return '«div class="ddv" style="padding:5px 0"></div>'; 
ty 


onExpandRow: function( index, row) { 
var ddv = $(this).datagrid('getRowDetail',index).find('div 
ddv.panel({ 
border:false, 
cache: false, 


href: 'datagrid21 getdetail.php?itemid='+row.itemid, 
onLoad: function(){ 


$('#dg').datagrid('fixDetailRowHeight', index); 


$('#dg').datagrid('fixDetailRowHeight', index); 





我 们 定义 'detailFormatter' WW, EGEA (datagrid) 如 何 泻 染 详细 视图 。 
在 这 种 情况 下 ,我 们 返回 一 个 简单 的 '<div>' 元 素 ， 它 将 充当 详细 内 容 的 容器 。 请 注 
意 ， 详 细 信 息 为 空 。 当 用 户 点 击 展 开 按钮 (+') 时 ，onExpandRow 事件 将 被 触 
Ro 所 以 我 们 可 以 写 一 些 代 码 来 加 载 ajax 详细 内 容 。 最 后 我 们 调用 
fixDetailRowHeight' 方法 来 固定 当 详 细 内 容 加 载 时 的 行 高 度 。 


步骤 3 : BRA alin hy 


datagrid21_getdetail.php 


&lt;?php 
include once 'conn.php'; 


$itemid - mysql real escape string($ REQUEST['itemid']); 


$rs = mysql query("select * from item where itemid-'$itemid'"), 
$item = mysql fetch array($rs); 


?&gt; 
«table class="dv-table" border="0" style-'width:10096; "> 
<tr> 
«td rowspan="3" style="width: 60px"> 
&1t; ?php 
$aa = explode('-',$itemid); 
$serno = $aa[1]; 
$img = "images/shirt$serno.gif"; 
echo "<img src=\"$img\" style=\"width:60px;margin-} 
?&gt; 
«/td» 


«td class="dv-label">Item ID: </td> 
<td>&lt;?php echo $item[ 'itemid'];?&gt; </td> 
<td class="dv-label">Product ID:</td> 
<td>&lt;?php echo $item[ 'productid' ];?&gt;</td> 
</tr> 
<tr> 
<td class="dv-label">List Price: </td> 
<td>&lt;?php echo $item['listprice'];?&gt;«/td» 
«td class="dv-label">Unit Cost:</td> 
<td>&lt;?php echo $item[ 'unitcost'];?&gt;</td> 
</tr> 
<tr> 
<td class="dv-label">Attribute: </td> 
«td colspan="3">&lt;?php echo $item['attr1'];?&gt;«/td» 
</tr> 
</table> 


a 850 IPS] 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid21.zip 


jQuery EasyUl 数据 网 格 - 创建 子 网 格 


使 用 数据 网 格 (datagrid) 的 详细 视图 ， 用 户 可 以 展开 一 行 来 显示 附加 的 详细 信 
息 。 任何 内 容 都 可 以 加 载 作为 行 详细 ， 子 网 格 也 可 以 动态 加 载 。 本 教程 将 向 您 展 
示 如 何在 主 网 格 上 创建 一 个 子 网 格 。 


DataGrid - SubGrid 


ltem ID 


ap EST-12 





wn — 


4 


中 


ceT42 
Evi-ta 


Order ID 
1002 
1003 
1010 
1015 


EST-16 


sp EST-18 


Product ID 
RP-SN-01 


FL-DLH-02 
AV-CB-01 


List Price Unit Cost Attribute Status 
18.50 12.00 Rattleless P 一 


Quantity Unit Price 
1 18.50 
2 18.50 
1 18.50 
1 18.50 


93.50 12.00 Adult Female P 
193.50 92.00 Adult Male P E 


m 


步骤 1 : 创建 主 网 格 


«table id="dg" style="width: 700px; height :250px" 
url="datagrid22_getdata.php" 
title="DataGrid - SubGrid" 
singleSelect="true" fitColumns="true"> 


<thead> 
<tr> 


</thead> 


<th 
<th 
<th 
<th 
<th 
<th 


</tr> 


</table> 


E — UE 


field="itemid" width="80">Item ID</th> 
field-"productid" width="100">Product ID</th> 
field="listprice" align="right" width="80">List Pr: 
field="unitcost" align="right" width="80">Unit Cos! 
field="attri" width="220">Attribute</th> 
field-"status" width="60" align="center">Status</tl 





步骤 2 : 设置 详细 视图 来 显示 子 网 格 
为 了 使 用 详细 视图 ， 请 记得 在 页 面 头 部 引用 视图 脚本 文件 。 


«script type="text/javascript" src="http://www.w3cschool.cc/try/jez 





$('#dg').datagrid({ 
view: detailview, 
detailFormatter: function( index, row) { 
return '«div style="padding: 2px"><table class="ddv"></table 
ty 


onExpandRow: function( index, row) { 
var ddv = $(this).datagrid('getRowDetail',index).find('tab. 
ddv.datagrid({ 
url: 'datagrid22 getdetail.php?itemid='+row.itemid, 
fitColumns:true, 
singleSelect:true, 
rownumbers:true, 
loadMsg:'', 
height:'auto', 
columns:[[ 
(field:'orderid',title:'Order ID',width:100}, 
(field:'quantity',title:'Quantity',width:100), 
(field:'unitprice',title:'Unit Price',width:100) 
]l, 
onResize:function()( 
$('4dg').datagrid('fixDetailRowHeight',index); 


onLoadSuccess: function(){ 
setTimeout(function(){ 
$('#dg').datagrid('fixDetailRowHeight', index); 
3,9); 
} 
3); 
$('4dg').datagrid('fixDetailRowHeight',index); 





当 用 户 点 击 展开 按钮 (8) 时 ，'onExpandRow' 事件 将 被 触发 。 我 们 创建 一 个 新 
的 带 有 三 列 的 子 网 格 。 当 子 网 格 数据 加 载 成 功 时 或 者 改变 尺寸 大 小 时 ， 请 记得 对 主 
网 格调 用 'fixDetailRowHeight' 方法 。 


步骤 3 : BRA elim 


datagrid22 getdata.php 


$result = array(); 

include 'conn.php'; 

$rs - mysql query("select * from item where itemid in (select item: 
$items - array(); 


while($row = mysql fetch object($rs))( 
array push(S$items, $row); 
} 


echo json_encode($items) ; 





datagrid22 getdetail.php 


include 'conn.php'; 
$itemid = mysql real escape string($ REQUEST['itemid']); 
$rs = mysql query("select * from lineitem where itemid='$itemid'"), 
$items - array(); 
while($row = mysql fetch object($rs))( 
array push(S$items, $row); 
} 


echo json_encode($items) ; 


4] = poe 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid22.zip 


jQuery EasyUl 数据 网 格 - 使 用 虚拟 滚动 视图 显示 
海量 数据 


数据 网 格 (datagrid) 的 虚拟 滚动 特性 可 以 用 来 显示 大 数量 的 记录 而 不 需要 分 页 。 
当 滚 动 垂直 滚动 条 时 ， 数 据 网 格 (datagrid) 执行 ajax 请 求 来 加 载 和 刷新 现 有 的 记 
Ko 整个 刷新 的 行为 过 程 是 平稳 的 没有 闪烁 。 在 本 教程 中 ， 我 们 将 创建 一 个 数据 
网 格 (datagrid) ， 并 运用 虚拟 滚动 特性 从 服务 器 加 载 数据 。 


DataGrid - VirtualScrollView 





Inv No Date Name Amount Price Cost Note 
6279 INV6279 2012-10-05 Name29 94 113.01 10622.94 Note29 z 
6280 INV6280 2012-10-06 Name30 97 196.41 19051.77 Note30 
6281 INV6281 2012-10-07 Name31 81 111.97 9069.57 Note31 
6282 INV6282 2012-10-08 Name32 81 181.21 14678.01 Note32 
6283 INV6283 2012-10-09 Name33 68 159.96 10877.28 Note33 
6284 INV6284 2012-10-10 : 91 13.4 9871.89 Note34 
6285 INV6285 2012-10-11 Name35 92 191.35 17604.20 Note35 
6286 INV6286 2012-10-12 Name36 88 102.56 9025.28 Note36 i 
6287 INV6287 2012-10-13 Name37 63 190.51 12002.13 Note37 
6288 INV6288 2012-10-14 Name38 83 107.88 8954.04 Note38 X 


创建 数据 网 格 (DataGrid) 


为 数据 网 格 (datagrid) 运用 虚拟 滚动 特性 ，'Vview' 属性 点 该 设置 为 'scrollview'。 
用 户 应 该 从 数据 网 格 (datagrid) 扩展 下 载 scrollview， 并 在 页 面 头 部 引用 
scrollview 文件 。 


«script type="text/javascript" src="http://www.w3cschool.cc/try/jet 


i 人 刻 





«table id="tt" class="easyui-datagrid" style="width: 700px;height : 3¢ 
title="DataGrid - VirtualScrollView" 
data-options="view:scrollview, rownumbers: true, singleSelect 

url: 'datagrid27_getdata.php',autoRowHeight: false, pages: 


<thead> 
<tr> 
<th field="inv" width="80">Inv No</th> 
<th field="date" width="100">Date</th> 
<th field="name" width="80">Name</th> 
«th field-"amount" width="80" align="right">Amount</th: 
<th field="price" width="80" align="right">Price</th> 
<th field="cost" width="100" align="right">Cost</th> 
<th field="note" width="110">Note</th> 
</tr> 
</thead> 
</table> 





SS 1€ 


请 注意 ， 这 里 我 们 不 需要 使 用 pagination 属性 ， 但 pageSize 属性 是 必需 的 ， 这 样 
执行 ajax 请 求 时 ， 数 据 网 格 (datagrid) 将 从 服务 器 获取 指定 数量 的 记录 。 


服务 器 端 代码 
datagrid27_getdata.php 


isset($ POST['page']) ? intval($ POST['page']) : 1; 
isset($ POST['rows']) ? intval($ POST['rows']) : 50; 


$page 
$rows 


$items - array(); 
date default timezone set('UTC'); 
for($i-1; $i«-$rows; $i++){ 
$index = $i+($page-1)*Srows; 
$amount = rand(50,100); 
$price = rand(10000, 20000) /100; 
$items[] = array( 
'inv' => sprintf("INV%04d",$index), 
'date' => date('Y-m-d', time( )+24*3600*$i), 
'name' => 'Name' . $index, 
'note' => 'Note' . $index, 
'amount' => $amount, 
'price' => sprintf('%01.2f',$price), 
'cost' => sprintf('%01.2f', $amount*$price) 


); 
} 
$result = array(); 
$result['total'] = 8000; 
$result['rows'] = $items; 
echo json encode($result); 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid27.zip 


jQuery EasyUl 数据 网 格 - 添加 分 页 组 件 


本 实例 演示 如 何 从 服务 器 端 加 载 数据 ， 如 何 添加 分 页 组 件 (pagination) 到 数据 网 
格 (datagrid) 。 


[A Load Data 
Item ID 

11 EST-19 

12 EST2 

13 EST-20 

14 EST-21 

15 EST-2 





17 EST-24 
18 FST-25 
10 ~|| if 


Product ID 
AV-SB-02 
FI-SW-01 
FI-FW-02 
FI-FW-02 
K9-RT-02 


K9-RT-02 
K9-RT-02 
4 Page 2 





List Price Unit Cost Attribute Stauts 
15.50 2.00 Adult Male P ^ 
16.50 10.00 Small P 
5.50 2.00 Adult Male P 
529 1.00 Adult Female P =] 
135.50 100.00 Adult Male P 
255.50 92.00 Adult Male P 
3253 29 oN 00  Adnit Female P ix 
of3 | > bi Displaying 11 to 20 of 28 items 


创建 数据 网 格 (DataGrid) 


为 了 从 远程 服务 器 端 加 载 数据 ， 您 应 该 设置 "url 属性 ， 在 您 的 服务 器 端 应 该 返回 
JSON 格式 数据 。 请 看 数据 网 格 (datagrid) 文档 得 到 更 多 关于 它 的 数据 格式 信 


NO 


«table id="tt" class="easyui-datagrid" style="width: 600px;heigt 
url="datagrid2_getdata.php" 

title="Load Data" iconCls="icon-save" 

rownumbers="true" pagination="true"> 


<thead> 


<tr> 


<th 
<th 
<th 
<th 
<th 
<th 


</tr> 


</thead> 


</table> 


E SS 


field="itemid" width="80">Item ID</th> 
field-"productid" width="80">Product ID</th> 
field="listprice" widthz"80" align="right">List 
field-"unitcost" width="80" align="right">Unit 
field="attri" width="150">Attribute</th> 
field="status" width="60" align="center">Staut: 





我 们 定义 数据 网 格 (datagrid) 列 ， 并 设置 'pagination' 属性 为 true， 它 将 在 数据 网 
格 (datagrid) 的 底部 生成 一 个 分 页 (pagination) 工具 栏 。pagination 将 发 送 两 个 
参数 到 服务 器 : 


e page: 页 码 ， 起 始 值 1。 


e rows : 每 页 显示 行 。 


服务 器 疹 代 码 


$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
Ah 


$rs = mysql_query("select count(*) from item"); 
$row = mysql fetch row($rs); 
$result["total"] = $row[0]; 
$rs = mysql query("select * from item limit $offset,$rows"); 
$items - array(); 
while($row = mysql fetch object($rs))( 
array push(S$items, $row); 
$result["rows"] = $items; 


echo json encode($result); 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid2.zip 


jQuery EasyUl 窗口 


jQuery EasyUl 窗口 - 创建 简单 窗口 
创建 一 个 窗口 (window) 非常 简单 ， 我 们 创建 一 个 DIV 标记 : 


<div id="win" class="easyui-window" title="My Window" style="width 
Some Content. 
</div> 


«| = 








现在 运行 测试 页 面 ， 您 会 看 见 一 个 窗口 (window) 显示 在 您 的 屏幕 上 。 我 们 不 需 
写 任 何 的 javascript 代码 。 


My Window Sees 


Some Content. 


如 果 您 希望 创建 一 个 隐藏 的 窗口 (window) ， 记 得 设置 'closed' 属性 为 true' 14, 
您 可 以 调用 'open' 方法 来 打开 窗口 (window) 


<div id="win" class="easyui-window" title="My Window" closed="true' 
Some Content. 
</div> 


" -g 





$('#win').window('open'); 


作为 最 后 的 实例 演示 ， 我 们 创建 一 个 登录 窗口 (window) 


«div id="win" class="easyui-window" title="Login" style="width: 300; 
«form style-"padding:10px 20px 10px 40px;"> 
<p>Name: <input type="text"></p> 
<p>Pass: <input type="password"></p> 
<div style="padding: 5px; text-align:center;"> 
«a href="#" class="easyui-linkbutton" icon="icon-ok">0} 
«a href="#" class="easyui-linkbutton" icon="icon-cance- 
</div> 
</form> 
</div> 


«| nd 








Login Go] 


FA jQuery EasyUl 实例 


jeasyui-win-win1.zip 


jQuery EasyUl 窗口 - 自 定义 窗口 工具 栏 


默认 情况 下 ， 窗 口 (window) 有 四 个 工具 : collapsible、minimizable、 
maximizable 和 closable。 上 比如 我 们 定义 以 下 窗口 (window) 


«div id="win" class="easyui-window" title="My Window" style-z"p: 
window content 
</div> 








My Window Gees 


window content 


如 需 自 定义 工具 ， 设 置 该 工具 为 true 或 者 false。 比 如 我 们 希望 定义 一 个 窗口 
(window) ， 仅 仅 拥 有 一 个 可 关闭 的 工具 。 您 应 该 设置 任何 其 他 工具 为 false, $ 
们 可 以 在 标记 中 或 者 通过 jQuery 代码 定义 tools 属性 。 现 在 我 们 使 用 jQuery 代码 
来 定义 窗口 (window) 


$('#win' ) .window( { 
collapsible: false, 
minimizable: false, 
maximizable: false 


3): 


My Window 四 


window content 


如 果 我 们 希望 添加 自 定 义 的 工具 到 窗口 (window) ， 我 们 可 以 使 用 tools 属性 。 作 
为 实例 演示 ， 我 们 添加 两 个 工具 到 窗口 (window) 


$('#win' ) .window( { 
collapsible: false, 
minimizable: false, 
maximizable: false, 
tools: [{ 
iconCls:'icon-add', 
handler: function(){ 
alert('add'); 
} 


3; 


iconCls:'icon-remove', 

handler: function(){ 
alert('remove'); 

J 


3): 


My Window L2 = X 


window content 


FA jQuery EasyUl 实例 


jeasyui-win-win2.zip 


jQuery EasyUl 窗口 - 窗口 与 布局 


Layout 组 件 可 以 内 嵌 在 窗口 (window) 中 。 我 们 可 以 创建 一 个 复杂 的 布局 窗口 ， 
甚至 不 需要 宇 任 何 的 js 代码 。jquery-easyui 框架 帮 有 我 们 在 后 台 做 泻 染 和 调整 尺 
寸 。 


作为 一 个 实例 ， 我 们 创建 一 个 窗口 (window) ， 它 包含 两 个 部 分 ， 一 个 放置 在 左边 
一 个 放置 在 右边 。 在 窗口 (window) 的 左边 我 们 创建 一 个 树 形 菜单 (tree) ， 在 窗 
口 (window) 的 右边 我 们 创建 一 个 tabs 容器 。 





Layout Window aSa x) 
2 library . Home Contacts 
|E] easyui 
(=| Music jQuery easyui framework help you build your web page 
[E] Picture easily. 
[E] Database 








vf Ok 3€ Cancel 


«div class="easyui-window" title="Layout Window" icon="icon-he- 
<div class="easyui-layout" fit="true"> 
«div region="west" split="true" style="width:120px;"> 
«ul class="easyui-tree"> 


<li> 
<span>Library</span> 
<ul> 
<li><span>easyui</span></1i> 
<li><span>Music</span></1i> 
<li><span>Picture</span></1i> 
<li><span>Database</span></1i> 
</ul> 
</li> 
</ul> 


</div> 
<div region="center" border="false" border="false"> 
«div class="easyui-tabs" fit="true"> 
<div title="Home" style="padding:10px;"> 
jQuery easyui framework help you build yout 
</div> 
<div title="Contacts"> 
No contact data. 
</div> 
</div> 
</div> 
«div region-"south" border="false" style="text-align:r: 
«a class-"easyui-linkbutton" icon="icon-ok" href=": 
<a class="easyui-linkbutton" icon="icon-cancel" hre 
</div> 
</div> 
</div> 


nk IE 





请 看 上 面 的 代码 ， 我 们 仅仅 使 用 了 HTML 标记 ， 一 个 复杂 的 布局 窗口 (window) 
将 显示 。 这 就 是 jquery-easyui 框架 ， 简 单 而 强大 。 


FA jQuery EasyUl 实例 


jeasyui-win-win3.zip 


jQuery EasyUl 窗口 - 创建 对 话 框 


对 话 框 (Dialog) 是 一 个 特殊 的 窗口 (window) ， 可 以 包含 在 顶部 的 工具 栏 和 在 底 
部 的 按钮 。 默 认 情 况 下 ， 对 话 框 (Dialog) 不 能 改变 大 小 ， 但 是 用 户 可 以 设置 
resizable 属性 为 true， 使 其 可 以 改变 大 小 。 
y My Dialog 

Adi | [i Save 


Dialog Content. 


y Ok Cancel 


创建 对 话 框 (Dialog) 
对 话 框 (Dialog) 非常 简单 ， 可 以 从 DIV 标记 创建 ， 如 下 所 示 : 


«div id="dd" class="easyui-dialog" style="padding: 5px;width: 40( 
title="My Dialog" iconCls="icon-ok" 
toolbar="#dlg-toolbar" buttons="#dlg-buttons"> 

Dialog Content. 
</div> 


E 





准 各 工具 栏 (Toolbar) 和 按钮 (Button) 


<div id="dlg-toolbar"> 
<a href="#" class="easyui-linkbutton" iconCls="icon-add" p- 
<a href="#" class="easyui-linkbutton" iconCls="icon-save" | 
</div> 
<div id="dlg-buttons"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-ok" onc 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
</div> 


了 — B 
上 面 的 代码 我 们 创建 了 一 个 带 有 工具 栏 (toolbar) 和 按钮 (button) 的 对 话 框 


(dialog) 。 这 是 对 话 框 (dialog) 、 工 具 栏 (toolbar) 、 内 容 (content) 和 按钮 
(buttons) 的 标准 配置 。 





FA jQuery EasyUl 实例 


jeasyui-win-dlg1.zip 


jQuery EasyUl 窗口 - 目 定 义 带 有 工具 条 和 按钮 的 
对 话 框 
您 可 以 创建 一 个 带 有 工具 栏 (toolbar) 和 按钮 (button) 的 对 话 框 (dialog) , 


以 从 HTML 标记 创建 。 这 个 教程 描述 如 何 添加 工具 栏 (toolbar) 和 按钮 burn) 
到 对 话 框 (dialog) ， 没 有 任何 的 javascript 代码 。 


My Dialog eG 


2 Edt Que \ 


Dialog Content. 


回 Save X Close 


e 


创建 对 话 框 (Dialog) 


<div id="dd" class="easyui-dialog" title="My Dialog" style="wic 
toolbar="#dlg-toolbar" buttons="#dlg-buttons"> 
Dialog Content. 
</div> 





创建 工具 栏 〈Toolbar) 


<div id="dlg-toolbar"> 
<table cellpadding="0" cellspacing="0" style="width: 100%"> 
<tr> 
<td> 
<a href="#" class="easyui-linkbutton" iconCls=' 
<a href="#" class="easyui-linkbutton" iconCls=' 
</td> 
«td style="text-align:right"> 
<input></input><a href="#" class="easyui-linkbt 
</td> 
</tr> 
</table> 
</div> 








创建 按钮 (Buttons) 


«div id="dlg-buttons"> 
<table cellpadding="0" cellspacing="0" style="width: 100%"> 
<tr> 
<td> 
<img src="email.gif"/> 
</td> 
«td style="text-align:right"> 
<a href="#" class="easyui-linkbutton" iconCls=' 
<a href="#" class="easyui-linkbutton" iconCls=' 
</td> 
</tr> 
</table> 
</div> 


mj -—g 





请 注意 ， 对 话 框 (dialog) 的 工具 栏 (toolbar) 和 按钮 (buttons) 属性 也 可 以 通过 
string 值 指定 ， 它 将 充当 作为 一 个 选择 器 去 选择 一 个 适当 的 DIV 元 素 ， 并 追加 到 工 
Be (toolbar) 或 者 按钮 (buttons) 的 位 置 。 


下 载 jQuery EasyUl 实例 


jeasyui-win-dlg2.zip 


jQuery EasyUl 树 形 菜单 


jQuery EasyUl 树 形 菜单 - 使 用 标记 创建 树 形 菜单 


一 个 树 形 菜单 (Tree) 可 以 从 标记 创建 。easyui MBA (Tree) 也 可 以 定义 在 
<ul> 元 素 中 。 无 序列 表 的 <ul> 元 素 提 供 一 个 基础 的 树 (Tree) 结构 。 每 一 个 <li> 
元 素 将 产生 一 个 树 节点 ， 子 <ul> 元 素 闻 产生 一 个 父 树 节点 。 


4 Folder 
4 CISub Folder 1 
[2] File 11 
File 12 
File 13 
E File 2 
[2] File 3 
[2] File?1 








[uy [nj 


创建 树 形 菜单 (Tree) 


<ul class="easyui-tree"> 


<li> 
<span>Folder</span> 
<ul> 
<li> 
<span>Sub Folder 1</span> 
<ul> 
<li><span>File 11</span></1i> 
<li><span>File 12</span></1i> 
<li><span>File 13</span></1i> 
</ul> 
</li> 
<li><span>File 2</span></li> 
<li><span>File 3</span></li> 
</ul> 
</li> 
<li><span>File21</span></li> 
</ul> 


FA jQuery EasyUl 实例 


jeasyui-tree-tree1.zip 


jQuery EasyUl 树 形 菜单 - 创建 异步 树 形 菜单 


为 了 创建 异步 的 树 形 菜单 (Tree) ， 每 一 个 树 节 点 必须 要 有 一 个 'id' 属性 ， 这 个 将 
提交 回 服务 器 去 检索 子 节点 数据 。 
4 Node 1 
(Node 1.1 
[E] Node 1.2 


iJ [ug 四 
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pe 
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创建 树 形 菜单 (Tree) 


<ul id="tt" class="easyui-tree" 
url="tree2_getdata.php"> 
</ul> 


AR A ee bin tN a5 


$id = isset($ POST['id']) ? intval($ POST['id']) : 0; 
include 'conn.php'; 


$result - array(); 
$rs = mysql query("select * from nodes where parentId-$id"); 


while($row = mysql fetch array($rs))( 
$node - array(); 
$node['id'] - $row['id']; 
$node['text'] = $row['name']; 
$node['state'] = has child($row['id']) ? 'closed' : 'open', 
array_push($result, $node); 


} 


echo json_encode($result); 


function has_child($id) { 
$rs = mysql query("select count(*) from nodes where parent: 
$row = mysql fetch array($rs); 
return $row[0] > 0 ? true : false; 








到 





下 载 jQuery EasyUl 实例 


W3School 前 端 教 程 合 


jeasyui-tree-tree2.zip 


jQuery EasyUl 树 形 菜单 - 创建 异步 树 形 菜单 3263 


jQuery EasyUl 树 形 菜单 - WR SRD ER 


本 教程 向 您 展示 如 何 附加 节点 到 树 形 菜单 (Tree) 。 我 们 将 创建 一 个 包含 水 果 和 蔬 
菜 节点 的 食品 树 ， 然 后 添加 一 些 其 他 水 果 到 已 存在 的 水 果 节 点 。 


4 CFoods 





apple 
orange 
getables 
tomato 


carrot 





cabbage 


Fri 
[z^ 
= 
Ve 
[zh 
[2 
[= 
[= 





potato 
lettuce 


II! 





I 


创建 食品 树 
首先 ， 我 们 创建 食品 树 ， 代 码 如 下 所 示 : 


<div style="width: 200px;height:auto;border:1px solid #ccc;"> 
«ul id="tt" class="easyui-tree" url="tree_data. json"></ul> 
</div> 


sy | 


请 注意 ， 树 (Tree) 组 件 是 定义 在 «ul» 标记 中 ， 树 节点 数据 从 URL 
"tree_data.json" 加 载 。 


#5 BAR 35 RA 


然后 我 们 通过 点 击 节点 选择 水 果 节 点 ， 我 们 将 添加 一 些 其 他 的 水 果 数 据 。 执 行 
getSelected 方法 得 到 人 处理 节 点 : 


var node = $('#tt').tree('getSelected'); 


getSelected 方法 的 返回 结果 是 一 个 javascript 对 象 ， 它 有 一 个 id. text, target 属 
性 。target 属性 是 一 个 DOM 对 象 ， 引 用 选中 节点 ， 它 的 append 方法 将 用 于 附加 
子 节点 。 


BON 73 aR 


var node = $('#tt').tree('getSelected'); 


if (node) { 
var nodes = [{ 
quld 
"text" :"Raspberry" 
t 
Male ee eate 
"text" :"Cantaloupe" 
l; 


$('#tt').tree('append', ( 
parent:node.target, 
data:nodes 


3): 


当 添 加 一 些 水 果 ， 您 将 看 见 : 


4 © Foods 





[E] apple 

[E] orange 

=) Raspberry 
[2] Cantaloupe 
4 © Vegetables 
B tomato 

B carrot 

[E] cabbage 
国 potato 

E lettuce 





正如 您 所 看 到 的 ， 使 用 easyui 的 树 (Tree) 插件 去 附加 节点 不 是 那么 的 难 。 


下 载 jQuery EasyUl 实例 


jeasyui-tree-tree3.zip 


jQuery EasyUl 树 形 菜单 - 创建 带 复 选 框 的 树 形 菜 
单 


easyui 的 树 (Tree) 插件 允许 您 创建 一 a 如 果 您 点 击 点 的 复 选 
框 ， 这 个 点 击 的 节点 信息 将 向 上 和 向 下 继承 。 例 如 : 点 击 tomato' MUR 
您 将 会 看 见 Vegetables' 节点 现在 仅仅 选中 部 分 。 


4 Sm Foods 
Oo Fruits 

4 Cy[u] Vegetables 
[8] tomato 
[2 [v] carrot 
[3 L1 cabbage 
E) [v] potato 
(=) [ ]1ettuce 





创建 复 选 框 树 


<ul id="tt" class="easyui-tree" 
url="data/tree_data.json" 
checkbox="true"> 

</ul> 


FA jQuery EasyUl 实例 


jeasyui-tree-tree4.zip 


jQuery EasyUl HER X - 树 形 菜单 拖 放 控制 


当 在 一 个 应 用 中 使 用 树 (Tree) HF, H} (drag) 和 放置 (drop) 功能 要 求 允 许 


用 户 改 变节 点 位 置 。 启 用 拖 搜 (drag) 和 放置 (drop) 操作 ， 所 有 


把 树 (Tree) 插件 的 'dnd' 属性 设置 为 true, 


4 V Folderl 


=, wf File3 
> File3 
E] Files 

C Languages 


创建 树 形 菜单 (Tree) 


$('#tt').tree({ 
dnd: true, 
url: 'tree_data.json' 


3): 


您 需要 做 的 就 是 


当 在 一 个 树 节点 上 发 生 放 置 操作 ，'onDrop' 事件 将 被 触发 ， 您 应 该 做 一 些 或 更 多 的 


操作 ， 例 如 保存 节点 状态 到 远程 服务 器 端 ， 等 等 。 


onDrop: function(targetNode, source, point){ 


var targetId = $(target).tree('getNode', targetNode).id; 


$.ajax({ 

Ue le 

type: 'post', 

dataType: 'json', 

data: { 
id: source.id, 
targetId: targetId, 
point: point 


3); 


FA jQuery EasyUl 实例 


jeasyui-tree-tree5.zip 


jQuery EasyUl WER X - 树 形 菜单 加 载 父 / 子 节 氮 


通常 表示 一 个 树 节点 的 方式 就 是 在 每 一 个 节点 存储 一 个 parentid。 这 个 也 被 称 为 邻 
接 列 表 模 型 。 直接 加 载 这 些 数据 到 树 形 菜单 (Tree) 是 不 允许 的 。 但 是 我 们 可 以 
在 加 载 树 形 菜单 之 前 ， 把 它 转换 为 标准 标准 的 树 形 菜单 (Tree) 数据 格式 。 树 
(Tree) 插件 提供 一 个 "loadFilter' 选项 男 数 ， 它 可 以 实现 这 个 功能 。 它 提 供 一 个 机 
会 来 改变 任何 一 个 进入 数据 。 本 教程 向 您 展示 如 何 使 用 loadFilter HAIR A/F 
节点 到 树 形 菜单 (Tree). 





4 司 Foods 
4 Fruits 
=) apple 
=) orange 
4 3j Vegetables 
[E] tomato 
=) carrot 
国 cabbage 
=) potato 
[2] lettuce 
父 / 子 节 点 数据 


{"id":1,"parendId":0, "name":"Foods"}, 
{"id":2, "parentId":1, "name":"Fruits"}, 
"id":3,"parentId":1, "name":"Vegetables"), 
("id":4,"parentId":2, "name":"apple"), 
("id":5,"parentId":2, name":"orange"?, 
("id":6,"parentId":3, "name":"tomato"}, 
("id":7,"parentId":3,"name":"carrot"), 
("id":8,"parentId":3, "name": "cabbage"}, 
("id":9,"parentId":3, "name":"potato"}, 
"id":10, "parentId":3, 'name":" lettuce") 


] 


使 用 'loadFilter' 创建 树 形 菜单 (Tree) 


$('#tt').tree({ 
url: 'data/tree6_data.json', 
loadFilter: function(rows) { 
return convert(rows); 
j 


3): 


转换 的 实现 


function convert(rows) { 
function exists(rows, parentId){ 
for(var i-0; i«rows.length; i++){ 
if (rows[i].id -- parentId) return true; 


return false; 


j 


var nodes - []; 
// get the top level nodes 
for(var i-0; i«rows.length; i++){ 
var row - rows[i]; 
if (!exists(rows, row.parentId) ){ 
nodes. push({ 
id:row.id, 
text: row.name 


+); 
} 


var toDo = []; 
for(var i-0; i«nodes.length; i++){ 
toDo.push(nodes[i]); 


} 
while(toDo.length) { 
var node = toDo.shift(); // the parent node 
// get the children nodes 
for(var i-0; i«rows.length; i++){ 
var row - rows[i]; 
if (row.parentId == node.id){ 
var child = {id:row.id, text:row.name}; 
if (node.children) { 
node.children.push(child) ; 
} else { 
node.children = [child]; 
} 


toDo.push(child); 


j 


return nodes; 


FA jQuery EasyUl 实例 


jeasyui-tree-tree6.zip 


jQuery EasyUl 树 形 菜单 - 创建 基础 树 形 网 格 


树 形 网 格 (TreeGrid) 组 件 从 数据 网 格 (DataGrid) 继承 ， 但 是 允许 在 行 之 间 存 在 
父 / 子 节 点 关系 。 许 多 属性 继承 至 数据 网 格 (DataGrid) ， 可 以 用 在 树 形 网 格 
(TreeGrid) 中 。 为 了 使 用 树 形 网 格 (TreeGrid) ， 用 户 必 须 定义 'treeField' 属 
性 ， 指 明 哪 个 字段 作为 树 节点 。 


本 教程 将 向 您 展示 如 何 使 用 树 形 网 格 (TreeGrid) 组 件 设 置 一 个 文件 夹 浏览 。 


Folder Browser 


Hame Size Modified Date 
1 i «4&c 02/19/2010 
2 4 Program Files 120 MB 03/20/2010 
3 Q Java 01/13/2010 
6 (MySQL 01/13/2010 
10 4 eclipse 01/20/2010 


11 eclipse. exe 56 KB 05/19/2009 


eee aes fuu Pr 
1 KB 04/20/2010 





13 [E notice. html T KB 03/17/2005 


创建 树 形 网 格 (TreeGrid) 


<table id="test" title="Folder Browser" class="easyui-treegrid' 
url="data/treegrid_data. json" 
rownumbers="true" 
idField="id" treeField="name"> 
<thead> 
<tr> 
<th field="name" width="160">Name</th> 
<th field="size" width="60" align="right">Size</th: 
<th field="date" width="100">Modified Date</th> 
</tr> 
</thead> 
</table> 


| — B 





下 载 jQuery EasyUl 实例 


jeasyui-tree-treegrid1.zip 


W3School 前 端 教 程 合集 


jQuery EasyUl 树 形 菜单 - 创建 复杂 树 形 网 格 


树 形 网 格 (TreeGrid) 可 以 展示 有 限 空间 上 带 有 多 列 和 复杂 数据 电子 表格 。 本 教程 
将 演示 如 何 将 表格 数据 排列 在 分 割 的 网 格 和 多 行 表 关中 ， 以 便 组 织 共 同 的 数据 。 


Complex TreeGrid 


2009 2010 
Region 
2st qrt. 3st qrt.: 4st qrt. ist qrt. 2st qrt. 3st qrt. 4st qrt. 
I2 4 ©) Wyoming = 
2 B Albin 1800 1903 2183 2133 1923 2018 1838 











4 [E] Egbert 1800 1903 2183 2133 1923 2018 1838 


Sia Gy Washington 





6 [E Bellinghaz= 4 | m |» 





B Total 12600 13321 15281 14931 13461 14126 12866 


创建 树 形 网 格 (TreeGrid) 
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<table title="Complex TreeGrid" class="easyui-treegrid" style=' 
url="data/treegrid2_data.json" 
rownumbers="true" showFooter="true" 
idField="id" treeField="region"> 
<thead frozen="true"> 
<tr> 
<th field="region" width="150">Region</th> 
</tr> 
</thead> 
<thead> 
<tr> 
<th colspan="4">2009</th> 
<th colspan="4">2010</th> 
</tr> 
<tr> 
«th field="f1" width="50" align="right">1st qrt.«/1 
«th field-z"f2" width="50" align="right">2st qrt.</1 
«th field-"f3" widthz"50" align="right">3st qrt.</1 
«th field-z"f4" width="50" align="right">4st qrt.</1 
«th field="f5" widthz"50" align="right">1st gqrt.</1 
«th field-"f6" width="50" align="right">2st qrt.</1 
«th fieldz"f7" widthz"50" align="right">3st qrt.</1 
«th field="fF8" widthz"50" align="right">4st qrt.</1 
</tr> 
</thead> 
</table> 


| 
正如 您 所 看 到 的 ， 树 形 网 格 (Treegrid) 的 使 用 和 数据 网 格 (Datagrid) 一 样 。 请 


使 用 frozen' 属性 来 定义 冻结 列 ， 列 的 'colspan' 和 'rowspan' 属性 来 定义 多 行 表 
头 。 





FA jQuery EasyUl 实例 


jeasyui-tree-treegrid2.zip 


jQuery EasyUl 树 形 菜单 - 树 形 网 格 动态 加 载 


动态 加 载 树 形 网 格 有 助 于 从 服务 器 上 加 载 部 分 的 行 数 据 ， 避 兔 加 载 大 型 数据 的 长 时 
间 等 待 。 本 教程 将 向 您 展示 如 何 创 建 带 有 动态 加 载 特性 的 树 形 网 格 (TreeGrid) 。 




















Products 
Name Quantity Price Total 

1 «Computers 人 
2 4 Printers | 

3 [8 Epson WorkForce 845 69 $121.29 $8369.01 | 
4 国 Canon PIXMA MG5320 2 5110.12 51321.44 | 
5 [E] HP Deskjet 1000 Printer 63 $33.95 $2138.85 E 
6 4 Firewall | 

7 国 Cisco RV110W-A-NA-K9 103 $79.95 $8234.85 | 

8 国 ZyXEL ZyWALL USG50 34 $209.99 $7139.66 | 

9 [E] NETGEAR FVS318 67 $89.99 $6029.33 P 
10 CJ Keyboard 


创建 树 形 网 格 (TreeGrid) 


<table title="Products" class="easyui-treegrid" style="width:7( 
url="treegrid3 getdata.php" 
rownumbers="true" 
idField="id" treeField="name"> 
<thead> 
<tr> 
<th field="name" width="250">Name</th> 
<th field="quantity" width="100" align="right">Quar 
«th field="price" width="150" align="right" formati 


«th field-"total" width="150" align="right" formati 
</tr> 


</thead> 
</table> 


Ei — — B 
服务 器 端 代码 


treegrid3_getdata.php 





$id = isset($ POST['id']) ? intval($ POST['id']) : 0; 


include 'conn.php'; 
$result - array(); 
$rs = mysql query("select * from products where parentId-$id"); 
while($row = mysql fetch array($rs))( 
$row['state'] has child($row['id']) ? 'closed' : 'open'; 
$row['total'] = $row['price']*$row['quantity']; 
array push($result, $row); 


j 


echo json encode($result); 


function has_child($id) { 
$rs = mysql query("select count(*) from products where parentIc 
$row = mysql fetch array($rs); 
return $row[0] > 0 ? true : false; 


国安 = 





FA jQuery EasyUl 实例 


jeasyui-tree-treegrid3.zip 


W3School 前 端 教程 


jQuery EasyUl 树 形 菜单 - 树 形 网 格 添加 分 页 


本 教程 展示 如 何 向 带 有 动态 加 载 特性 的 树 形 网 格 (TreeGrid) 添加 分 页 。 


Products 





Name Quantity Price Total 
1 JUOITIPULSTS p 
2 a Electronics E 
3 4 TIDigital Cameras 
4 [E] Nikon COOLPIX L26 16.1 MP 12 $74.97 $899.64 = 
er ee Cd 
6 国 Canon PowerShot A2300 32 $91.52 $2928.64 
7 4 C3DVD E 
8 [E Verbatim 95101 4.7 GB 35 $11.81 $413.35 
9 [E Brave 78 $14.99 $1169.22 ~ 
2 [æ] 4 4 | Pageji of2| b M Ò Displaying 1 to 2 of 3 items 


创建 树 形 网 格 (TreeGrid) 


启用 树 形 网 格 (TreeGrid) 的 分 页 特性 ， 必 须 添加 'pagination:true' 属性 ， 这 样 页 
面 加载 时 就 会 向 服务 器 发 送 'page' 和 'rows' 参数 。 
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<table title="Products" class="easyui-treegrid" style="width: 7( 
data-options=" 
url: 'treegrid4_getdata.php', 
rownumbers: true, 
pagination: true, 
pageSize: 2, 
pageList: [2,10,20], 
idField: '‘id', 
treeField: 'name', 
onBeforeLoad: function(row, param) { 
if (!row) { // load top level rows 


param.id = 0; // set id=0, indicate to. 
} 
} 
WS 
<thead> 
<tr> 
<th field="name" width="250">Name</th> 
<th field="quantity" width="100" align="right">Quar 
«th field="price" width="150" align="right" formati 
«th field-"total" width="150" align="right" formati 
</tr> 
</thead> 
</table> 





到 ne 
ARA atin th 3 


treegrid4_getdata.php 


$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
$offset = ($page-1)*$rows; 


$id = isset($ POST['id']) ? intval($_POST['id']) : 0; 
include 'conn.php'; 


$result - array(); 

if ($id == 0){ 
$rs = mysql query("select count(*) from products where parentIc 
$row = mysql fetch row($rs); 
$result["total"] = $row[0]; 


$rs = mysql query("select * from products where parentId=0 lim: 
$items - array(); 
while($row = mysql fetch array($rs))( 
$row['state'] = has child($row['id']) ? 'closed' : 'open'; 
array push(S$items, $row); 


$result["rows"] = $items; 
} else { 
$rs = mysql query("select * from products where parentId=$id") , 
while($row = mysql_fetch_array($rs)){ 
$row['state'] = has_child($row['id']) ? 'closed' : 'open'; 
$row['total'] = $row['price']*$row['quantity']; 
array push($result, $row); 


j 


echo json encode($result); 


function has_child($id) { 
$rs = mysql query("select count(*) from products where parentIc 
$row = mysql fetch array($rs); 
return $row[0] > 0 ? true : false; 


j 
E == : 
发 送 到 服务 器 的 参数 包括 : 


e page : 要 加 载 的 当前 页 面 。 
e rows : 页 面 尺 寸 大 小 。 
e id : 父 行 的 id 值 ， 从 服务 器 返回 的 行将 被 添加 。 


当 展开 一 个 行 节点 时 ，'id' 值 是 大 于 0 的 。 当 改 变 页 码 时 ，'id' 值 应 该 被 设置 为 0 来 
放置 加 载 子 行 。 





FA jQuery EasyUl 实例 


W3School 前 端 教 程 合 


jeasyui-tree-treegrid4.zip 
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jQuery EasyUl 树 形 菜单 - 树 形 网 格 惰性 加 载 节 点 


有 时 我 们 已 经 得 到 充分 的 分 层 树 形 网 格 CTreeGrid) 的 数据 。 我 们 还 想 让 树 形 网 格 
(TreeGrid) 按 层 次 惰性 加 载 节 点 。 首先 ， 只 加 载 顶 层 节点 。 然后 点 击 节 点 的 展 

QE 本 教程 展示 如 何 创建 带 有 惰性 加 载 特性 的 树 形 网 格 
TreeGrid) 。 


Lazy Loading 


Name Size Modified Date 
1:49C 02/19/2010 
2 4 3 Program Files 120 MB 03/20/2010 
3 CJ Java 01/13/2010 
4 C MySQL 01/13/2010 
5 {eclipse 01/20/2010 


创建 树 形 网 格 (TreeGrid) 


<table id="test" title="Folder Browser" class="easyui-treegrid' 
data-options=" 
url: 'data/treegrid_data.json', 
method: 'get', 
rownumbers: true, 
idField: 'id', 
treeField: 'name', 
loadFilter: myLoadFilter 


Ws 
<thead> 
<tr> 
«th field="name" width="220">Name</th> 
«th field="size" width="100" align="right">Size</tt 
<th field="date" width="150">Modified Date</th> 
</tr> 
</thead> 


</table> 


Ee 





为 了 放置 加 载 子 节点 ， 我 们 需要 为 每 个 节点 重 命名 'children' 属性 。 正如 下 面 的 代 
码 所 示 ，'children' 属性 重 命 名 为 'children1'。 当 展 开 一 个 节点 时 ， 我 们 调用 
'append' 方法 来 加 载 它 的 子 节点 数据 。 


'loadFilter' 代码 


function myLoadFilter (data, parentId) { 
function setData(){ 
var todo = []; 
for(var i-0; i«data.length; i++){ 
todo.push(data[i]); 


} 
while(todo.length) { 
var node = todo.shift(); 
if (node.children) { 
node.state = 'closed'; 
node.childreni = node.children; 
node.children = undefined; 
todo = todo.concat(node.children1); 


} 


setData(data); 
var tg = $(this); 
var opts = tg.treegrid('options'); 
opts.onBeforeExpand = function(row) { 
if (row.childrent) { 
tg.treegrid('append',( 
parent: row[opts.idField], 
data: row.childreni 
3); 
row.childreni = undefined; 
tg.treegrid('expand', row[opts.idField]); 
} 
return row.childreni == undefined; 
3 


return data; 


FA jQuery EasyUl 实例 


jeasyui-tree-treegrid5.zip 


jQuery EasyUl 表单 


jQuery EasyUl 表单 - 创建 异步 提交 表单 


本 教程 向 您 展示 如 何 通过 easyui 提交 一 个 表单 (Form) 。 我 们 创建 一 个 带 有 
name, email 和 phone 字段 的 表单 。 通 过 使 用 easyui 表单 (form) 插件 来 改变 表 
单 (form) 为 ajax 表单 (form) 。 表 单 (form) 提交 所 有 字段 到 后 台 服 务 器 ， 服 务 
器 义理 和 发 送 一 些 数据 返回 到 前 端 页 面 。 我 们 接收 返回 数据 ， 并 将 它 显 示 出 来 。 


Ajax Form 
Name: name 
Email: abc@gmail. com 
Phone: 800 
| Submit | 


创建 表单 (Form) 


<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax 
«form id="ff" action="form1_proc.php" method="post"> 
<table> 
<tr> 
<td>Name: </td> 
<td><input name="name" type="text"></input></td> 
</tr> 
<tr> 
<td>Email:</td> 
<td><input name="email" type="text"></input></td> 
</tr> 
<tr> 
<td>Phone: </td> 
<td><input name="phone" type="text"></input></td> 
</tr> 
<tr> 
<td></td> 
<td><input type="submit" value="Submit"></input></1 
</tr> 
</table> 
</form> 


E) 


改变 为 Ajax 表单 





$('#ff').form({ 
success:function(data){ 
$.messager.alert('Info', data, 'info'); 


} 
}); 
AR A ds dm 63 
form1 proc.php 


$name - $ POST['name']; 
$email POST['email']; 


= $_ 
$phone = $ POST['phone']; 


echo "Your Name: $name <br/> Your Email: $email <br/> Your Phor 


pj ——————————————— MÀ] 


FA jQuery EasyUl 实例 


jeasyui-form-form1 .zip 





jQuery EasyUl 表单 - 表单 验证 


本 教程 将 向 您 展示 如 何 验 证 一 个 表单 。easyui 框架 提供 一 个 validatebox 插件 来 验 
证 一 个 表单 。 在 本 教程 中 ， 我 们 将 创建 一 个 联系 表单 ， 并 应 用 validatebox 插件 来 
验证 表单 。 然 后 您 可 以 根据 自己 的 需求 来 调整 这 个 表单 。 


Form Validation 
Name: 


name 


Email: 


[s ü Flease enter a valid ezail 
Subject: MÀ 


subject 


Message: 


Submit | 


创建 表单 (form) 


让 我 们 创建 一 个 简单 的 联系 表单 ， 带 有 name、email、subject 和 message 字段 : 


<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form 
«form id="ff" method="post"> 
<div> 
<label for="name">Name:</label> 
<input class="easyui-validatebox" type="text" name="nar 
</div> 
<div> 
«label for="email">Email:</label> 
<input class="easyui-validatebox" type="text" name="emée 
</div> 
<div> 
<label for="Subject">Subject:</label> 
«input class="easyui-validatebox" type="text" name="sulk 
</div> 
<div> 
<label for="message">Message:</label> 
&lt; textarea name="message" style="height :60px;"&gt;&li 
</div> 
<div> 
<input type="Submit" value="Submit"> 
</div> 
</form> 





我 们 添加 一 个 样式 名 为 easyui-validatebox 到 input 标记 ， 所 以 input 标记 将 根据 
validType 属性 应 用 验证 。 


当 表 单 无 效 时 阻止 表单 提交 
当 用 户 点 击 表单 的 submit 按钮 时 ， 如 果 表 单 是 无 效 的 ， 我 们 应 该 阻止 表单 提交 。 
$('#fFF').form({ 
url:'form3 proc.php', 


onSubmit : Function(){ 
return $(this).form('validate'); 
ty 


success: function(data) { 
$.messager.alert('Info', data, 'info'); 
} 


3); 


如 果 表 单 是 无 效 的， 将 显示 一 个 提示 信息 。 


下 载 jQuery EasyUl 实例 


jeasyui-form-form3.zip 


jQuery EasyUl x € - 创建 树 形 下 拉 框 


树 形 下 拉 框 (ComboTree) 是 一 个 带 有 下 列 树 形 结构 (Tree) 的 下 拉 框 
(ComboBox) 。 它 可 以 作为 一 个 表单 字段 进行 使 用 ， 可 以 提交 给 远程 服务 器 。 


在 本 教程 中 ， 我 们 将 要 创建 一 个 注册 表单 ， 带 有 name. address. city 字段 。city 
字段 是 一 个 树 形 下 拉 框 (ComboTree) 字段 ， 在 里 面 用 户 可 以 下 拉 树 面板 (tree 
panel) ， 并 选择 一 个 特定 的 城市 。 


Register X 


Account Information 


y Submit X Cancel 





(Washingt on 


创建 表单 (Form) 


«div id="dlg" class="easyui-dialog" style-"width:500px;height:: 
title-"Register" buttons="#d1lg-buttons"> 
<h2>Account Information</h2> 
«form id="ff" method="post"> 
<table> 
<tr> 
<td>Name: </td> 
<td><input type="text" name="name" style-'widtl 
</tr> 
<tr> 
<td>Address:</td> 
<td><input type="text" name="address" style="w: 
</tr> 
<tr> 
<td>City:</td> 
<td><select class="easyui-combotree" url="data, 
</tr> 
</table> 
</form> 
</div> 
«div id="dlg-buttons"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-ok" onc 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
</div> 


a ED | 


从 上 面 的 代码 可 以 看 到 ， 我 们 为 一 个 名 为 "city 的 树 形 下 拉 框 (ComboTree) 字段 
设置 了 一 个 url 属性 ， 这 个 字段 可 以 从 远程 服务 器 检索 树 形 结构 (Tree) 数据 。 请 
注意 ， 这 个 字段 有 一 个 样式 名 字 叫 'easyui-combotree'， 所 以 我 们 不 需要 写 任 何 的 
js 代码 ， 树 形 下 拉 框 (ComboTree) 字段 将 自动 泻 染 。 






FA jQuery EasyUl 实例 


jeasyui-form-form2.zip 


jQuery EasyUl 表单 - 格式 化 下 拉 框 


本 教程 向 您 展示 如 何 创建 一 个 简单 的 下 拉 框 (Combobox) ， 让 它 在 下 拉 框 中 显示 
图 片 项 。 您 可 以 在 下 拉 框 (combobox) 上 使 用 formatter RAK d& ie BD eT 4b 


每 一 个 条 目 。 





创建 图 像 下拉 框 (Combobox) 


<input id="cc" style="width:100px" 
url="data/combobox_data.json" 


valueField="id" textField="text"> 
</input> 


$('#cc' ).combobox( { 
formatter: function(row) { 
var imageFile = 'images/' + row.icon; 
return '«img class="item-img" src="'+imageFilet+'"/><spé 






下 载 jQuery EasyUl 实例 


jeasyui-form-form4.zip 


jQuery EasyUl 表单 - 过 滤 下 拉 数 据 网 格 


下 拉 数 据 网 格 (Combogrid) 组 件 和 下 拉 框 (Combobox) 组 件 的 共同 点 是 ， 除 了 
都 具有 下 拉面 板 以 外 ， 它 们 都 是 基于 数据 网 格 (Datagrid) 的 。 下 拉 数 据 网 格 

(Combogrid) 组 件 可 以 过 滤 、 分 页 ， 并 具有 其 他 一 些 数 据 网 格 (Datagrid) 的 功 
能 。 本 教程 向 您 展示 如 何在 一 个 下 拉 数 据 网 格 (Combogrid) 组 件 中 过 滤 数 据 记 


录 。 
Kg| 
Item ID 


EST-10 


Product ID 
K9-DL-01 
K9-RT-02 
K9-RT-02 
K8-RT-02 
K9-RT-02 
K9-CW-01 
K9-CW-01 


K9-RT-01 


List Price Unit Cost Attribute Stauts 
18. 50 12.00 Spotted Adult Female P 全 
135. 50 100.00 Adult Male P 
145. 48 100.00 Adult Female P 3 
255. 50 82.00 Adult Male P 
325. 29 90.00 Adult Fezale P 
125. 50 92.00 Adult Male P 
155. 29 90.00 Adult Female P 
155. 29 90.00 Adult Female P - 


创建 下 拉 数 据 网 格 (Combogrid) 


<input id="cg" style="width:150px"> 


$('#cg').combogrid({ 
panelwidth:500, 

url: 'form5_getdata.php', 
idField:'itemid', 


3); 


'productid', 
:true, 


:'itemid',title:'Item ID',width:60}, 
:'productid',title:'Product ID',align:'right',width:t 
:'listprice',title:'List Price',align:'right',width:t 
:'unitcost', title: 'Unit Cost',align: 'right',width:60_ 
:'attri', title: 'Attribute',width:150}, 

:'status', title: 'Stauts',align: 'center',width:60} 


textField: 
mode: 'remote', 
fitColumns 
columns:[[ 
(field 
(field 
(field 
(field 
(field 
(field 
]] 








下 拉 数 据 网 格 (Combogrid) 组 件 应 该 定义 'idField' 和 'textField' 属性 。 'idField' 属 
性 存储 组 件 值 ，'textField' 属性 在 input 文本 框 中 显示 文本 消息 。 下 拉 数 据 网 格 
(Combogrid) 组 件 可 以 以 ‘local’ 或 remote' 模式 过 滤 记 录 。 在 远程 (remote) 模 
式 中 ， 当 用 户 输入 字符 到 input 文本 框 中 ， 下 拉 数 据 网 格 (Combogrid) 将 发 送 'q' 
参数 到 远程 服务 器 。 


服务 器 端 代 码 


form5 getdata.php 


$q = isset($ POST['q']) ? strval($ POST['q']) : ''; 
include 'conn.php'; 
$rs = mysql query("select * from item where itemid like '%$q%' or [ 
$rows - array(); 
while($row = mysql fetch assoc($rs))( 
$rows[] = $row; 


echo json encode($rows); 


K — B 





FA jQuery EasyUl 实例 


jeasyui-form-form5.zip 


jQuery EasyUl 插件 


jQuery EasyUl 提供 了 用 于 创建 跨 浏览 器 网 页 的 完整 的 组 件 集合 ， 包括 功能 强大 的 
datagrid (数据 网 格 ) 、treegrid ( 树 形 表格 ) 、 panel (面板 ) 、combo (下 拉 组 
€) 等 等 。 用 户 可 以 组 合 使 用 这 些 组 件 ， 也 可 以 单独 使 用 其 中 一 个 。 


插件 列表 


Base (基础 ) 


Parser 解析 器 
Easyloader 加 载 器 
Draggable 可 拖 动 
Droppable 可 放置 
Resizable 可 调整 尺寸 
Pagination 分 页 
Searchbox 搜索 框 
Progressbar 进度 条 
Tooltip 提示 框 


Layout (布局 ) 


e Panel 面板 
e Tabs 标签 页 /选项 卡 
e Accordion #1 4 Him 
e Layout 布局 


Menu (菜单 ) 5 Button (按钮 ) 


Menu 菜单 
Linkbutton 链接 按钮 
Menubutton 菜单 按钮 
Splitbutton 分 割 按钮 


Form (表单 ) 


Form 表单 
Validatebox 验证 框 
Combo 组 合 
Combobox 组 合 框 
Combotree 组 合 树 
Combogrid 组 合 网 格 
Numberbox 数字 框 


Datebox 日 期 杠 
Datetimebox 日 期 时 间 框 
Calendar H % 

Spinner 微调 器 
Numberspinner 数值 微调 器 
Timespinner 时 间 微 调 器 
Slider 滑 块 


Window (窗口 ) 


e Window 窗口 
e Dialog 对 话 框 
e Messager 消息 框 


DataGrid (数据 网 格 ) 与 Tree (ix) 


Datagrid 数据 网 格 
Propertygrid 属性 网 格 
Tree 树 

Treegrid 树 形 网 格 


插件 


easyui 的 每 个 组 件 都 有 属性 、 方 法 和 事件 。 用 户 可 以 很 容易 地 对 这 些 组 件 进 行 扩 
属性 

属性 是 定义 在 jQuery.fn.{plugin}.defaults。 上 比如 ，dialog 的 属性 是 定义 在 
jQuery.fn.dialog.defaults。 


事件 


事件 (回调 函数 ) 也 是 定义 在 jQuery.fn.{plugin}.defaults。 


方法 

调用 方法 的 语法 : $(‘selector’).plugin(‘method', parameter); 
其 中 : 

selector 是 jquery 对 象 选择 器 。 

plugin 是 插件 名 称 。 


method 是 与 插件 相 匹 配 的 已 存在 方法 。 
parameter 是 参数 对 象 ， 可 以 是 对 象 、 字 符 串 .… 


方法 是 定义 在 jQuery.fn.{plugin}.methods。 每 个 方法 有 两 个 参数 jq 和 param。 第 
一 个 参数 'jq 是 必需 的 ， 引 用 jQuery 对 象 。 第 二 个 参数 'param' 引用 方法 传递 的 实 
际 参 数 。 比 如 ， 要 扩展 dialog 组 件 的 方法 名 为 'mymove' 的 方法 ， 代 码 如 下 : 


$.extend($.fn.dialog.methods, { 
mymove: function(jq, newposition) { 
return jq.each(function(){ 
$(this).dialog('move', newposition); 


3): 


现在 您 可 以 调用 'mymove' 方法 来 移动 对 话 框 (dialog) 到 指定 的 位 置 : 


$('#dd').dialog('mymove', { 


left: 200, 
top: 100 
3): 
开始 使 用 jQuery EasyUl 


下 载 库 ， 并 在 您 的 页 面 中 引用 EasyUI CSS 和 JavaScript 文件 。 


&lt;link rel="stylesheet" type="text/css" href="easyui/themes/defat 
&lt; link rel="stylesheet" type="text/css" href="easyui/themes/icon 
&lt;script type="text/javascript" src="easyui/jquery-1.7.2.min.js"é 
&lt;script type="text/javascript" src="easyui/jquery.easyui.min.js' 


Kim ET 
一 旦 您 引用 了 EasyUl 必要 的 文件 ， 您 就 可 以 通过 标记 或 者 使 用 JavaScript 来 定义 


一 个 EasyUl 组 件 。 比 如 ， 要 项 一 个 带 有 可 折 和 有 登 功能 的 面板 ， 您 需要 编写 如 下 
HTML 代码 : 





&lt;div id="p" class="easyui-panel" style="width: 500px; height :200p) 
title="My Panel" iconCls="icon-save" collapsible="true"&gt; 
The panel content 

&lt;/div&gt; 


BEEN 


当 通 过 标记 创建 组 件 ，'data-options' 属性 被 用 来 支持 自 版 本 1.3 以 来 HTML5 兼容 
的 属性 名 称 。 所 以 您 可 以 如 下 重 宇 上 面 的 代码 : 





&lt;div id="p" class="easyui-panel" style="width: 500px; height : 200p) 
title-"My Panel" data-options="iconCls: 'icon-save',collapsible 
The panel content 

&lt;/div&gt; 


‘| ES 
下 面 的 代码 演示 了 如 何 创建 一 个 绑 定 'onSelect' 事件 的 组 合 框 。 








&lt;input class="easyui-combobox" name="language" 
data-options=" 
url: 'combobox_data.json', 
valueField:'id', 
textField:'text', 
panelHeight:'auto', 
onSelect:function(record)( 
alert(record.text) 


j'&gt; 
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jQuery EasyUl 扩展 
Portal (制作 图 表 、 列 表 、 球 形 图 等 ) 
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数据 网 格 视 图 (DataGrid View) 
| DataGrid — DetailView 
Iten ID ‘(Product ID List Price Unit Cost Attribute iStatus | 
da EST-1 FI-SW-01 16.5 10 Large P 
» vx Spotted Adult 
dh EST-2 K8-DL-01 18.5 12 Female P 
dh EST-3 RP-SN-01 18.5 12 Venomless P 


Attribute: Rattleless 
i Status: P 


qn :EST-5 RP-LI-02 18.5 12 Green Adult 
| Ab RST-R FT EEH. SA5 12 Taillacc 


DataGrid 一 Group¥iew 








有 ID DE Price i Unit Cost "mE i Status " 


= K9-DL-01 - 1 Item(s) 

| 2 K9-DL-01 18.5 12 Spotted Adult Female P 
= RP-SH-01 - 2 Item(s) 

€ 

4 RP-SH-O1 18.5 12 Rattleless P 
ap RP-LI-02 - 1 Item(s) 


= FL-DSH-01 - 2 Item(s) 





6 FL-DSH-01 58.5 12 Tailless P 


可 编辑 的 数据 网 格 (Editable DataGrid) 


jQuery EasyUl 扩展 


^ 
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Editable DataGrid 








EST-2 K9-DL-01 18.5 12 Spotted Adult Fezale 





EST-5 RP-LI-02 18.5 12 Green Adult 





EST-6 FL-DSH-01 58.5 12 Tailless 
EST-7 FL-DSH-01 23.5 12 With tail 
EST-8 FL-DLH-02 93.5 12 Adult Fezale 


Item ID Froduct ID List Frice Unit Cost Attribute 
EST-1 F1-SW-01 16.5 10 Large ^ 





可 编辑 的 树 (Editable Tree) 


4 Foods 
b (Fruits 
4 E Vegetables 
B tomato 
B carrot 
D eeel 
potato 


B lettuce 


数据 网 格 行 过 滤 (DataGrid Filter Row) 














数据 网 格 行 拖 放 (Drag and Drop Rows in DataGrid) 


jQuery EasyUl 扩展 


DataGrid 
Item ID Product List Price Unit Cost Attribute 

var] 一 
EST-1 FI-SW-01 3 No Filter P 
EST-10 K9-DL-01 1 | Equal A Adult Female P 
EST-11 RP-SN-01 z | Not Equal less P 
EST-12 RP-SN-01 Bs nome "ss P 

: : | Greater | 

EST-13 RP-LI-02 deemed hae P 
EST-15 FL-DSH-01 $3.5 12 With tail P 
EST-16 FL-DLH-02 23.5 12 Adult Female P 
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DataGrid 

Item ID Product List Price Unit Cost Attribute Status 

EST-1 FLSW-01 365 10 Large P E 
EST-10 K9-DL-01 18.5 12 Spotted Adult Female P 

EST-11 RP-SN-01 38.5 12 Venomless P 

EST-12 RP-SN-01 26.5 12 Rattleless P - 
ETB SETA RP-SN-01 38.5 12 Venomless P 
EST-14 FL-DSH-01 158.5 12 Tailless Lg 
EST-15 FL-DSH-01 83.5 12 With tail 

EST-16 — FLDLHOO 23.5 12 Adult Female - 











主题 (Themes) 





Name Size Modified Date 
1 «Qc 02/19/2010 
2 4 Program Files 120MB 03202010 
3 b 01/13/2010 
6 4 MySQL [Y iny-hoge ini 01/13/2010 
7 S) my ini 10KB 02262009 
8 [E] my-huge ini 5 KB 02262009 
9 my-large ini 5KB 02/26/2009 
10 eclipse ini 1KB 04202010 
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2 ith ne! aL. I H8) ki “Ss V lane 2] a Creer: 
= ma ne: S 2 ESt-10 Dalaatice 13.5 E spotted | | re 
= — ^ odd 3 257-11 Rattlesnake 23 = E pues, 
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define your accordica n 
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Titles ? va pe— — - - J 
DWR 加 载 器 (DWR Loader) 
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DWR 


RTL 支持 (RTL support) 


















Main Title y East 
_ My Documents & & | 
DataGrid About 
| Photos © 4 
Status 





Attribute Unit Cost ListPrice ProductID — Item ID 
content2 m P 















































Intel E 
Large 10 365  FI-SW-01 EST-1 Java B 
P  otted Adult Female 12 18.5  K9-DL-01 EST-10 Microsoft Office [=) 
index.html {=} 
P Rattleless 12 26.5 RP-SN-01 EST-12 about html 国 
P Green Adult 12 355 RP-LI-O2 EST-13 welcome.html [E 
P Tailless 12 158.5 FL-DSH-01  EST-14 
Y Title3 - 
Ribbon 
| Home | Insert | 
B of Cut Arial v [12 v| A 4 322282 dGrFmu- 
[^3 Copy 2 -i i 
Paste =) COPY Biz v x x = i= dÀ Find 
v % Format As A a. => Goto... 
Clipboard Font 





Paragraph Editing 
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W3School Highcharts 教程 


作者 : W3School 
来 源 : Highcharts 教程 


Highcharts 简介 





Highcharts 是 一 个 用 纯 JavaScript 编 写 的 一 个 图 表 库 。 
Highcharts 能 够 很 简单 便捷 的 在 web 网 站 或 是 web 应 用 程序 添加 有 交互 性 的 图 表 
Highcharts 免费 提供 给 个 人 学 习 、 个 人 网 站 和 非 商业 用 途 使 用 。 


HighCharts 特性 


兼容 性 - 支持 所 有 主流 浏览 器 和 移动 平台 (android、iOS 等 ) 。 
多 设备 - 支持 多 种 设备 ， 如 手持 设备 iPhone/iPad、 平 板 等 。 
免费 使 用 - 开源 免费 。 

轻 量 - highcharts.js 内 核 库 大 小 只 有 35KB 左右 。 

配置 简单 - 使 用 json 格式 配置 

动态 - 可 以 在 图 表 生 成 后 修改 。 

多 维 - 支持 多 维 图 表 

配置 提示 工具 - 鼠标 移动 到 图 表 的 某 一 点 上 有 提示 信息 。 

时 间 轴 - 可 以 精确 到 毫秒 。 

导出 - 表格 可 导出 为 PDF/ PNG/ JPG / SVG 格式 

输出 - 网 页 输出 图 表 。 

可 变焦 - 选中 图 表 部 分 放大 ， 近 距离 观察 图 表 ; 

外 部 数据 - 从 服务 器 载 人 动态 数据 。 

文字 旋转 - 支持 在 任意 方向 的 标签 旋转 。 


文 持 的 图 表 类 型 


HighCharts 支 持 的 图 表 类 型 : 


it 
al 
= 
Eu 
Bk 
| 


曲线 图 
区 域 图 
ot A 
散 点 图 
气泡 图 
动态 图 表 
组 合 图 表 
3D 图 
测量 图 


热点 图 


o OA N O a A ODN 


eo 


11 树 状 图 (Treemap) 


接 下 来 几 个 章节 我 们 讲 为 大 家 具体 介绍 Highcharts 的 使 用 。 


Highcharts 环境 配置 


本 章节 我 们 将 为 大 家 介绍 如 何在 网 页 中 使 用 Highcharts。 
Highcharts 依赖 于 jQuery， 所 以 在 加 载 Highcharts 前 必须 先 加 载 jQuery 库 。 
如 果 你 对 jQuery 不 熟悉 ， 可 以 参阅 本 站 的 jQuery 教程 。 


zx jQuery 


jQuery 安装 可 以 使 用 以 下 两 种 方式 : 


e 1、 访 问 jquery.com 下 载 jQuery 包 。 
e 2、 使 用 百度 静态 资源 库 (http://cdn.code.baidu.com/) 的 jQuery 资源 : 
**http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js** 


使 用 下 载 的 方式 
使 用 下 载 的 方式 ， 在 HTML 页 面 引 入 jQuery a: 


<head> «script src="/jquery/jquery.min.js"></script> </head> 


使 用 CDN (推荐 ) 
使 用 百度 静态 资源 库 来 加 载 jQuery 库 : 


<head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquei 


Ness==== = 





安装 Highcharts 


Highcharts 安装 可 以 使 用 以 下 两 种 方式 : 


e 1、 访 问 highcharts.com 下 载 Highcharts 包 。 
e 2、 使 用 官方 提供 的 CDN 地 址 : http://code.highcharts.com/highcharts.js 


使 用 下 载 的 方式 (推荐 ) 
使 用 下 载 的 方式 ， 在 HTML 页 面 引 入 Highcharts 代码 : 


<head> <script src="/highcharts/highcharts.js"></script>  «/head: 


4| _ — BEER 


使 用 CDN 
使 用 官方 提供 的 CDN 地 址 : 











«head» <script src="http://code.highcharts.com/highcharts.js"></: 


‘| 








Highcharts 配置 语法 
本 章节 我 们 将 为 大 家 介绍 使 用 Highcharts 生成 图 表 的 一 些 配置 。 


第 一 步 : 创建 HTML 页 面 
创建 一 个 HTML 页面， 引入 jQuery 和 Highcharts X : 
文件 名 : HighchartsTest.htm 


<html> 

<head> 

<title>Highcharts Af | #4 Afe</title> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.mir 
<script src="/try/demo_source/highcharts.js"></script> 

</head> 

<body> 

«div id="container" style="width: 550px; height: 400px; margin: 0 : 

<script language="JavaScript"> 

$(document).ready(function() { 


3); 
«/script» 
</body> 
</html> 


" NEM 
实例 中 id 为 container 的 div 用 于 包含 Highcharts 绘制 的 图 表 。 
第 二 步 : 创建 配置 文件 

Highcharts 库 使 用 json 格式 来 配置 。 





$('#container').highcharts(json); 


这 里 json 表示 使 用 json 数据 格式 和 json 格式 的 配置 来 绘制 图 表 。 步 又 如 下 : 


标题 


为 图 表 配 置 标题 : 


var title = { 
text: ' 月 平均 气温 ' 


jp 
副标题 
为 图 表 配 置 副 标题 : 


var subtitle = { 
text: 'Source: runoob.com' 
}; 


X 轴 


配置 要 在 X 轴 显 示 的 项 。 


var xAxis = { 
categories Ale eee a = fe eRe ea Uae Eu! 
SEM NAET Mo zu dam zie epo a = RT 
3 


X ih 
配置 要 在 Y 轴 显 示 的 项 。 
var yAxis = { 


title: { 
text: 'Temperature (NxBOC)' 


3 
plotLines: [{ 
value: 0, 
width: 1, 
color: '#808080' 
}] 


var tooltip = { 
valueSuffix: '\xBOC' 


} 


展示 方式 
配置 图 表 向 右 对 齐 : 


var legend = { 
layout: 'vertical', 
align: 'right', 
verticalAlign: 'middle', 
borderwidth: 0 


3 
数据 
配置 图 表 要 展示 的 数据 。 每 个 系列 是 个 数组 ， 每 一 项 在 图 片 中 都 会 生成 一 条 曲线 。 
var series = [ 
{ 


name: 'Tokyo', 
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 
26.5, 23.3, 18.3, 13.9, 9.6] 


}, 
{ 
name: 'New York', 
data 0:270 8 5:013 17205722:02224-8. 
2451720 T 14-1 Bab, $2:35] 
}, 
{ 
name: 'Berlin', 
datas. [079.5056 375, 5:84 11375. 1770, 19:0; 
1729, 14:3, 9:0, 9:9, 1-0] 
3 
{ 
name: 'London', 
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
16.6, 14.2, 10.3, 6.6, 4.8] 
} 


第 三 步 : 创建 json 数据 


var json = {}; 


json.title = title; 

json.subtitle = subtitle; 
json.xAxis = xAxis; 

json.yAxis - yAxis; 

json.tooltip - tooltip; 
json.legend legend; 

json.series series; 

Step 4: Draw the chart 
$('#container').highcharts(json); 


实例 
以 下 为 完整 的 实例 (HighchartsTest.htm) : 


«html» 
«head» 
<title>Highcharts Tutorial</title> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min 
<script src="/try/demo_source/highcharts.js"></script> 
</head> 
<body> 
«div id="container" style="width: 550px; height: 400px; margin: 0 : 
«script language="JavaScript"> 
$(document).ready(function() { 
var title = { 
text: ' 月 平均 气温 ' 
}; 
var subtitle = { 
text: 'Source: runoob.com' 
3 
var xAxis - ( 
categories: [' 一 月 '，' 二 月 '，' 三 月 '，' 四 月 '，' 五 月 ',，，' 
sj LN Eja oan ss voles bep ESSE Dg z 


u 
var yAxis - ( 
title: { 
text: 'Temperature (NxBOC)' 
}, 
plotLines: [{ 
value: 0, 
width: 4, 
color: '#808080' 
}] 
a 


var tooltip = { 
valueSuffix: '\xBOC' 
} 


var legend = { 
layout: 'vertical', 
align: 'right', 
verticalAlign: 'middle', 
borderWidth: 0 


u 
var series - [ 
{ 
name: 'Tokyo', 
datar [7-0) 6.9, Or 14754 15.25 21.5 2512, 
2025; 23:2. 18:3. 19:9 9:6] 
}, 
{ 
name: 'New York', 
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
24.1, 20.1, 14.1, 8.6, 2.5] 
}, 
{ 
name: 'Berlin', 
Gata: [0207 0:0 73 5 SB. T1 oer cO hao, 
11:9 14-23. 9.07 32.9, 1:0] 
i 
{ 
name: 'London', 
data: [3:9 4.2, 057855 1129, 1522, 17.0) 
16:6, 14.2, 1023, 6.6, 4-8] 
} 


l; 
var json = (Y; 


json.title = title; 
json.subtitle = subtitle; 
json.xAxis = xAxis; 
json.yAxis - yAxis; 
json.tooltip - tooltip; 
json.legend legend; 
json.series series; 


$('#container').highcharts(json); 


3); 
«/script» 
«/body» 
«/html» 


[sums 
以 上 实例 输出 结果 为 : 
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Highcharts 配置 语法 3309 


Highcharts 配置 选项 详细 说 明 


Highcharts 提供 大 量 的 配置 选项 参数 ， 您 可 以 轻松 定制 符合 用 户 要 求 的 图 表 ， 本 章 
节 为 大 家 详细 介绍 Highcharts 配置 选项 使 用 说 明 : 


参数 配置 (属性 + 事件 ) 


1. chart.events.addSeries : 添加 数列 到 图 表 中 。 

2. chart.events.click : 整个 图 表 的 绘图 区 上 所 发 生 的 点 击 事件 。 

3. chart.events.load : 图 表 加 载 事件 。 

4. chart.events.redraw : 图 表 重 画 事 件 ， 当 点 击 图 注 显 示 和 隐藏 绘图 时 可 以 触 
发 。 

. chart.events.selection : 当 图 表 曲 线 可 选择 放大 时 ， 当 选择 图 表 操 作 时 ， 可 以 
触发 该 事件 。 

6. chart.height : 所 绘制 图 表 的 高 度 值 。 

7. chartinverted : 图 表 中 的 x，y 轴 对 换 。 

8. chart.polar : 是 否 为 极 性 图 表 。 

9. chart.reflow : 当 窗口 大 小 改变 时 ， 图 表 宽 度 自 适 应 窗口 大 小 改变 。 

10. chart.renderTo : 图 表 加 载 的 位 置 ， 是 页 面 上 的 一 个 DOM 对 象 。 

11. chart.showAxes : 在 空白 图 表 中 ， 是 否 显示 坐标 轴 。 

12. charttype : 图 表 的 类 型 ， 默 认为 line， 还 有 barcolumn/pie..…….. 

13. chart.width : 图 表 绘 图 区 的 宽度 ， 默 认为 自 适应 。 


14. chart.zoomType : 图 表 中 数据 报表 的 放大 类 型 ， 可 以 以 X 轴 放大 ， 或 是 以 Y 轨 
放大 ， 还 可 以 以 XY 轴 同时 放大 。 


15. colors: 图 表 中 多 数列 时 ， 各 数列 之 间 的 颜色 。 是 一 个 数组 ， 一 般 不 动 。 
16. credits.enabled : 是 否 允 许 显示 版 权 信 息 。 
17. credits.href : 版 权 所 有 的 链接 。 


18. credits.text : 版 权 信 息 显 示 文 字 。 


Ol 


19. exporting.buttons.exportButton.enabled : 是 否 人 允许 显示 导出 按钮 。 
20. exporting.buttons.exportButton.menultems : 导出 按钮 的 菜单 选项 。 


21. 


22. 
23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 
31. 
32. 
33. 
34. 
35. 
36. 


37. 


38. 
39. 
40. 
41. 


42. 
43. 
44. 
45. 


46. 


exporting.buttons.exportButton.onclick : 导出 按钮 被 点 击 的 事件 ， 不 是 内 部 的 
菜单 。 


exporting.buttons.printButton.enabled : 是 否 允 许 打印 按钮 。 
exporting.buttons.printButton.onclick : 打印 按钮 的 点 击 事件 。 
exporting.enabled : 打印 和 导出 按钮 是 否 被 允许 。 

exporting.filename : 被 导出 文件 的 文件 名 。 

exporting.type : 默认 导出 图 片 的 文件 格式 。 

exporting.url : SVG 图 表 转 换 并 导出 的 接口 处 理 地 址 。 

exporing.width : 默认 导出 图 片 的 宽度 。 

labels : 标签 ， 可 以 加 载 到 图 表 的 任何 位 置 ， 里 面 有 items，style。 

lang : 语言 参数 配置 ， 与 导出 按钮 菜单 有 天 的 配置 ， 时 间 名 称 的 配置 等 。 
legend.enabled : 是 否 人 允许 图 注 。 

navigation.buttonOptions.enabled : 图 表 中 所 有 导航 中 的 按钮 是 否 可 被 点 击 。 
plotOptions.area.allowPointSelect : 是 否 允 许 数据 点 的 点 击 。 
plotOptions.area.color : 绘图 的 颜色 。 
plotOptions.area.dataLabels.enabled : 是 否 允 许 数据 标签 。 


plotOptions.area.enableMouseTracking : 是 否 允 许 数 据 图 表 中 ， 数 据点 的 鼠 
标 跟踪 气泡 显示 。 


plotOptions.area.events.checkboxClick : 数据 图 表 中 图 注 中 复 选 框 的 点 击 事 
件 。 


plotOptions.area.events.click : 数据 图 表 中 ， 数 据点 的 点 击 事件 。 
plotOptions.area.events.hide : 数据 图 表 中 ， 某 一 数据 序列 隐藏 时 的 事件 。 
plotOptions.area.events.show : 数据 图 表 中 ， 某 一 数据 序列 显示 时 的 事件 。 


plotOptions.area.events.legendltemClick : 数据 图 表 中 ， 图 注 中 的 项 目 被 点 击 
时 的 事件 ， 直 接 赋 值 false， 则 不 可 点 击 。 


plotOptions.area.events.mouseOut : 数据 点 的 鼠标 移出 事件 。 
plotOptions.area.events.mouseOver : 数据 点 的 鼠标 经 过 事件 。 
plotOptions.area.markerenabled : 图 表 中 绘图 中 是 否 显示 点 的 标记 符 。 


plotOptions.area.marker.states.hover.enabled : 是 否 人 允许 标记 符 的 鼠标 经 过 状 
A 


ANO 


plotOptions.area.marker.states.select.enabled : 是 否 允 许 标记 符 的 选择 状态 。 


47. 
48. 
49. 
50. 
51. 
52. 
53. 
54. 
55. 
56. 


57. 
58. 
59. 
60. 
61. 


62. 
63. 
64. 
65. 
66. 


67. 
68. 
69. 


70. 
71. 


plotOptions.area.point.events.click : 图 表 中 每 一 个 单独 的 点 点 击 事件 。 
plotOptions.area.point.events.mouseOut 
plotOptions.area.point.events..mouseOver 
plotOptions.area.point.events.remove : 删除 图 表 中 的 点 时 的 事件 。 
plotOptions.area.point.events.select : 图 表 中 点 选择 事件 。 
plotOptions.area.point.events.unselect : 图 表 中 点 取消 选择 时 的 事件 。 
plotOptions.area.point.events.update : 图 表 中 数据 发 生 更 新 时 的 事件 。 
plotOptions.area.visible : 加 载 时 ， 数 据 序列 默认 是 显示 还 是 隐藏 。 
plotOptions.area.zlndex : 在 多 序列 的 情况 下 ， 调 整 每 一 个 序列 的 层 受 顺序 。 


以 上 的 point.events 同 样 还 适用 于 其 他 面积 类 图 表 (arearange、areaspline、 
areasplinerange) ， 其 他 的 柱状 图 (bar、column) 及 所 有 图 表 。 


plotOptions.area.showInLegend : 是 否 在 图 注 中 显示 。 
plotOptions.area.stacking : 是 以 值 堆 重 ， 还 是 以 百分比 堆 壹 。 
plotOptions.area.states.hover.enabled : 鼠标 放 上 的 状态 是 否 允 许 。 
plotOptions.area.stickyTracking : 鼠标 粘性 跟踪 数据 点 。 


plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange 
X [A] FplotOptions.area 


plotOptions.bar.groupPadding : 对 于 柱状 图 分 组 ， 每 个 分 组 之 间 的 间隔 。 
plotOptions.bar.grouping : 是 否 对 数据 进行 分 组 。 
plotOptions.bar.minPointLength: : 定义 当 point 值 为 需 时 ， 点 的 最 小 长 度 为 多 少 
plotOptions.bar.showInLegend : 是 否 在 图 注 中 显示 。 


plotOptions.bar.stacking : 是 以 值 堆 登 ， 还 是 以 百分比 堆肥 
(normal/percent) 。 


plotOptions.column，plotOptions.columnrange 类 同 于 plotOptions.bar 
plotOptions.line 的 相关 配置 类 似 于 plotOptions.area 配 置 。 


plotOptions.pie.ignoreHiddenPoint : 在 饼 状 图 中 ， 某 一 个 序列 经 图 注 点 击 隐藏 
后 ， 整 个 饼 状 图 是 重新 以 100% 分 配 ， 还 是 只 在 原 图 基础 上 隐藏 ， 呈 现 一 个 缺 
口 。 

plotOptions.pie.innerSize : 绘制 饼 状 图 时 ， 饼 状 图 的 圆心 预 留 多 大 的 空白 。 


plotOptions.pie.slicedOffset : 与 allowPointSelect 结 合 使 用 ， 当 点 被 点 击 时 ， 
对 应 的 忆 区 剥离 ， 这 个 参数 即 配置 离开 的 距离 。 
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plotOptions.pie 的 其 他 常用 配置 参数 类 同 于 
plotOptions.area,plotOptions.scatter, plotOptions.series, plotOptions.spline 
的 相关 配置 类 似 于 plotOptions.area 配 置 。 


series : 是 一 个 数组 。 

series.data.color : 某 一 个 数据 的 颜色 。 

series.data.dataLabels : 序列 中 某 一 个 数据 的 数据 标签 。 
series.data.events 类 同 于 plotOptions.area.point.events 的 相关 配置 。 
series.data.marker 类 同 于 plotOptions.area.marker 的 相关 配置 。 
series.data.name : 配置 数据 点 的 名 称 。 

series.data.sliced : 配置 在 饼 图 中 ， 旋 区 的 分 离 距离 大 小 。 
series.data.x : 点 的 x 值 。 

series.data.y : 点 的 y 值 。 

series.name : 数据 序列 的 名 称 。 

series.stack : HE & 854328 S88. 

series.type : 数据 序列 的 展示 类 型 。 


series.xAxis, series.yAxis : 当 使 用 多 坐标 轴 时 ， 指 定 某 个 数列 对 应 哪个 坐标 
轴 。 


subtitle : 配置 图 表 的 子 标题 。 

title : 配置 图 表 的 标题 。 

tooltip : 配置 图 表 中 数据 的 气泡 提示 。 
tooltip.valueDecimals : 允许 的 小 数 点 位 数 。 
tooltip.percentageDecimals : 允许 百分比 的 小 数 点 后 位 数 。 
xAxis，yAxis 配 置 设置 坐标 轴 
allowDecimals : 坐标 轴 上 是 否 人 允许 小 数 。 
categories : 是 一 个 数组 ， 坐 标 轴 的 分 类 。 
plotLines : 绘制 主线 。 

tickColor : 刻度 颜色 。 

ticklnterval : 刻度 的 步 进 值 。 

labels.rotation : 刻度 标签 旋转 度数 


Chart : 图 表 区 选项 


Chart 图 表 区 选 
参数 


backgroundColor 
borderWidth 


borderRadius 


renderTo 


defaultSeriesType 


width 
height 


margin 
plotBackgroundColor 


plotBorderColor 
plotBorderWidth 


shadow 
reflow 


zoomType 


events 


Color : 颜色 选 


Colorzr fà 3t 


项 用 于 设 


项 


项 用 于 设置 


I 


、 


置 图 表 区 相关 属性 。 


ip 


iE 


图 表 区 背景 

设置 图 表 边 框 宽度 

设置 图 表 边 框 圆 角 角度 

图 表 放 置 的 容器 ， 一 般 在 html 中 放置 一 
DIV， 获 取 DIV 的 id 属性 值 
默认 图 表 类 型 line, spline, area, 

areaspline, column, bar, pie , scatter 

图 表 宽 度 ， 默 认 根 据 图 表 容 器 自 适 应 宽度 
图 表 高 度 ， 默 认 根 据 图 表 容 器 自 适 应 高 度 
置 图 表 和 与 其 他 元 素 之 间 的 间距 ， 数 组 ， 
如 [0,0,0,0] 

主 图 表 区 背景 色 ， 即 X 轴 和 与 Y 轴 围 成 的 区 

域 的 背景 

主 图 表 区 边框 的 颜色 ， 即 X 轩 与 Y 轴 围 成 
的 区 域 的 边框 颜色 

主 图 表 区 边框 的 宽度 


是 否 设 置 阴 影 ， 需 要 设置 
backgroundColor。 


是 否 自 使 用 图 表 区 域 高 度 和 宽度 ， 如 果 没 
有 设置 width 和 height 时 ， 会 自 适 应 大 小 。 


拖 动 鼠标 进行 缩放 ， 治 x 轴 或 y 轴 进行 缩 


放 ， 可 以 设置 为 : x','y','xy' 


事件 回调 ， 支 持 addSeries 方 法 ，click 方 
法 ，load 方 法 ，selection 方 法 等 的 回调 函 
数 。 


设 


iB 
iB 


ab eS 
F3 s 


图 表 的 颜色 方案 


默认 值 
HFFFFFF 


参数 描述 默认 值 
colo ， 用 于 展示 图 表 ， 折 线 /柱状 / 饼 状 等 图 的 颜色 ， 数 组 形式 。 array 


Highcharts 已 经 默认 提供 了 多 种 颜色 方案 ， 当 要 显示 的 图 形 多 于 颜色 种 类 时 ， 多 出 
的 图 形 会 自动 从 第 一 种 颜色 方案 开始 选取 。 自 定义 颜色 方案 的 方法 : 


Highcharts.setOptions({ 
colors: ['#058DC7', '#50B432', '#ED561B', '4ZDDDF0O', '#24CBE5', 
'#FFF263', '#6AF9C4' ] 


} ) / 
4 oa s 
eee eee eee ee ee ee ee ee ee ee ee eee eee eee eee ee ee 





Title : 标题 选项 


Title 标 题 选 项 用 于 设置 图 表 的 标题 相关 属性 。 


参数 描述 默认 值 
text 标题 文本 内 容 。 Chart title 
align 水 平 对 齐 方式 。 center 
verticalAlign ”垂直 对 齐 方式 。 top 
margin 标题 与 副标题 之 间或 者 主 图 表 区 间 的 间距 。 15 

是 否 浮动 ， 如 果 为 true， 则 标题 可 以 偏离 主 图 表 
naan 区 ， 可 配合 xy 属性 使 用 。 re 

A oars {color: 
style 设置 CSS 样 式 。 '#3E576F', 


fontSize: '16px | 


Subtitle : 副标题 选项 


副标题 提供 的 属性 选项 与 标题 tile 大 致 相同 ， 可 参照 上 述 标题 选项 ， 值 得 一 提 的 是 
副标题 的 text 选 项 默认 为 "” 即 空 的 ， 所 以 默认 情况 下 副标题 不 显示 。 


xAxis : X 轴 选项 


X 轴 选项 用 于 设置 图 表 X 轴 相关 属性 。 


参数 描述 默认 值 
设置 X 轴 分 类 名 称 ， 数 组 ， 例 如 : categories: 
9 l'Apples', 'Bananas', 'Oranges'] ] 
title X 轴 名 称 ， 支 持 text、enabled、align、rotation、 
style 等 属性 
设置 X 轴 各 分 类 名 称 的 样式 style， 格 式 
labels formatter， 角 度 rotation 等 。 iud 
— X 轴 最 大 值 (categories 为 空 时 )， 如 果 为 null， 则 nl 
最 大 值 会 根据 X 轴 数据 自动 匹配 一 个 最 大 值 。 
TS X 轴 最 小 值 (categories 为 空 时 )， 如 果 为 null， 则 m 
最 小 值 会 根据 X 轴 数据 自动 匹配 一 个 最 小 值 。 
gridLineColor PAA (2X) 颜色 #COCOCO 
gridLineWidth ”网 格 ( 坚 线 ) 宽 度 1 
lineColor 基线 颜色 #CODOEO 
lineWidth 基线 宽度 0 
yAxis : Y 轴 选项 
Y 轴 选项 与 上 述 xAxis 选 项 基本 一 致 ， 请 参照 上 表 中 的 参数 设置 ， 不 再 单独 列 出 。 


Series 


: 数据 列 选项 
数据 列 选项 用 于 设置 图 表 中 要 展示 的 数据 相关 的 属性 。 


参 


— 


数 


data 


name 


type 


plotOp 


显示 在 图 表 中 的 数据 列 ， 可 以 为 数组 或 者 JSON 格 式 的 数据 。 


如 : data:[0, 5, 3, 5], 
gk data: [{name: 'Point 1',y: 0}, (name: 'Point 2',y: 5}] 
显示 数据 列 的 名 称 。 


数据 列 类 型 ， 支 持 area, areaspline, bar column, line, pie, scatter or 
spline 


tions : 数据 点 选项 


plotOptions 用 于 设置 图 表 中 的 数据 点 相关 属性 。plotOptions 根 据 各 种 图 表 类 型 ， 其 
属性 设置 略微 有 些 差异 ， 现 将 常用 选项 列 出 来 。 


参数 描述 默认 值 
AAS 米 占 dg TK 


allowPointSelect clu t 选中 数 false 


JANN 


回调 函数 ， 格 式 化 数据 显 formatter: function() {return 


formatter 示 内 容 this.y:} 


Tooltip : 数据 点 提示 框 


Tooltip 用 于 设置 当 鼠 标 滑 向 数据 点 时 显示 的 提示 框 信息 。 


参数 描述 默认 值 
enabled 是 否 显示 提示 框 true 
rgba(255, 
backgroundColor ， 设 置 提 示 框 的 背景 255, 255, 
85) 
eae slo: LESS 默认 自动 匹配 数据 列 的 颜 ate 
borderRadius 提示 框 圆 角度 5 
shadow 是 否 显 示 提 示 杠 阴影 true 
style 设置 提示 框 内 容 样式 ， 如 字体 颜色 等 color:'#333' 
[5173 ERR, 用 于 格式 化 输出 提示 框 的 显示 内 
formatter 容 。 返 回 的 内 容 支 持 html 标 签 如 : <b>, 2 


<strong>, <i>, <em>, <br/>, <span> 


Legend : 图 例 选项 
legend 用 于 设置 图 例 相 关 属 性 。 


参数 描述 默认 值 


layout 显示 形式 ， 支 持 水 平 horizontal 和 垂直 vertical ^ horizontal 
align xt FAN. center 
backgroundColor ”图 例 背 景色 。 null 
borderColor 图 例 边框 颜色 。 #909090 
borderRadius 图 例 边框 角度 5 
enabled 是 否 显示 图 例 true 
floating 是 否 可 以 浮动 ， 配 合 x，y 属 性 。 false 
shadow 是 否 显示 阴影 false 
style 设置 图 例 内 容 祥 式 " 


更 多 详细 信息 请 参照 highcharts 官 网 英文 文档 : http://api.highcharts.com/highcharts 


Highcharts 曲线 


Highcharts 基本 曲线 


以 下 实例 是 基础 曲线 图 。 我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 
来 让 我 们 来 看 个 完整 实例 : 


实例 
文件 名 : highcharts_line_basic.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob .com)</title: 
s] ER 
以 上 实例 输出 结果 为 : 








城市 平均 气温 
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Highcharts 带 有 数据 标签 曲线 图 表 


以 下 实例 是 带 有 数据 标签 曲线 图 表 。 我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 
语法 。 接 下 来 让 我 们 来 看 个 完整 实例 : 


实例 
文件 名 : highcharts_line_labels.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob .com)</title: 
A B 
以 上 实例 输出 结果 为 : 
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Highcharts 异步 加 载 数 据 曲 线 图 表 


以 下 实例 演示 了 异步 加 载 数据 曲线 图 表 。 这 边 我 们 通过 jQuery.getJSON() 方法 从 
异步 加 载 csv 文件 : 


bs 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 个 完整 实 
9l : 


导入 data.js 文件 
异步 加 载 数据 需要 引入 以 下 js 文件 : 


«script src="http://code.highcharts.com/modules/data. js"></script: 


Bir 
Ac ie 


X 轴 
以 每 周 为 间隔 设置 X 轴 : 


var xAxis = { tickInterval: 7 * 24 * 3600 * 1000, // 一 周 





Y $h 
以 每 周 为 间隔 设置 Y 轴 : 
配置 两 个 Y 轴 : 


var yAxis = [{ // Æ% Y $ title: { text: null }, labels: {å 
图 =E] -- 





plotOptions 
plotOptions 用 于 设置 图 表 中 的 数据 点 相关 属性 。 


var plotOptions = { series: { cursor: 'pointer', point: { eve 








实例 
文件 名 : highcharts_line_ajax.html 


<title>Highchat 


<html> <head> <title>Highcharts Tutorial</title> 
«1i 
以 上 实例 输出 结果 为 : 





Daily visits at www.highcharts.com 


*9* All visits — -*- New visitorssource: Coogle Analytics 


Highcharts 时 间 序 列 ， 可 缩放 的 图 表 


以 下 实例 演示 了 基于 时 间 的 曲线 图 表 。 
gem 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 个 完整 实 
9l : 


Acie 


图 表 


配置 可 缩放 图 表 。 chart.zoomType 指定 了 用 户 可 以 拖 放 的 尺寸 ， 用 户 可 以 通过 拖 
动 鼠 标 来 放大 ， 可 能 值 是 x，y 或 xy : 


var chart = { zoomType: 'x' }; 


plotOptions 
使 用 plotOptions 配置 图 表 区 域 : 
配置 两 个 Y 轴 : 


var plotOptions = { area: { fillColor: { linearGradient: { x1: 





plotOptions 
plotOptions 用 于 设置 图 表 中 的 数据 点 相关 属性 。 


var plotOptions = { series: { cursor: '‘pointer', point: { eve 


4 Jd 


实例 


文件 名 : highcharts_line_time.htm 





<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
E 
以 上 实例 输出 结果 为 : 
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USD to EUR exchange rate from 2006 through 2008 


Click and drag in the plot area to zoom in 
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Highcharts.com 


Highcharts 时 间 序 列 ， 可 缩放 的 图 表 3325 


Highcharts X 轴 翻 转 曲 线 


以 下 实例 演示 了 X 轴 翻 转 曲 线 图 。 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 个 完整 实 
例 : 


Ac is 


配置 图 表 类 型 type 7; spline. chart.type 默认 为 "line", 
配置 X 轴 翻 转 。inverted 设置 为 true Bl X 轴 翻 转 ， 默 认为 false。 


chart var chart = { type: 'spline', inverted: true Jj); 


实例 
文件 名 : highcharts_spline_inverted.htm 

<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
Eo 
以 上 实例 输出 结果 为 : 
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Atmosphere Temperature by Altitude 


According to the Standard Atmosphere Model 
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Highcharts X 4583 £z B X, 


3327 


Highcharts 带 标 记 曲 线 图 


以 下 实例 演示 了 带 标记 曲线 图 。 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 如 何 配 


En 


Ac is 


我 们 使 用 marker.symbol 属性 来 配置 标记 。 标 记 可 以 是 'square', 'diamond' 或 AA 
url。 标 记 可 以 添加 在 任何 的 数据 点 上 : 


var series- [{ name: 'Tokyo', marker: { symbol: 'square' }, dé 


| ES 


实例 


文件 名 : highcharts_spline_symbols.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob .com)</title: 
Em] 
以 上 实例 输出 结果 为 : 
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Highcharts 带 标记 曲线 图 3329 


Highcharts 标示 区 曲线 


以 下 实例 演示 了 标示 区 曲线 图 。 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 如 何 配 


En 


Ac is 


使 用 yAxis.plotBands 属性 来 配置 标示 区 。 区 间 范 围 使 用 from' 和 'to 属性 。 颜 色 设 
EAH 'color' 属性 。 标 签 样式 使 用 "label 属性 。 


配置 信 息 : 


var yAxis = { title: ( text: 'Wind speed (m/s)' }, min: ©, mir 


le 


实例 


文件 名 : highcharts_spline_bands.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
Em 
以 上 实例 输出 结果 为 : 
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Wind speed during two days 
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Highcharts 标示 区 曲线 图 3331 


Highcharts 时 间 间 隔 图 表 
以 下 实例 演示 了 时 间 间 隔 图 表 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 如 何 配 
iB. 


实例 


文件 名 : highcharts_spline_time.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 





以 上 实例 输出 结果 为 : 
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Highcharts 对 数 图 表 


以 下 实例 演示 了 对 数 图 表 。 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 如 何 配 


En 


Ac is 


配置 yAxis.type 77 ‘logarithmic’, TELS x 轴 类 型 。 可 选 值 有 "linear", 
"logarithmic", "datetime" 或 "category"。 默 认 值 为 linear。 


yAxis var yAxis = { type: 'logarithmic', minorTickInterval: 0.1 





实例 
文件 名 : highcharts_line_logarithmic.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 





以 上 实例 输出 结果 为 : 
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对 数 实例 (runoob.com) 
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Highcharts 对 数 图 表 
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Highcharts 区 域 图 


Highcharts 基本 区 域 图 


以 下 实例 演示 了 基础 区 域 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 : 


Fig iR 
chart 
chart.type 配置 项 用 于 设 定 图 表 类 型 ， 默 认为 "line"， 本 章节 我 们 使 用 'area'。 


var chart = { type: 'area' y 


实例 
文件 名 : highcharts_area_basic.htm 

<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
| 
以 上 实例 输出 结果 为 : 
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US and USSR nuclear stockpiles 


Source: thebulletin.metapress.com 
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Highcharts 基本 区 域 图 3337 
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Highcharts 使 用 负数 区 域 图 


以 下 实例 演示 了 使 用 负数 区 域 图 。 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 实例 : 
实例 
文件 名 : highcharts_area_negative.htm 

<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
人 ] 
以 上 实例 输出 结果 为 : 


Area chart with negative values 
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Highcharts 使 用 负数 区 域 图 3338 


Highcharts H 4 Kit A 


DAE S3 BIER SHES KAA. 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 plotOptions 中 添加 stacking 属性 : 


Ac iS 


plotOptions : 数据 点 选项 


plotOptions 用 于 设置 图 表 中 的 数据 点 相关 属性 。plotOptions 根 据 各 种 图 表 类 型 ， 其 
属性 设置 略微 有 些 差异 。 


配置 图 表 堆 又 设置 plotOptions.area.stacking 为 "normal"。 如 果 禁 用 堆 释 使 用 
null, 如 果 值 为 "percent" #4 m RADE. 


var plotOptions = { area: { stacking: ‘normal', lineColor: '#6t 


mi — — R8 


实例 


文件 名 : highcharts_area_stacked.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
‘| Be 
以 上 实例 输出 结果 为 : 
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Historic and Estimated Worldwide Population Growth 
by Region 


Source: Wikipedia.org 


6-5 


Billions 
un 


2 





1750 1800 1850 1900 1950 1999 2050 


MAsia Bü Africa |) Europe MI America MI Oceania 
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Highcharts E14 FECE a KIRA 


DES BUR Y AOS KRA., 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 plotOptions 中 添加 stacking 属性 : 


Ac iS 


plotOptions : 数据 点 选项 


plotOptions 用 于 设置 图 表 中 的 数据 点 相关 属性 。plotOptions 根 据 各 种 图 表 类 型 ， 其 
属性 设置 略微 有 些 差异 。 


配置 图 表 堆 又 设置 plotOptions.area.stacking X "percent", IRA & [sh FH 
null, 


var plotOptions = { area: { stacking: ‘percent', lineColor: '#t 


a] = Bis 


实例 


文件 名 : highcharts_area_percentage.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
‘| Be 
以 上 实例 输出 结果 为 : 
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Historic and Estimated Worldwide Population Growth 
by Region 


Source: Wikipedia.org 
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3342 


Highcharts 丢失 值 区 域 图 


以 下 实例 演示 了 丢失 值 区 域 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 chart 中 添加 spacingBottom 属性 。 


chart 配置 
将 chart 的 spacingBottom 属性 设置 为 30。 表 示 图 表 间 的 间隔 区 间 。 


var chart = { type: '‘'area', spacingBottom: 30 }; 


实例 
文件 名 : highcharts_area_missing.htm 


«html» <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
以 上 实例 输出 结果 为 : 
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Highcharts 反 转 X 轴 与 y 轴 


以 下 实例 演示 了 反 转 X 轴 与 y 轴 区 域 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 chart 中 添加 inverted 属性 。 


chart 配置 
将 chart 的 inverted 属性 设置 为 true，X 轴 为 垂直 ，Y 轴 为 水 平 的 。 


var chart = { type: 'area', inverted: true }; 


实例 
文件 名 : highcharts area inverted.htm 

«html» <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob .com)</title: 
以 上 实例 输出 结果 为 : 
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Highcharts 反 转 X 轴 与 y 轴 3344 
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Highcharts 曲线 区 域 图 


以 下 实例 演示 了 曲线 区 域 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 chart 中 修改 type 属性 。 


chart 配置 


将 chart 的 type 属性 设置 为 areaspline, chart.type 描述 了 图 表 类 型 。 默 认 值 为 
"line", 


var chart = { type: 'areaspline' }; 


实例 


文件 名 : highcharts area spline.htm 


«html» <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 





以 上 实例 输出 结果 为 : 


Average fruit consumption during one week 
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Highcharts 曲线 区 域 图 3345 
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Highcharts 区 间 区 域 图 


以 下 实例 演示 了 区 间 区 域 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 chart 中 修改 type 属性 。 


chart 配置 


将 chart 的 type 属性 设置 为 arearange, chart.type 描述 了 图 表 类 型 。 默 认 值 为 
"line", 


var chart = ( type: 'arearange' }; 


实例 
文件 名 : highcharts_area_range.htm 


«html» <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
3L 
以 上 实例 输出 结果 为 : 





Temperature variation by day 


40 


20 





Jan'14 Apr '14 Jul "14 Oct '14 Jan '15 


Highcharts.com 


Highcharts 区 间 区 域 图 3346 


Highcharts 使 用 区 间 和 线 的 区 域 图 


以 下 实例 演示 了 使 用 区 间 和 线 的 区 域 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 chart 中 修改 type 属性 。 


chart 配置 


将 chart 的 type 属性 设置 为 arearange, chart.type 描述 了 图 表 类 型 。 默 认 值 为 
"line", 


var chart = { type: 'arearange' Jj; 


实例 
文件 名 : highcharts_area_rangeline.htm 


<html> <head> <title>Highcharts 教程 | 324 A%(runoob.com)</title: 
Emi >] 
以 上 实例 输出 结果 为 : 
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Highcharts 使 用 区 间 和 线 的 区 域 图 3348 


Highcharts 条 形 图 


Highcharts 基本 条 形 图 


以 下 实例 演示 了 基本 条 形 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


FB ier 
chart 配置 
设置 chart 的 type 属性 为 bar, chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


var chart = ( type: 'bar' }; 


实例 
文件 名 : highcharts_bar_basic.htm 

<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
HER 
以 上 实例 输出 结果 为 : 





W3School 前 端 教程 合 


Historic World Population by Region 


Source: Wikipedia.org 
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Highcharts 基本 条 形 图 
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我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


plotOptions 


Acie BR & FH plotOptions.series.stacking, 3f;&i& 7j "normal", MRABHSA 
可 设置 为 null "normal" Ñi AA EEA, "percent" HA nH E3423 Eb. 


var plotOptions = { series: { stacking: 'normal' } }; 


实例 
文件 名 : highcharts_bar_stacked.htm 
<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
c mm 
以 上 实例 输出 结果 为 : 
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Historic World Population by Region 


Source: Wikipedia.org 
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Highcharts RAR A 

以 下 实例 演示 了 使 用 负 值 的 ， 反 向 条 形 图 。 
实例 

文件 名 : highcharts_bar_negative.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
| 





Highcharts 柱 形 图 


Highcharts 基本 柱 形 图 


以 下 实例 演示 了 基本 柱 形 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac is 


chart 配置 


设置 chart 的 type 属性 为 column, chart.type 描述 了 图 表 类 型 。 默 认 值 为 
var chart = { type: 'column' }; 


实例 
文件 名 : highcharts_column_basic.htm 

«html» <head> <title>Highcharts 教程 | 34 Af(runoob.com)</title: 
wet 
以 上 实例 输出 结果 为 : 
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每 月 平均 降雨 量 
Source: runoob.com 
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Highcharts 基本 柱 形 图 3357 


Highcharts 使 用 负 值 的 反 向 柱 形 


以 下 实例 演示 了 使 用 负 值 的 反 向 柱 形 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac is 


chart 配置 


设置 chart 的 type 属性 为 column, chart.type 描述 了 图 表 类 型 。 默 认 值 为 
var chart = { type: 'column' }; 


实例 
文件 名 : highcharts_column_negative.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
加 i 
以 上 实例 输出 结果 为 : 





W3School 前 端 教程 合 


使 用 负 值 的 反 回 柱 形 多 


了 -5 


Values 


-2.5 


Apples Oranges Pears Grapes 


PX john BM jane "joe 


Highcharts 使 用 负 值 的 反 向 柱 形 


5 
E | | T 


Bananas 


3359 


Highcharts H 4472 A 


DAES BIS T HAEA. 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 plotOptions 中 添加 stacking 属性 : 


Ac iS 


plotOptions : 数据 点 选项 


plotOptions 用 于 设置 图 表 中 的 数据 点 相关 属性 。plotOptions 根 据 各 种 图 表 类 型 ， 其 
属性 设置 略微 有 些 差异 。 


配置 图 表 堆 又 设置 plotOptions.area.stacking X "percent", JIRA & [sh FH 
null, 


var plotOptions = { column: { stacking:  'normal', dataLabels: 


s] 0E 


实例 


文件 名 : highcharts_column_stacked.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
jp Be 
以 上 实例 输出 结果 为 : 
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EUR & Biligsa SHES ARB A. 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 plotOptions 中 添加 stacking 属性 : 


Ac iS 


plotOptions : 数据 点 选 


plotOptions 用 于 设置 R 遇 性 。plotOptions 根 据 各 种 图 表 类 型 ， 其 
属性 设置 略微 有 些 差异 


配置 图 表 堆 县 设置 plotOptions.area.stacking 为 "percent"。 如 果 禁 用 堆 释 使 用 
null, 


var plotOptions = { column: { stacking:  'normal', dataLabels: 


series 数据 列 项 配置 
配置 堆 释 组 中 每 个 对 应 的 数据 列 项 。 





series: [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'ma: 





实例 


文件 名 : highcharts_column_rotated.htm 


<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
i B 
以 上 实例 输出 结果 为 : 
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Highcharts 使 用 百分比 的 堆 壹 柱 形 图 


以 下 实例 演示 了 使 用 百分比 的 堆 怠 柱 形 图 。 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 plotOptions 中 添加 stacking 属性 : 


Ac iS 


plotOptions : 数据 点 选项 


plotOptions 用 于 设置 R 遇 性 。plotOptions 根 据 各 种 图 表 类 型 ， 其 
属性 设置 略微 有 些 差异 


MERRIE A iri plotOptions.area.stacking 7; "percent", JORMA & (A 
null, 


var plotOptions = { column: { stacking: ''percent' j| }; 


实例 
文件 名 : highcharts_column_percentage.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
El 
以 上 实例 输出 结果 为 : 
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Highcharts 标签 旋转 柱 形 


以 下 实例 演示 了 标签 旋转 柱 形 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 dataLabels 中 添加 rotation 属性 : 


Ac is 


dataLabels : 数据 标签 
dataLabels 定义 图 上 是 否 显示 数据 标签 。 


文本 旋转 程度 由 rotation 属性 决定 。 我 们 还 可 以 通过 其 他 属性 来 定义 文本 标签 的 背 
景 ， 间 隔 ， 边 框 等 。 


dataLabels = { enabled: true, rotation: -90, color: '#FFFFFF', 


二 了 县 


实例 


文件 名 : highcharts_column_rotated.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
Emi 
以 上 实例 输出 结果 为 : 
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2014 年 全 球 最 大 人 口 城市 排名 


Source: Wikipedia 
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Highcharts 标签 旋转 柱 形 图 3367 


Highcharts sf 4 2a 47% 
DUB E BURER T HE d 2 EIER. 


我 们 在 前 面 的 章节 已 经 了 解 了 Hihcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 drilldown 中 添加 series 属性 : 


Ac iS 


drilldown : 向 下 钻 取 
drilldown 用 于 向 下 钻 取 数据 ， 深 入 到 其 中 的 具体 数据 。 


drilldown: { series: drilldownSeries } 


实例 


文件 名 : highcharts_column_drilldown.htm 


<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
Browser Version Total Market Share 
Microsoft Internet Explorer 8.0 26.61% 
Microsoft Internet Explorer 9.0 16.96% 
Chrome 18.0 8.01% 

Chrome 19.0 7.73% 

Firefox 12 6.72% 

Microsoft Internet Explorer 6.0 6.40% 
Firefox 11 4.72% 

Microsoft Internet Explorer 7.0 3.55% 
Safari 5.1 3.53% 


Firefox 13 2.16% 
Firefox 3.6 1.8796 
Opera 11.x 1.30% 
Chrome 17.0 1.1396 
Firefox 10 0.9096 
Safari 5.0 0.85% 
Firefox 9.0 0.6596 
Firefox 8.0 0.5596 
Firefox 4.0 0.5096 
Chrome 16.0 0.45% 
Firefox 3.0 0.3696 
Firefox 3.5 0.36% 
Firefox 6.0 0.3296 
Firefox 5.0 0.3196 
Firefox 7.0 0.2996 


Proprietary or Undetectable 0.2996 


Chrome 18.0 - Maxthon Edition 0.2696 
Chrome 14.0 0.25% 
Chrome 20.0 0.24% 
Chrome 15.0 0.18% 
Chrome 12.0 0.16% 
Opera 12.x 0.15% 
Safari 4.0 0.14% 
Chrome 13.0 0.13% 
Safari 4.1 0.12% 
Chrome 11.0 0.10% 
Firefox 14 0.10% 
Firefox 2.0 0.09% 
Chrome 10.0 0.09% 


Opera 10.x 0.09% 
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09% 
< /pre»«!-- 去 掉 pre 前 面 的 空格 --> </body> </html> 


EN 
以 上 实例 输出 结果 为 : 
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Highcharts 固定 布局 柱 形 


以 下 实例 演示 了 固定 布局 柱 形 图 。 

我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 series 下 添加 pointPlacement 和 pointPadding 配置 。 
series.pointPadding 

控制 每 列 之 间 的 距离 值 ， 当 highcharts 图 表 宽 度 固定 的 情况 下 ， 此 值 越 大 ， 柱 子 宽 
度 越 小 ， 反 之 相反 。 默 认 此 值 为 0.1 

series.pointPlacement 


在 柱 形 图 中 ， 当 pointPlacement 设置 为 "on" 时, X 轴 上 的 点 没有 间隔 。 如 果 
pointPlacement 设置 为 "between", 列 之 间 按 刻度 进行 布局 。 


在 Highcharts 3.0.2 后 的 版 本 , pointPlacement 可 以 支持 数字 ，0 为 轴 上 的 值 ， -0.5 


为 当前 值 与 前 面 一 个 值 的 间隔 ， 0.5 为 当前 值 与 下 一 个 值 的 间隔 。 不 同和 与 文字 设 
置 选项 ， 数 字 设 置 不 影响 轴 之 间 的 间隔 。 


series: { name: 'Employees', color: 'rgba(165,170,217,1)', data 


ibo f 


实例 


文件 名 : highcharts_column_fixed.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
i ^] 
以 上 实例 输出 结果 为 : 
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Highcharts 固定 布局 柱 形 图 3372 


Highcharts 使 用 HTML 表格 数据 的 柱 形 图 


以 下 实例 演示 了 使 用 HTML 表格 数据 的 柱 形 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 在 data 下 添加 table 配置 。 


data 


数据 模块 提供 了 一 些 简单 的 接口 用 于 添加 数据 ， 我 们 可 以 使 用 例如 CVS, HTML 表 
格 或 者 网 格 视图 中 的 数据 。 


data.table 


Html 表格 中 设置 id， 并 对 应 参数 data.table 即 能 解析 数据 。 相 关 设 置 选 项 有 
startRow, endRow, startColumn 和 endColumn 。 


data: { table: 'dataTable' } 


实例 


文件 名 : highcharts_column_table.htm 


<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
31 


d B 
以 上 实例 输出 结果 为 : 
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Highcharts 使 用 HTML 表格 数据 的 柱 形 图 3374 


Highcharts 区 间 柱 形 


以 下 实例 演示 了 区 间 柱 形 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


chart 配置 


配置 chart 的 type 为 'columnrange' , chart.type 描述 了 图 表 类 型 。 默 认 值 为 
"line", 


var chart = { type: 'columnrange', inverted: true }; 


实例 
文件 名 : highcharts_column_range.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
s ES 
以 上 实例 输出 结果 为 : 





Temperature variation by month 


Observed in Vik i Sogn, Norway, 2009 


Jan -9.7C m——Em 9.4'C 
Feb Ps 
Mar 355°C amm 9.4C 
Apr [Ő 
May UC gees 22.0°C 
Jun 2C oes 295°C 
Jul 9.2°C m————3 0:7 C38 
Aug unc IEEE 
Sep 4C pees 18°C 
Oct Ey 
Nov SAC oes 1 0.4°C 
Dec | -13.5°C gues 98°C 
-20 -15 -10 -5 0 5 10 15 .20 25 30 35 


Temperature (°C ) 


E Temperatures 


Highcharts 饼 图 


Highcharts 基本 饼 图 


以 下 实例 演示 了 基本 饼 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


FB iR 
series 配置 
设置 series 的 type 属性 为 pie, series.type 描述 了 数据 列 类 型 。 默 认 值 为 "line"。 


var series = { type: 'pie' }; 


实例 
文件 名 : highcharts_pie_basic.htm 
<html> <head> <title>Highcharts 教程 | 34 Af(runoob.com)</title 
- mS 
以 上 实例 输出 结果 为 : 
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Highcharts 显示 图 例 饼 


以 下 实例 演示 了 显示 图 例 饼 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


FB iR 
series 配置 
设置 series 的 type 属性 为 pie, series.type 描述 了 数据 列 类 型 。 默 认 值 为 "line"。 


var series = ( type: 'pie' }; 


plotOptions 


plotOptions 使 用 plotOptions.pie.showInLegend 属性 来 设置 是 否 显示 图 例 。 


var plotOptions = { pie: { allowPointSelect: true, cursor:  'po: 


4 — 7H 


实例 


文件 名 : highcharts pie legends.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob .com)</title: 
Em >] 
以 上 实例 输出 结果 为 : 
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Browser market shares at a specific website, 2014 
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Highcharts 显示 图 例 饼 图 3380 


Highcharts [i] zt 


以 下 实例 演示 了 圆 环 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


配 值 
chart 配置 
设置 chart 的 type 属性 为 pie chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


var chart = ( type: 'pie' }; 


实例 
文件 名 : highcharts_pie_donut.htm 
<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
EN - 
以 上 实例 输出 结果 为 : 
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Browser market share, April, 2011 
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Highcharts 半 圈 圆 环 


以 下 实例 演示 了 半 圈 圆 环 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


series 配置 


设置 series 的 type 属性 为 pie series.type 描述 了 数据 列 类 型 。 默 认 值 为 "line"。 配 
置 饼 图 大 小 使 用 innerSize 属性 并 设置 为 innerSize: '50%'. 


var series = { type: 'pie', innerSize: '50%' }; 


实例 
文件 名 : highcharts pie semicircle donut.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
4m 
以 上 实例 输出 结果 为 : 
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Highcharts 向 下 钻 取 饼 
以 下 实例 演示 了 向 下 钻 取 饼 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


drilldown 本 证 
drilldown 用 于 向 下 钻 取 数 据 ， 通 过 点 击 某 项 深入 到 其 中 的 具体 数据 。 


drilldown: { series: drilldownSeries } 


实例 


文件 名 : highcharts_pie_drilldown.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
Microsoft Internet Explorer 8.0 26.61% 
Microsoft Internet Explorer 9.0 16.9696 
Chrome 18.0 8.0196 

Chrome 19.0 7.73% 

Firefox 12 6.72% 

Microsoft Internet Explorer 6.0 6.4096 
Firefox 11 4.7296 

Microsoft Internet Explorer 7.0 3.5596 
Safari 5.1 3.5396 

Firefox 13 2.16% 

Firefox 3.6 1.87% 

Opera 11.x 1.30% 

Chrome 17.0 1.13% 

Firefox 10 0.90% 

Safari 5.0 0.85% 


Firefox 9.0 0.65% 
Firefox 8.0 9.5596 
Firefox 4.0 9.5096 
Chrome 16.0 0.45% 
Firefox 3.0 0.3696 
Firefox 3.5 0.3696 
Firefox 6.0 0.32% 
Firefox 5.0 0.31% 
Firefox 7.0 0.29% 


Proprietary or Undetectable 0.29% 


Chrome 18.0 - Maxthon Edition 0.26% 
Chrome 14.0 0.25% 
Chrome 20.0 0.24% 
Chrome 15.0 0.18% 
Chrome 12.0 0.16% 


Opera 12.x 0.15% 
Safari 4.0 0.14% 
Chrome 13.0 0.13% 
Safari 4.1 0.12% 
Chrome 11.0 0.10% 
Firefox 14 0.10% 
Firefox 2.0 0.09% 
Chrome 10.0 0.09% 
Opera 10.x 0.09% 
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.099 


EN 





Highcharts 渐变 饼 


以 下 实例 演示 了 渐变 饼 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


配 值 
colors 配置 
使 用 Highcharts.getOptions().colors 属性 来 配置 颜色 。 


// 颜 色 的 填充 “Highcharts.getoptions().colors = Highcharts.map(Highc 


实例 


文件 名 : highcharts_pie_gradient.htm 





<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
以 上 实例 输出 结果 为 : 
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Browser market shares at a specific website, 2014 


Others%: 0.7 % ` 


OperaX%: 62% 一 





Safari%: 8.5% 


Chrome%: 12.8 % — -一 一 Firefox%: 45.0 X 


IE%: 26.8 % 


Highcharts.com 


Highcharts 渐变 饼 图 3387 


Highcharts 单 色 饼 图 
以 下 实例 演示 了 单 色 人 饼 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Fig ie 
colors 配置 
使 用 Highcharts.getOptions().plotOptions.pie.colors 属性 来 配置 每 个 饼 的 颜色 。 


// 设置 单 色 并 为 所 有 饼 设置 默 认 主题 Highcharts.getOptions().plotOptions. 


实例 


文件 名 : highcharts_pie_monochrome.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
Em 
以 上 实例 输出 结果 为 : 
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Browser market shares at a specific website, 2014 


Others%: 0.7 % 
Opera%: 6.2 % 
Safari%: 8.5 % 






Chrome%: 12.8 % 一 一 一 一 一 Firefox%- 45.0 % 


IE%: 26.8% ^ 


Highcharts.com 


Highcharts 单 色 饼 图 
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Highcharts 散 点 图 


本 章节 我 们 将 为 大 家 介绍 Highcharts 的 散 点 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 
Highcharts 的 其 他 配置 。 


Ac iS 


chart 配置 


配置 chart 的 type 为 'scatter' , chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


chart.zoomType 属性 可 配置 图 表 放 大 ， 通 过 拖 动 鼠标 进行 缩放 ， 治 x 轴 或 y 轴 进行 
缩放 ， 可 以 设置 为 : x','y','Xy'。 


var chart = { 
type: ‘scatter’, 
zoomType: 'xy' 


实例 


文件 名 : highcharts_scatter_basic.htm 


<html> 
<head> 
<title>Highcharts Af | 8% A#(runoob.com)</title> 
«script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min 
<script src="/try/demo_source/highcharts.js"></script> 
</head> 
<body> 
«div id="container" style="width: 550px; height: 400px; margin: 0 : 
<script language="JavaScript"> 
$(document).ready(function() { 
var chart = { 
type: 'scatter', 
zoomType: 'xy' 


, 
var title = ( 
text: 'Height Versus Weight of 507 Individuals by Gender' 
3 
var subtitle - ( 
text: 'Source: Heinz 2003' 


}; 


var xAxis = { 
title: { 
enabled: true, 
text: 'Height (cm)' 
}, 
startOnTick: true, 
endOnTick: true, 
showLastLabel: true 
u 
var yAxis - ( 
title: { 
text: 'Weight (kg)' 


j 
3 
var legend - ( 
layout: 'vertical', 
align: 'left', 
verticalAlign: 'top', 
x: 100, 
y: 70, 
floating: true, 
backgroundColor: (Highcharts.theme && Highcharts.theme. legenc 
borderwidth: 1 
j 
var plotOptions - ( 
scatter: ( 
marker: { 
radius: 5 
states: ( 
hover: { 
enabled: true, 
lineColor: 'rgb(100,100,100)' 


marker: { 
enabled: false 


} 

ty 

tooltip: { 
headerFormat: '<b>{series.name}</b><br>', 
pointFormat: '{point.x} cm, {point.y} kg' 


} 
J; 
var series- [{ 
name: 'Female', 
color: 'rgba(223, 83, 83, .5)', 
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [1: 
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.: 


[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], 
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], 
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], 
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], 
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], 
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], 
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], 
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], 
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], 
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], 
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], 
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], 
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], 
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], 
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], 
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], 
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], 
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], 
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], 
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], 
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], 
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], 
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], 
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], 
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], 
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], 
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], 
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], 
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], 
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], 
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], 
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], 
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], 
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], 
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], 
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], 
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], 
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], 
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], 
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], 
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], 
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], 
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], 
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], 
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], 
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], 
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], 
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], 
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], 
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], 


} 1 


name: 'Male', 


01 — n o RR 下 下 


一 一 一 一 a 


color: 'rgba(119, 152, 191, .5)', 
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [4t 
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.( 


[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.¢ 
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.¢ 
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.t 
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.: 
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.: 
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.t 
[186.7，87.8]，[171.4，84.7]，[172.7，73.4]，[175.: 
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.: 
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.: 
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.¢ 
[177.0. 71.6], [186.0, 84.8]. [167.0, 68.2], [173:! 
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.¢ 
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.: 
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.: 
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.: 
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.t 
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.¢ 
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.t 
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.: 
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.: 
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.¢ 
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.: 
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.: 
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.: 
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7 
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.: 
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177 
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.< 
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.t 
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.: 
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3]. [175.: 
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.: 
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.: 
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.¢ 
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.( 
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.: 
[188.0, 82.7], [175.3, 86.4], [170.5 67.7], [179.: 
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.¢ 
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.: 
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.¢ 
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175 
[175.3，81.8]，[179.1，75.5]，[181.6，84.5]，[177.: 
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176 
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.¢ 
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.¢ 
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.¢ 
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.! 
[180.3, 83.2], [180.3, 83.2]] 
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var json = {}; 

json.chart = chart; 

json.title = title; 

json.subtitle = subtitle; 
json.legend = legend; 

json. xAxis XAXis; 

json.yAxis yAXis; 

json.series - series; 
json.plotOptions = plotOptions; 
$('#container').highcharts(json); 


3): 
</script> 
</body> 
</html> 





<] 
以 上 实例 输出 结果 为 : 


Height Versus Weight of 507 Individuals by Gender 


Source: Heinz 2003 
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Highcharts 散 点 图 3394 


Highcharts 气泡 图 


本 章节 我 们 将 为 大 家 介绍 Highcharts 的 气泡 图 。 
我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 
Highcharts 的 其 他 配置 。 


Ac iS 


chart 配置 
配置 chart 的 type 为 ‘bubble’. chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


chart.zoomType 属性 可 配置 图 表 放 大 ， 通 过 拖 动 鼠标 进行 缩放 ， 治 x 轴 或 y 轴 进行 
缩放 ， 可 以 设置 为 : x','y','Xy'。 


var chart = { 
type: 'bubble', 
zoomType: 'xy' 


实例 


文件 名 : highcharts_bubble_basic.htm 


«html» 
«head» 
<title>Highcharts 教程 | X% A#(runoob.com)</title> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min 
<script src="/try/demo_source/highcharts.js"></script> 
«script src="http://code.highcharts.com/highcharts-more.js"></s¢ 
</head> 
<body> 
«div id="container" style="width: 550px; height: 400px; margin: 0 : 
«script language="JavaScript"> 
$(document).ready(function() { 
var chart = { 
type: 'bubble', 
zoomType: 'xy' 
3 
var title - ( 
text: 'Highcharts Bubbles' 
3 
var series- [{ 
data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, t 
} { 
data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 


D 
data [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 
} 


]; 


var json = {}; 

json.chart chart; 

json.title title; 

json.series = series; 
$('#container').highcharts(json); 


}); 
</script> 
</body> 
</html> 


以 上 实例 输出 结果 为 : 
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Highcharts Bubbles 


Values 





-25 
75 100 


0 25 50 


© Series1 @ Series2 ^ Series 3 
Highcharts.com 


Ei 
3D 气泡 图 
series.marker 
设置 series.marker 渐变 让 其 看 起 来 有 3D 的 效果 。 


marker: { 
fillColor: { 
radialGradient: { cx: 0.4 cy: 0.3, r: 0.7 }, 
stops: [ 
[0, 'rgba(255,255,255,0.5)'], 
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).s« 





实例 


文件 名 : highcharts bubble 3d.htm 


<html> 
<head> 
<title>Highcharts Af | 8 Af(runoob.com)</title> 
«script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min. 


Highcharts 气泡 图 3397 


<script src="/try/demo_source/highcharts.js"></script> 
«script src="http://code.highcharts.com/highcharts-more.js"></s¢ 
</head> 
<body> 
«div id="container" style="width: 550px; height: 400px; margin: 0 : 
<script language="JavaScript"> 
$(document).ready(function() { 
var chart = { 
type: 'bubble', 
plotBorderWidth: 1, 
zoomType: 'xy' 
H 
var title = ( 
text: 'Highcharts bubbles with radial gradient fill' 
}; 
var xAxis = { 
gridLinewidth: 1 
H 


var yAxis - ( 
startOnTick: false, 
endOnTick: false 


HH 


var series- [{ 
data: [ 
[9, 81, 63], 
[98, 5, 89], 
[53,505 erode 
[41, 22, 14], 
[58, 24, 20], 
[78, 37, 34], 
[55756 5245 
[18, 45, 70], 
[42, 44, 28], 
[3, 52, 59], 
[31, 18, 97], 
[79, 91, 63], 
1937 23, 2517 
[44, 83, 22] 
], 
marker: { 

fillColor: { 

radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, 

stops: [ 

[0, 'rgba(255,255,255,0.5)'], 
[1, Highcharts.Color(Highcharts.getOptionsi 


j 


} 1 
data: [ 


[42, 38, 20], 


[6, 18, 1], 

[a €). sl 

[57, 2, 90], 

[80, 76, 22], 
[11, 74, 96], 
[88, 56, 10], 
[30, 47, 49], 
[57, 62, 98], 
[4, 16, 16], 
[46, 10, 11], 
[22, 87, 89], 
[57, 91, 82], 
[45, 15, 98] 


l; 
marker: { 
fillColor: ( 
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, 
stops: [ 
[0, 'rgba(255,255,255,0.5)'], 
[1, Highcharts.Color(Highcharts.getOptionsi 
] 
} 
} 
} 
]; 
var json = {}; 
json.chart = chart; 
json.title = title; 
json.xAxis = xAxis; 
json.yAxis = yAxis; 


json.series = series; 
$('#container').highcharts(json); 


3); 
«/script» 
«/body» 
«/html» 





以 上 实例 输出 结果 为 : 
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Highcharts bubbles with radial gradient fill 


Values 
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Highcharts 气泡 图 3400 


Highcharts 动态 


本 章节 我 们 将 为 大 家 介绍 Highcharts 的 动态 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 
Highcharts 的 其 他 配置 。 


每 秒 更 新 曲线 图 


chart.events 


chart.event 属性 中 添加 load 方法 (图 表 加 载 事 件 ) 。 在 1000 毫秒 内 随机 产生 数 
据点 并 生成 图 表 。 


chart: { 
events: { 
load: function () { 
// 图 表 每 秒 更 新 一 次 
var series = this.series[0]; 
setInterval(function () { 
var x = (new Date()).getTime(), // 当期 时 间 
y = Math.random(); 
series.addPoint([x, y], true, true); 
), 1000); 
} 
} 
} 


实例 


文件 名 : highcharts_dynamic_spline.htm 


<html> 
<head> 
<title>Highcharts Af | 3% A#(runoob.com)</title> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min 
<script src="/try/demo_source/highcharts.js"></script> 
</head> 
<body> 
«div id="container" style="width: 550px; height: 400px; margin: 0 ~ 
<script language="JavaScript"> 
$(document).ready(function() { 
var chart = { 
type: 'spline', 
animation: Highcharts.svg, // don't animate in IE < IE 10. 


marginRight: 10, 
events: { 
load: function () { 
// set up the updating of the chart each second 
var series = this.series[0]; 
setInterval(function () { 
var x = (new Date()).getTime(), // current time 
y = Math.random(); 
series.addPoint([x, y], true, true); 
), 1000); 


} 
}; 
var title = { 
text: 'Live random data' 
u 
var xAxis - ( 
type: 'datetime', 
tickPixelInterval: 150 


u 
var yAxis - ( 
title: { 
text: 'Value' 
}, 
plotLines: [{ 
value: 0, 
width: 4, 
color: '#808080' 
}] 
}; 


var tooltip = { 
formatter: function () { 
return '«b»' + this.series.name + '</b><br/>' + 
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '«br, 
Highcharts.numberFormat(this.y, 2); 


} 
}; 
var plotOptions = { 
area: { 
pointStart: 1940, 
marker: { 
enabled: false, 
symbol: 'circle', 
radius: 2, 
states: { 
hover: { 
enabled: true 
} 
} 
} 
} 
}; 


var legend = { 


enabled: false 
}; 
var exporting = { 
enabled: false 
J; 
var series= [{ 
name: 'Random data', 
data: (function () { 
// generate an array of random data 
var data = [],time = (new Date()).getTime(),i; 
for (i = -19; i <= 0; i += 1) { 
data.push({ 
x: time + i * 1000, 
y: Math.random( ) 


3): 
n 
return data; 
30) 


jl; 


var json = {}; 

json.chart chart; 

json.title title; 
json.tooltip = tooltip; 
json.xAxis = xAxis; 

json.yAxis = yAxis; 

json.legend = legend; 
json.exporting = exporting; 
json.series = series; 
json.plotOptions = plotOptions; 


Highcharts.setOptions({ 
global: { 
useUTC: false 
} 


}); 


$('#container').highcharts(json); 


p); 
</script> 
</body> 
</html> 


[E | 
以 上 实例 输出 结果 为 : 





Live random data 


Value 
0 


通过 ind 击 添 加 数据 


chart.events 


在 chart.event 属性 中 添加 click 方法 (整个 图 表 的 绘图 区 上 所 发 生 的 点 击 事件 ) 。 
该 方法 在 图 表 绘 图 区 上 发 生 点 击 时 会 添加 新 的 数据 点 。 


chart: { 
events: { 
click: function (e) { 

获取 点 击 坐 标 和 数据 项 

var x = e.xAxis[0].value, 

y = e.yAxis[0].value, 

gee = this.series[0]; 
/ 添加 有 点 Uh 的 坐标 

series.addPoint([x, y]); 


实例 
文件 名 : highcharts_dynamic_click.htm 


<html> 


<head> 
<title>Highcharts 教程 | 菜 乌 教程 (runoob .com)</tit1le> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min 
<script src="/try/demo_source/highcharts.js"></script> 
</head> 
<body> 
«div id="container" style="width: 550px; height: 400px; margin: 0 : 
<script language="JavaScript"> 
$(document).ready(function() { 
var chart = { 
type: ‘scatter’, 
margin: [70, 50, 60, 80], 
events: { 
click: function (e) { 
// find the clicked values and the series 
var x = e.xAxis[0].value, 
y = e.yAxis[0].value, 
series = this.series[0]; 
// Add it 
series.addPoint([x, y]); 


T 
u 
var title = { 
text: 'User supplied data' 
3 
var subtitle - ( 
text: 'Click the plot area to add a point. Click a point to i! 
u 
var xAxis - ( 
gridLinewidth: 1, 
minPadding: 0.2, 
maxPadding: 0.2, 
maxZoom: 60 


3 
var yAxis - ( 
title: ( 
text: 'Value' 
ty 
minPadding: 0.2, 
maxPadding: 0.2, 
maxZoom: 60, 
plotLines: [{ 
value: 0, 
width: 1, 
color: '4808080' 
}] 
}; 


var legend = { 
enabled: false 

H 

var exporting = { 
enabled: false 


3 
var plotOptions - ( 


series: ( 
linewidth: 1, 
point: { 
events: ( 
'click': function () { 
if (this.series.data.length > 1) { 
this.remove(); 
} 
} 
} 
} 
} 


h 


var series- [( 
data: [[20, 20], [80, 80]] 
il 


var json = {}; 

json.chart = chart; 

json.title = title; 
json.subtitle = subtitle; 
json.xAxis = xAxis; 

json.yAxis - yAxis; 

json.legend - legend; 
json.exporting - exporting; 
json.series - series; 
json.plotOptions - plotOptions; 
$('#container').highcharts(json); 


3): 
«/script» 
«/body» 
«/html» 





以 上 实例 输出 结果 为 : 
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User supplied data 


Click the plot area to add a point. Click a point to remove it. 


100 


75 


50 


Value 


25 





20 40 60 80 
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Highcharts 组 合 图 


Highcharts 柱 形 图 ， 线 条 图 ， 饼 图 组 合 


以 下 实例 演示 了 柱 形 图 ， 线 条 图 ， 饼 图 的 组 合 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


series 配置 


设置 series 的 type 属性 为 column/line/pie , series.type 描述 了 数据 列 类 型 。 默 认 
值 为 "line", 


var series = ( type: 'column' }; 


实例 
文件 名 : highcharts_combinations_column.htm 


<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
回避 | 
以 上 实例 输出 结果 为 : 
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Highcharts 柱 形 图 ， 线 条 图 ， 饼 图 组 合 


3410 


Highcharts 双 Y 轴 , 柱 形 图 ， 线 条 图 组 合 


以 下 实例 演示 了 双 Y 轴 , 柱 形 图 ， 线 条 图 组 合 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Acie 
yAxis 配置 
在 yAxis 属性 中 添加 两 条 Y 轴 的 值 。 


var yAxis = [{ // 第 一 条 Y 轴 ), { // 第 二 条 Y 轴 } }] 


实例 


文件 名 : highcharts_combinations_dualaxes.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
EM 
以 上 实例 输出 结果 为 : 





W3School 前 端 教程 合集 


东京 的 月 平均 气温 和 降雨 量 
Source: runoob.com 
30°C 250 mm 













25°C 200 mm 
£ 20°C 150 mm 
= z 
B à. 
vo = 
2 " 
L 15'C 100 wn ^ 

10°C ; 50 mm 

3 T 7 D 


eu ag ae p 
> 
SEL PS F o5 uS of 


> Do E 
re HS ¥ 
Highcharts.com 


Highcharts NY$, 柱 形 图 ， 线 条 图 组 合 3412 


Highcharts 多 Y 轴 组 合 


以 下 实例 演示 了 多 Y 轴 的 组 合 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Acie 
yAxis 配置 
在 yAxis 属性 中 添加 多 条 Y 轴 的 值 。 


var yAxis = [( // 第 一 条 Y 轴 3}, { // 第 二 条 Y 轴 3,{ // 第 三 题 Y 轴 


实例 


文件 名 : highcharts_combinations_axes.htm 





<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
以 上 实例 输出 结果 为 : 
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Highcharts 多 Y 轴 组 合 3414 


Highcharts BI RR EE] 上 添加 回 Ja 线 


以 下 实例 演示 了 散 点 图 上 添加 回 y 线 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


series 配置 


设置 series 的 type 属性 为 line/scatter , series.type 描述 了 数据 列 类 型 。 默 认 值 为 
var series = { type: ''scatter' }; 


实例 
文件 名 : highcharts_combinations_scatter.htm 

<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
js] ped 
以 上 实例 输出 结果 为 : 
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散 点 图 上 添加 回归 线 
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Highcharts 3D Ej 


Highcharts 3D 柱 形 图 


以 下 实例 演示 了 3D 柱 形 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


chart.options3d 配置 


以 下 列 出 了 3D 图 的 基本 配置 ， 设 置 chart 的 type Blt column, options3d 选项 
可 设置 三 维 效果 。 


var chart = { type: 'column', options3d: { enabled: true, //# 


SSS 


实例 


文件 名 : highcharts_3d_column.htm 





<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
以 上 实例 输出 结果 为 : 
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Highcharts 带 空 值 (null) 和 0 的 3D 柱 形 


以 下 实例 演示 了 带 空 值 (nul) 和 0 的 3D 柱 形 图 。 

我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 

Ace 


chart.options3d 配置 


以 下 列 出 了 3D 图 的 基本 配置 ， 设 置 chart 的 type Blt column, options3d 选项 
可 设置 三 维 效果 。 


var chart = { type: 'column', options3d: { enabled: true, //# 


SSS 


实例 


文件 名 : highcharts_3d_column_null.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
4 m 
以 上 实例 输出 结果 为 : 
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Highcharts 带 空 值 (null) 和 0 的 3D 柱 形 图 
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Highcharts #4 3DHJÉ 
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我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


chart.options3d 配置 


以 下 列 出 了 3D 图 的 基本 配置 ， 设 置 chart 的 type Blt column, options3d 选项 
可 设置 三 维 效果 。 


var chart = { type: 'column', options3d: { enabled: true, //# 


SSS 


实例 


文件 名 : highcharts_3d_stacking.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
Emm 
以 上 实例 输出 结果 为 : 
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3423 


Highcharts 3D 饼 图 


以 下 实例 演示 了 3D 饼 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


chart.options3d 配置 


以 下 列 出 了 3D 图 的 基本 配置 ， 设 置 chart 的 type Blt pie, options3d 选项 可 设 
置 三 维 效果 。 


var chart = { type: 'pie', options3d: { enabled: true, // 显 示 医 
msg 


实例 


文件 名 : highcharts_3d_pie.htm 





<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
以 上 实例 输出 结果 为 : 
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Highcharts 3D F) # 


以 下 实例 演示 了 3D 饼 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Ac iS 


chart.options3d 配置 


以 下 列 出 了 3D 图 的 基本 配置 ， 设 置 chart 的 type Blt pie, options3d 选项 可 设 
置 三 维 效果 。 


var chart = { type: 'pie', options3d: { enabled: true, // 显 示 攻 
pM 





plotOptions.pie.innerSize 

plotOptions.pie.innerSize 用 于 绘制 饼 状 图 时 ， 饼 状 图 的 圆心 预 留 多 大 的 空白 。 
plotOptions.pie.depth 

3D 饼 图 的 厚度 。 


plotOptions: { pie: { innerSize: 100, depth: 45 } }, 


实例 
文件 名 : highcharts_3d_donut.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
so Em E 
以 上 实例 输出 结果 为 : 
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Highcharts 测量 图 


Highcharts 测量 图 


以 下 实例 演示 了 测量 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Fig ie 
chart.type 配置 
配置 chart 的 type 为 ‘gauge’. chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


var chart = { type: 'guage' }; 


pane 配置 


pane 只 适用 在 极 坐 标 图 和 角度 测量 仪 。 此 可 配置 对 象 持 有 组 合 x 轴 和 y 周 的 常规 选 
项 。 每 个 x 轴 和 y 轴 都 可 以 通过 索引 关联 到 窗 格 中 。 


var pane = { startAngle: -150, // x 轴 或 测量 轴 的 开始 度数 ， 以 度数 的 方式 


实例 


文件 名 : highcharts_guage_angular.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
wet 34 
以 上 实例 输出 结果 为 : 
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Highcharts 测量 图 3430 


Highcharts 圆 形 进度 条 陈 测 量 图 


以 下 实例 演示 了 圆 形 进度 条 式 测量 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Fig ie 
chart.type 配置 
配置 chart 的 type 为 'solidguage' ~ chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


var chart = { type: 'solidguage' }; 


pane 配置 


pane 只 适用 在 极 坐 标 图 和 角度 测量 仪 。 此 可 配置 对 象 持 有 组 合 x 轴 和 y 周 的 常规 选 
项 。 每 个 x 轴 和 y 轴 都 可 以 通过 索引 关联 到 窗 格 中 。 


var pane = { startAngle: -150, // x 轴 或 测量 轴 的 开始 度数 ， 以 度数 的 方式 


实例 
文件 名 : highcharts_guage_solid.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
33 





Highcharts 时 钟 


以 下 实例 演示 了 时 钟 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


配备 
chart.type 配置 
配置 chart 的 type 为 ' gauge' 。chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


var chart = { type: 'gauge' }; 


pane 配置 


pane 只 适用 在 极 坐 标 图 和 角度 测量 仪 。 此 可 配置 对 象 持 有 组 合 x 轴 和 y 周 的 常规 选 
项 。 每 个 x 轴 和 y 轴 都 可 以 通过 索引 关联 到 窗 格 中 。 


var pane = { startAngle: -150, // x 轴 或 测量 轴 的 开始 度数 ， 以 度数 的 方式 


实例 


文件 名 : highcharts_guage_clock.htm 





«html» <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
* 获取 当前 时 间 
*/ function getNow() { var now = new Date(); return { hot 
* Pad numbers 
*/ function pad(number, length) { // Create an array of the ! 





以 上 实例 输出 结果 为 : 
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Highcharts 双 轴 车 速 表 


以 下 实例 演示 了 双 轴 车 速 表 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 


Fig ie 
chart.type 配置 
配置 chart 的 type 为 ‘gauge’. chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


var chart = { type: 'gauge' }; 


pane 配置 


pane 只 适用 在 极 坐 标 图 和 角度 测量 仪 。 此 可 配置 对 象 持 有 组 合 x 轴 和 y 周 的 常规 选 
项 。 每 个 x 轴 和 y 轴 都 可 以 通过 索引 关联 到 窗 格 中 。 


var pane = { startAngle: -150, // x 轴 或 测量 轴 的 开始 度数 ， 以 度数 的 方式 


实例 


文件 名 : highcharts_guage_dualaxes.htm 





<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
wet 34 
以 上 实例 输出 结果 为 : 





W3School 前 端 教 程 合集 


双 轴 车 速 表 
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Highcharts 音量 表 (VU Meter) 


以 下 实例 演示 了 音量 表 (VU Meter) 。 

我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 基本 配置 语法 。 接 下 来 让 我 们 来 看 下 其 他 
的 配置 。 

Ace 


chart.type 配置 


配置 chart 的 type 为 ‘gauge’. chart.type 描述 了 图 表 类 型 。 默 认 值 为 "line"。 


var chart = { type: 'gauge' }; 


pane 配置 


pane 只 适用 在 极 坐 标 图 和 角度 测量 仪 。 此 可 配置 对 象 持 有 组 合 x 轴 和 y 周 的 常规 选 
项 。 每 个 x 轴 和 y 轴 都 可 以 通过 索引 关联 到 窗 格 中 。 


var pane = { startAngle: -150, // x 轴 或 测量 轴 的 开始 度数 ， 以 度数 的 方式 





实例 
文件 名 : highcharts_vumeter.htm 


<html> <head> <title>Highcharts 教程 | 菜 乌 教程 (runoob.com)</title: 
EN ^] 
以 上 实例 输出 结果 为 : 
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Highcharts 树 状 图 (Treemap) 
本 章节 我 们 将 为 大 家 介绍 Highcharts 的 热点 图 。 


我 们 在 前 面 的 章节 已 经 了 解 了 Highcharts 配置 语法 。 接 下 来 让 我 们 来 看 下 
Highcharts 的 其 他 配置 。 


树 状 
series 配置 
设置 series 的 type 属性 为 treemap series.type 描述 了 数据 列 类 型 。 默 认 值 为 


var chart = { type: 'treemap' }; 


实例 
文件 名 : highcharts_tree_map.htm 

<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
le 
不 同等 级 树 状 图 
以 下 实例 使 用 不 同 颜色 来 标识 不 同等 级 的 树 状 图 。 





实例 
文件 名 : highcharts_tree_levels.htm (完整 源码 请 点 击 实例 查看 ) 
<html> <head> <title>Highcharts 教程 | 34 Afe(runoob.com)</title 
s] : 
Mz E * 
大 数据 量 树 状 图 


以 下 实例 颜色 了 大 数据 量 的 树 状 图 ， 具 体 实 例 数据 可 通过 点 击 "党 试 一 下 "查看 。 
文件 名 : highcharts_tree_largemap.htm 





<html> <head> <title>Highcharts Tutorial</title> <script src="t 


«| E 





Google 地 图 API 


Google 地 图 API Key 


开始 学 习 本 教程 前 ， 你 需要 拥有 一 个 免费 的 Google 地 图 API key。 


开始 学 习 ? 

开始 学 习 本 教程 前 ， 你 需要 在 Google 上 申请 一 个 指定 的 API key. 

通过 以 下 步骤 我 们 可 以 免费 获取 API key 。 

访问 https://code.google.com/apis/console/, 使 用 你 的 Google 账 号 登陆 。 
登陆 后 会 出 现 如 下 界面 : 


Start using the Google APIs console 


to manage your API usage 


Creating an APIs project will let you 


* Use Google APIs beyond anonymous limits 
e Monitor API usage and control API access 
e Share API management with a team 


Create project... 


md; "Create Project" 按钮。 

在 服务 列表 中 找到 Google Maps API v3, 然后 点 击 "off" (关闭 ) 让 其 开启 该 服务 
器 

在 下 一 个 步骤 中 ， 选 择 "| Agree..." 然后 点 击 "Accept" 按钮 。 现在 你 在 服务 列表 中 
应 该 就 可 以 看 到 Google Maps API v3 已 经 变 为 "on" (FE) 状态 。 

接着 在 左 侧 菜单 中 点 击 "API Access" ， 在 右 侧 栏 中 将 看 到 以 下 提示 "Create an 
OAuth 2.0 client id..." 

点 击 "Create an OAuth 2.0 client id..."， 闻 弹出 一 个 表单 ， 表 单 需 要 你 填 入 你 的 项 
目 名 称 ， 项 目 图 片 或 者 logo， 然 后 点 击 "Next" 按钮 。 

然后 ， 我 们 需要 选择 应 用 类 型 ("Web application" : 网 站 应 用 ), 然后 填写 你 的 站 点 
地 址 ， 之 后 点 击 "Create Client Id" 按钮 即 可 。 


最 后 我 们 就 可 以 得 到 我 们 需要 的 API key 如 下 图 所 示 : 


Simple API Access 
Use API keys to identify your project when you do not need to access user data. Learn more 


Key for browser apps (with referers) 


API key: AIzaSyDYOkkJiTPVd2U7aTOAwhc9ySH60HxOIYM 
Referers: Any referer allowed 

Activated on: Mar 20, 2012 5:46 AM 

Activated by: support(àw3schools.com - you 


Create new Server key... | Create new Browser key... | 


9 注意 : 保存 你 的 API key! (在 填写 的 指定 URL 中 开发 所 有 的 Google 地 图 应 
用 你 需要 使 用 该 API key), 


Google Maps 基础 


创建 一 个 简单 的 Google 地 图 


现在 让 我 们 创建 一 个 简单 的 Google 地 图 。 
以 下 是 显示 了 英国 伦敦 的 Google 地 图 : 


实例 


<!DOCTYPE html» 

<html> 

<head> 

«script src-"http://maps.googleapis.com/maps/api/js?key-AIzaSyDYOkl 
«/script» 


«script» 
function initialize() 
{ 
var mapProp = { 
center:new google.maps.LatLng(51.508742, -0.120850), 
zoom:5, 
mapTypeId:google.maps.MapTypeld.ROADMAP 
var map-new google.maps.Map(document.getElementById("googleMap") 
,mapProp); 


google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 


<body> 
«div id="googleMap" style="width: 500px; height : 380px; "></div> 


</body> 
</html> 


E rcx 


实例 解析 


我 们 以 以 上 实例 来 解析 Google 地 图 的 创建 过 程 。 





应 用 为 什么 要 声明 HTML5? 


<!DOCTYPE html» 


大 多 数 浏览 器 使 用 "标准 模式 " 的 HTML5 文档 泻 染 页 面 ， 这 就 意味 着 你 的 应 用 是 兼 
容 各 大 浏览 器 的 。 


另外 ， 如 果 没 有 DOCTYPE 标 签 ， 浏 览 器 则 使 用 混杂 模式 (quirks mode) 进 行 泻 染 页 
面 内 容 。 


提示 : 应 该 注意 的 是 一 些 " 混 杀 模式 "中 的 CSS 并 不 能 使 用 与 标准 模式 中 。 在 具体 的 
应 用 中 ， 所 有 基于 百分比 的 大 小 都 必须 从 父 块 元 素 继 承 。 如 果 在 父 模 块 中 没有 指定 
大 小 ， 黑 认 值 为 0 x 0 像素 。 如 果 你 想 使 用 百分比 ， 可 以 在 <style> 标签 中 声明 ， 如 
TBI: 


«style type="text/css"> 

html {height : 100%} 

body {height :100%;margin:0;padding:0} 
#googleMap {height :100%} 

</style> 


这 个 样式 声明 表明 地 图 模块 的 (GoogleMap) 应 HTML 高 度 为 100%。 


添加 Google 地 图 API Key 
在 以 下 实例 中 第 一 个 <script> 标签 中 必须 包含 Google 地 图 API : 


«script srcz"http://maps.googleapis.com/maps/api/js?key- **YOUR AP: 
E 
将 google 生 成 的 API key 放置 于 key 参数 中 (key=YOUR API KEY), 


The sensor 参数 是 必须 的 ， 该 参数 用 于 指明 应 用 程序 是 否 使 用 一 个 传感器 (KM 
GPS 导航 ) 来 定位 用 户 a. 参数 值 可 以 设置 为 true KF false. 


HTTPS 


如 果 你 的 应 用 是 安全 的 HTTP(HTTPS:HTTP Secure) 应 用 ,你 可 以 使 用 HTTPS 来 加 
载 Google 地 图 API : 





«script srcz"https://maps.googleapis.com/maps/api/js?key- **YOUR AF 
«| d 


异步 加 载 








同 祥 我 们 也 可 以 在 页 面 完全 载 人 后 再 加 载 Google 地 图 API. 


以 下 实例 使 用 了 window.onload 来 实现 页 面 完全 载 入 后 加 载 Google 地 图 。 
loadScript() ES 2X 6) Œ T JIR, Google 地 图 API «script» 标签 。 此 外 在 标签 的 末尾 添 
加 了 callback=initialize 参数 ， initialize() 作 为 回调 函数 会 在 API 完 全 坊 入 后 执行 : 


实例 


function loadScript() 
{ 


var script 
script.src 


j 
window.onload - loadScript; 


a] 8 


document.createElement("script"); 
"http://maps.googleapis.com/maps/api/js? key-AIz: 





定义 地 图 属性 
在 初始 化 地 图 前 ， 我 们 需要 先 创 建 一 个 Map 属性 对 象 来 定义 一 些 地 图 的 属性 : 


var mapProp = { 
center:new google.maps.LatLng(51.508742, -0.120850), 
zoom: 7, 
mapTypeId: google.maps.MapTypeld.ROADMAP 


, 


center (中 心 点 ) 


中 心 属 性 指定 了 地 图 的 中 心 ， 该 中 心 通过 坐标 (纬度 ， 经 度 ) 在 地 图 上 创建 一 个 中 
心 点 


Zoom (缩放 级 数 ) 

zoom 属性 指定 了 地 图 的 缩放 级 数 。zoom: 0 显示 了 整个 地 球 地 图 的 完全 缩放 。 
MapTypeld (地 图 的 初始 类 型 ) 

mapTypeld 属性 指定 了 地 图 的 初始 类 型 。 

mapTypeld 包 括 如 下 四 种 类 型 : 


google.maps.MapTypeld.HYBRID : 显示 卫星 图 像 的 主要 街道 透明 层 
google.maps.MapTypeld.ROADMAP : 显示 普通 的 街道 地 图 
google.maps.MapTypeld.SATELLITE : 显示 卫星 图 像 
google.maps.MapTypeld. TERRAIN : 显示 带 有 自然 特征 (如 地 形 和 植被 ) 的 
地 图 


在 哪里 显示 Google 地 图 
通常 Google 地 图 使 用 于 <div> 元 素 中 : 


«div id-"googleMap" style-"width:500px;height:380px;"»«/div» 


注意 : 地 图 将 以 div 中 设置 的 大 小 来 显示 地 图 的 大 小 ， 所 以 我 们 可 以 在 <div> 元 素 
中 设置 地 图 的 大 小 。 


创建 一 个 Map 对 象 


var map=new google.maps.Map(document.getElementById("googleMap") 
,mapProp); 


二 il 
以 上 代码 使 用 参数 (mapProp) 在 <div> 元 素 (id 7; googleMap) 创建 了 一 个 新 的 地 图 。 
提示 : 如 果 想 在 页 面 中 创建 多 个 地 图 ， 你 只 需要 添加 新 的 地 图 对 象 即 可 。 

以 下 实例 定义 了 四 个 地 图 实例 (四 个 地 图 使 用 了 不 同 的 地 图 类 型 ): 


实例 


var map = new google.maps.Map(document.getElementById("googleMap"), 


var map2 = new google.maps.Map(document.getElementById("googleMap2' 
var map3 - new google.maps.Map(document.getElementById("googleMap3' 
var map4 - new google.maps.Map(document.getElementById("googleMap4' 


[E —Á - 





加 载 地 图 


窗口 载 人 后 通过 执行 initialize() 函数 来 初始 化 Map 对 象 ， 这 样 可 以 确保 在 页 面 完 全 
载 人 后 再 加 载 Google 地 图 : 


google.maps.event.addDomListener(window, 'load', initialize); 


Google th A #12 


在 Google 地 图 中 添加 一 个 标记 


Google 地 图 - 4012 


壹 加 层 是 地 图 上 绑 定 到 经 度 /纬度 坐标 的 对 象 ， 会 随 您 拖 动 或 缩放 地 图 而 移动 。 
Google 地 图 API AM FJVER Š DIL : 


地 图 上 的 点 使 用 标记 来 显示 ， 通 常 显示 自 定义 图 标 。 标 记 是 GMarker 类 型 的 
对 象 ， 并 且 可 以 利用 Glcon 类 型 的 对 象 来 自 定义 图 标 。 

地 图 上 的 线 使 用 折线 (表示 点 的 集合 ) 来 显示 。 线 是 类 型 为 GPolyline 的 对 
象 


地 图 上 的 区 域 显示 为 多 边 形 (如果 是 任意 形状 的 区 域 ) EmA ORE 
矩形 区 域 ) 。 多 边 形 类 似 于 闭合 的 折线 ， 因 此 可 以 是 任何 形状 。 地 面倒 加 层 通 
常用 于 地 图 上 与 图 块 有 直接 或 间接 关联 的 区 域 。 

地 图 本 身 使 用 图 块 侣 加 层 显 示 。 如 果 您 有 自己 的 系列 图 块 ， 可 以 使 用 
GTileLayerOverlay 类 来 改变 地 图 上 已 有 的 图 块 ， 其 至 可 以 使 用 GMapType 来 
创建 您 自己 的 地 图 类 型 。 

e 信息 窗口 也 是 一 种 特殊 的 县 加 层 。 但 是 请 注意 ， 信息 窗口 会 自动 添加 到 地 图 
中 ， 并 且 地 图 只 能 添加 一 个 类 型 为 GlnfoWindow 的 对 象 。 


Google 地 图 - 添加 标记 


记 标 识 地 图 上 的 点 。 黑 认 情 况 下 ， 它 们 使 用 G_DEFAULT_ICON (您 也 可 以 指定 自 
定义 图 标 ) o GMarker 4i5E20 GLatLng 和 GMarkerOptions (Wit) 对 象 作 为 
参数 


£z o 


标记 设计 为 可 交互 。 人 例如， 默认 情况 下 它们 接收 "click" 事件 ， 常 用 于 在 事件 侦 听 器 
中 打开 信息 窗口 。 


通过 setMap() 方法 在 地 图 上 添加 标记 : 
实例 


var marker=new google.maps.Marker({ 
position:myCenter, 


T): 


marker.setMap(map); 


Google 地 图 - 可 拖 动 的 标记 


以 下 实例 和 将 减少 如 何 使 用 animation 属性 来 拖 动 标记 : 
实例 


marker=new google.maps.Marker((1 
position:myCenter, 
animation: google.maps.Animation.BOUNCE 


+); 


marker.setMap(map); 


Google 地 图 - 图 标 


标记 可 以 用 自 定义 的 新 图 标 来 显示 ， 以 替代 默认 图 标 : 
实例 


var marker=new google.maps.Marker({ 
position:myCenter, 
icon: 'pinkball.png' 
3); 


marker.setMap(map); 


Google 地 图 - 折线 


GPolyline 对 象 可 在 地 图 上 创建 线性 过 加 层 。GPolyline 包括 一 系列 点 ， 并 创建 一 系 
列 有 序 连 接 这 些 点 的 线段 。 
折线 支持 以 下 属性 : 

e path - 指定 了 多 个 直线 的 纬度 /经 度 坐 标 

e strokeColor - 指定 直线 的 十 六 进 制 颜色 值 (格式 : "REFFFFF") 

e strokeOpacity - 指定 直线 的 透明 度 ( 该 值 为 0.0 到 1.0) 

e strokeWeight - 定义 线 的 宽度 ,以 像素 为 单位 。 

e editable - 定义 用 户 是 否 可 编辑 直线 (true/false) 


实例 


var myTrip = [stavanger, amsterdam, london]; 
var flightPath = new google.maps.Polyline({ 
path:myTrip, 
strokeColor : "#0000FF", 
strokeOpacity:0.8, 
strokeWeight:2 


T) 


Google 地 图 - 多 边 形 


GPolygon 对 象 类 似 于 GPolyline 对 象 ， 因 为 它们 都 包括 一 系列 有 序 的 点 。 但 是 ， 
多 边 形 不 像 折线 一 样 有 两 个 端点 ， 而 是 设计 为 定义 形成 闭环 的 区 域 。 


和 折线 一 样 ， 您 可 以 自 定义 多 边 形 边线) 的 颜色 、 粗 细 和 透明 度 ， 以 及 封闭 的 填 
充 区 域 的 颜色 和 透明 度 。 颜 色 应 是 十 六 进 制 数字 HTML 样式 。 


多 边 形 支持 以 下 属性 : 


path - 指定 多 个 直线 纬度 的 坐标 (第 一 个 和 最 后 一 个 坐标 是 相等 的 ) 
strokeColor - 指定 直线 的 十 六 进 制 颜色 值 (格式 : "#FFFFFF") 
strokeOpacity -指定 直线 的 透明 度 ( 该 值 为 0.0 到 1.0) 
strokeWeight - 定义 线 的 宽度 ,以 像素 为 单位 。 

fillColor - 指定 闭合 区 域 的 十 六 进 制 颜色 值 (格式 : "REFFFFF") 
fillOpacity - 指定 填充 颜色 的 透明 度 (该 值 为 0.0 到 1.0) 

editable - 定义 用 户 是 否 可 编辑 直线 (true/false) 


实例 


var myTrip = [stavanger, amsterdam, london, stavanger]; 
var flightPath = new google.maps.Polygon({ 
path:myTrip, 
strokeColor : "#0000FF", 
strokeOpacity:0.8, 
strokeWeight:2, 
fillColor:"40000FF", 
fillOpacity:0.4 
3); 


Google 地 图 - 


圆 支 持 以 下 属性 : 
e center - 指定 圆 的 中 心 点 参数 google.maps.LatLng 
e radius - 指定 圆 的 半径 ， 以 米 为 单位 
e strokeColor - 指定 弧 线 的 十 六 进 制 颜色 值 (格式 : "REFFFFF") 


strokeOpacity - 指定 弧 线 的 透明 度 (该 值 为 0.0 到 1.0) 
strokeWeight -定义 线 的 宽度 ,以 像素 为 单位 。 

fillColor - 指定 圆 的 十 六 进 制 颜色 值 填 充值 (格式 : "#FFFFFF") 
fillOpacity - 指定 填充 颜色 的 透明 度 (该 值 为 0.0 到 1.0) 
定义 用 户 是 否 可 编辑 直线 (true/false) 


实例 


var myCity = new google.maps.Circle({ 
center :amsterdam, 
radius: 20000, 
strokeColor : "#0000FF", 
strokeOpacity:0.8, 
strokeWeight:2, 
fillColor:"#0000FF", 
fillOpacity:0.4 

3); 


Google 地 图 - 信息 窗口 


在 一 个 标记 上 显示 一 个 文本 信息 窗口 : 
实例 


var infowindow = new google.maps.Infowindow({ 
content:"Hello World!" 


+); 


infowindow. open(map, marker); 


Google 地 图 - AUZSSFH 


Google Maps API 参考 手册 . 


Google 地 图 事件 


点 击 标 记 缩 放 地 图 - 绑 定 在 google 地 图 上 的 事件 。 


点 击 标记 缩放 地 图 


我 们 仍然 使 用 上 一 通 文 章 使 用 的 英国 伦敦 的 地 图 。 
点 用 户 点击 标 记 时 实现 缩放 地 图 的 功能 (点 击 标记 时 绑 定 地 图 缩放 事件 )。 
代码 如 下 : 


实例 


// Zoom to 9 when clicking on marker 
google.maps.event.addListener(marker, 'click',function() { 
map.setzoom(9); 
map.setCenter(marker.getPosition()); 


+); 


使 用 addListener() 事件 义理 程序 来 注册 事件 的 监听 。 该 方法 使 用 一 个 对 象 ， 一 个 
事件 来 监听 ， 当 指定 的 事件 发 生 时 函数 将 被 调用 。 


重重 标记 
我 们 通过 给 地 图 添加 事件 义理 程序 来 改变 "center 属性 ， 以 下 代码 使 用 
center changed 事件 在 3 秒 后 标记 移 会 中 心 点 : 


实例 


google.maps.event.addListener(map, 'center changed',function() { 
window.setTimeout(function() { 
map.panTo(marker.getPosition()); 
1,3000); 


, 


n ————————————————'OÓÁÍÀ Án] | 


点 击 标记 时 打开 信息 窗口 。 


a? 
实例 


var infowindow = new google.maps. Infowindow( { 
content:"Hello World!" 


}); 


google.maps.event.addListener(marker, 'click', function() { 
infowindow.open(map,marker); 


+); 


设置 标记 及 打开 每 个 标记 的 信息 窗口 
当 用 户 点 击 地 图 时 执行 一 个 窗口 


用 户 点 击 地 图 某 个 位 置 时 使 用 placeMarker() 郴 数 在 指定 位 置 上 放置 一 个 标记 ， 并 
弹出 信息 窗口 E 


实例 


google.maps.event.addListener(map, 'click', function(event) { 
placeMarker(event.latLng); 


2r 


function placeMarker(location) ( 
var marker = new google.maps.Marker(( 
position: location, 


map: map, 

3); 

var infowindow = new google.maps.Infowindow( { 
content: 'Latitude: ' + location.lat() + 
'«br»Longitude: ' + location.lng() 

3); 

infowindow.open(map,marker); 


j 


Google 地 图 - 事件 参考 手册 


Google Maps API 参考 手册 。 


Google 地 图 控件 集 


一 个 Google 地 图 - 默认 控件 集 设 置 : 


Google 地 图 - 默认 控件 集 设置 : 


当 使 用 一 个 标准 的 google 地 图 ， 它 的 默认 设置 如 下 : 

.Zoom- 显 示 一 个 滑动 条 来 控制 map 的 Zoom 级 别 

.PPan- 地 图 上 显示 的 是 一 个 平底 砚 样 的 控件 ， 点 击 4 个 角 平 移 地 图 
.MapType- 人 允许 用 户 在 map types(roadmap 和 satallite) 之 间 切 换 
.StreetView- 显 示 为 一 个 街景 小 人 图 标 ， 可 拖 搜 到 地 图 上 某 个 点 来 打开 街景 


Google 地 图 - 更 多 控件 集 


除了 以 上 默认 控件 集 ,Google 还 有 : 
e .Scale- 显 示 地 图 比例 尺 
e .Rotate- 显 示 一 个 小 的 圆周 图 标 ， 可 以 转动 地 图 
e .verview Map- 从 一 个 广 域 的 视角 俯视 地 图 


创建 地 图 时 你 可 以 通过 设置 选项 指定 哪些 控件 集 显示 或 者 通过 调用 setOptions() 来 
改变 地 图 的 设置 选项 。 


Google 地 图 - 天 闭 默认 控件 集 


你 可 能 希望 能 够 关闭 默认 的 控件 集 。 
为 了 关闭 默认 控件 集 , 设 置地 图 的 disableDefaultUI 的 属性 为 true: 


实例 


disableDefaultUI:true 


Google 地 图 - 开 所 有 控件 集 


一 些 控件 集 默 认 显 示 在 地 图 上 ， 而 其 它 的 不 会 ， 除 非 你 设置 它们 。 
设置 控件 为 true 使 其 可 见 -设置 控件 为 false 则 隐藏 它 。 
以 下 实例 开启 所 有 的 控件 : 


实例 


panControl:true, 
zoomControl:true, 
mapTypeControl:true, 
scaleControl:true, 
streetViewControl:true, 
overviewMapControl:true, 
rotateControl:true 


Google 地 图 - 修改 控件 集 


某 些 地 图 控件 是 可 配置 的 。 通 过 制定 控件 选项 域 改 变 控 件 集 。 


F 举 个 例子 来 说 ， 修 改 Zoom 控件 的 选项 在 zoomControlOptions 指 定 。 
zoomControlOptions 包 含 如 下 3 种 选项 : 


e .google.maps.ZoomControlStyle.SMALL- 显 示 最 小 化 zoom 控件 

e .google.maps.ZoomControlStyle.LARGE- 显 示 标 准 zoom 滑动 控件 

e.google.maps.ZoomControlStyle.DEFAULT- 基 于 设备 和 地 图 大 小 ， 选 择 最 合适 
的 控件 


实例 


zoomControl: true, 
zoomControlOptions: { 
style: google.maps.ZoomControlStyle.SMALL 


注意 : 如 果 需 要 修改 一 个 控件 ， 首 先 开启 控件 (设置 其 为 true)。 
另 一 个 控件 为 MapType 控件 。 
MapType 控件 可 显示 为 以 下 style 选项 之 一 : 


e google.maps.MapTypeControlStyle.HORIZONTAL_BAR， 用 于 在 水 平 栏 中 将 
一 组 控件 显示 为 如 Google Maps 中 所 示 按 钮 。 

e google.maps.MapTypeControlStyle.DROPDOWN MENU， 用 于 显示 单个 按钮 
控件 ， 以 便 您 从 下 拉 菜 单 中 选择 地 图 类 型 。 

e google.maps.MapTypeControlStyle.DEFAULT， 用 于 显示 "默认 "的 行为 ， 该 行 
为 取决 于 屏幕 尺寸 ， 并 且 可 能 会 在 API 以 后 的 版 本 中 有 所 变化 。 


实例 


mapTypeControl:true, 

mapTypeControlOptions: { 
style:google.maps.MapTypeControlStyle.DROPDOWN MENU 

j 


同样 你 可 以 使 用 ControlPosition 属 性 指定 控件 的 位 置 : 
实例 


mapTypeControl:true, 

mapTypeControlOptions: { 
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
position: google.maps.ControlPosition.TOP_CENTER 

j 


Google 地 图 - 自 定义 控件 集 
创建 一 个 返回 伦敦 自 定义 控件 ， 用 于 点 击 事件 : (如 果 地 图 被 拖 搜 ): 


实例 


controlDiv.style.padding = '5px'; 

var controlUI = document.createElement('div'); 
controlUI.style.backgroundColor = 'yellow'; 
controlUI.style.border='1px solid'; 
controlUI.style.cursor - 'pointer'; 
controlUI.style.textAlign - 'center'; 
controlUI.title - 'Set map to London'; 
controlDiv.appendChild(controlUI); 

var controlText = document.createElement('div'); 
controlText.style.fontFamily-'Arial,sans-serif'; 
controlText.style.fontSize='12px'; 
controlText.style.paddingLeft = '4px'; 
controlText.style.paddingRight = '4px'; 
controlText.innerHTML = '<b>Home<b>' 
controlUI.appendChild(controlText); 


Google 地 图 - 控件 集 参 考 手册 


Google Maps API 参考 手册 . 


Google 地 图 类 型 


HYBRID 类 型 的 google 地 图 : 


Google 地 图 - 基本 地 图 类 型 


Google Maps API 中 提供 了 以 下 地 图 类 型 : 


MapTypeId.ROADMAP ， 用 于 显示 默认 的 道路 地 图 视图 

MapTypeId.SATELLITE ， 用 于 显示 Google 地 球 卫 星 图 片 
MapTypeId.HYBRID ， 用 于 同时 显示 普通 视图 和 卫星 视图 
MapTypeId.TERRAIN ， 用 于 根据 地 形 信 息 显 示 实 际 地 图 。 


要 通过 Map 修改 正在 使 用 的 地 图 类 型 ， 您 可 以 为 其 设置 mapTypeld 属性 : 


var mapProp = { 
center:new google.maps.LatLng(51.508742, -0.120850), 
zoom: 7, 
mapTypeId: google.maps.MapTypeId.HYBRID 


或 者 动态 修改 mapTypeld : 


map.setMapTypelId(google.maps.MapTypeId.HYBRID) ) ; 


Google 地 图 - 45° 图 像 


Google Maps API 针对 特定 位 置 支持 特殊 的 45° 图 像 。 


此 类 高 分 辨 率 图 像 可 提供 朝向 各 基本 方向 (东南 西北 ) 的 透视 视图 。 对 于 支持 的 地 


图 类 型 ， 这 些 图 片 还 可 提供 更 高 的 缩放 级 别 。 


现 有 的 google.maps.MapTypeld.SATELLITE 和 google.maps.MapTypeld.HYBRID 
地 图 类 型 支持 高 缩放 级 别 的 45° 透视 图 像 (如 果 有 的 话 ) 。 如 果 您 放大 的 位 置 拥有 


此 类 图 像 ， 那 么 这 些 地 图 类 型 将 会 自动 通过 以 下 方式 更 改 其 视图 : 


e 地 图 上 现 有 的 任何 平移 控件 都 将 会 变更 为 在 现 有 的 导航 控件 周围 添加 一 个 
转 轮 。 您 可 以 通过 该 罗盘 来 更 改 任意 45" 图 像 的 方向 ， 方 法 是 : 拖 动 该 罗 tR 


轮 ， 然 后 将 方向 对 准 包含 图 像 的 最 近 支 持 方向 。 


。 一 个 旋转 控件 将 会 间隙 显示 在 现 有 的 平移 和 缩放 控件 之 间 ， 它 可 用 于 将 图 像 轩 


绕 文 持 方向 旋转 。 旋 转 控件 仅 支 持 顺 时 针 方 向 旋转 。 


e 以 当前 位 置 为 中 心 的 45° 透视 图 像 将 会 蔡 代 卫星 图 像 或 混合 图 像 。 默 认 情 ; 
下 ， 此 类 视图 会 朝向 北方 。 如 果 候 a 


像 或 混合 图 像 。 
e MapType 控件 将 启用 子 菜单 切换 控件 ， 用 于 显示 45° 图 像 。 


注意 : 缩小 显示 45° 图 像 的 地 图 类 型 将 会 还 原 所 有 更 改 ， 并 重新 构建 原始 地 图 类 
型 。 


以 下 示例 显示 了 意大利 威尼斯 公 另 宫 45" 视 图 : 
实例 


var mapProp = { 

center:myCenter, 

zoom: 18, 
mapTypeId:google.maps.MapTypeld.HYBRID 


, 


提示 : Google 正在 不 断 地 为 更 多 城市 添加 45^ 图 像 。 有 关 最 新 信息 ， 请 参阅 
Google 地 图 上 的 45° 图 像 列 表 。 


Google 地 图 - 启用 和 停 用 45° 图 像 - setTilt(0) 


您 可 以 通过 在 Map 对 象 上 调用 setTilt(0) 来 停 用 45° 图 像 。 要 和 启用 适用 于 支持 的 地 
图 类 型 的 45° 透视 图 像 ， 请 调用 setTilt(45)。 


实例 


map.setTilt(0); 


Google 地 图 - 参考 手册 


Google 地 图 API 参考 手册 。 


Google 地 图 API 参考 手册 


Google tt ø API 参考 手册 


地 
=a pm 
Map() 在 指定 的 HTML 容器 中 创建 新 的 地 图 ， 该 容器 通常 是 一 个 DIV 


元 素 。 


构造 酚 数 /对 象 


Marker 


MarkerOptions 


Markerlmage 


MarkerShape 


Animation 


InfoWindow 
InfoWindowOptions 
Polyline 
PolylineOptions 


Polygon 
PolygonOptions 
Rectangle 
RectangleOptions 
Circle 


CircleOptions 


GroundOverlay 


GroundOverlayOptions 


OverlayView 


MapPanes 


MapCanvasProjection 


事件 


创建 一 个 标记 。 


标记 的 选项 。 由 DirectionsRenderer 泻 染 的 所 有 标记 
都 将 使 用 这 些 选项 。 


A structure representing a Marker icon or shadow 
image 


Defines the marker shape to use in determination of 
a marker's clickable region (type and coord) 


Specifies animations that can be played on a 
marker (bounce or drop) 


Creates an info window 

Options for rendering the info window 

Creates a polyline (contains path and stroke styles) 
Options for rendering the polyline 


Creates a polygon (contains path and stroke-fill 
styles) 


Options for rendering the polygon 


Creates a rectangle (contains bounds and stroke-fill 
styles) 


Options for rendering the rectangle 


Creates a circle (contains centert+radius and 
stroke-fill styles) 


Options for rendering the circle 


HERRUS R 描述 


It has no methods and no constructor. Its instances are 
MapsEventListener | returned from addListener(), addDomListener() and are 
eventually passed back to removeListener() 


event Adds/Removes/Trigger event listeners 


Returned from vari m 
MouseEvent eturned from various mouse events on the map and 


overlays 
控件 集 
Hye EB xt i 描述 
MapTypeControlOptions Holds options for modifying a control (position 


and style) 


Specifies what kind of map control to display 


MapTypeControlStyle (Drop-down menu or buttons) 


Options for rendering of the overview map 


OverviewMapControlOptions control (opened or collapsed) 


Options for rendering of the pan control 


PanControlOptions (position) 


Options for rendering of the rotate control 


RotateControlOptions ae 
(position) 


Options for rendering of the scale control 


ScaleControlOptions (position and style) 


ScaleControlStyle Specifies what kind of scale control to display 


Options for rendering of the street view 


StreetViewControlOptions an 
pegman control (position) 


Options for rendering of the zoom control 


ZoomControlOptions (position and style) 


Specifies what kind of zoom control to display 


ZoomControlStyle 
(large or small) 


Specifies the placement of controls on the 
map 


ControlPosition 


地 图 API Map() 构造 器 


实例 
创建 一 个 Google 地 图 : 


var map=new google.maps.Map(document.getElementById("googleMap"),m: 


« Exam] Tn 
定义 和 用 法 


Map() 构造 器 创建 了 一 个 新 的 地 图 并 插入 到 指定 的 HTML 元 素 中 (<div> 元 素 )。 








语法 


new google.maps.Map( HTMLElement , MapOptions ) 


参数 值 
参数 描述 
HTMLElement 规定 要 把 地 图 放置 在 那个 HTML 元 素 中 。 
MapOptions 带 有 地 图 初始 化 变量 /选项 的 MapOptions 对 象 。 


Map() 的 方法 
方法 返回 值 描述 
fitBounds(LatLngBounds) None 


返回 当前 视 口 的 
getBounds() LatLng,LatLng 度 /经 度 和 东北 纪 
DZ o 


getCenter() LatLng ^ 的 中 心 


getDiv() 


getHeading() 


getMapTypeld() 


getProjection() 


getStreetView() 


getTilt() 


getZoom() 


panBy(xnumber, ynumber) 


panTo(LatLng) 


panToBounds(LatLngBounds) 


setCenter(LatLng) 


setHeading(number) 


setMapTypeld(MapTypeld) 


setOptions(MapOptions) 


setStreetView(StreetViewPanorama) 


Node 


number 


HYBRID ROADMAP 
SATELLITE 
TERRAIN 


Projection 


StreetViewPanorama 


number 


number 


None 


None 


None 


None 


None 


None 


None 


None 


返回 包含 地 图 的 
对 象 。 


返回 航拍 图 像 的 
向 (支持 SATE 
#0 HYBRID 地 下 
型 ) 。 


返回 当前 地 图 类 


返回 当前 
Projection (1&$ 


返回 绑 定 到 地 图 
的 


StreetViewPanc 


返回 航拍 图 像 的 
度数 (支持 

SATELLITE 和 
HYBRID 地 图 类 


返回 地 图 的 当前 
别 。 


通过 以 像素 计 的 
离 改 变 地 图 的 中 


改变 地 图 的 中 心 
的 LatLng。 


将 地 图 平移 所 需 
距离 以 包含 给 定 
LatLngBounds。 


设置 航拍 图 像 的 
向 《以 度 为 单位 


改变 要 显示 的 地 
型 。 


绑 定 一 个 
StreetViewPanc 
到 地 图 上 。 


设置 航拍 图 像 的 


setTilt(number) 


setZoom(number) 


Map() 的 属性 
属性 
controls 
mapTypes 


overlayMapTypes 


Map() 的 事件 


None 


None 


类 型 


Array. <MVCArray.<Node>> 


Map TypeRegistry 


MVCArray. <MapType> 


度数 (支持 
SATELLITE 和 
HYBRID 地 图 类 


描述 
要 附加 到 地 图 上 的 额外 控 
f o 
按 字符 串 ID 划分 的 
MapType 实例 的 注册 


o 


ze & IB PO E] AB, 


事件 


bounds_changed 


center_changed 


click 


dblclick 


drag 
dragend 
dragstart 


heading_changed 


idle 


maptypeid_changed 


mousemove 


mouseout 


mouseover 
projection changed 
resize 


rightclick 


tilesloaded 


tilt changed 


zoom changed 


参数 


None 


None 


MouseEvent 


MouseEvent 


None 
None 


None 


None 


None 


None 


MouseEvent 


MouseEvent 


MouseEvent 
None 
None 


MouseEvent 


None 


None 


None 


描述 
当 可 视 区 域 范 围 更 改 时 会 触发 此 事件 。 


当地 图 center (HD) 属性 更 改 时 会 触 
发 此 事件 。 


当 用 户 点 击 地 图 〈 但 不 是 点 击 标记 或 信 
ABO) 时 会 触发 此 事件 。 


当 用 户 双击 地 图 时 会 触发 此 事件 。 请 注 
意 ， 触 发 此 事件 前 还 会 触发 点 击 事件 。 


当 用 户 拖 动 地 图 时 会 反复 触发 此 事件 。 
当 用 户 停止 拖 动 地 图 时 会 触发 此 事件 。 
当 用 户 开始 拖 动 地 图 时 会 触发 此 事件 。 


当地 图 heading (方向 ) 属性 更 改 时 会 
触发 此 事件 。 


当地 图 在 平移 或 缩放 之 后 变 为 闲置 状态 
时 会 触发 此 事件 。 


当 mapTypeld 属性 更 改 时 会 触发 此 事 


o 


只 要 用 户 的 鼠标 在 地 图 容器 上 移动 ， 就 
会 触发 此 事件 。 


当 用 户 的 鼠标 从 地 图 容器 上 退出 时 会 触 
发 此 事件 。 


=i 户 的 最 标 进入 地 图 容器 时 会 触发 此 


o 


当 投影 更 改 时 会 触发 此 事件 。 
当地 图 (div) 更 改 尺寸 时 会 触发 此 事 


o 


当 用 户 右 击 地 图 时 会 触发 此 事件 。 

当 可 见 图 块 载 入 完成 后 会 触发 此 事件 。 

eo E 
人 


o 


当地 图 zoom (缩放 ) 属性 更 改 时 会 触 
发 此 事件 。 


免责 声明 


版 权 信 息 
菜 乌 教程 (www.runoob.com) 刊载 的 所 有 内 容 ， 包 括 文字 、 图 片 、 音 频 、 视 频 、 
软件 、 程 序 、 以 及 网 页 版 式 设计 等 均 在 网 上 搜集 。 


菜 乌 教程 提供 的 内 容 仅 用 于 个 人 学 习 、 研 究 或 欣赏 。 我 们 不 保证 内 容 的 正确 性 。 通 
过 使 用 本 站 内 容 随 之 而 来 的 风险 与 本 站 无 关 

访问 者 可 将 本 网 站 提供 的 内 容 或 服务 用 于 个 人 学 习 、 研 究 或 欣赏 ， 以 及 其 他 非 两 业 
性 或 非 硬 利 性 用 途 ， 但 同时 应 遵守 著作 权 法 及 其 他 相关 法 律 的 规定 ， 不 得 侵犯 本 网 
站 及 相关 权利 人 的 合法 权利 。 

本 网 站 内 容 原 作者 如 不 愿意 在 本 网 站 刊登 内 容 ， 请 及 时 通知 本 站 ， 予 以 删除 。 


本 网 站 的 编程 技术 内 容 大 部 分 翻译 自 W3Schools Online Web Tutorials 与 
Tutorialspoint, 内 容 原 作者 如 不 愿意 在 本 网 站 刊登 内 容 ， 请 及 时 通知 本 站 ， 予 以 删 
除 。 
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任何 网 站 都 可 以 链接 到 菜 
容 


如 果 您 需要 在 对 少量 内 
面 的 链接 。 


保证 


菜 乌 教程 不 提供 任何 形式 的 保证 。 所 有 和 与 使 用 本 站 相关 的 直接 风险 均 由 用 户 承 担 。 
菜 乌 教程 提供 的 所 有 代码 均 为 实例 ， 并 不 对 性 能 、 适 用 性 、 适 销 性 或 /及 其 他 方面 提 
供 任何 保证 。 

菜 乌 教程 的 内 容 可 能 包含 不 准确 性 或 错误 。 菜 乌 教 程 不 对 本 网 站 及 其 内 容 的 准确 性 
进行 保证 。 如 果 您 发 现 本 站 点 及 其 内 容 包 含 错 误 ， 请 联系 我 们 以 便 这 些 错误 得 到 及 
时 的 更 正 : 429240967@qq.com 


乌 教 程 的 任何 页 面 。 
进行 引用 ， 请 务必 在 引用 该 内 容 的 页 面 添加 指向 被 引用 页 


您 的 行为 
当 您 使 用 本 站 点 时 ， 说 明 您 已 经 同意 并 接受 本 页 面 的 所 有 信息 。 


联系 方式 


联系 邮箱 : 429240967@aqq.com (相关 事务 请 发 画 至 该 邮箱 ) 


